/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =====================================================
   BRAND / APP LOGO
   ===================================================== */

.app-brand[b-zvec6q69vb] {
    min-width: 500px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    flex-wrap: nowrap;
}

    .app-brand:hover[b-zvec6q69vb] {
        opacity: 0.85;
    }

.brand-ball[b-zvec6q69vb] {
    filter: drop-shadow(0 0 6px rgba(52, 152, 219, 0.3));
}

.app-brand svg[b-zvec6q69vb] {
    flex-shrink: 0;
    display: block;
}

.brand-text[b-zvec6q69vb] {
    display: inline-flex;
    align-items: baseline;
    flex-shrink: 0;
}

.brand-name[b-zvec6q69vb] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.brand-accent[b-zvec6q69vb] {
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.3px;
}

.brand-reg[b-zvec6q69vb] {
    color: #475569;
    font-size: 9px;
    font-weight: 400;
    margin-left: 1px;
}

/* =====================================================
   USER SECTION (Authenticated)
   ===================================================== */

.user-section[b-zvec6q69vb] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    line-height: 1;
}

.user-avatar[b-zvec6q69vb] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-name[b-zvec6q69vb] {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
}

.logout-link[b-zvec6q69vb] {
    text-decoration: none;
    display: flex;
}

/* =====================================================
   AUTH LINKS (Not Authenticated)
   ===================================================== */

.auth-links[b-zvec6q69vb] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.auth-link[b-zvec6q69vb] {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
}

.login-link-nav[b-zvec6q69vb] {
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
}

    .login-link-nav:hover[b-zvec6q69vb] {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.05);
    }

.register-link-nav[b-zvec6q69vb] {
    color: #ffffff;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    border: 1px solid transparent;
}

    .register-link-nav:hover[b-zvec6q69vb] {
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        filter: brightness(1.08);
    }

/* =====================================================
   SIGNALR STATUS INDICATOR
   ===================================================== */

.signalr-status[b-zvec6q69vb] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.signalr-dot[b-zvec6q69vb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dot-connected[b-zvec6q69vb] {
    background: #2ecc71;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.5);
    animation: pulse-green-b-zvec6q69vb 2s ease-in-out infinite;
}

.dot-disconnected[b-zvec6q69vb] {
    background: #e74c3c;
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.5);
    animation: pulse-red-b-zvec6q69vb 1.5s ease-in-out infinite;
}

@keyframes pulse-green-b-zvec6q69vb {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 6px rgba(46, 204, 113, 0.5);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 10px rgba(46, 204, 113, 0.8);
    }
}

@keyframes pulse-red-b-zvec6q69vb {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.signalr-label[b-zvec6q69vb] {
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.cache-count[b-zvec6q69vb] {
    color: #475569;
    font-size: 11px;
    font-weight: 500;
    cursor: default;
}

/* =====================================================
   IMPERSONATION BANNER
   ===================================================== */

.impersonation-banner[b-zvec6q69vb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: linear-gradient(90deg, #f39c12, #e67e22);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    z-index: 9999;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 12px rgba(243, 156, 18, 0.4);
}

.impersonation-banner-left[b-zvec6q69vb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .impersonation-banner-left strong[b-zvec6q69vb] {
        font-weight: 800;
    }

.impersonation-stop-btn[b-zvec6q69vb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

    .impersonation-stop-btn:hover[b-zvec6q69vb] {
        background: rgba(0, 0, 0, 0.35);
        border-color: rgba(255, 255, 255, 0.5);
    }

@media (max-width: 768px) {
    .impersonation-banner[b-zvec6q69vb] {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 10px 12px;
    }
}

/* =====================================================
   DRAWER — CASCADING NAV ITEMS
   ===================================================== */

.drawer-item-row[b-zvec6q69vb] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.drawer-item-child[b-zvec6q69vb] {
    padding-left: 24px;
}

.drawer-item-text[b-zvec6q69vb] {
    flex: 1 1 auto;
}

.drawer-item-caret[b-zvec6q69vb] {
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

    .drawer-item-caret.caret-open[b-zvec6q69vb] {
        transform: rotate(90deg);
    }

/* =====================================================
   MISC
   ===================================================== */

.empty-icon[b-zvec6q69vb] {
    font-size: 36px;
    margin-bottom: 16px;
}

.title-white[b-zvec6q69vb] {
    font-size: 20px;
    color: #ffffff;
}

.title-accent[b-zvec6q69vb] {
    font-size: 20px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== GAME-CLOCK ALERT PILL (2026-09-22) =====
   Set by GameTracker through ClockAlertState. Red = the half is open but
   the clock is stopped; amber = the clock ran out and the half hasn't been
   ended. Pulses so it is noticed from across the sideline. */

.clock-alert-pill[b-zvec6q69vb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}

.clock-alert-stopped[b-zvec6q69vb] {
    background: rgba(231, 76, 60, 0.18);
    border-color: rgba(231, 76, 60, 0.7);
    color: #ff7b6b;
    animation: clock-alert-pulse-red-b-zvec6q69vb 1.1s ease-in-out infinite;
}

.clock-alert-halfover[b-zvec6q69vb] {
    background: rgba(243, 156, 18, 0.18);
    border-color: rgba(243, 156, 18, 0.7);
    color: #ffb347;
    animation: clock-alert-pulse-amber-b-zvec6q69vb 1.1s ease-in-out infinite;
}

.clock-alert-dot[b-zvec6q69vb] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
}

.clock-alert-detail[b-zvec6q69vb] {
    font-weight: 600;
    opacity: 0.8;
    letter-spacing: 0;
}

.clock-alert-detail[b-zvec6q69vb]::before {
    content: "·";
    margin-right: 6px;
}

@keyframes clock-alert-pulse-red-b-zvec6q69vb {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.55); background: rgba(231, 76, 60, 0.18); }
    50% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); background: rgba(231, 76, 60, 0.42); }
}

@keyframes clock-alert-pulse-amber-b-zvec6q69vb {
    0%, 100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.55); background: rgba(243, 156, 18, 0.18); }
    50% { box-shadow: 0 0 0 8px rgba(243, 156, 18, 0); background: rgba(243, 156, 18, 0.42); }
}

@media (max-width: 760px) {
    .clock-alert-pill[b-zvec6q69vb] { margin: 0 4px; padding: 6px 10px; }
    .clock-alert-detail[b-zvec6q69vb] { display: none; }
}

@media (max-width: 520px) {
    .clock-alert-text[b-zvec6q69vb] { display: none; }
    .clock-alert-pill[b-zvec6q69vb] { padding: 6px 8px; }
}

/* =====================================================
   DATA-TARGET WARNING (local run against another DB)
   ===================================================== */
.data-target-banner[b-zvec6q69vb] {
    position: fixed;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 6px 14px;
    border-radius: 999px;
    background: #b91c1c;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* ===== SHELL ===== */

.pl-shell[b-bzfi6fqrg4] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    color: #e2e8f0;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ===== HEADER ===== */

.pl-header[b-bzfi6fqrg4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #111827;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.pl-brand[b-bzfi6fqrg4] {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .pl-brand:hover[b-bzfi6fqrg4] {
        opacity: 0.85;
    }

.pl-brand-text[b-bzfi6fqrg4] {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}

.brand-name[b-bzfi6fqrg4] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.brand-accent[b-bzfi6fqrg4] {
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.3px;
}

.brand-reg[b-bzfi6fqrg4] {
    color: #475569;
    font-size: 9px;
    font-weight: 400;
    margin-left: 1px;
}

/* ── Live badge ── */

.pl-live-badge[b-bzfi6fqrg4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.35);
    border-radius: 20px;
    color: #e74c3c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.pl-live-dot[b-bzfi6fqrg4] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e74c3c;
    animation: pl-pulse-b-bzfi6fqrg4 1.4s ease-in-out infinite;
}

@keyframes pl-pulse-b-bzfi6fqrg4 {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 5px rgba(231, 76, 60, 0);
    }
}

/* ===== MAIN ===== */

.pl-main[b-bzfi6fqrg4] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ===== EMBEDDED (phone app window, ?embed=1) =====
   No header/footer; the app's own bar sits above the WebView. The shell
   background matches the app (#0b1929) so the seam is invisible. */

.pl-embedded[b-bzfi6fqrg4] {
    background: #0b1929;
    min-height: 100dvh;
}

    .pl-embedded[b-bzfi6fqrg4]  .pv-page {
        padding: 8px;
        gap: 8px;
    }

/* ===== FOOTER ===== */

.pl-footer[b-bzfi6fqrg4] {
    padding: 10px 20px;
    text-align: center;
    color: #334155;
    font-size: 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

    .pl-footer strong[b-bzfi6fqrg4] {
        color: #475569;
    }

/* ===== AUDIO BANNER ===== */

.pv-audio-banner[b-bzfi6fqrg4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(52, 152, 219, 0.06);
    border-bottom: 1px solid rgba(52, 152, 219, 0.15);
    font-size: 13px;
    flex-shrink: 0;
}

    .pv-audio-banner.pv-audio-on[b-bzfi6fqrg4] {
        background: rgba(46, 204, 113, 0.06);
        border-bottom-color: rgba(46, 204, 113, 0.15);
    }

.pv-audio-icon[b-bzfi6fqrg4] {
    font-size: 16px;
    flex-shrink: 0;
}

.pv-audio-text[b-bzfi6fqrg4] {
    flex: 1;
    color: #64748b;
    font-size: 12px;
}

.pv-audio-btn[b-bzfi6fqrg4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(52, 152, 219, 0.35);
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

    .pv-audio-btn:hover[b-bzfi6fqrg4] {
        background: rgba(52, 152, 219, 0.2);
        border-color: rgba(52, 152, 219, 0.5);
    }

.pv-audio-mute-btn[b-bzfi6fqrg4] {
    border-color: rgba(100, 116, 139, 0.3);
    background: rgba(100, 116, 139, 0.08);
    color: #64748b;
}

    .pv-audio-mute-btn:hover[b-bzfi6fqrg4] {
        background: rgba(100, 116, 139, 0.15);
        border-color: rgba(100, 116, 139, 0.4);
        color: #94a3b8;
    }
/* /Components/Pages/about.razor.rz.scp.css */
/* ===== PAGE ===== */
.about-page[b-9l1ug1qcc3] {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: fadeIn-b-9l1ug1qcc3 0.4s ease-out;
}

@keyframes fadeIn-b-9l1ug1qcc3 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== HERO ===== */
.about-hero[b-9l1ug1qcc3] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(52,152,219,0.08), rgba(46,204,113,0.06));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}

.about-logo[b-9l1ug1qcc3] {
    flex-shrink: 0;
}

.about-brand[b-9l1ug1qcc3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-title[b-9l1ug1qcc3] {
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
}

.brand-white[b-9l1ug1qcc3] {
    color: #ffffff;
}

.brand-accent[b-9l1ug1qcc3] {
    color: #3498db;
}

.brand-reg[b-9l1ug1qcc3] {
    color: #475569;
    font-size: 14px;
    font-weight: 400;
    vertical-align: super;
}

.about-tagline[b-9l1ug1qcc3] {
    color: #64748b;
    font-size: 15px;
    margin: 0;
}

/* ===== CARD ===== */
.about-card[b-9l1ug1qcc3] {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
}

.about-card-header[b-9l1ug1qcc3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ===== BUILD INFO GRID ===== */
.about-info-grid[b-9l1ug1qcc3] {
    padding: 8px 0;
}

.about-info-row[b-9l1ug1qcc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background 0.15s;
}

    .about-info-row:last-child[b-9l1ug1qcc3] {
        border-bottom: none;
    }

    .about-info-row:hover[b-9l1ug1qcc3] {
        background: rgba(255,255,255,0.02);
    }

.about-info-label[b-9l1ug1qcc3] {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.about-info-value[b-9l1ug1qcc3] {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

.about-version[b-9l1ug1qcc3] {
    color: #2ecc71;
    font-size: 15px;
    font-weight: 800;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

.about-mono[b-9l1ug1qcc3] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    color: #94a3b8;
    font-size: 12px;
}

/* ===== TECH STACK GRID ===== */
.about-stack-grid[b-9l1ug1qcc3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 8px 0;
}

.about-stack-item[b-9l1ug1qcc3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background 0.15s;
}

    .about-stack-item:nth-last-child(-n+2)[b-9l1ug1qcc3] {
        border-bottom: none;
    }

    .about-stack-item:hover[b-9l1ug1qcc3] {
        background: rgba(255,255,255,0.02);
    }

.stack-icon[b-9l1ug1qcc3] {
    font-size: 22px;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.stack-info[b-9l1ug1qcc3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stack-name[b-9l1ug1qcc3] {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.stack-desc[b-9l1ug1qcc3] {
    color: #475569;
    font-size: 11px;
}

/* ===== FOOTER ===== */
.about-footer[b-9l1ug1qcc3] {
    text-align: center;
    padding: 8px;
}

    .about-footer p[b-9l1ug1qcc3] {
        color: #334155;
        font-size: 12px;
        margin: 4px 0;
    }

.about-footer-sub[b-9l1ug1qcc3] {
    color: #1e3a5f !important;
    font-size: 11px !important;
    max-width: 480px;
    margin: 0 auto !important;
    line-height: 1.6;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .about-hero[b-9l1ug1qcc3] {
        flex-direction: column;
        text-align: center;
    }

    .about-stack-grid[b-9l1ug1qcc3] {
        grid-template-columns: 1fr;
    }

    .about-stack-item:nth-last-child(-n+2)[b-9l1ug1qcc3] {
        border-bottom: 1px solid rgba(255,255,255,0.03);
    }

    .about-stack-item:last-child[b-9l1ug1qcc3] {
        border-bottom: none;
    }
}
/* /Components/Pages/AddStaffDialog.razor.rz.scp.css */
/* ── Email row ───────────────────────────────────────────── */

.as-email-row[b-dnzcqnscwr] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.as-email-input[b-dnzcqnscwr] {
    flex: 1;
}

[b-dnzcqnscwr] .as-lookup-btn {
    flex-shrink: 0;
    height: 44px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    min-width: 90px;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}

    [b-dnzcqnscwr] .as-lookup-btn:hover:not(:disabled) {
        border-color: #3498db !important;
        color: #3498db !important;
        background: rgba(52, 152, 219, 0.08) !important;
    }

/* ── Found card ──────────────────────────────────────────── */

.as-found-card[b-dnzcqnscwr] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid;
    margin-bottom: 18px;
    animation: as-slide-in-b-dnzcqnscwr 0.2s ease-out;
}

@keyframes as-slide-in-b-dnzcqnscwr {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.as-found-new[b-dnzcqnscwr] {
    background: rgba(46, 204, 113, 0.06);
    border-color: rgba(46, 204, 113, 0.2);
}

.as-found-existing[b-dnzcqnscwr] {
    background: rgba(243, 156, 18, 0.06);
    border-color: rgba(243, 156, 18, 0.2);
}

.as-found-avatar[b-dnzcqnscwr] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}

.as-found-info[b-dnzcqnscwr] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.as-found-name[b-dnzcqnscwr] {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.as-found-email[b-dnzcqnscwr] {
    color: #64748b;
    font-size: 12px;
}

.as-found-badge[b-dnzcqnscwr] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
    width: fit-content;
}

.as-badge-new[b-dnzcqnscwr] {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.25);
}

.as-badge-existing[b-dnzcqnscwr] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.25);
}

.as-found-icon-ok[b-dnzcqnscwr] {
    color: #2ecc71;
    flex-shrink: 0;
}

.as-found-icon-warn[b-dnzcqnscwr] {
    color: #f39c12;
    flex-shrink: 0;
}

/* ── Not found ───────────────────────────────────────────── */

.as-not-found[b-dnzcqnscwr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.18);
    color: #e74c3c;
    font-size: 13px;
    margin-bottom: 18px;
    animation: as-slide-in-b-dnzcqnscwr 0.2s ease-out;
}

/* ── Invite offer (2026-09-23) ───────────────────────────── */

.as-invite[b-dnzcqnscwr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.2);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
    animation: as-slide-in-b-dnzcqnscwr 0.2s ease-out;
}

    .as-invite svg[b-dnzcqnscwr] {
        color: #3498db;
        margin-top: 2px;
    }

    .as-invite strong[b-dnzcqnscwr] {
        color: #ffffff;
    }

/* ── Role grid ───────────────────────────────────────────── */

.as-role-grid[b-dnzcqnscwr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.as-role-card[b-dnzcqnscwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
    user-select: none;
}

    .as-role-card:hover[b-dnzcqnscwr] {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.15);
    }

.as-role-selected[b-dnzcqnscwr] {
    background: rgba(52, 152, 219, 0.12) !important;
    border-color: rgba(52, 152, 219, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(52, 152, 219, 0.2);
}

.as-role-icon[b-dnzcqnscwr] {
    font-size: 24px;
    line-height: 1;
}

.as-role-name[b-dnzcqnscwr] {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.as-role-desc[b-dnzcqnscwr] {
    color: #64748b;
    font-size: 10px;
    line-height: 1.4;
}

.as-role-selected .as-role-name[b-dnzcqnscwr] {
    color: #3498db;
}

/* ── No-change hint ──────────────────────────────────────── */

.as-no-change-hint[b-dnzcqnscwr] {
    padding: 10px 14px;
    background: rgba(243, 156, 18, 0.06);
    border: 1px solid rgba(243, 156, 18, 0.15);
    border-radius: 8px;
    color: #f39c12 !important;
    font-size: 12px !important;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 480px) {
    .as-role-grid[b-dnzcqnscwr] {
        grid-template-columns: 1fr;
    }

    .as-email-row[b-dnzcqnscwr] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/AdminDb.razor.rz.scp.css */
/* ===== PAGE LAYOUT ===== */
.adb-page[b-bgzo1a9d8t] {
    display: flex;
    height: calc(100vh - 60px); /* explicit height — 100% collapses when parents are auto */
    overflow: hidden;
}

/* ===== LEFT PANEL ===== */
.adb-left[b-bgzo1a9d8t] {
    width: 240px;
    min-width: 200px;
    max-width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    min-height: 0; /* allow flex child to shrink below content size */
    overflow: hidden; /* clip the panel itself, not the list inside */
}

.adb-left-header[b-bgzo1a9d8t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0; /* header never shrinks */
}

.adb-left-title[b-bgzo1a9d8t] {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.adb-refresh-all-btn[b-bgzo1a9d8t] {
    background: transparent;
    border: none;
    color: #475569;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

    .adb-refresh-all-btn:hover[b-bgzo1a9d8t] {
        color: #3498db;
    }

.adb-left-loading[b-bgzo1a9d8t] {
    display: flex;
    justify-content: center;
    padding: 24px;
    flex-shrink: 0;
}

/* ── The scrollable list — flex:1 fills remaining height, overflow scrolls ── */
.adb-table-list[b-bgzo1a9d8t] {
    flex: 1;
    min-height: 0; /* critical — without this flex:1 won't constrain height */
    overflow-y: auto;
    padding: 8px 0;
}

.adb-table-item[b-bgzo1a9d8t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-left: 2px solid transparent;
}

    .adb-table-item:hover[b-bgzo1a9d8t] {
        background: rgba(255, 255, 255, 0.04);
    }

.adb-table-open[b-bgzo1a9d8t] {
    background: rgba(52, 152, 219, 0.08) !important;
    border-left-color: #3498db !important;
}

.adb-table-icon[b-bgzo1a9d8t] {
    color: #475569;
    flex-shrink: 0;
}

.adb-table-name[b-bgzo1a9d8t] {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adb-table-open .adb-table-name[b-bgzo1a9d8t] {
    color: #3498db;
}

.adb-table-count[b-bgzo1a9d8t] {
    color: #334155;
    font-size: 10px;
    font-family: 'Cascadia Code', monospace;
}

/* ===== RIGHT PANEL ===== */
.adb-right[b-bgzo1a9d8t] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.adb-empty[b-bgzo1a9d8t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: #334155;
    font-size: 14px;
}

/* ===== TAB STRIP ===== */
[b-bgzo1a9d8t] .adb-tabstrip {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    [b-bgzo1a9d8t] .adb-tabstrip .k-tabstrip-items-wrapper {
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        flex-shrink: 0;
    }

    [b-bgzo1a9d8t] .adb-tabstrip .k-tabstrip-content {
        flex: 1;
        min-height: 0;
        padding: 0;
        background: transparent;
        border: none;
    }

    [b-bgzo1a9d8t] .adb-tabstrip .k-item {
        color: #64748b;
        font-size: 12px;
        font-weight: 600;
    }

        [b-bgzo1a9d8t] .adb-tabstrip .k-item.k-active {
            color: #ffffff;
        }

/* ===== TAB TITLE ===== */
.adb-tab-title[b-bgzo1a9d8t] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.adb-tab-close[b-bgzo1a9d8t] {
    background: transparent;
    border: none;
    color: #475569;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    border-radius: 3px;
    transition: all 0.15s;
}

    .adb-tab-close:hover[b-bgzo1a9d8t] {
        background: rgba(231, 76, 60, 0.15);
        color: #e74c3c;
    }

/* ===== TAB CONTENT ===== */
.adb-tab-content[b-bgzo1a9d8t] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ===== TAB TOOLBAR ===== */
.adb-tab-toolbar[b-bgzo1a9d8t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.02);
}

.adb-tab-info[b-bgzo1a9d8t] {
    color: #475569;
    font-size: 12px;
}

.adb-tab-actions[b-bgzo1a9d8t] {
    display: flex;
    gap: 6px;
}

.adb-btn[b-bgzo1a9d8t] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .adb-btn:hover:not(:disabled)[b-bgzo1a9d8t] {
        background: rgba(52, 152, 219, 0.1);
        border-color: rgba(52, 152, 219, 0.3);
        color: #3498db;
    }

    .adb-btn:disabled[b-bgzo1a9d8t] {
        opacity: 0.35;
        cursor: not-allowed;
    }

/* ===== LOADING / ERROR ===== */
.adb-tab-loading[b-bgzo1a9d8t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 16px;
    color: #64748b;
    font-size: 14px;
}

.adb-error[b-bgzo1a9d8t] {
    margin: 16px;
    padding: 12px 16px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 10px;
    color: #e74c3c;
    font-size: 13px;
    flex-shrink: 0;
}

/* ===== GRID ===== */
[b-bgzo1a9d8t] .adb-grid {
    flex: 1;
    min-height: 0;
    background: transparent !important;
    border: none !important;
}

    [b-bgzo1a9d8t] .adb-grid .k-grid-header {
        background: rgba(255, 255, 255, 0.03) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

        [b-bgzo1a9d8t] .adb-grid .k-grid-header th {
            color: #64748b !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            border-color: rgba(255, 255, 255, 0.04) !important;
            background: transparent !important;
        }

    [b-bgzo1a9d8t] .adb-grid .k-grid-content {
        background: transparent !important;
        overflow-y: auto !important; /* ensure grid body scrolls independently */
    }

    [b-bgzo1a9d8t] .adb-grid .k-grid-table td {
        color: #94a3b8 !important;
        border-color: rgba(255, 255, 255, 0.04) !important;
        font-size: 12px !important;
        font-family: 'Cascadia Code', 'Fira Code', monospace !important;
        background: transparent !important;
    }

    [b-bgzo1a9d8t] .adb-grid .k-grid-table tr:hover td {
        background: rgba(255, 255, 255, 0.02) !important;
    }

    [b-bgzo1a9d8t] .adb-grid .k-grid-table tr.k-selected td {
        background: rgba(52, 152, 219, 0.08) !important;
    }

    [b-bgzo1a9d8t] .adb-grid .k-grid-toolbar {
        background: rgba(255, 255, 255, 0.02) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        padding: 6px 10px !important;
    }

[b-bgzo1a9d8t] .adb-add-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

/* ===== SCROLLBARS ===== */
.adb-table-list[b-bgzo1a9d8t]::-webkit-scrollbar {
    width: 4px;
}

.adb-table-list[b-bgzo1a9d8t]::-webkit-scrollbar-track {
    background: transparent;
}

.adb-table-list[b-bgzo1a9d8t]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

    .adb-table-list[b-bgzo1a9d8t]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.15);
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .adb-page[b-bgzo1a9d8t] {
        height: auto;
        min-height: 100vh;
        flex-direction: column;
    }

    .adb-left[b-bgzo1a9d8t] {
        width: 100%;
        max-width: 100%;
        min-width: unset;
        height: 200px; /* fixed height on mobile so list scrolls in a constrained band */
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .adb-right[b-bgzo1a9d8t] {
        flex: 1;
        min-height: 400px;
    }
}
/* /Components/Pages/AdminEntries.razor.rz.scp.css */
/* =====================================================
   ADMIN ▸ MANAGE ▸ ALL ENTRIES — list (2026-09-21)

   Self-contained. CSS isolation scopes a .razor.css to its own component, so the
   page frame, pills and role tints below are a copy of the same block in
   AdminEntryDetail.razor.css rather than a shared import — restyle one and you
   have to restyle the other. That duplication is the cost of isolation; the
   alternative is moving the block to the global stylesheet, which is the right
   move if a third admin page wants it.

   NOTE: a .razor.css is plain CSS — the Razor compiler never parses it — so
   at-rules take a SINGLE @. A doubled @@media emits a literal @@media, which
   browsers drop along with the whole block.
   ===================================================== */

.entries-page[b-3iqunjmvk1] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* ── Page frame ──────────────────────────────────────────────────── */

.page-header[b-3iqunjmvk1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title[b-3iqunjmvk1] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-3iqunjmvk1] {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

.header-right[b-3iqunjmvk1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-3iqunjmvk1].dialog-input.k-input,
[b-3iqunjmvk1].dialog-input.k-picker {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    height: 44px !important;
}

    [b-3iqunjmvk1].dialog-input.k-input:focus,
    [b-3iqunjmvk1].dialog-input.k-input.k-focus {
        border-color: #3498db !important;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
    }

.loading-state[b-3iqunjmvk1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-text[b-3iqunjmvk1] {
    color: #64748b;
    font-size: 14px;
}

.empty-state[b-3iqunjmvk1] {
    text-align: center;
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.empty-icon[b-3iqunjmvk1] {
    margin-bottom: 16px;
    font-size: 48px;
    line-height: 1;
}

.empty-title[b-3iqunjmvk1] {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.empty-message[b-3iqunjmvk1] {
    color: #64748b;
    font-size: 15px;
    margin: 0 0 20px 0;
}

/* ── Pills ───────────────────────────────────────────────────────── */
/* One shape, several tints. Every admin page that says "active / locked out /
   unconfirmed" uses these rather than inventing per-state classes. */

.pill[b-3iqunjmvk1] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.pill-ok[b-3iqunjmvk1] {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.25);
}

.pill-warn[b-3iqunjmvk1] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.25);
}

.pill-danger[b-3iqunjmvk1] {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.25);
}

.pill-info[b-3iqunjmvk1] {
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.25);
}

.pill-muted[b-3iqunjmvk1] {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* ASP.NET role tints. A role with no rule of its own falls back to the base
   .role-pill, so an unstyled role still looks finished. */
.role-pill[b-3iqunjmvk1] {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
    margin-right: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.role-admin[b-3iqunjmvk1] {
    background: rgba(155, 89, 182, 0.14);
    color: #b07cc6;
    border-color: rgba(155, 89, 182, 0.3);
}

.role-coach[b-3iqunjmvk1] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border-color: rgba(243, 156, 18, 0.25);
}

.role-player[b-3iqunjmvk1] {
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    border-color: rgba(52, 152, 219, 0.25);
}

.role-viewer[b-3iqunjmvk1] {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.2);
}

/* ── Count + cap note ────────────────────────────────────────────── */

.entries-count[b-3iqunjmvk1] {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: #94a3b8;
}

/* The list is capped server-side, so say so instead of letting someone conclude
   an account doesn't exist. */
.entries-cap-note[b-3iqunjmvk1] {
    margin: 12px 0 0;
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
}

/* ── List ────────────────────────────────────────────────────────── */

.entries-list[b-3iqunjmvk1] {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}

.entries-list-head[b-3iqunjmvk1],
.entries-list-row[b-3iqunjmvk1] {
    display: grid;
    grid-template-columns: minmax(190px, 1.6fr) minmax(170px, 1.5fr) 1.1fr 80px 1fr 110px 110px 60px;   /* last: delete + chevron (2026-09-23) */
    align-items: center;
    gap: 12px;
    padding: 0 16px;
}

.entries-list-head[b-3iqunjmvk1] {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.entries-list-hcell[b-3iqunjmvk1] {
    padding: 10px 0;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

    .entries-list-hcell:hover[b-3iqunjmvk1] {
        color: #e2e8f0;
    }

.entries-list-hcell.entries-list-num[b-3iqunjmvk1] {
    text-align: right;
}

span.entries-list-hcell[b-3iqunjmvk1] {
    cursor: default;
}

.entries-list-row[b-3iqunjmvk1] {
    min-height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.15s ease;
}

    .entries-list-row:last-child[b-3iqunjmvk1] {
        border-bottom: none;
    }

    .entries-list-row:hover[b-3iqunjmvk1] {
        background: rgba(255, 255, 255, 0.04);
    }

.entries-list-cell[b-3iqunjmvk1] {
    color: #cbd5e1;
    font-size: 13px;
    min-width: 0;
}

.entries-col-name[b-3iqunjmvk1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.entries-avatar[b-3iqunjmvk1] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.18);
    border: 1px solid rgba(52, 152, 219, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cfe6f7;
    font-size: 11px;
    font-weight: 800;
}

.entries-name[b-3iqunjmvk1] {
    min-width: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entries-id[b-3iqunjmvk1] {
    margin-left: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.entries-col-email[b-3iqunjmvk1],
.entries-col-license[b-3iqunjmvk1] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entries-list-num[b-3iqunjmvk1] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.entries-muted[b-3iqunjmvk1] {
    color: #94a3b8;
}

.entries-list-chevron[b-3iqunjmvk1] {
    color: #475569;
    display: flex;
    justify-content: flex-end;
}

.entries-list-row:hover .entries-list-chevron[b-3iqunjmvk1] {
    color: #3498db;
}

/* Delete button in the chevron cell (2026-09-23): quiet until the row is hovered. */
.entries-delete[b-3iqunjmvk1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 6px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: #475569;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

    .entries-list-row:hover .entries-delete[b-3iqunjmvk1] {
        opacity: 1;
    }

    .entries-delete:hover[b-3iqunjmvk1] {
        color: #ff8a80;
        background: rgba(231, 76, 60, 0.12);
        border-color: rgba(231, 76, 60, 0.3);
    }

.entries-notice[b-3iqunjmvk1] {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.2);
    color: #cbd5e1;
    font-size: 12.5px;
    line-height: 1.5;
}

.dialog-text[b-3iqunjmvk1] {
    color: #e2e8f0;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 10px;
}

    .dialog-text strong[b-3iqunjmvk1] {
        color: #ffffff;
    }

/* ── Responsive ──────────────────────────────────────────────────── */
/* Below 1100px the header row goes and each row becomes a wrapped flex line —
   the same treatment the teams list uses. */

@media (max-width: 1100px) {
    .entries-list-head[b-3iqunjmvk1] {
        display: none;
    }

    .entries-list-row[b-3iqunjmvk1] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        padding: 12px 14px;
    }

        .entries-list-row .entries-col-name[b-3iqunjmvk1] {
            flex: 1 1 100%;
        }

        .entries-list-row .entries-list-chevron[b-3iqunjmvk1] {
            display: none;
        }

        .entries-list-row .entries-list-cell:not(.entries-col-name):not(.entries-list-chevron)[b-3iqunjmvk1] {
            font-size: 12px;
            color: #94a3b8;
        }

        .entries-list-row .entries-list-num[b-3iqunjmvk1]::before {
            content: attr(data-label) " ";
            color: #64748b;
        }
}

@media (max-width: 768px) {
    .entries-page[b-3iqunjmvk1] {
        padding: 20px 16px;
    }

    .page-title[b-3iqunjmvk1] {
        font-size: 22px;
    }

    .header-right[b-3iqunjmvk1] {
        width: 100%;
    }
}
/* /Components/Pages/AdminEntryDetail.razor.rz.scp.css */
/* =====================================================
   ADMIN ▸ MANAGE ▸ ALL ENTRIES — one account (2026-09-21)

   Self-contained, and the page frame / pills / role tints below are a deliberate
   copy of the same block in AdminEntries.razor.css — CSS isolation scopes a
   .razor.css to its own component, so it cannot be shared from there. Restyle one
   and restyle the other; if a third admin page wants this block, move it to the
   global stylesheet instead of copying again.

   NOTE: a .razor.css is plain CSS — the Razor compiler never parses it — so
   at-rules take a SINGLE @. A doubled @@media emits a literal @@media, which
   browsers drop along with the whole block.
   ===================================================== */

.entry-detail-page[b-7wwkk2v2ty] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
}
/* ── Page frame ──────────────────────────────────────────────────── */

.page-header[b-7wwkk2v2ty] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title[b-7wwkk2v2ty] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-7wwkk2v2ty] {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

.header-right[b-7wwkk2v2ty] {
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-7wwkk2v2ty].dialog-input.k-input,
[b-7wwkk2v2ty].dialog-input.k-picker {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    height: 44px !important;
}

    [b-7wwkk2v2ty].dialog-input.k-input:focus,
    [b-7wwkk2v2ty].dialog-input.k-input.k-focus {
        border-color: #3498db !important;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
    }

.loading-state[b-7wwkk2v2ty] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-text[b-7wwkk2v2ty] {
    color: #64748b;
    font-size: 14px;
}

.empty-state[b-7wwkk2v2ty] {
    text-align: center;
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.empty-icon[b-7wwkk2v2ty] {
    margin-bottom: 16px;
    font-size: 48px;
    line-height: 1;
}

.empty-title[b-7wwkk2v2ty] {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.empty-message[b-7wwkk2v2ty] {
    color: #64748b;
    font-size: 15px;
    margin: 0 0 20px 0;
}

/* ── Pills ───────────────────────────────────────────────────────── */
/* One shape, several tints. Every admin page that says "active / locked out /
   unconfirmed" uses these rather than inventing per-state classes. */

.pill[b-7wwkk2v2ty] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.pill-ok[b-7wwkk2v2ty] {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.25);
}

.pill-warn[b-7wwkk2v2ty] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.25);
}

.pill-danger[b-7wwkk2v2ty] {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.25);
}

.pill-info[b-7wwkk2v2ty] {
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.25);
}

.pill-muted[b-7wwkk2v2ty] {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* ASP.NET role tints. A role with no rule of its own falls back to the base
   .role-pill, so an unstyled role still looks finished. */
.role-pill[b-7wwkk2v2ty] {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
    margin-right: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.role-admin[b-7wwkk2v2ty] {
    background: rgba(155, 89, 182, 0.14);
    color: #b07cc6;
    border-color: rgba(155, 89, 182, 0.3);
}

.role-coach[b-7wwkk2v2ty] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border-color: rgba(243, 156, 18, 0.25);
}

.role-player[b-7wwkk2v2ty] {
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    border-color: rgba(52, 152, 219, 0.25);
}

.role-viewer[b-7wwkk2v2ty] {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.2);
}

/* ── Header ──────────────────────────────────────────────────────── */

.detail-header[b-7wwkk2v2ty] {
    margin-bottom: 22px;
}

.back-link[b-7wwkk2v2ty] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 14px;
    padding: 0;
    border: none;
    background: none;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

    .back-link:hover[b-7wwkk2v2ty] {
        color: #3498db;
    }

.detail-title-row[b-7wwkk2v2ty] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.detail-avatar[b-7wwkk2v2ty] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.18);
    border: 2px solid rgba(52, 152, 219, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cfe6f7;
    font-size: 17px;
    font-weight: 800;
}

.detail-title-text[b-7wwkk2v2ty] {
    min-width: 0;
}

.detail-name[b-7wwkk2v2ty] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px;
}

.detail-id[b-7wwkk2v2ty] {
    margin-left: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.detail-badges[b-7wwkk2v2ty] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Action feedback ─────────────────────────────────────────────── */
/* A banner rather than a toast: these actions are consequential, and the result
   should stay on screen until it's dismissed. */

.action-banner[b-7wwkk2v2ty] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.action-banner-ok[b-7wwkk2v2ty] {
    background: rgba(46, 204, 113, 0.07);
    border: 1px solid rgba(46, 204, 113, 0.22);
    color: #cbd5e1;
}

.action-banner-error[b-7wwkk2v2ty] {
    background: rgba(231, 76, 60, 0.07);
    border: 1px solid rgba(231, 76, 60, 0.25);
    color: #f3c8c3;
}

.action-banner-close[b-7wwkk2v2ty] {
    margin-left: auto;
    padding: 0 2px;
    border: none;
    background: none;
    color: #64748b;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

    .action-banner-close:hover[b-7wwkk2v2ty] {
        color: #e2e8f0;
    }

.detail-note[b-7wwkk2v2ty] {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(52, 152, 219, 0.06);
    border: 1px solid rgba(52, 152, 219, 0.2);
    color: #cbd5e1;
    font-size: 12.5px;
    line-height: 1.6;
}

    .detail-note code[b-7wwkk2v2ty] {
        color: #cfe6f7;
        font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
        font-size: 11.5px;
    }

/* ── Cards ───────────────────────────────────────────────────────── */

/* ── Tabs (2026-09-29) ── */
.detail-tabs[b-7wwkk2v2ty] {
    display: flex;
    gap: 4px;
    margin: 4px 0 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.detail-tab[b-7wwkk2v2ty] {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .detail-tab:hover[b-7wwkk2v2ty] {
        color: #e2e8f0;
    }

.detail-tab-active[b-7wwkk2v2ty] {
    color: #f8fafc;
    border-bottom-color: #3498db;
}

.detail-tab-count[b-7wwkk2v2ty] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(52, 152, 219, 0.2);
    color: #7cc4f5;
}

/* ── Messages tab tables ── */
.msg-table[b-7wwkk2v2ty] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .msg-table th[b-7wwkk2v2ty] {
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #94a3b8;
        padding: 6px 8px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    }

    .msg-table td[b-7wwkk2v2ty] {
        padding: 8px;
        vertical-align: top;
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    }

.msg-when[b-7wwkk2v2ty] {
    white-space: nowrap;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}

.msg-what[b-7wwkk2v2ty] {
    font-weight: 600;
    color: #f1f5f9;
}

.msg-sub[b-7wwkk2v2ty] {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

.msg-error[b-7wwkk2v2ty] {
    color: #f87171;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-to[b-7wwkk2v2ty] {
    word-break: break-all;
}

.msg-row-failed td[b-7wwkk2v2ty] {
    background: rgba(248, 113, 113, 0.06);
}

.detail-grid[b-7wwkk2v2ty] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.detail-card[b-7wwkk2v2ty] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
}

.detail-card-wide[b-7wwkk2v2ty] {
    grid-column: 1 / -1;
}

/* The destructive group gets a warmer border so it doesn't read as just another
   panel of facts. */
.detail-card-danger[b-7wwkk2v2ty] {
    border-color: rgba(231, 76, 60, 0.2);
    background: rgba(231, 76, 60, 0.03);
}

.detail-card-title[b-7wwkk2v2ty] {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 14px;
}

.detail-hint[b-7wwkk2v2ty] {
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
    margin: 0 0 12px;
}

    .detail-hint code[b-7wwkk2v2ty] {
        font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
        font-size: 11px;
    }

.detail-empty[b-7wwkk2v2ty] {
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

/* ── Fact list ───────────────────────────────────────────────────── */

.detail-facts[b-7wwkk2v2ty] {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 14px;
    margin: 0;
}

    .detail-facts dt[b-7wwkk2v2ty] {
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        align-self: center;
    }

    .detail-facts dd[b-7wwkk2v2ty] {
        margin: 0;
        color: #e2e8f0;
        font-size: 13.5px;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        min-width: 0;
        word-break: break-word;
    }

/* ── Roles ───────────────────────────────────────────────────────── */

.role-checks[b-7wwkk2v2ty] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 16px;
}

.role-check[b-7wwkk2v2ty] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #e2e8f0;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.detail-actions[b-7wwkk2v2ty] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Teams ───────────────────────────────────────────────────────── */

.team-rows[b-7wwkk2v2ty],
.license-rows[b-7wwkk2v2ty] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.team-row[b-7wwkk2v2ty],
.license-row[b-7wwkk2v2ty] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.team-player-of[b-7wwkk2v2ty] {
    color: #cbd5e1;
    font-size: 13px;
}

.detail-subtitle[b-7wwkk2v2ty] {
    margin: 14px 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.team-swatch[b-7wwkk2v2ty] {
    flex-shrink: 0;
    width: 8px;
    height: 26px;
    border-radius: 4px;
}

.team-name[b-7wwkk2v2ty] {
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

    .team-name:hover[b-7wwkk2v2ty] {
        color: #3498db;
        text-decoration: underline;
    }

.team-remove[b-7wwkk2v2ty] {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(231, 76, 60, 0.3);
    background: rgba(231, 76, 60, 0.08);
    color: #e57368;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

    .team-remove:hover[b-7wwkk2v2ty] {
        background: rgba(231, 76, 60, 0.18);
        color: #ffffff;
    }

.team-add-row[b-7wwkk2v2ty] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Licences ────────────────────────────────────────────────────── */

.license-plan[b-7wwkk2v2ty] {
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
}

.license-dates[b-7wwkk2v2ty] {
    color: #94a3b8;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.license-notes[b-7wwkk2v2ty] {
    margin-left: auto;
    max-width: 40%;
    color: #64748b;
    font-size: 11.5px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Danger actions ──────────────────────────────────────────────── */

.danger-actions[b-7wwkk2v2ty] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Dialog bits ─────────────────────────────────────────────────── */
/* BaseWindow supplies the chrome; these are the bodies this page puts in it. */

.dialog-text[b-7wwkk2v2ty] {
    color: #e2e8f0;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.field-group[b-7wwkk2v2ty] {
    margin-bottom: 16px;
}

.field-label[b-7wwkk2v2ty] {
    display: block;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.field-hint[b-7wwkk2v2ty] {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.45;
}

.bd-checkbox-label[b-7wwkk2v2ty] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .detail-grid[b-7wwkk2v2ty] {
        grid-template-columns: minmax(0, 1fr);
    }

    .detail-facts[b-7wwkk2v2ty] {
        grid-template-columns: 110px 1fr;
    }
}

@media (max-width: 768px) {
    .entry-detail-page[b-7wwkk2v2ty] {
        padding: 20px 16px;
    }

    .detail-name[b-7wwkk2v2ty] {
        font-size: 20px;
    }

    .license-notes[b-7wwkk2v2ty] {
        margin-left: 0;
        max-width: 100%;
    }
}
/* /Components/Pages/AdminGameEvents.razor.rz.scp.css */
/* Admin ▸ Manage ▸ Game Events (2026-10-12). Page chrome follows Leagues.razor.css;
   the game picker follows the video review tool's header select. */

.ev-page[b-u21q1zyn68] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 16px;
}

.page-header[b-u21q1zyn68] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.header-left[b-u21q1zyn68] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-u21q1zyn68] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-u21q1zyn68] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

.header-right[b-u21q1zyn68] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ev-game-label[b-u21q1zyn68] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

.ev-select[b-u21q1zyn68] {
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    min-width: 320px;
    max-width: 520px;
    color-scheme: dark;
}

.ev-select-sm[b-u21q1zyn68] {
    min-width: 0;
    padding: 5px 8px;
    font-size: 13px;
}

/* ----- Game card ----- */
.ev-game-card[b-u21q1zyn68] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ev-game-teams[b-u21q1zyn68] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
}

.ev-swatch[b-u21q1zyn68] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-block;
}

.ev-score[b-u21q1zyn68] {
    padding: 2px 10px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.12);
    font-variant-numeric: tabular-nums;
}

.ev-game-meta[b-u21q1zyn68] {
    color: #94a3b8;
    font-size: 13px;
}

.ev-final[b-u21q1zyn68] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.3);
    color: #f5d76e;
    font-size: 13px;
}

/* ----- Toolbar ----- */
.ev-toolbar[b-u21q1zyn68] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ev-toolbar-left[b-u21q1zyn68],
.ev-toolbar-right[b-u21q1zyn68] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ev-selected[b-u21q1zyn68] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
    padding-right: 4px;
}

.ev-btn[b-u21q1zyn68] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(52, 152, 219, 0.5);
    background: rgba(52, 152, 219, 0.15);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .ev-btn:hover:not(:disabled)[b-u21q1zyn68] {
        background: rgba(52, 152, 219, 0.3);
    }

    .ev-btn:disabled[b-u21q1zyn68] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.ev-btn-danger[b-u21q1zyn68] {
    border-color: rgba(231, 76, 60, 0.5);
    background: rgba(231, 76, 60, 0.15);
}

    .ev-btn-danger:hover:not(:disabled)[b-u21q1zyn68] {
        background: rgba(231, 76, 60, 0.3);
    }

.ev-btn-amber[b-u21q1zyn68] {
    border-color: rgba(241, 196, 15, 0.5);
    background: rgba(241, 196, 15, 0.15);
    color: #f5d76e;
}

.ev-btn-quiet[b-u21q1zyn68] {
    border-color: rgba(148, 163, 184, 0.3);
    background: rgba(148, 163, 184, 0.08);
}

.ev-check[b-u21q1zyn68] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cbd5e1;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

    .ev-check input[b-u21q1zyn68] {
        accent-color: #3498db;
    }

/* ----- Messages ----- */
.page-error[b-u21q1zyn68] {
    padding: 12px 16px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 10px;
    color: #e74c3c;
    font-size: 13px;
}

.page-notice[b-u21q1zyn68] {
    padding: 10px 16px;
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.25);
    border-radius: 10px;
    color: #6fdc9a;
    font-size: 13px;
}

/* ----- States ----- */
.loading-state[b-u21q1zyn68],
.empty-state[b-u21q1zyn68] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    color: #64748b;
}

.loading-text[b-u21q1zyn68] {
    font-size: 14px;
    margin: 0;
}

.empty-icon[b-u21q1zyn68] {
    font-size: 40px;
}

.empty-title[b-u21q1zyn68] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.empty-message[b-u21q1zyn68] {
    max-width: 460px;
    text-align: center;
    font-size: 13px;
    margin: 0;
}

/* ----- Grid cells ----- */
.ev-mono[b-u21q1zyn68] {
    font-variant-numeric: tabular-nums;
}

.ev-dim[b-u21q1zyn68] {
    color: #94a3b8;
}

.ev-type[b-u21q1zyn68] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--pill, #64748b);
    background: color-mix(in srgb, var(--pill, #64748b) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--pill, #64748b) 40%, transparent);
    white-space: nowrap;
}

.ev-secondary[b-u21q1zyn68] {
    margin-left: 4px;
    color: #94a3b8;
    font-size: 12px;
}

.ev-notes[b-u21q1zyn68] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ----- Dialog bodies ----- */
.delete-confirm[b-u21q1zyn68] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 8px 8px 4px;
}

.delete-icon[b-u21q1zyn68] {
    font-size: 32px;
}

.delete-title[b-u21q1zyn68] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.delete-message[b-u21q1zyn68] {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
}

.ev-confirm-list[b-u21q1zyn68] {
    text-align: left;
    margin: 4px 0 0;
    padding-left: 18px;
    color: #cbd5e1;
    font-size: 13px;
    max-height: 220px;
    overflow: auto;
    align-self: stretch;
}

.ev-bulk-hint[b-u21q1zyn68] {
    color: #94a3b8;
    font-size: 12px;
    margin: 0 0 10px;
}

.ev-bulk-row[b-u21q1zyn68] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

    .ev-bulk-row .ev-check[b-u21q1zyn68] {
        min-width: 180px;
    }

.ev-bulk-notes[b-u21q1zyn68]  .k-textarea {
    margin-top: 6px;
}

@media (max-width: 768px) {
    .ev-page[b-u21q1zyn68] {
        padding: 16px;
    }

    .ev-select[b-u21q1zyn68] {
        min-width: 0;
        width: 100%;
        max-width: none;
    }

    .header-right[b-u21q1zyn68] {
        width: 100%;
    }
}
/* /Components/Pages/AdminReports.razor.rz.scp.css */
/* ===== PAGE ===== */
.ar-page[b-oyv91mp0as] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    animation: ar-fadeIn-b-oyv91mp0as 0.3s ease-out;
}

@keyframes ar-fadeIn-b-oyv91mp0as {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== HEADER ===== */
.ar-header[b-oyv91mp0as] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.ar-header-left[b-oyv91mp0as] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ar-title[b-oyv91mp0as] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

.ar-subtitle[b-oyv91mp0as] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

/* ===== ADMIN BADGE ===== */
.ar-admin-badge[b-oyv91mp0as] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: 20px;
    color: #e74c3c;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== LOADING ===== */
.ar-loading[b-oyv91mp0as] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 16px;
    color: #64748b;
    font-size: 14px;
}

/* ===== ERROR ===== */
.ar-error[b-oyv91mp0as] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 24px;
    padding: 16px 20px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 12px;
    color: #e74c3c;
}

    .ar-error svg[b-oyv91mp0as] {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .ar-error strong[b-oyv91mp0as] {
        display: block;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .ar-error p[b-oyv91mp0as] {
        margin: 0;
        font-size: 12px;
        color: #94a3b8;
        font-family: 'Cascadia Code', 'Fira Code', monospace;
    }

/* ===== DESIGNER HOST — key fix per Telerik support ===== */
/* The designer resizes to fill its container.              */
/* This container sits inside the drawer content area,     */
/* so we subtract the top app bar (48px) + page header     */
/* (72px) + bottom app bar (40px) = 160px total.           */
/* Adjust the value if your bars are different heights.    */
.designer-host[b-oyv91mp0as] {
    position: relative;
    width: 100%;
    height: calc(100vh - 160px);
    overflow: hidden;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .ar-header[b-oyv91mp0as] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .designer-host[b-oyv91mp0as] {
        height: calc(100vh - 140px);
    }
}
/* /Components/Pages/AdminTeams.razor.rz.scp.css */
/* =====================================================
   ADMIN → ALL TEAMS (2026-09-20)

   A full stylesheet, not a handful of additions. The first cut of this page
   assumed Teams.razor's list-view classes lived in a global sheet and could
   just be reused -- they don't, they're in Teams.razor.css and CSS isolation
   scopes them to that component, so this page rendered unstyled.

   What's here is the subset of Teams.razor.css that this page actually
   renders (page frame, header, loading, empty state, list view, pills, role
   badges, the Telerik input override for the filter box) plus this page's own
   classes. Deliberately NOT copied: the card grid, the team cards, the create
   dialog, the join-team section, the pending-requests strip and the card/list
   switch -- none of which this page has.

   The duplication is the cost of CSS isolation and is accepted knowingly. If
   a third team list ever appears, the list-view block below and its twin in
   Teams.razor.css should move to a shared stylesheet together.

   NOTE ON `@media`: a .razor.css is plain CSS -- the Razor compiler never
   parses it -- so at-rules take a SINGLE `@`, exactly as Teams.razor.css does.
   A doubled `@@media` emits a literal `@@media`, which browsers drop on the
   floor. (Several files in this repo have that typo; see the roadmap note.)
   ===================================================== */

/* ===== PAGE ===== */

.teams-page[b-cpfm08cx0v] {
    /* Wider than Teams.razor's 1200px: this list carries an extra ID column. */
    max-width: 1320px;
    margin: 0 auto;
    padding: 32px 24px;
    animation: fadeIn-b-cpfm08cx0v 0.4s ease-out;
}

@keyframes fadeIn-b-cpfm08cx0v {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== HEADER ===== */

.page-header[b-cpfm08cx0v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title[b-cpfm08cx0v] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-cpfm08cx0v] {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

.header-right[b-cpfm08cx0v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The filter box. Same Telerik override Teams.razor.css applies to its
   dialog inputs, so the two look alike -- including the `::deep.x` spelling
   with no space, which is what works in this repo. */
[b-cpfm08cx0v].dialog-input.k-input,
[b-cpfm08cx0v].dialog-input.k-picker {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    height: 44px !important;
}

    [b-cpfm08cx0v].dialog-input.k-input:focus,
    [b-cpfm08cx0v].dialog-input.k-input.k-focus {
        border-color: #3498db !important;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
    }

/* ===== LOADING ===== */

.loading-state[b-cpfm08cx0v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-text[b-cpfm08cx0v] {
    color: #64748b;
    font-size: 14px;
}

/* ===== EMPTY / REFUSAL STATE ===== */

.empty-state[b-cpfm08cx0v] {
    text-align: center;
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.empty-icon[b-cpfm08cx0v] {
    margin-bottom: 16px;
    font-size: 48px;
    line-height: 1;
}

.empty-title[b-cpfm08cx0v] {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.empty-message[b-cpfm08cx0v] {
    color: #64748b;
    font-size: 15px;
    margin: 0;
}

    .empty-message a[b-cpfm08cx0v] {
        color: #3498db;
        font-weight: 600;
        text-decoration: none;
    }

        .empty-message a:hover[b-cpfm08cx0v] {
            text-decoration: underline;
        }

/* ===== COUNT LINE ===== */

/* "shown of total" above the list, so a filter that hides most of the system
   doesn't read as an empty database. */
.admin-teams-count[b-cpfm08cx0v] {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: #94a3b8;
}

/* ===== LIST VIEW ===== */
/* Mirrors Teams.razor.css's list view. One difference: ten columns rather
   than nine -- the 56px ID column after the name. */

.teams-list[b-cpfm08cx0v] {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}

.teams-list-head[b-cpfm08cx0v],
.teams-list-row[b-cpfm08cx0v] {
    display: grid;
    grid-template-columns: minmax(170px, 2fr) 56px 0.9fr 0.9fr 1.2fr 96px 76px 76px 120px 28px;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
}

.teams-list-head[b-cpfm08cx0v] {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.teams-list-hcell[b-cpfm08cx0v] {
    padding: 10px 0;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

    .teams-list-hcell:hover[b-cpfm08cx0v] {
        color: #e2e8f0;
    }

/* The numeric headers are right-aligned buttons; text-align on a <button>
   needs saying again because the base rule above sets it left. */
.teams-list-hcell.teams-list-num[b-cpfm08cx0v] {
    text-align: right;
}

span.teams-list-hcell[b-cpfm08cx0v] {
    cursor: default;
}

.teams-list-row[b-cpfm08cx0v] {
    min-height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.15s ease;
}

    .teams-list-row:last-child[b-cpfm08cx0v] {
        border-bottom: none;
    }

    .teams-list-row:hover[b-cpfm08cx0v] {
        background: rgba(255, 255, 255, 0.04);
    }

.teams-list-cell[b-cpfm08cx0v] {
    color: #cbd5e1;
    font-size: 13px;
    min-width: 0;
}

.teams-list-col-name[b-cpfm08cx0v] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.teams-list-swatch[b-cpfm08cx0v] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 2px solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.teams-list-name[b-cpfm08cx0v] {
    min-width: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teams-list-league[b-cpfm08cx0v] {
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teams-list-num[b-cpfm08cx0v] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The team's primary key. Dim on purpose -- it's for cross-referencing a
   query or a log line, not something to read down the page. */
.admin-teams-id[b-cpfm08cx0v] {
    color: #64748b;
    font-size: 12px;
}

.teams-list-chevron[b-cpfm08cx0v] {
    color: #475569;
    display: flex;
    justify-content: flex-end;
}

.teams-list-row:hover .teams-list-chevron[b-cpfm08cx0v] {
    color: #3498db;
}

/* ===== PILLS AND BADGES ===== */

.visibility-pill[b-cpfm08cx0v] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.visibility-public[b-cpfm08cx0v] {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.25);
}

.visibility-private[b-cpfm08cx0v] {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* .role-badge carries its own colours here rather than relying on a
   role-specific class to supply them. Teams.razor.css defines only
   role-coach / role-manager / role-player / role-member, so a Fan, Parent,
   Guardian or Assistant Coach falls through to an unstyled badge over there.
   This page can show any role on any team, so the base case has to look
   finished; the specific classes below just tint it. */
.role-badge[b-cpfm08cx0v] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    background: rgba(149, 165, 166, 0.12);
    color: #95a5a6;
    border: 1px solid rgba(149, 165, 166, 0.2);
}

.role-coach[b-cpfm08cx0v],
.role-assistant-coach[b-cpfm08cx0v] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.2);
}

.role-manager[b-cpfm08cx0v] {
    background: rgba(155, 89, 182, 0.12);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.2);
}

.role-player[b-cpfm08cx0v] {
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.role-parent[b-cpfm08cx0v],
.role-guardian[b-cpfm08cx0v] {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.2);
}

.role-fan[b-cpfm08cx0v],
.role-member[b-cpfm08cx0v] {
    background: rgba(149, 165, 166, 0.12);
    color: #95a5a6;
    border: 1px solid rgba(149, 165, 166, 0.2);
}

/* No role on this team. Plain text on purpose -- a badge here would make
   every unrelated team look like a membership. */
.admin-teams-norole[b-cpfm08cx0v] {
    color: #64748b;
}

/* ===== RESPONSIVE ===== */
/* Same treatment as Teams.razor.css: below 900px the header row goes and each
   row becomes a wrapped flex line, the name on its own line and the rest as
   small labelled chips underneath. */

@media (max-width: 900px) {
    .teams-list-head[b-cpfm08cx0v] {
        display: none;
    }

    .teams-list-row[b-cpfm08cx0v] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        padding: 10px 14px;
    }

        .teams-list-row .teams-list-col-name[b-cpfm08cx0v] {
            flex: 1 1 100%;
        }

        .teams-list-row .teams-list-chevron[b-cpfm08cx0v] {
            display: none;
        }

        .teams-list-row .teams-list-cell:not(.teams-list-col-name):not(.teams-list-chevron)[b-cpfm08cx0v] {
            font-size: 12px;
            color: #94a3b8;
            padding-left: 46px; /* line up under the name, past the swatch */
        }

            .teams-list-row .teams-list-cell:not(.teams-list-col-name):not(.teams-list-chevron) ~ .teams-list-cell[b-cpfm08cx0v] {
                padding-left: 0;
            }

        .teams-list-row .teams-list-num[b-cpfm08cx0v]::before {
            content: attr(data-label) " ";
            color: #64748b;
        }
}

@media (max-width: 768px) {
    .teams-page[b-cpfm08cx0v] {
        padding: 20px 16px;
    }

    .page-title[b-cpfm08cx0v] {
        font-size: 22px;
    }

    .header-right[b-cpfm08cx0v] {
        width: 100%;
    }
}
/* /Components/Pages/ConfirmPlayer.razor.rz.scp.css */
confirm-page[b-q02v0e0nb6] {
    min-height: 100vh;
    background-color: #0b1929;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    }

.confirm-card[b-q02v0e0nb6] {
    background-color: #0e1e32;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
    max-width: 480px;
}

/* Header */ .confirm-header[b-q02v0e0nb6] {
    background: linear-gradient(90deg, #0a1628, #0f2744);
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.brand-soccer[b-q02v0e0nb6] {
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.brand-track[b-q02v0e0nb6] {
    font-size: 20px;
    font-weight: 800;
    color: #3498db;
}

.brand-reg[b-q02v0e0nb6] {
    color: #475569;
    font-size: 9px;
}

/* Body */ .confirm-body[b-q02v0e0nb6] {
    padding: 40px 32px;
    text-align: center;
}

.confirm-icon[b-q02v0e0nb6] {
    margin-bottom: 24px;
}

    .confirm-icon.success svg[b-q02v0e0nb6] {
        filter: drop-shadow(0 0 12px rgba(46, 204, 113, 0.3));
    }

    .confirm-icon.error svg[b-q02v0e0nb6] {
        filter: drop-shadow(0 0 12px rgba(231, 76, 60, 0.3));
    }

    .confirm-icon.warning svg[b-q02v0e0nb6] {
        filter: drop-shadow(0 0 12px rgba(243, 156, 18, 0.3));
    }

    .confirm-icon.info svg[b-q02v0e0nb6] {
        filter: drop-shadow(0 0 12px rgba(52, 152, 219, 0.3));
    }

.confirm-title[b-q02v0e0nb6] {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.confirm-message[b-q02v0e0nb6] {
    color: #8899aa;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 24px 0;
}

/* Notice box */ .confirm-notice[b-q02v0e0nb6] {
    background: rgba(52, 152, 219, 0.06);
    border: 1px solid rgba(52, 152, 219, 0.12);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

    .confirm-notice p[b-q02v0e0nb6] {
        margin: 0;
        color: #8899aa;
        font-size: 13px;
        line-height: 1.6;
    }

/* Actions */ .confirm-actions[b-q02v0e0nb6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.confirm-btn[b-q02v0e0nb6] {
    display: inline-block;
    padding: 14px 40px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    letter-spacing: 0.3px;
    transition: box-shadow 0.2s ease;
    width: 100%;
    max-width: 300px;
}

    .confirm-btn.primary[b-q02v0e0nb6] {
        background: linear-gradient(135deg, #3498db, #2ecc71);
        color: #ffffff;
    }

        .confirm-btn.primary:hover[b-q02v0e0nb6] {
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }

    .confirm-btn.secondary[b-q02v0e0nb6] {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #94a3b8;
    }

        .confirm-btn.secondary:hover[b-q02v0e0nb6] {
            background: rgba(255, 255, 255, 0.1);
        }

/* Footer */ .confirm-footer[b-q02v0e0nb6] {
    padding: 24px 32px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Responsive */
@media (max-width: 520px) {
    .confirm-body[b-q02v0e0nb6] {
        padding: 32px 20px;
    }

    .confirm-title[b-q02v0e0nb6] {
        font-size: 22px;
    }
}
/* /Components/Pages/debug/SystemStatus.razor.rz.scp.css */
/* ===== PAGE ===== */

.debug-page[b-u96mz77pv0] {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 24px;
    animation: fadeIn-b-u96mz77pv0 0.4s ease-out;
}

@keyframes fadeIn-b-u96mz77pv0 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== HEADER ===== */ .debug-header[b-u96mz77pv0] {
    margin-bottom: 32px;
}

.debug-title[b-u96mz77pv0] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
}

.debug-subtitle[b-u96mz77pv0] {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

/* ===== CARDS ===== */ .debug-card[b-u96mz77pv0] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: border-color 0.2s;
}

    .debug-card:hover[b-u96mz77pv0] {
        border-color: rgba(255, 255, 255, 0.1);
    }

.card-header[b-u96mz77pv0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.02);
}

.card-icon[b-u96mz77pv0] {
    font-size: 18px;
}

.card-title[b-u96mz77pv0] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.card-body[b-u96mz77pv0] {
    padding: 16px 20px;
}

/* ===== STATUS ROWS ===== */ .status-row[b-u96mz77pv0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

    .status-row:last-child[b-u96mz77pv0] {
        border-bottom: none;
    }

.status-label[b-u96mz77pv0] {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.status-value[b-u96mz77pv0] {
    color: #94a3b8;
    font-size: 13px;
    text-align: right;
    max-width: 60%;
    word-break: break-all;
}

    .status-value.mono[b-u96mz77pv0] {
        font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
        font-size: 12px;
    }

/* ===== BADGES ===== */ .status-badge[b-u96mz77pv0] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success[b-u96mz77pv0] {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.2);
}

.badge-error[b-u96mz77pv0] {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.2);
}

.badge-warning[b-u96mz77pv0] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.2);
}

.text-error[b-u96mz77pv0] {
    color: #e74c3c;
}

/* ===== ROLES ===== */ .tag-list[b-u96mz77pv0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.role-tag[b-u96mz77pv0] {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.empty-message[b-u96mz77pv0] {
    color: #475569;
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

/* ===== CLAIMS TABLE ===== */ .claims-table-wrapper[b-u96mz77pv0] {
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px;
}

.claims-table[b-u96mz77pv0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .claims-table th[b-u96mz77pv0] {
        text-align: left;
        color: #64748b;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 8px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .claims-table td[b-u96mz77pv0] {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        vertical-align: top;
    }

    .claims-table tr:last-child td[b-u96mz77pv0] {
        border-bottom: none;
    }

    .claims-table tr:hover td[b-u96mz77pv0] {
        background: rgba(255, 255, 255, 0.02);
    }

.claim-type[b-u96mz77pv0] {
    color: #f39c12;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    white-space: nowrap;
}

.claim-value[b-u96mz77pv0] {
    color: #94a3b8;
    word-break: break-all;
    max-width: 300px;
}

.claim-issuer[b-u96mz77pv0] {
    color: #475569;
    font-size: 12px;
}

/* ===== TOKEN DISPLAY ===== */ .token-toggle[b-u96mz77pv0] {
    margin-bottom: 12px;
}

.token-display[b-u96mz77pv0] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 16px;
    color: #94a3b8;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.6;
    word-break: break-all;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
}

/* ===== BUTTONS ===== */
[b-u96mz77pv0].refresh-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

    [b-u96mz77pv0].refresh-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
    }

/* ===== ACTIONS BAR ===== */ .debug-actions[b-u96mz77pv0] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

[b-u96mz77pv0].action-btn {
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .debug-page[b-u96mz77pv0] {
        padding: 20px 16px;
    }

    .debug-title[b-u96mz77pv0] {
        font-size: 22px;
    }

    .status-row[b-u96mz77pv0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .status-value[b-u96mz77pv0] {
        text-align: left;
        max-width: 100%;
    }

    .claims-table[b-u96mz77pv0] {
        font-size: 11px;
    }

    .claim-type[b-u96mz77pv0] {
        font-size: 10px;
    }

    .debug-actions[b-u96mz77pv0] {
        flex-direction: column;
    }

    [b-u96mz77pv0].action-btn {
        width: 100% !important;
    }
}
/* Method tags */ .method-tag[b-u96mz77pv0] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

.method-get[b-u96mz77pv0] {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.method-post[b-u96mz77pv0] {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.method-put[b-u96mz77pv0] {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

.method-delete[b-u96mz77pv0] {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.method-patch[b-u96mz77pv0] {
    background: rgba(155, 89, 182, 0.15);
    color: #9b59b6;
}
/* ===== Collapsible Card Header ===== */ .card-header[b-u96mz77pv0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

    .card-header:hover[b-u96mz77pv0] {
        background: rgba(255, 255, 255, 0.04);
    }

/* Push summary and chevron to the right */ .card-summary[b-u96mz77pv0] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-count[b-u96mz77pv0] {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 10px;
    border-radius: 12px;
}

.summary-text[b-u96mz77pv0] {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

/* Chevron */ .chevron[b-u96mz77pv0] {
    color: #475569;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.chevron-up[b-u96mz77pv0] {
    transform: rotate(180deg);
}

/* Animate body expand/collapse */ .card-body[b-u96mz77pv0] {
    padding: 16px 20px;
    animation: cardExpand-b-u96mz77pv0 0.25s ease-out;
}

@keyframes cardExpand-b-u96mz77pv0 {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    to {
        opacity: 1;
        max-height: 1000px;
        padding-top: 16px;
        padding-bottom: 20px;
    }
}

/* Collapsed card has no bottom border on header */ .debug-card:not(:has(.card-body)).card-header[b-u96mz77pv0] {
    border-bottom: none;
}

/* ===== Expand/Collapse All Controls ===== */ .debug-subtitle-row[b-u96mz77pv0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.expand-controls[b-u96mz77pv0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.expand-all-btn[b-u96mz77pv0] {
    background: none;
    border: none;
    color: #3498db;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .expand-all-btn:hover[b-u96mz77pv0] {
        color: #5dade2;
        background: rgba(52, 152, 219, 0.1);
    }

.expand-divider[b-u96mz77pv0] {
    color: #334155;
    font-size: 13px;
}

/* ===== Badge in header (reuse existing) ===== */ .ss-badge[b-u96mz77pv0] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
/* ===== Page Context Card ===== */ .context-key[b-u96mz77pv0] {
    color: #9b59b6;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    white-space: nowrap;
}

.context-type[b-u96mz77pv0] {
    color: #3498db;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    white-space: nowrap;
}

.context-preview[b-u96mz77pv0] {
    color: #64748b;
    font-size: 12px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.context-time[b-u96mz77pv0] {
    color: #475569;
    font-size: 12px;
    white-space: nowrap;
}

.context-scalar[b-u96mz77pv0] {
    color: #334155;
}

.item-count-badge[b-u96mz77pv0] {
    background: rgba(155, 89, 182, 0.12);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.context-invalidate-btn[b-u96mz77pv0] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
    opacity: 0.5;
}

    .context-invalidate-btn:hover[b-u96mz77pv0] {
        background: rgba(231, 76, 60, 0.15);
        opacity: 1;
    }

/* Detail expansion for collections */ .context-detail[b-u96mz77pv0] {
    margin-top: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
}

.context-detail-header[b-u96mz77pv0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.context-detail-key[b-u96mz77pv0] {
    color: #9b59b6;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    font-weight: 600;
}

.context-detail-type[b-u96mz77pv0] {
    color: #475569;
    font-size: 11px;
    margin-left: auto;
}

.context-detail-body[b-u96mz77pv0] {
    padding: 12px 16px;
}

.context-json[b-u96mz77pv0] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 12px 16px;
    color: #94a3b8;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
}

/* Empty state */ .context-empty[b-u96mz77pv0] {
    text-align: center;
    padding: 24px 0;
}

.context-empty-icon[b-u96mz77pv0] {
    font-size: 32px;
    display: block;
    margin-bottom: 12px;
}

.context-empty-hint[b-u96mz77pv0] {
    color: #334155;
    font-size: 12px;
    margin: 8px 0 0 0;
}

    .context-empty-hint code[b-u96mz77pv0] {
        background: rgba(255, 255, 255, 0.06);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 11px;
        color: #9b59b6;
    }

.log-information[b-u96mz77pv0] {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.log-warning[b-u96mz77pv0] {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

.log-error[b-u96mz77pv0] {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.log-critical[b-u96mz77pv0] {
    background: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
    font-weight: 900;
}

.log-debug[b-u96mz77pv0] {
    background: rgba(149, 165, 166, 0.15);
    color: #95a5a6;
}

.subscription-list[b-u96mz77pv0] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.subscription-title[b-u96mz77pv0] {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}

.subscription-tags[b-u96mz77pv0] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.subscription-tag[b-u96mz77pv0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    background: rgba(52, 152, 219, 0.08);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.15);
}

.sub-icon[b-u96mz77pv0] {
    font-size: 10px;
}

/* ===== Invalidation Log ===== */ .invalidation-log[b-u96mz77pv0] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
/* /Components/Pages/EmailTemplateEditor.razor.rz.scp.css */
.email-template-editor-page[b-plvrrrzm31] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    max-width: 900px;
}

/* ── Attachments (2026-09-30) ── */
.attachments-empty[b-plvrrrzm31] {
    color: #64748b;
    font-size: 13px;
    padding: 10px 12px;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    border-radius: 10px;
}

.attachment-card[b-plvrrrzm31] {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.attachment-remove[b-plvrrrzm31] {
    flex: 0 0 auto;
}

.attachment-params[b-plvrrrzm31] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px 16px;
    margin-top: 6px;
}

.attachment-param[b-plvrrrzm31] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attachment-param-name[b-plvrrrzm31] {
    font-size: 12px;
    font-weight: 700;
    color: #cbd5e1;
    font-family: Consolas, Menlo, monospace;
}

.attachment-param-type[b-plvrrrzm31] {
    margin-left: 6px;
    font-weight: 400;
    color: #64748b;
    font-family: inherit;
}

.page-header[b-plvrrrzm31] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.header-left[b-plvrrrzm31] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-right[b-plvrrrzm31] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.page-title[b-plvrrrzm31] {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.page-subtitle[b-plvrrrzm31] {
    color: #64748b;
    font-size: 12px;
    margin: 0;
    max-width: 640px;
}

.editor-error[b-plvrrrzm31] {
    padding: 12px 16px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 10px;
    color: #e74c3c;
    font-size: 13px;
}

.loading-state[b-plvrrrzm31] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    color: #64748b;
}

.loading-text[b-plvrrrzm31] {
    font-size: 14px;
    margin: 0;
}

.editor-form[b-plvrrrzm31] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.field-row[b-plvrrrzm31] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.field-grow[b-plvrrrzm31] {
    flex: 1;
    min-width: 0;
}

.field-label-row[b-plvrrrzm31] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

    .field-label-row .field-label[b-plvrrrzm31] {
        margin-bottom: 0;
    }

.system-hint[b-plvrrrzm31] {
    color: #f39c12;
}

[b-plvrrrzm31] .template-html-editor {
    width: 100%;
}

@media (max-width: 640px) {
    .field-row[b-plvrrrzm31] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/EmailTemplates.razor.rz.scp.css */
.email-templates-page[b-22yppxtm4g] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
}

.page-header[b-22yppxtm4g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-left[b-22yppxtm4g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-22yppxtm4g] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-22yppxtm4g] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

.loading-state[b-22yppxtm4g],
.empty-state[b-22yppxtm4g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    color: #64748b;
}

.loading-text[b-22yppxtm4g] {
    font-size: 14px;
    margin: 0;
}

.empty-title[b-22yppxtm4g] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.empty-message[b-22yppxtm4g] {
    max-width: 420px;
    text-align: center;
    font-size: 13px;
    margin: 0;
}

.template-name[b-22yppxtm4g] {
    font-weight: 600;
    margin-right: 8px;
}

.badge[b-22yppxtm4g] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 6px;
}

.badge-system[b-22yppxtm4g] {
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: #3498db;
}

.badge-inactive[b-22yppxtm4g] {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
}

.delete-confirm[b-22yppxtm4g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 8px 8px 4px;
}

.delete-icon[b-22yppxtm4g] {
    font-size: 32px;
}

.delete-title[b-22yppxtm4g] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.delete-message[b-22yppxtm4g] {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
}
/* /Components/Pages/EntryLicenses.razor.rz.scp.css */
.entry-licenses-page[b-mksd1wr6l7] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
}

.page-header[b-mksd1wr6l7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-left[b-mksd1wr6l7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-mksd1wr6l7] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-mksd1wr6l7] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

.loading-state[b-mksd1wr6l7],
.empty-state[b-mksd1wr6l7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    color: #64748b;
}

.loading-text[b-mksd1wr6l7] {
    font-size: 14px;
    margin: 0;
}

.empty-title[b-mksd1wr6l7] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.empty-message[b-mksd1wr6l7] {
    max-width: 420px;
    text-align: center;
    font-size: 13px;
    margin: 0;
}

.template-name[b-mksd1wr6l7] {
    font-weight: 600;
    margin-right: 8px;
}

.badge[b-mksd1wr6l7] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 6px;
}

.badge-system[b-mksd1wr6l7] {
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: #3498db;
}

.badge-inactive[b-mksd1wr6l7] {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
}

.delete-confirm[b-mksd1wr6l7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 8px 8px 4px;
}

.delete-icon[b-mksd1wr6l7] {
    font-size: 32px;
}

.delete-title[b-mksd1wr6l7] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.delete-message[b-mksd1wr6l7] {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
}

.entry-email[b-mksd1wr6l7] {
    color: #64748b;
    font-size: 11px;
}

.badge-active[b-mksd1wr6l7] {
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

.badge-warning[b-mksd1wr6l7] {
    background: rgba(243, 156, 18, 0.12);
    border: 1px solid rgba(243, 156, 18, 0.3);
    color: #f39c12;
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
/* ===== PAGE ROOT ===== */

.forgot-page[b-xhwgaeo56l] {
    min-height: 100vh;
    background: linear-gradient(160deg, #0b1929 0%, #0f2744 50%, #132f4c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* ===== BACKGROUND ORBS ===== */ .bg-orbs[b-xhwgaeo56l] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.orb[b-xhwgaeo56l] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orbFloat-b-xhwgaeo56l 10s ease-in-out infinite;
}

.orb-1[b-xhwgaeo56l] {
    width: 400px;
    height: 400px;
    background: rgba(243, 156, 18, 0.08);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.orb-2[b-xhwgaeo56l] {
    width: 350px;
    height: 350px;
    background: rgba(52, 152, 219, 0.06);
    bottom: -80px;
    right: -80px;
    animation-delay: 3s;
}

.orb-3[b-xhwgaeo56l] {
    width: 250px;
    height: 250px;
    background: rgba(231, 76, 60, 0.05);
    top: 50%;
    left: 50%;
    animation-delay: 6s;
}

@keyframes orbFloat-b-xhwgaeo56l {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -20px) scale(1.1);
    }
}

/* ===== CONTAINER ===== */ .forgot-container[b-xhwgaeo56l] {
    display: flex;
    width: 100%;
    max-width: 960px;
    min-height: 540px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    animation: containerIn-b-xhwgaeo56l 0.6s ease-out;
}

@keyframes containerIn-b-xhwgaeo56l {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== LEFT BRANDING PANEL ===== */ .forgot-branding[b-xhwgaeo56l] {
    flex: 1;
    background: linear-gradient(160deg, #0d2137 0%, #112d4e 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.branding-content[b-xhwgaeo56l] {
    text-align: center;
}

.branding-svg[b-xhwgaeo56l] {
    width: 180px;
    height: 180px;
    margin-bottom: 24px;
}

/* SVG Animations */ .ring-spin[b-xhwgaeo56l] {
    animation: spin-b-xhwgaeo56l 20s linear infinite;
    transform-origin: 150px 150px;
}

.arc-1[b-xhwgaeo56l] {
    animation: spin-b-xhwgaeo56l 8s linear infinite;
    transform-origin: 150px 150px;
}

.arc-2[b-xhwgaeo56l] {
    animation: spin-b-xhwgaeo56l 12s linear infinite reverse;
    transform-origin: 150px 150px;
}

.lock-hover[b-xhwgaeo56l] {
    animation: lockFloat-b-xhwgaeo56l 3s ease-in-out infinite;
    transform-origin: 150px 155px;
}

.dot-float[b-xhwgaeo56l] {
    animation: dotPulse-b-xhwgaeo56l 3s ease-in-out infinite;
}

.dot-float-delay[b-xhwgaeo56l] {
    animation: dotPulse-b-xhwgaeo56l 3s ease-in-out infinite 1.5s;
}

@keyframes spin-b-xhwgaeo56l {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes lockFloat-b-xhwgaeo56l {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-6px) scale(1.02);
    }
}

@keyframes dotPulse-b-xhwgaeo56l {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

.branding-title[b-xhwgaeo56l] {
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.brand-white[b-xhwgaeo56l] {
    color: #ffffff;
}

.brand-accent[b-xhwgaeo56l] {
    background: linear-gradient(135deg, #f39c12, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-dot[b-xhwgaeo56l] {
    color: #64748b;
    font-weight: 300;
    font-size: 22px;
}

.branding-tagline[b-xhwgaeo56l] {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 28px 0;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

.branding-features[b-xhwgaeo56l] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    max-width: 240px;
    margin: 0 auto;
}

.feature-item[b-xhwgaeo56l] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #8899aa;
    font-size: 13px;
}

.feature-check[b-xhwgaeo56l] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ===== RIGHT FORM PANEL ===== */ .forgot-form-panel[b-xhwgaeo56l] {
    flex: 1;
    background: #0e1e32;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.form-wrapper[b-xhwgaeo56l] {
    width: 100%;
    max-width: 380px;
}

.form-header[b-xhwgaeo56l] {
    margin-bottom: 28px;
}

.form-title[b-xhwgaeo56l] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.form-subtitle[b-xhwgaeo56l] {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ===== ERROR BANNER ===== */ .error-banner[b-xhwgaeo56l] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
    color: #e74c3c;
    font-size: 14px;
    animation: shakeIn-b-xhwgaeo56l 0.4s ease-out;
}

    .error-banner svg[b-xhwgaeo56l] {
        flex-shrink: 0;
    }

@keyframes shakeIn-b-xhwgaeo56l {
    0% {
        transform: translateX(-8px);
        opacity: 0;
    }

    25% {
        transform: translateX(6px);
    }

    50% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===== FORM FIELDS ===== */ .field-group[b-xhwgaeo56l] {
    margin-bottom: 24px;
}

.field-label[b-xhwgaeo56l] {
    display: block;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

/* Telerik TextBox overrides */
[b-xhwgaeo56l].forgot-input.k-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    height: 48px !important;
    transition: all 0.2s ease;
}

    [b-xhwgaeo56l].forgot-input.k-input:focus,
    [b-xhwgaeo56l].forgot-input.k-input.k-focus {
        border-color: #f39c12 !important;
        box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.15) !important;
        background: rgba(255, 255, 255, 0.06) !important;
    }

    [b-xhwgaeo56l].forgot-input.k-input::placeholder {
        color: #475569 !important;
    }

[b-xhwgaeo56l].validation-message {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
}

/* ===== SUBMIT BUTTON ===== */
[b-xhwgaeo56l].forgot-submit-btn {
    width: 100% !important;
    height: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

    [b-xhwgaeo56l].forgot-submit-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(243, 156, 18, 0.35) !important;
        filter: brightness(1.08);
    }

    [b-xhwgaeo56l].forgot-submit-btn:active {
        transform: translateY(0) !important;
    }

    [b-xhwgaeo56l].forgot-submit-btn:disabled {
        opacity: 0.6 !important;
        transform: none !important;
        box-shadow: none !important;
    }

/* ===== SUCCESS STATE ===== */ .success-state[b-xhwgaeo56l] {
    text-align: center;
    animation: fadeUp-b-xhwgaeo56l 0.5s ease-out;
}

@keyframes fadeUp-b-xhwgaeo56l {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-icon[b-xhwgaeo56l] {
    margin-bottom: 20px;
}

    .success-icon svg[b-xhwgaeo56l] {
        animation: envelopePulse-b-xhwgaeo56l 2s ease-in-out infinite;
    }

@keyframes envelopePulse-b-xhwgaeo56l {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.success-title[b-xhwgaeo56l] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.success-message[b-xhwgaeo56l] {
    color: #8899aa;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

    .success-message strong[b-xhwgaeo56l] {
        color: #f39c12;
    }

.success-tips[b-xhwgaeo56l] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    text-align: left;
}

.tip-item[b-xhwgaeo56l] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: 13px;
    margin: 0;
    padding: 4px 0;
}

.tip-icon[b-xhwgaeo56l] {
    font-size: 16px;
    flex-shrink: 0;
}

[b-xhwgaeo56l].resend-btn {
    width: 100% !important;
    height: 46px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
}

    [b-xhwgaeo56l].resend-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
    }

/* ===== DIVIDER ===== */ .divider[b-xhwgaeo56l] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0;
}

.divider-line[b-xhwgaeo56l] {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.divider-text[b-xhwgaeo56l] {
    color: #475569;
    font-size: 13px;
    font-weight: 500;
}

/* ===== NAV LINKS ===== */ .nav-links[b-xhwgaeo56l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.nav-link[b-xhwgaeo56l] {
    font-size: 14px;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.back-link[b-xhwgaeo56l] {
    color: #f39c12;
}

    .back-link:hover[b-xhwgaeo56l] {
        color: #f5b041;
    }

.nav-separator[b-xhwgaeo56l] {
    color: #334155;
    font-size: 18px;
}

.create-link[b-xhwgaeo56l] {
    color: #3498db;
}

    .create-link:hover[b-xhwgaeo56l] {
        color: #5dade2;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .forgot-container[b-xhwgaeo56l] {
        flex-direction: column;
        max-width: 440px;
        min-height: auto;
    }

    .forgot-branding[b-xhwgaeo56l] {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 30px 20px;
    }

    .branding-svg[b-xhwgaeo56l] {
        width: 120px;
        height: 120px;
        margin-bottom: 16px;
    }

    .branding-title[b-xhwgaeo56l] {
        font-size: 24px;
    }

    .branding-features[b-xhwgaeo56l] {
        display: none;
    }

    .forgot-form-panel[b-xhwgaeo56l] {
        padding: 30px 24px;
    }

    .form-title[b-xhwgaeo56l] {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .forgot-page[b-xhwgaeo56l] {
        padding: 10px;
    }

    .forgot-branding[b-xhwgaeo56l] {
        padding: 24px 16px;
    }

    .branding-tagline[b-xhwgaeo56l] {
        display: none;
    }

    .forgot-form-panel[b-xhwgaeo56l] {
        padding: 24px 20px;
    }

    .nav-links[b-xhwgaeo56l] {
        flex-direction: column;
        gap: 8px;
    }

    .nav-separator[b-xhwgaeo56l] {
        display: none;
    }
}
/* /Components/Pages/GameCameras.razor.rz.scp.css */
/* ===== Camera setup page (2026-09-17) =====
   Visual language borrowed from GameTracker.razor.css: translucent panels
   on the dark app background, 14px radii, slate text ramp. */

.gc-page[b-jlb3t394wa] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 12px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gc-loading[b-jlb3t394wa],
.gc-error-page[b-jlb3t394wa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50vh;
    color: #94a3b8;
    text-align: center;
}

.gc-error-icon[b-jlb3t394wa] {
    font-size: 40px;
}

/* ===== Header ===== */
.gc-header[b-jlb3t394wa] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.gc-header-left[b-jlb3t394wa] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gc-back[b-jlb3t394wa] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

    .gc-back:hover[b-jlb3t394wa] {
        color: #e2e8f0;
    }

.gc-title[b-jlb3t394wa] {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.gc-title-game[b-jlb3t394wa] {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 600;
}

.gc-header-right[b-jlb3t394wa] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gc-count-pill[b-jlb3t394wa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
}

.gc-count-dot[b-jlb3t394wa] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #475569;
}

.gc-count-live[b-jlb3t394wa] {
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.3);
}

    .gc-count-live .gc-count-dot[b-jlb3t394wa] {
        background: #2ecc71;
        box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.15);
    }

/* ===== Help strip ===== */
/* One column, read top to bottom (2026-09-23) -- the three side-by-side columns broke each
   step into a narrow ragged block that didn't read as a sequence. */
.gc-help[b-jlb3t394wa] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 860px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 12px 14px;
}

.gc-help-step[b-jlb3t394wa] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.55;
}

    .gc-help-step strong[b-jlb3t394wa] {
        color: #e2e8f0;
    }

/* The whole sentence as one flex item, so it wraps like prose. */
.gc-help-text[b-jlb3t394wa] {
    flex: 1 1 auto;
    min-width: 0;
}

.gc-help-num[b-jlb3t394wa] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.18);
    color: #3498db;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== Banners / empty ===== */
.gc-banner[b-jlb3t394wa] {
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
}

.gc-banner-error[b-jlb3t394wa] {
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.35);
    color: #ff8a80;
}

.gc-empty[b-jlb3t394wa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 20px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    text-align: center;
}

    .gc-empty p[b-jlb3t394wa] {
        margin: 0;
    }

.gc-empty-sub[b-jlb3t394wa] {
    font-size: 12.5px;
    color: #64748b;
}

    .gc-empty-sub strong[b-jlb3t394wa] {
        color: #e2e8f0;
    }

/* ===== Camera cards ===== */
/* Cards doubled from 320px (2026-09-22): the picture is now the zoom
   target, so it earns the room -- two per row on a 1400px page, one below
   ~1000px. */
.gc-grid[b-jlb3t394wa] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(640px, 1fr));
    gap: 16px;
}

@media (max-width: 720px) {
    .gc-grid[b-jlb3t394wa] {
        grid-template-columns: 1fr;
    }
}

.gc-card[b-jlb3t394wa] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: border-color 0.2s;
}

.gc-card-offline[b-jlb3t394wa] {
    opacity: 0.7;
}

.gc-card-recording[b-jlb3t394wa] {
    border-color: rgba(231, 76, 60, 0.45);
    box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.15);
}

/* Picture */
/* .gc-picture / -empty / -wait moved to CameraZoomPicture.razor.css (2026-09-22). */

/* Battery badge (2026-09-24): top-right of the picture, opposite the status pill. */
.gc-battery[b-jlb3t394wa] {
    position: absolute;
    right: 8px;
    top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #cbd5e1;
}

.gc-battery-icon[b-jlb3t394wa] {
    position: relative;
    width: 18px;
    height: 9px;
    border: 1.5px solid currentColor;
    border-radius: 2.5px;
    box-sizing: border-box;
}

    .gc-battery-icon[b-jlb3t394wa]::after {          /* the terminal nub */
        content: "";
        position: absolute;
        right: -4px;
        top: 1.5px;
        width: 2px;
        height: 3px;
        background: currentColor;
        border-radius: 0 1px 1px 0;
    }

.gc-battery-fill[b-jlb3t394wa] {
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    background: currentColor;
    border-radius: 1px;
}

.gc-battery-bolt[b-jlb3t394wa] {
    margin-left: -1px;
}

.gc-battery-ok[b-jlb3t394wa]       { color: #2ecc71; }
.gc-battery-charging[b-jlb3t394wa] { color: #3498db; }
.gc-battery-mid[b-jlb3t394wa]      { color: #f39c12; }
.gc-battery-low[b-jlb3t394wa]      { color: #ff5252; animation: gc-battery-blink-b-jlb3t394wa 1.2s ease-in-out infinite; }

@keyframes gc-battery-blink-b-jlb3t394wa {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* Throughput badge (2026-09-26): under the battery, top-right of the picture. */
.gc-throughput[b-jlb3t394wa] {
    position: absolute;
    right: 8px;
    top: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.gc-throughput-fps[b-jlb3t394wa] {
    font-weight: 600;
    opacity: 0.8;
}

.gc-throughput-ok[b-jlb3t394wa]  { color: #2ecc71; }
.gc-throughput-mid[b-jlb3t394wa] { color: #f39c12; }
.gc-throughput-low[b-jlb3t394wa] { color: #ff5252; animation: gc-battery-blink-b-jlb3t394wa 1.2s ease-in-out infinite; }

.gc-picture-time[b-jlb3t394wa] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #cbd5e1;
    font-size: 10.5px;
    font-weight: 600;
}

.gc-status-pill[b-jlb3t394wa] {
    position: absolute;
    left: 8px;
    top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #94a3b8;
}

.gc-status-dot[b-jlb3t394wa] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.gc-status-ready[b-jlb3t394wa] {
    color: #2ecc71;
}

.gc-status-busy[b-jlb3t394wa] {
    color: #f39c12;
}

.gc-status-error[b-jlb3t394wa] {
    color: #e74c3c;
}

.gc-status-offline[b-jlb3t394wa] {
    color: #64748b;
}

.gc-status-recording[b-jlb3t394wa] {
    color: #ff6b6b;
}

    .gc-status-recording .gc-status-dot[b-jlb3t394wa] {
        animation: gc-rec-pulse-b-jlb3t394wa 1.4s ease-in-out infinite;
    }

@keyframes gc-rec-pulse-b-jlb3t394wa {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

/* Name row */
.gc-name-row[b-jlb3t394wa] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

.gc-name[b-jlb3t394wa] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gc-name-text[b-jlb3t394wa] {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-model[b-jlb3t394wa] {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-name-input[b-jlb3t394wa] {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    outline: none;
}

    .gc-name-input:focus[b-jlb3t394wa] {
        border-color: #3498db;
    }

/* Field coverage (2026-10-03) */
.gc-coverage[b-jlb3t394wa] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.gc-coverage-head[b-jlb3t394wa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.gc-coverage-title[b-jlb3t394wa] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

    .gc-coverage-title small[b-jlb3t394wa] {
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500;
        color: #64748b;
    }

.gc-coverage-actions[b-jlb3t394wa] {
    display: inline-flex;
    gap: 6px;
}

.gc-coverage-save[b-jlb3t394wa],
.gc-coverage-cancel[b-jlb3t394wa] {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}

.gc-coverage-save[b-jlb3t394wa] {
    background: rgba(46, 204, 113, 0.18);
    border-color: rgba(46, 204, 113, 0.5);
    color: #6fdc9a;
}

.gc-coverage-cancel[b-jlb3t394wa] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

    .gc-coverage-save:disabled[b-jlb3t394wa],
    .gc-coverage-cancel:disabled[b-jlb3t394wa] {
        opacity: 0.5;
        cursor: default;
    }

/* Sync toggle */
.gc-sync[b-jlb3t394wa] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    user-select: none;
}

    .gc-sync input[b-jlb3t394wa] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.gc-sync-track[b-jlb3t394wa] {
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: #334155;
    position: relative;
    transition: background 0.2s;
}

.gc-sync-thumb[b-jlb3t394wa] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #94a3b8;
    transition: transform 0.2s, background 0.2s;
}

.gc-sync-on .gc-sync-track[b-jlb3t394wa] {
    background: rgba(46, 204, 113, 0.35);
}

.gc-sync-on .gc-sync-thumb[b-jlb3t394wa] {
    transform: translateX(16px);
    background: #2ecc71;
}

.gc-sync-label[b-jlb3t394wa] {
    display: flex;
    flex-direction: column;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

    .gc-sync-label small[b-jlb3t394wa] {
        color: #64748b;
        font-size: 11px;
        font-weight: 500;
        margin-top: 2px;
    }

/* Actions */
.gc-actions[b-jlb3t394wa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gc-actions-left[b-jlb3t394wa] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.gc-btn[b-jlb3t394wa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .gc-btn:hover:not(:disabled)[b-jlb3t394wa] {
        background: rgba(255, 255, 255, 0.08);
    }

    .gc-btn:disabled[b-jlb3t394wa] {
        opacity: 0.45;
        cursor: default;
    }

.gc-btn-primary[b-jlb3t394wa] {
    background: rgba(52, 152, 219, 0.18);
    border-color: rgba(52, 152, 219, 0.45);
    color: #7cc4f5;
}

    .gc-btn-primary:hover:not(:disabled)[b-jlb3t394wa] {
        background: rgba(52, 152, 219, 0.3);
    }

/* Manual start / stop per phone (2026-09-23) */
.gc-btn-record[b-jlb3t394wa] {
    background: rgba(231, 76, 60, 0.16);
    border-color: rgba(231, 76, 60, 0.45);
    color: #ff8a80;
}

    .gc-btn-record:hover:not(:disabled)[b-jlb3t394wa] {
        background: rgba(231, 76, 60, 0.28);
        color: #ffb3ad;
    }

.gc-btn-stop[b-jlb3t394wa] {
    background: rgba(231, 76, 60, 0.85);
    border-color: rgba(231, 76, 60, 0.9);
    color: #ffffff;
}

    .gc-btn-stop:hover:not(:disabled)[b-jlb3t394wa] {
        background: #e74c3c;
    }

.gc-icon-btn[b-jlb3t394wa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

    .gc-icon-btn:hover[b-jlb3t394wa] {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.06);
    }

.gc-seen[b-jlb3t394wa] {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.gc-card-error[b-jlb3t394wa] {
    color: #ff8a80;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .gc-help[b-jlb3t394wa] {
        max-width: none;
    }
}
/* /Components/Pages/GameComponents/EditEventDialog.razor.rz.scp.css */
/* Edit Event dialog (2026-09-20).
   This component had no stylesheet of its own: its .ee-* rules lived in
   EventLogger.razor.css, which CSS isolation scopes to EventLogger's own
   markup, so they never reached this dialog. Moved here, plus the new
   two-column layout and the same viewport cap CreateGameDialog uses. */

/* ===== FIT THE VIEWPORT ===== */
[b-kgzq8866py] .base-dialog {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 24px);
}

[b-kgzq8866py] .base-dialog .k-window-content {
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

/* ===== TWO-COLUMN LAYOUT ===== */
.ee-layout[b-kgzq8866py] {
    display: grid;
    grid-template-columns: minmax(300px, 5fr) minmax(320px, 6fr);
    gap: 20px;
    align-items: start;
}

.ee-form[b-kgzq8866py] {
    min-width: 0;
}

    .ee-form .field-group[b-kgzq8866py] {
        margin-bottom: 12px;
    }

.ee-map[b-kgzq8866py] {
    min-width: 0;
}

.ee-time-row .ee-half[b-kgzq8866py] {
    flex: 0 0 76px;
}

.ee-time-row .ee-time[b-kgzq8866py] {
    flex: 1;
    min-width: 0;
}

/* ===== EVENT TYPE PILL ===== */
.ee-readonly-pill[b-kgzq8866py] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    /* Light field look (2026-09-20): pale surface tinted with the event /
       team colour, dark text -- the same treatment Half and Match Time get. */
    background: color-mix(in srgb, var(--pill-color) 16%, #f1f5f9);
    border: 1px solid color-mix(in srgb, var(--pill-color) 45%, #cbd5e1);
    border-left: 4px solid var(--pill-color);
    border-radius: 10px;
}

.ee-readonly-emoji[b-kgzq8866py] {
    font-size: 20px;
    line-height: 1;
}

.ee-readonly-label[b-kgzq8866py] {
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Team name is plain text with a colour swatch beside it -- colouring the
   text itself made a black or navy team unreadable on the dark dialog. */
.ee-readonly-team[b-kgzq8866py] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ee-team-swatch[b-kgzq8866py] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid rgba(15, 23, 42, 0.35);
    flex-shrink: 0;
}

/* ===== LIGHT INPUTS: player dropdown + half (2026-09-20) =====
   Same pale-surface / dark-text treatment as the pills and the match-time
   field. ::deep works here because the Telerik control sits inside this
   component's own markup, so the wrapper div carries the scope attribute. */
.ee-player-field[b-kgzq8866py]  .k-picker,
.ee-time-row .ee-half[b-kgzq8866py]  .k-input {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    color: #0f172a !important;
    height: 44px !important;
}

.ee-player-field[b-kgzq8866py]  .k-input-inner,
.ee-player-field[b-kgzq8866py]  .k-input-value-text,
.ee-time-row .ee-half[b-kgzq8866py]  .k-input-inner {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

.ee-time-row .ee-half[b-kgzq8866py]  .k-input-inner {
    text-align: center;
}

.ee-player-field[b-kgzq8866py]  .k-input-button,
.ee-time-row .ee-half[b-kgzq8866py]  .k-spinner-increase,
.ee-time-row .ee-half[b-kgzq8866py]  .k-spinner-decrease {
    color: #334155 !important;
    background: transparent !important;
    border-color: #cbd5e1 !important;
}

.ee-player-field[b-kgzq8866py]  .k-picker:focus-within,
.ee-time-row .ee-half[b-kgzq8866py]  .k-input:focus-within {
    border-color: #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2) !important;
}

.ee-notes[b-kgzq8866py] {
    grid-column: 1 / -1;
    margin-top: 6px;
}

/* ===== PLAYER ITEMS ===== */
.ee-player-item[b-kgzq8866py] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ee-player-jersey[b-kgzq8866py] {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
}

/* ===== FIELD MAP ===== */
.ee-location-header[b-kgzq8866py] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    min-height: 22px;
}

    .ee-location-header .field-label[b-kgzq8866py] {
        margin: 0;
    }

    .ee-location-header .field-hint[b-kgzq8866py] {
        margin: 0;
    }

.ee-location-status[b-kgzq8866py] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94a3b8;
}

.ee-location-dot[b-kgzq8866py] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
}

.ee-location-text[b-kgzq8866py] {
    font-weight: 600;
}

.ee-field-map-wrap[b-kgzq8866py] {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.ee-clear-location[b-kgzq8866py] {
    margin-left: 4px;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

    .ee-clear-location:hover[b-kgzq8866py] {
        color: #e74c3c;
        border-color: rgba(231, 76, 60, 0.3);
        background: rgba(231, 76, 60, 0.06);
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .ee-layout[b-kgzq8866py] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
/* /Components/Pages/GameComponents/EventFieldDialog.razor.rz.scp.css */
/* Log Event dialog (rebuilt 2026-09-20) -- same two-column look as
   EditEventDialog: form left, field map right, one column under 768px. */

/* ===== TWO-COLUMN LAYOUT ===== */
.efd-layout[b-j949t9o3ru] {
    display: grid;
    grid-template-columns: minmax(300px, 5fr) minmax(320px, 6fr);
    gap: 20px;
    align-items: start;
}

.efd-form[b-j949t9o3ru] {
    min-width: 0;
}

    .efd-form .field-group[b-j949t9o3ru] {
        margin-bottom: 12px;
    }

.efd-map[b-j949t9o3ru] {
    min-width: 0;
}

.efd-time-row .efd-half[b-j949t9o3ru] {
    flex: 0 0 76px;
}

.efd-time-row .efd-time[b-j949t9o3ru] {
    flex: 1;
    min-width: 0;
}

/* ===== READ-ONLY PILLS (event type, player) ===== */
.efd-readonly-pill[b-j949t9o3ru] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    /* Light field look (2026-09-20): pale surface tinted with the event /
       team colour, dark text -- the same treatment Half and Match Time get. */
    background: color-mix(in srgb, var(--pill-color) 16%, #f1f5f9);
    border: 1px solid color-mix(in srgb, var(--pill-color) 45%, #cbd5e1);
    border-left: 4px solid var(--pill-color);
    border-radius: 10px;
}

.efd-readonly-emoji[b-j949t9o3ru] {
    font-size: 20px;
    line-height: 1;
}

.efd-readonly-label[b-j949t9o3ru] {
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Team name as plain text with a colour swatch -- colouring the text made a
   black or navy team unreadable on the dark dialog. */
.efd-readonly-team[b-j949t9o3ru] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.efd-team-swatch[b-j949t9o3ru] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid rgba(15, 23, 42, 0.35);
    flex-shrink: 0;
}

/* ===== LIGHT INPUT: half (2026-09-20) -- see EditEventDialog.razor.css ===== */
.efd-time-row .efd-half[b-j949t9o3ru]  .k-input {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    color: #0f172a !important;
    height: 44px !important;
}

.efd-time-row .efd-half[b-j949t9o3ru]  .k-input-inner {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-align: center;
}

.efd-time-row .efd-half[b-j949t9o3ru]  .k-spinner-increase,
.efd-time-row .efd-half[b-j949t9o3ru]  .k-spinner-decrease {
    color: #334155 !important;
    background: transparent !important;
    border-color: #cbd5e1 !important;
}

.efd-time-row .efd-half[b-j949t9o3ru]  .k-input:focus-within {
    border-color: #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2) !important;
}

.efd-notes[b-j949t9o3ru] {
    grid-column: 1 / -1;
    margin-top: 6px;
}

.efd-player-jersey[b-j949t9o3ru] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.35);
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
}

/* ===== TEAM TOGGLE (player-less note) ===== */
.efd-team-toggle[b-j949t9o3ru] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.efd-team-btn[b-j949t9o3ru] {
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
}

.efd-team-btn-on[b-j949t9o3ru] {
    background: color-mix(in srgb, var(--team-color) 18%, transparent);
    border-color: color-mix(in srgb, var(--team-color) 55%, transparent);
    color: #ffffff;
}

/* ===== SECONDARY PLAYER ===== */
.efd-secondary-list[b-j949t9o3ru] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
}

.efd-secondary-btn[b-j949t9o3ru] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .efd-secondary-btn:hover[b-j949t9o3ru] {
        background: rgba(52, 152, 219, 0.1);
        border-color: rgba(52, 152, 219, 0.3);
    }

.efd-secondary-selected[b-j949t9o3ru] {
    background: rgba(52, 152, 219, 0.2);
    border-color: #3498db;
    color: #ffffff;
}

.efd-secondary-num[b-j949t9o3ru] {
    font-weight: 800;
    color: #7cc4f5;
}

/* ===== FIELD MAP ===== */
.efd-location-header[b-j949t9o3ru] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    min-height: 22px;
}

    .efd-location-header .field-label[b-j949t9o3ru],
    .efd-location-header .field-hint[b-j949t9o3ru] {
        margin: 0;
    }

.efd-location-status[b-j949t9o3ru] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94a3b8;
}

.efd-location-dot[b-j949t9o3ru] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
}

.efd-location-text[b-j949t9o3ru] {
    font-weight: 600;
}

.efd-field-map-wrap[b-j949t9o3ru] {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.efd-clear-location[b-j949t9o3ru] {
    margin-left: 4px;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

    .efd-clear-location:hover[b-j949t9o3ru] {
        color: #e74c3c;
        border-color: rgba(231, 76, 60, 0.3);
        background: rgba(231, 76, 60, 0.06);
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .efd-layout[b-j949t9o3ru] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* "Also start the clock" (2026-09-22) */
.efd-start-clock[b-j949t9o3ru] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    /* Same light-field treatment as the pills above: pale red surface, dark
       text (the first cut used light text meant for a dark panel -- unreadable
       here, 2026-09-23). */
    background: color-mix(in srgb, #e74c3c 14%, #f1f5f9);
    border: 1px solid color-mix(in srgb, #e74c3c 50%, #cbd5e1);
    border-left: 4px solid #e74c3c;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    .efd-start-clock input[b-j949t9o3ru] {
        accent-color: #e74c3c;
        width: 18px;
        height: 18px;
        margin: 0;
        cursor: pointer;
    }

.efd-start-clock-icon[b-j949t9o3ru] {
    font-size: 14px;
}

/* Pause variant (2026-10-02): amber rather than red -- a running clock being
   held, not a forgotten one being started. */
.efd-pause-clock[b-j949t9o3ru] {
    background: color-mix(in srgb, #f39c12 16%, #f1f5f9);
    border-color: color-mix(in srgb, #f39c12 55%, #cbd5e1);
    border-left-color: #f39c12;
}

    .efd-pause-clock input[b-j949t9o3ru] {
        accent-color: #f39c12;
    }
/* /Components/Pages/GameComponents/EventLogger.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.el-container[b-vpuiq5wddw] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: visible;
}

/* ===== QUICK EVENT BAR ===== */
.el-quick-bar[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.el-player-context[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    margin-right: 4px;
    flex-shrink: 0;
}

/* Selected player belongs to the other team (2026-09-23): say why the buttons are off. */
.el-other-team-note[b-vpuiq5wddw] {
    align-self: center;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(243, 156, 18, 0.12);
    border: 1px solid rgba(243, 156, 18, 0.3);
    color: #f5b041;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.el-context-jersey[b-vpuiq5wddw] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    font-family: 'Cascadia Code', monospace;
}

.el-context-name[b-vpuiq5wddw] {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* ===== QUICK BUTTONS ===== */
.el-quick-btn[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--btn-color) 30%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--btn-color) 10%, transparent);
    color: var(--btn-color);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

    .el-quick-btn:hover:not(:disabled)[b-vpuiq5wddw] {
        background: color-mix(in srgb, var(--btn-color) 20%, transparent);
        transform: translateY(-1px);
    }

    .el-quick-btn:disabled[b-vpuiq5wddw] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.el-quick-icon[b-vpuiq5wddw] {
    font-size: 14px;
    line-height: 1;
}

.el-quick-label[b-vpuiq5wddw] {
    font-size: 11px;
}

/* ===== MORE BUTTON ===== */
.el-more-wrapper[b-vpuiq5wddw] {
    position: relative;
    z-index: 101;
}

.el-more-btn[b-vpuiq5wddw] {
    --btn-color: #94a3b8;
    border-style: dashed;
}

/* ===== EVENT PICKER POPUP ===== */
.el-event-picker[b-vpuiq5wddw] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: #0e1e32;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 200;
    animation: el-picker-in-b-vpuiq5wddw 0.15s ease-out;
    overflow: hidden;
}

@keyframes el-picker-in-b-vpuiq5wddw {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.el-picker-header[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.el-picker-close[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #64748b;
    cursor: pointer;
}

    .el-picker-close:hover[b-vpuiq5wddw] {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }

.el-picker-grid[b-vpuiq5wddw] {
    display: flex;
    flex-direction: column;
    padding: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.el-picker-item[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.1s ease;
    text-align: left;
    width: 100%;
}

    .el-picker-item:hover[b-vpuiq5wddw] {
        background: color-mix(in srgb, var(--btn-color) 15%, transparent);
    }

.el-picker-emoji[b-vpuiq5wddw] {
    font-size: 18px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.el-picker-name[b-vpuiq5wddw] {
    font-size: 13px;
    font-weight: 600;
}

/* ===== MARK EVENT + QUEUE (2026-10-15, mark-first logging) ===== */
.el-mark-btn[b-vpuiq5wddw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid rgba(46, 204, 113, 0.5);
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.28), rgba(52, 152, 219, 0.28));
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.12s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(46, 204, 113, 0.15);
}

    .el-mark-btn:hover:not(:disabled)[b-vpuiq5wddw] {
        background: linear-gradient(135deg, rgba(46, 204, 113, 0.42), rgba(52, 152, 219, 0.42));
        transform: translateY(-1px);
    }

    .el-mark-btn:active:not(:disabled)[b-vpuiq5wddw] {
        transform: translateY(0);
    }

    .el-mark-btn:disabled[b-vpuiq5wddw] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.el-mark-btn-icon[b-vpuiq5wddw] {
    font-size: 16px;
    line-height: 1;
}

.el-mark-btn-clock[b-vpuiq5wddw] {
    font-family: 'Cascadia Code', monospace;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.8;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.el-queue-toggle[b-vpuiq5wddw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    background: transparent;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

    .el-queue-toggle:hover[b-vpuiq5wddw],
    .el-queue-toggle-on[b-vpuiq5wddw] {
        border-style: solid;
        color: #e2e8f0;
        background: rgba(255, 255, 255, 0.05);
    }

.el-queue-badge[b-vpuiq5wddw] {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #2ecc71;
    color: #0b1220;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.el-queue[b-vpuiq5wddw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 0;
}

.el-queue-empty[b-vpuiq5wddw] {
    color: #94a3b8;
    font-size: 13px;
    padding: 10px 6px;
}

.el-mark[b-vpuiq5wddw] {
    display: flex;
    align-items: stretch;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.el-mark-selected[b-vpuiq5wddw] {
    border-color: rgba(46, 204, 113, 0.5);
    background: rgba(46, 204, 113, 0.08);
}

.el-mark-pending[b-vpuiq5wddw] {
    border-style: dashed;
}

.el-mark-main[b-vpuiq5wddw] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: #e2e8f0;
    cursor: pointer;
    text-align: left;
    border-radius: 8px 0 0 8px;
}

    .el-mark-main:hover[b-vpuiq5wddw] {
        background: rgba(255, 255, 255, 0.04);
    }

.el-mark-time[b-vpuiq5wddw] {
    font-family: 'Cascadia Code', monospace;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
}

.el-mark-age[b-vpuiq5wddw] {
    font-size: 11px;
    color: #94a3b8;
}

.el-mark-stopped[b-vpuiq5wddw] {
    font-size: 12px;
    opacity: 0.7;
}

.el-mark-logging[b-vpuiq5wddw] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #6fdc9a;
}

.el-mark-delete[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 0 8px 8px 0;
}

    .el-mark-delete:hover[b-vpuiq5wddw] {
        background: rgba(231, 76, 60, 0.15);
        color: #e74c3c;
    }

    .el-mark-delete:disabled[b-vpuiq5wddw] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.el-mark-types[b-vpuiq5wddw] {
    margin: 0 0 6px 10px;
    padding: 8px 10px;
    border-left: 2px solid rgba(46, 204, 113, 0.4);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.el-mark-hint[b-vpuiq5wddw] {
    font-size: 12px;
    color: #94a3b8;
}

.el-mark-hint-warn[b-vpuiq5wddw] {
    color: #f5b041;
}

.el-mark-player[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.el-mark-type-grid[b-vpuiq5wddw] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ===== NO PLAYER ===== */
.el-no-player[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 13px;
    padding: 4px 0;
}

/* ===== ERROR ===== */
.el-error[b-vpuiq5wddw] {
    color: #e74c3c;
    font-size: 12px;
    padding: 8px 12px;
    background: rgba(231, 76, 60, 0.08);
    border-bottom: 1px solid rgba(231, 76, 60, 0.15);
    flex-shrink: 0;
}

/* ===== ACTION BAR: Lineup + Share ===== */
.el-action-bar[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.el-action-btn[b-vpuiq5wddw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.15s ease;
    white-space: nowrap;
}

    .el-action-btn:disabled[b-vpuiq5wddw] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.el-action-lineup[b-vpuiq5wddw] {
    background: rgba(52, 152, 219, 0.1);
    border-color: rgba(52, 152, 219, 0.3);
    color: #3498db;
}

    .el-action-lineup:hover:not(:disabled)[b-vpuiq5wddw] {
        background: rgba(52, 152, 219, 0.18);
        border-color: rgba(52, 152, 219, 0.5);
    }

.el-action-share[b-vpuiq5wddw] {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

    .el-action-share:hover:not(:disabled)[b-vpuiq5wddw] {
        background: rgba(46, 204, 113, 0.18);
        border-color: rgba(46, 204, 113, 0.5);
    }

.el-action-note[b-vpuiq5wddw] {
    background: rgba(255, 79, 163, 0.1);
    border-color: rgba(255, 79, 163, 0.3);
    color: #ff4fa3;
}

    .el-action-note:hover:not(:disabled)[b-vpuiq5wddw] {
        background: rgba(255, 79, 163, 0.18);
        border-color: rgba(255, 79, 163, 0.5);
    }

/* Substitution audit (2026-10-01) */
.el-action-audit[b-vpuiq5wddw] {
    background: rgba(26, 188, 156, 0.1);
    border-color: rgba(26, 188, 156, 0.3);
    color: #1abc9c;
}

    .el-action-audit:hover:not(:disabled)[b-vpuiq5wddw] {
        background: rgba(26, 188, 156, 0.18);
    }

.el-action-voice-event[b-vpuiq5wddw] {
    background: rgba(155, 89, 182, 0.1);
    border-color: rgba(155, 89, 182, 0.3);
    color: #9b59b6;
}

    .el-action-voice-event:hover:not(:disabled)[b-vpuiq5wddw] {
        background: rgba(155, 89, 182, 0.18);
        border-color: rgba(155, 89, 182, 0.5);
    }

.el-action-voice-listening[b-vpuiq5wddw] {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.45);
    color: #e74c3c;
    animation: el-voice-pulse-b-vpuiq5wddw 1.2s ease-in-out infinite;
}

@keyframes el-voice-pulse-b-vpuiq5wddw {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.el-action-error[b-vpuiq5wddw] {
    color: #e74c3c;
    font-size: 11px;
    font-weight: 600;
}

/* ===== SHARE PANEL ===== */
.el-share-panel[b-vpuiq5wddw] {
    padding: 10px 12px;
    background: rgba(46, 204, 113, 0.04);
    border-bottom: 1px solid rgba(46, 204, 113, 0.15);
    flex-shrink: 0;
    animation: el-picker-in-b-vpuiq5wddw 0.15s ease-out;
}

.el-share-header[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.el-share-title[b-vpuiq5wddw] {
    color: #2ecc71;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.el-share-close[b-vpuiq5wddw] {
    background: none;
    border: none;
    color: #475569;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.1s;
}

    .el-share-close:hover[b-vpuiq5wddw] {
        color: #e2e8f0;
        background: rgba(255, 255, 255, 0.06);
    }

.el-share-url-row[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.el-share-url[b-vpuiq5wddw] {
    flex: 1;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    color: #94a3b8;
    font-size: 11px;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-share-view[b-vpuiq5wddw],
.el-share-copy[b-vpuiq5wddw] {
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    text-decoration: none;
}

.el-share-view[b-vpuiq5wddw] {
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: #3498db;
}

    .el-share-view:hover[b-vpuiq5wddw] {
        background: rgba(52, 152, 219, 0.2);
    }

.el-share-copy[b-vpuiq5wddw] {
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

    .el-share-copy:hover[b-vpuiq5wddw] {
        background: rgba(46, 204, 113, 0.2);
    }

.el-share-copied[b-vpuiq5wddw] {
    background: rgba(46, 204, 113, 0.25) !important;
    border-color: rgba(46, 204, 113, 0.6) !important;
}

/* ===== TIMELINE HEADER ===== */
.el-timeline-header[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.el-timeline-title[b-vpuiq5wddw] {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.el-timeline-header-right[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.el-timeline-count[b-vpuiq5wddw] {
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ===== SYSTEM EVENTS TOGGLE ===== */
.el-toggle-btn[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #475569;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.2s;
}

    .el-toggle-btn:hover[b-vpuiq5wddw] {
        background: rgba(255, 255, 255, 0.08);
        color: #94a3b8;
    }

.el-toggle-active[b-vpuiq5wddw] {
    background: rgba(52, 152, 219, 0.12);
    border-color: rgba(52, 152, 219, 0.3);
    color: #3498db;
}

/* ===== EVENT TYPE FILTER CHIPS (2026-09-18) ===== */
.el-filter-row[b-vpuiq5wddw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.el-filter-chip[b-vpuiq5wddw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 5px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--chip-color, #64748b) 45%, transparent);
    background: color-mix(in srgb, var(--chip-color, #64748b) 14%, transparent);
    color: #cbd5e1;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease, background 0.15s ease;
}

    .el-filter-chip:hover[b-vpuiq5wddw] {
        background: color-mix(in srgb, var(--chip-color, #64748b) 26%, transparent);
    }

.el-filter-chip-off[b-vpuiq5wddw] {
    opacity: 0.4;
    border-color: rgba(255, 255, 255, 0.1);
    background: transparent;
}

    .el-filter-chip-off .el-filter-chip-label[b-vpuiq5wddw] {
        text-decoration: line-through;
        color: #64748b;
    }

.el-filter-chip-icon[b-vpuiq5wddw] {
    font-size: 11px;
    line-height: 1;
}

.el-filter-clear[b-vpuiq5wddw] {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(52, 152, 219, 0.35);
    background: rgba(52, 152, 219, 0.12);
    color: #7cc4f5;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
}

    .el-filter-clear:hover[b-vpuiq5wddw] {
        background: rgba(52, 152, 219, 0.25);
        color: #ffffff;
    }

/* ===== TIMELINE ===== */
.el-timeline[b-vpuiq5wddw] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    min-height: 0;
}

/* ===== HALF DIVIDER ===== */
.el-half-divider[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
}

    .el-half-divider[b-vpuiq5wddw]::before,
    .el-half-divider[b-vpuiq5wddw]::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.06);
    }

    .el-half-divider span[b-vpuiq5wddw] {
        color: #475569;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        white-space: nowrap;
    }

/* ===== EVENT ROW ===== */
.el-event[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    transition: background 0.1s ease;
    position: relative;
}

    .el-event:hover[b-vpuiq5wddw] {
        background: rgba(255, 255, 255, 0.02);
    }

.el-event-time[b-vpuiq5wddw] {
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Cascadia Code', monospace;
    min-width: 40px;
    text-align: right;
    flex-shrink: 0;
}

.el-event-icon-wrap[b-vpuiq5wddw] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.el-event-icon[b-vpuiq5wddw] {
    font-size: 13px;
    line-height: 1;
}

.el-event-details[b-vpuiq5wddw] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.el-event-top[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.el-event-type[b-vpuiq5wddw] {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.el-event-location-dot[b-vpuiq5wddw] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3498db;
    flex-shrink: 0;
}

.el-event-player[b-vpuiq5wddw] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-event-secondary[b-vpuiq5wddw] {
    color: #64748b;
    font-size: 11px;
}

.el-event-notes[b-vpuiq5wddw] {
    color: #475569;
    font-size: 11px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-event-team-color[b-vpuiq5wddw] {
    width: 3px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* ===== ▶ WATCH (event replay, 2026-09-18) ===== */
.el-event-watch-btn[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 1px solid rgba(52, 152, 219, 0.35);
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.12);
    color: #7cc4f5;
    cursor: pointer;
    padding: 0 0 0 1px;
    transition: background 0.15s ease, color 0.15s ease;
}

    .el-event-watch-btn:hover[b-vpuiq5wddw] {
        background: #3498db;
        color: #ffffff;
    }

.el-popup-badge-muted[b-vpuiq5wddw] {
    color: #64748b;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ===== ⋮ MENU BUTTON ===== */
.el-event-menu-wrap[b-vpuiq5wddw] {
    position: relative;
    flex-shrink: 0;
}

.el-event-menu-btn[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

    .el-event-menu-btn:hover[b-vpuiq5wddw] {
        background: rgba(255, 255, 255, 0.08);
        color: #94a3b8;
    }

/* ===== ⋮ POPUP ===== */
.el-event-popup[b-vpuiq5wddw] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 170px;
    background: #0e1e32;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    z-index: 300;
    overflow: hidden;
    animation: el-popup-in-b-vpuiq5wddw 0.12s ease-out;
}

@keyframes el-popup-in-b-vpuiq5wddw {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.el-popup-item[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: transparent;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s ease;
    text-align: left;
}

    .el-popup-item:hover:not(:disabled)[b-vpuiq5wddw] {
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
    }

.el-popup-item-delete[b-vpuiq5wddw] {
    color: #f87171;
}

    .el-popup-item-delete:hover:not(:disabled)[b-vpuiq5wddw] {
        background: rgba(231, 76, 60, 0.1);
        color: #ef4444;
    }

.el-popup-item-disabled[b-vpuiq5wddw] {
    opacity: 0.45;
    cursor: not-allowed !important;
}

.el-popup-divider[b-vpuiq5wddw] {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 2px 0;
}

.el-popup-badge[b-vpuiq5wddw] {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #f39c12;
    background: rgba(243, 156, 18, 0.12);
    border: 1px solid rgba(243, 156, 18, 0.25);
    border-radius: 4px;
    padding: 1px 5px;
}

/* ===== DELETE CONFIRM MODAL ===== */
.el-confirm-overlay[b-vpuiq5wddw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    animation: el-overlay-in-b-vpuiq5wddw 0.15s ease-out;
}

@keyframes el-overlay-in-b-vpuiq5wddw {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.el-confirm-modal[b-vpuiq5wddw] {
    background: #0e1e32;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
    padding: 28px 28px 24px;
    width: 360px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: el-modal-in-b-vpuiq5wddw 0.18s ease-out;
}

@keyframes el-modal-in-b-vpuiq5wddw {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.el-confirm-icon[b-vpuiq5wddw] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.el-confirm-title[b-vpuiq5wddw] {
    color: #f1f5f9;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
}

.el-confirm-body[b-vpuiq5wddw] {
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
    line-height: 1.6;
}

    .el-confirm-body strong[b-vpuiq5wddw] {
        color: #cbd5e1;
    }

.el-confirm-error[b-vpuiq5wddw] {
    color: #f87171;
    font-size: 12px;
    text-align: center;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    width: 100%;
}

.el-confirm-actions[b-vpuiq5wddw] {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.el-confirm-btn[b-vpuiq5wddw] {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

    .el-confirm-btn:disabled[b-vpuiq5wddw] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.el-confirm-cancel[b-vpuiq5wddw] {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

    .el-confirm-cancel:hover:not(:disabled)[b-vpuiq5wddw] {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }

.el-confirm-delete[b-vpuiq5wddw] {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #ffffff;
}

    .el-confirm-delete:hover:not(:disabled)[b-vpuiq5wddw] {
        filter: brightness(1.1);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(231, 76, 60, 0.4);
    }

/* ===== EMPTY TIMELINE ===== */
.el-timeline-empty[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    color: #334155;
    font-size: 13px;
    font-style: italic;
}

/* ===== SCROLLBAR ===== */
.el-timeline[b-vpuiq5wddw]::-webkit-scrollbar {
    width: 4px;
}

.el-timeline[b-vpuiq5wddw]::-webkit-scrollbar-track {
    background: transparent;
}

.el-timeline[b-vpuiq5wddw]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
}

    .el-timeline[b-vpuiq5wddw]::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.15);
    }

/* ===== EDIT EVENT DIALOG ===== */
.ee-readonly-pill[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--pill-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--pill-color) 25%, transparent);
    border-radius: 10px;
}

.ee-readonly-emoji[b-vpuiq5wddw] {
    font-size: 18px;
    line-height: 1;
}

.ee-readonly-label[b-vpuiq5wddw] {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
    flex: 1;
}

.ee-readonly-team[b-vpuiq5wddw] {
    font-size: 12px;
    font-weight: 600;
}

.ee-player-item[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ee-player-jersey[b-vpuiq5wddw] {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
}

.ee-field-map-wrap[b-vpuiq5wddw] {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 6px;
}

.ee-location-info[b-vpuiq5wddw] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
}

.ee-clear-location[b-vpuiq5wddw] {
    margin-left: 4px;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

    .ee-clear-location:hover[b-vpuiq5wddw] {
        color: #e74c3c;
        border-color: rgba(231, 76, 60, 0.3);
        background: rgba(231, 76, 60, 0.06);
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .el-quick-bar[b-vpuiq5wddw] {
        padding: 8px;
        gap: 4px;
    }

    .el-player-context[b-vpuiq5wddw] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding-right: 0;
        padding-bottom: 8px;
        margin-right: 0;
        margin-bottom: 4px;
    }

    .el-quick-btn[b-vpuiq5wddw] {
        padding: 6px 8px;
    }

    .el-confirm-modal[b-vpuiq5wddw] {
        padding: 20px 16px;
    }

    .el-action-bar[b-vpuiq5wddw] {
        gap: 6px;
        padding: 6px 8px;
    }

    .el-share-url[b-vpuiq5wddw] {
        display: none;
    }
}
/* /Components/Pages/GameComponents/EventVideoPopup.razor.rz.scp.css */
/* Event replay popup (moved here from GameTracker.razor.css, 2026-09-21).
   Fixed so scrolling the host page doesn't move it; wide enough for a 16:9
   picture to be useful, capped to the viewport on small screens. */
.evp-popup[b-fw50vfnnms] {
    position: fixed;
    right: 20px;
    bottom: 56px;
    width: 520px;
    max-width: calc(100vw - 32px);
    background: #0e1e32;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
    z-index: 400;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: evp-in-b-fw50vfnnms 0.16s ease-out;
}

@keyframes evp-in-b-fw50vfnnms {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.evp-header[b-fw50vfnnms] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.evp-title[b-fw50vfnnms] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.evp-event[b-fw50vfnnms] {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.evp-meta[b-fw50vfnnms] {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evp-close[b-fw50vfnnms] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

    .evp-close:hover[b-fw50vfnnms] {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }

.evp-body[b-fw50vfnnms] {
    padding: 10px 12px 8px;
}
/* /Components/Pages/GameComponents/FInalizeButton.razor.rz.scp.css */
.fg-container[b-jqs0gyjr2x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== FINALIZE BUTTON ===== */
.fg-btn[b-jqs0gyjr2x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #ffffff;
    white-space: nowrap;
}

    .fg-btn:disabled[b-jqs0gyjr2x] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .fg-btn:hover:not(:disabled)[b-jqs0gyjr2x] {
        transform: translateY(-1px);
    }

.fg-btn-finalize[b-jqs0gyjr2x] {
    background: linear-gradient(135deg, #8e44ad, #6c3483);
    box-shadow: 0 2px 8px rgba(142, 68, 173, 0.35);
}

    .fg-btn-finalize:hover:not(:disabled)[b-jqs0gyjr2x] {
        box-shadow: 0 4px 12px rgba(142, 68, 173, 0.5);
    }

/* ===== CONFIRM ROW ===== */
.fg-confirm[b-jqs0gyjr2x] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: rgba(142, 68, 173, 0.08);
    border: 1px solid rgba(142, 68, 173, 0.2);
    border-radius: 8px;
}

.fg-confirm-text[b-jqs0gyjr2x] {
    color: #cbd5e1;
    font-size: 12px;
    flex: 1;
    min-width: 180px;
}

.fg-btn-confirm[b-jqs0gyjr2x] {
    background: linear-gradient(135deg, #8e44ad, #6c3483);
    box-shadow: 0 2px 6px rgba(142, 68, 173, 0.3);
    font-size: 11px;
    padding: 6px 14px;
}

.fg-btn-cancel[b-jqs0gyjr2x] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    padding: 6px 12px;
    color: #64748b;
}

/* ===== FINAL BADGE ===== */
.fg-final-badge[b-jqs0gyjr2x] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.25);
    border-radius: 20px;
    color: #2ecc71;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ===== ERROR ===== */
.fg-error[b-jqs0gyjr2x] {
    color: #e74c3c;
    font-size: 11px;
    padding: 6px 12px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.15);
    border-radius: 6px;
}
/* /Components/Pages/GameComponents/FollowTeamDialog.razor.rz.scp.css */
/* ===== FOLLOW TEAM DIALOG (2026-10-01) ===== */

.ft-intro[b-x3cjrhjpm7] {
    margin: 0 0 14px;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
}

.ft-select[b-x3cjrhjpm7] {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 13px;
    padding: 9px 10px;
    border-radius: 10px;
}

.ft-select option[b-x3cjrhjpm7] {
    background: #0f1f33;
    color: #e2e8f0;
}

.ft-rel-row[b-x3cjrhjpm7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ft-rel-btn[b-x3cjrhjpm7] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.ft-rel-active[b-x3cjrhjpm7] {
    background: rgba(52, 152, 219, 0.2);
    border-color: #3498db;
    color: #ffffff;
}

.ft-done[b-x3cjrhjpm7] {
    text-align: center;
    padding: 12px 6px 4px;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.5;
}

.ft-done-icon[b-x3cjrhjpm7] {
    font-size: 36px;
    margin-bottom: 8px;
}
/* /Components/Pages/GameComponents/GameClock.razor.rz.scp.css */
/* ===== CONTAINER — horizontal layout ===== */
.gc-container[b-fjo5r9nx19] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    flex-wrap: wrap;
}

/* ===== CLOCK DISPLAY ===== */
.gc-display[b-fjo5r9nx19] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gc-time[b-fjo5r9nx19] {
    display: flex;
    align-items: center;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    user-select: none;
}

.gc-minutes[b-fjo5r9nx19],
.gc-seconds[b-fjo5r9nx19] {
    font-size: 40px;
    font-weight: 900;
    color: #e2e8f0;
    min-width: 50px;
    text-align: center;
    line-height: 1;
}

.gc-colon[b-fjo5r9nx19] {
    font-size: 34px;
    font-weight: 300;
    color: #475569;
    margin: 0 1px;
    line-height: 1;
}

.gc-colon-blink[b-fjo5r9nx19] {
    animation: gc-blink-b-fjo5r9nx19 1s step-end infinite;
}

.gc-time-running .gc-minutes[b-fjo5r9nx19],
.gc-time-running .gc-seconds[b-fjo5r9nx19] {
    color: #ffffff;
}

@keyframes gc-blink-b-fjo5r9nx19 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ===== HALF INDICATOR ===== */
.gc-half-indicator[b-fjo5r9nx19] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.gc-half-dot[b-fjo5r9nx19] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.gc-half-active[b-fjo5r9nx19] {
    background: #2ecc71;
    border-color: #2ecc71;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.4);
}

.gc-half-label[b-fjo5r9nx19] {
    color: #64748b;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ===== CONTROLS ===== */
.gc-controls[b-fjo5r9nx19] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.gc-btn[b-fjo5r9nx19] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #ffffff;
    white-space: nowrap;
}

    .gc-btn:disabled[b-fjo5r9nx19] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .gc-btn:hover:not(:disabled)[b-fjo5r9nx19] {
        transform: translateY(-1px);
    }

.gc-btn-start[b-fjo5r9nx19] {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

    .gc-btn-start:hover:not(:disabled)[b-fjo5r9nx19] {
        box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
    }

.gc-btn-pause[b-fjo5r9nx19] {
    background: rgba(243, 156, 18, 0.15);
    border: 1px solid rgba(243, 156, 18, 0.25);
    color: #f39c12;
    padding: 8px 10px;
}

    .gc-btn-pause:hover:not(:disabled)[b-fjo5r9nx19] {
        background: rgba(243, 156, 18, 0.25);
    }

.gc-btn-stop[b-fjo5r9nx19] {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

    .gc-btn-stop:hover:not(:disabled)[b-fjo5r9nx19] {
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    }

.gc-btn-adjust[b-fjo5r9nx19] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 10px;
    color: #64748b;
}

    .gc-btn-adjust:hover:not(:disabled)[b-fjo5r9nx19] {
        background: rgba(255, 255, 255, 0.1);
        color: #94a3b8;
    }

/* ===== MANUAL ADJUST ===== */
.gc-manual[b-fjo5r9nx19] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    width: 100%;
}

.gc-manual-sep[b-fjo5r9nx19] {
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
}

[b-fjo5r9nx19] .gc-manual-input .k-input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-family: 'Cascadia Code', monospace !important;
    text-align: center !important;
    height: 32px !important;
}

.gc-btn-set[b-fjo5r9nx19] {
    background: linear-gradient(135deg, #3498db, #2980b9);
    font-size: 11px;
    padding: 6px 12px;
}

.gc-btn-cancel-adjust[b-fjo5r9nx19] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    padding: 6px 10px;
    color: #64748b;
}

/* ===== ERROR ===== */
.gc-error[b-fjo5r9nx19] {
    color: #e74c3c;
    font-size: 11px;
    padding: 6px 12px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.15);
    border-radius: 6px;
    text-align: center;
    width: 100%;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .gc-container[b-fjo5r9nx19] {
        padding: 10px 12px;
        gap: 10px;
    }

    .gc-minutes[b-fjo5r9nx19],
    .gc-seconds[b-fjo5r9nx19] {
        font-size: 32px;
        min-width: 40px;
    }

    .gc-colon[b-fjo5r9nx19] {
        font-size: 26px;
    }

    .gc-controls[b-fjo5r9nx19] {
        margin-left: 0;
    }

    .gc-btn[b-fjo5r9nx19] {
        padding: 8px 10px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .gc-minutes[b-fjo5r9nx19],
    .gc-seconds[b-fjo5r9nx19] {
        font-size: 28px;
        min-width: 36px;
    }

    .gc-display[b-fjo5r9nx19] {
        gap: 8px;
    }
}
/* /Components/Pages/GameComponents/GameFieldMap.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.gfm-container[b-ts5pj19z0h] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ===== HEADER ===== */
.gfm-header[b-ts5pj19z0h] {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

/* ===== FILTERS BAR (below tab strip) ===== */
.gfm-filters-bar[b-ts5pj19z0h] {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.gfm-title[b-ts5pj19z0h] {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
    margin-right: 4px;
}

/* ===== TEAM FILTER CHIPS ===== */
.gfm-team-filters[b-ts5pj19z0h] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.gfm-team-chip[b-ts5pj19z0h] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 6px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    user-select: none;
}

    .gfm-team-chip:hover[b-ts5pj19z0h] {
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(255, 255, 255, 0.22);
        color: #ffffff;
    }

.gfm-chip-filtered[b-ts5pj19z0h] {
    opacity: 0.38;
    text-decoration: line-through;
}

    .gfm-chip-filtered:hover[b-ts5pj19z0h] {
        opacity: 0.65;
        text-decoration: none;
    }

.gfm-chip-dot[b-ts5pj19z0h] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-block;
}

.gfm-chip-name[b-ts5pj19z0h] {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vertical divider between team chips and legend */
.gfm-header-divider[b-ts5pj19z0h] {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    margin: 0 4px;
}

/* ===== EVENT TYPE LEGEND ===== */
.gfm-legend[b-ts5pj19z0h] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.gfm-legend-item[b-ts5pj19z0h] {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    user-select: none;
}

    .gfm-legend-item:hover[b-ts5pj19z0h] {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.08);
    }

.gfm-legend-filtered[b-ts5pj19z0h] {
    opacity: 0.4;
}

.gfm-legend-shape[b-ts5pj19z0h] {
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.gfm-legend-label[b-ts5pj19z0h] {
    color: #64748b;
    font-size: 10px;
    white-space: nowrap;
    transition: color 0.2s;
}

.gfm-legend-label-filtered[b-ts5pj19z0h] {
    color: #334155;
    text-decoration: line-through;
}

/* ===== CLEAR FILTER BUTTON ===== */
.gfm-clear-filter[b-ts5pj19z0h] {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 6px;
    background: rgba(52, 152, 219, 0.08);
    color: #3498db;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .gfm-clear-filter:hover[b-ts5pj19z0h] {
        background: rgba(52, 152, 219, 0.15);
    }

/* ===== TAB STRIP ===== */
[b-ts5pj19z0h] .gfm-tabstrip {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    [b-ts5pj19z0h] .gfm-tabstrip .k-tabstrip-items-wrapper {
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    [b-ts5pj19z0h] .gfm-tabstrip .k-tabstrip-content {
        flex: 1;
        min-height: 0;
        padding: 0;
        background: transparent;
        border: none;
    }

    [b-ts5pj19z0h] .gfm-tabstrip .k-item {
        color: #64748b;
        font-size: 12px;
        font-weight: 600;
    }

        [b-ts5pj19z0h] .gfm-tabstrip .k-item.k-active {
            color: #ffffff;
        }

/* ===== TAB CONTENT ===== */
.gfm-tab-content[b-ts5pj19z0h] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== FIELD LAYOUT ===== */
.gfm-field-layout[b-ts5pj19z0h] {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    padding: 8px;
    gap: 8px;
    overflow: hidden;
}

/* ===== SIDE LABELS ===== */
.gfm-side-label[b-ts5pj19z0h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    width: 70px;
}

.gfm-side-team[b-ts5pj19z0h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}

.gfm-side-name[b-ts5pj19z0h] {
    font-size: 11px;
    font-weight: 700;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    max-height: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gfm-side-right .gfm-side-name[b-ts5pj19z0h] {
    transform: rotate(0deg);
}

/* ===== SWAP BUTTON ===== */
.gfm-swap-btn[b-ts5pj19z0h] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .gfm-swap-btn:hover[b-ts5pj19z0h] {
        background: rgba(52, 152, 219, 0.15);
        border-color: rgba(52, 152, 219, 0.3);
        color: #3498db;
        transform: rotate(180deg);
    }

/* ===== FIELD WRAPPER ===== */
.gfm-field-wrapper[b-ts5pj19z0h] {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Double-click hint — cursor changes over field */
.gfm-field[b-ts5pj19z0h] {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 6px;
    cursor: zoom-in; /* signals double-click zoom is available */
}

/* ===== MARKERS ===== */
.gfm-marker[b-ts5pj19z0h] {
    cursor: pointer;
}

    .gfm-marker circle[b-ts5pj19z0h],
    .gfm-marker path[b-ts5pj19z0h],
    .gfm-marker text[b-ts5pj19z0h] {
        transition: all 0.15s ease;
    }

/* ===== HOVER POPUP ===== */
.gfm-popup[b-ts5pj19z0h] {
    position: absolute;
    width: 210px;
    background: #0e1e32;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    pointer-events: none;
    z-index: 100;
    animation: gfm-popup-in-b-ts5pj19z0h 0.15s ease-out;
}

@keyframes gfm-popup-in-b-ts5pj19z0h {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gfm-popup-header[b-ts5pj19z0h] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
}

.gfm-popup-shape-wrap[b-ts5pj19z0h] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.gfm-popup-header-info[b-ts5pj19z0h] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.gfm-popup-type[b-ts5pj19z0h] {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.gfm-popup-team-name[b-ts5pj19z0h] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gfm-popup-body[b-ts5pj19z0h] {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gfm-popup-row[b-ts5pj19z0h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gfm-popup-label[b-ts5pj19z0h] {
    color: #475569;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.gfm-popup-value[b-ts5pj19z0h] {
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gfm-popup-time[b-ts5pj19z0h] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    color: #94a3b8;
}

.gfm-popup-notes[b-ts5pj19z0h] {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #64748b;
    font-size: 11px;
    font-style: italic;
    line-height: 1.4;
}

/* ===== ZOOM WINDOW ===== */
[b-ts5pj19z0h] .gfm-zoom-window .k-window {
    background: #0e1e32 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden;
    animation: gfm-zoom-in-b-ts5pj19z0h 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes gfm-zoom-in-b-ts5pj19z0h {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

[b-ts5pj19z0h] .gfm-zoom-window .k-window-titlebar {
    background: linear-gradient(90deg, #0a1628, #0f2744) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 12px 16px !important;
}

[b-ts5pj19z0h] .gfm-zoom-window .k-window-title {
    width: 100% !important;
    padding: 0 !important;
}

[b-ts5pj19z0h] .gfm-zoom-window .k-window-content {
    background: #0e1e32 !important;
    padding: 16px !important;
}

/* Title bar layout */
.gfm-zoom-title-bar[b-ts5pj19z0h] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.gfm-zoom-icon[b-ts5pj19z0h] {
    font-size: 18px;
    line-height: 1;
}

.gfm-zoom-brand[b-ts5pj19z0h] {
    line-height: 1;
}

.gfm-zoom-white[b-ts5pj19z0h] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.gfm-zoom-accent[b-ts5pj19z0h] {
    color: #3498db;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.gfm-zoom-pipe[b-ts5pj19z0h] {
    color: rgba(255, 255, 255, 0.15);
    font-size: 16px;
    font-weight: 300;
    margin: 0 2px;
}

.gfm-zoom-label[b-ts5pj19z0h] {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* "Filtered" badge in zoom title */
.gfm-zoom-badge[b-ts5pj19z0h] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.25);
    border-radius: 20px;
    color: #3498db;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-left: 4px;
}

/* ===== ZOOM CONTENT ===== */
.gfm-zoom-content[b-ts5pj19z0h] {
    width: 100%;
    height: 100%;
    min-height: 480px;
}

/* ===== OVERLAY BACKDROP ===== */
[b-ts5pj19z0h] .gfm-zoom-window ~ .k-overlay,
[b-ts5pj19z0h] .k-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .gfm-legend[b-ts5pj19z0h] {
        display: none;
    }

    .gfm-side-label[b-ts5pj19z0h] {
        width: 40px;
    }

    .gfm-side-name[b-ts5pj19z0h] {
        font-size: 9px;
        max-height: 80px;
    }

    .gfm-popup[b-ts5pj19z0h] {
        width: 170px;
    }

    [b-ts5pj19z0h] .gfm-zoom-window .k-window {
        width: calc(100vw - 24px) !important;
        max-width: 100% !important;
        border-radius: 12px !important;
    }
}
/* /Components/Pages/GameComponents/GameRoster.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.gr-container[b-ejpfqaqm5r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
    height: 100%;
}

/* ===== TEAM PANEL ===== */
.gr-team[b-ejpfqaqm5r] {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
}

.gr-team-header[b-ejpfqaqm5r] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.gr-team-title[b-ejpfqaqm5r] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.gr-team-name[b-ejpfqaqm5r] {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-team-label[b-ejpfqaqm5r] {
    color: #475569;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gr-team-stats[b-ejpfqaqm5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.gr-on-field-count[b-ejpfqaqm5r] {
    color: #2ecc71;
    font-size: 12px;
    font-weight: 800;
    font-family: 'Cascadia Code', monospace;
}

.gr-on-field-label[b-ejpfqaqm5r] {
    color: #475569;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Replaces the on-field count for a team tracking by halves, where nobody is
   ever on the field and a "0 / 14" would read as a fault rather than a choice.
   Blue rather than the count's green: it states how this team is being tracked,
   it isn't a live tally. */
.gr-mode-badge[b-ejpfqaqm5r] {
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid rgba(52, 152, 219, 0.35);
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.gr-add-btn[b-ejpfqaqm5r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .gr-add-btn:hover[b-ejpfqaqm5r] {
        background: rgba(52, 152, 219, 0.15);
        border-color: rgba(52, 152, 219, 0.3);
        color: #3498db;
    }

.gr-lineup-btn:hover[b-ejpfqaqm5r] {
    background: rgba(46, 204, 113, 0.15) !important;
    border-color: rgba(46, 204, 113, 0.3) !important;
    color: #2ecc71 !important;
}

/* ===== PLAYER LIST ===== */
.gr-player-list[b-ejpfqaqm5r] {
    display: flex;
    flex-direction: column;
    overflow: visible;
    overflow-y: auto; /* enables vertical scrolling */
    padding-right: 6px; /* optional: prevents scrollbar overlap */
}

.gr-player[b-ejpfqaqm5r] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

    .gr-player:hover[b-ejpfqaqm5r] {
        background: rgba(255, 255, 255, 0.04);
    }

    .gr-player:last-child[b-ejpfqaqm5r] {
        border-bottom: none;
    }

/* On field players */
.gr-player-on-field[b-ejpfqaqm5r] {
    background: rgba(46, 204, 113, 0.04);
}

    .gr-player-on-field:hover[b-ejpfqaqm5r] {
        background: rgba(46, 204, 113, 0.08);
    }

/* Bench players. 2026-10-02: was opacity .7 on top of a grey-on-grey jersey, which on a
   sideline tablet in daylight made the numbers hard to read; the row stays slightly
   quieter than an on-field one but the number itself is now full-contrast. */
.gr-player-bench[b-ejpfqaqm5r] {
    opacity: 0.92;
}

    .gr-player-bench:hover[b-ejpfqaqm5r] {
        opacity: 1;
    }

/* Selected */
.gr-player-selected[b-ejpfqaqm5r] {
    background: rgba(52, 152, 219, 0.12) !important;
    border-left: 3px solid #3498db;
    padding-left: 7px;
}

/* ===== JERSEY NUMBER ===== */
/* 2026-10-02: bigger and higher-contrast (Jim, after the 2026-10-01 game). */
.gr-player-jersey[b-ejpfqaqm5r] {
    width: 34px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    flex-shrink: 0;
    font-family: 'Cascadia Code', monospace;
    letter-spacing: -0.5px;
}

/* On-field: team primary behind team secondary (inline). A dark outline round the
   digits keeps them readable when a team's two colours are close. */
.gr-jersey-active[b-ejpfqaqm5r] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 1px 1px rgba(0, 0, 0, 0.9);
}

.gr-jersey-bench[b-ejpfqaqm5r] {
    background: rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* ===== PLAYER INFO ===== */
.gr-player-info[b-ejpfqaqm5r] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.gr-player-name[b-ejpfqaqm5r] {
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-player-status[b-ejpfqaqm5r] {
    font-size: 9px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

.gr-status-playing[b-ejpfqaqm5r] {
    color: #2ecc71;
}

.gr-status-bench[b-ejpfqaqm5r] {
    color: #94a3b8;
}

/* Pulse dot for active players */
.gr-pulse-dot[b-ejpfqaqm5r] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2ecc71;
    animation: gr-pulse-b-ejpfqaqm5r 2s ease-in-out infinite;
}

@keyframes gr-pulse-b-ejpfqaqm5r {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* ===== SUB BUTTONS ===== */
.gr-sub-btn[b-ejpfqaqm5r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 0.85;
}

    .gr-sub-btn:hover[b-ejpfqaqm5r] {
        opacity: 1;
        transform: scale(1.1);
    }

/* In flight (2026-10-03): the pressed button shows a spinner for the second or so the API
   takes, and every other sub button is disabled meanwhile, so a tap is never in doubt. */
.gr-sub-btn:disabled[b-ejpfqaqm5r] {
    opacity: 0.45;
    cursor: default;
    transform: none;
}

.gr-sub-busy[b-ejpfqaqm5r],
.gr-sub-busy:disabled[b-ejpfqaqm5r] {
    opacity: 1;
}

.gr-spinner[b-ejpfqaqm5r] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: gr-spin-b-ejpfqaqm5r 0.7s linear infinite;
}

@keyframes gr-spin-b-ejpfqaqm5r {
    to { transform: rotate(360deg); }
}

/* Halves mode: this player is already counted for the current half (2026-10-02). */
.gr-sub-done[b-ejpfqaqm5r] {
    background: rgba(46, 204, 113, 0.10);
    color: #2ecc71;
    opacity: 0.55;
    cursor: default;
}

    .gr-sub-done:hover[b-ejpfqaqm5r] {
        opacity: 0.55;
        transform: none;
    }

.gr-sub-in[b-ejpfqaqm5r] {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

    .gr-sub-in:hover[b-ejpfqaqm5r] {
        background: rgba(46, 204, 113, 0.3);
    }

.gr-sub-out[b-ejpfqaqm5r] {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

    .gr-sub-out:hover[b-ejpfqaqm5r] {
        background: rgba(231, 76, 60, 0.3);
    }

/* ===== EMPTY STATE ===== */
.gr-empty[b-ejpfqaqm5r] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    color: #334155;
    font-size: 12px;
    font-style: italic;
}

/* ===== ERROR ===== */
.gr-error[b-ejpfqaqm5r] {
    color: #e74c3c;
    font-size: 11px;
    padding: 6px 12px;
    margin: 0 12px 12px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.15);
    border-radius: 6px;
    text-align: center;
}

/* ===== SELECTED PLAYER BANNER ===== */
.gr-selected-banner[b-ejpfqaqm5r] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 12px 12px;
    padding: 8px 12px;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.2);
    border-left: 4px solid;
    border-radius: 8px;
    animation: gr-slide-in-b-ejpfqaqm5r 0.2s ease-out;
}

@keyframes gr-slide-in-b-ejpfqaqm5r {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gr-selected-jersey[b-ejpfqaqm5r] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
    font-family: 'Cascadia Code', monospace;
}

.gr-selected-info[b-ejpfqaqm5r] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.gr-selected-name[b-ejpfqaqm5r] {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-selected-team[b-ejpfqaqm5r] {
    color: #64748b;
    font-size: 10px;
}

.gr-deselect-btn[b-ejpfqaqm5r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .gr-deselect-btn:hover[b-ejpfqaqm5r] {
        background: rgba(231, 76, 60, 0.15);
        border-color: rgba(231, 76, 60, 0.3);
        color: #e74c3c;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .gr-container[b-ejpfqaqm5r] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
    }

    .gr-sub-btn[b-ejpfqaqm5r] {
        opacity: 1;
    }
}

/* ===== EDIT BUTTON ===== */
.gr-edit-btn[b-ejpfqaqm5r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 0;
}

.gr-player:hover .gr-edit-btn[b-ejpfqaqm5r] {
    opacity: 1;
    color: #64748b;
}

.gr-edit-btn:hover[b-ejpfqaqm5r] {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db !important;
}
/* /Components/Pages/GameComponents/GameScoreboard.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.gs-container[b-xndlv09sxr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    height: 100%;
}

/* ===== TEAMS ===== */
.gs-team[b-xndlv09sxr] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.gs-home[b-xndlv09sxr] {
    justify-content: flex-end;
}

.gs-visitor[b-xndlv09sxr] {
    justify-content: flex-start;
}

.gs-team-color[b-xndlv09sxr] {
    width: 5px;
    height: 40px;
    border-radius: 3px;
    flex-shrink: 0;
}

.gs-team-info[b-xndlv09sxr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gs-visitor-info[b-xndlv09sxr] {
    text-align: right;
}

.gs-team-name[b-xndlv09sxr] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-team-meta[b-xndlv09sxr] {
    color: #475569;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== FOLLOW (public watch page, 2026-10-01) ===== */
.gs-team-meta[b-xndlv09sxr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gs-visitor-info .gs-team-meta[b-xndlv09sxr] {
    justify-content: flex-end;
}

.gs-follow-btn[b-xndlv09sxr] {
    appearance: none;
    background: rgba(52, 152, 219, 0.14);
    border: 1px solid rgba(52, 152, 219, 0.4);
    color: #7cc4f5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: none;
    padding: 1px 7px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.5;
}

.gs-follow-btn:hover[b-xndlv09sxr] {
    background: rgba(52, 152, 219, 0.28);
    color: #ffffff;
}

.gs-follow-help-wrap[b-xndlv09sxr] {
    position: relative;
    display: flex;
    justify-content: center;
}

.gs-follow-help[b-xndlv09sxr] {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: transparent;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.gs-follow-help:hover[b-xndlv09sxr] {
    color: #ffffff;
    border-color: #ffffff;
}

.gs-follow-pop[b-xndlv09sxr] {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    z-index: 20;
    background: #0f1f33;
    border: 1px solid rgba(52, 152, 219, 0.45);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    text-align: left;
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.5;
}

.gs-follow-pop strong[b-xndlv09sxr] {
    display: block;
    color: #ffffff;
    font-size: 13px;
    margin-bottom: 4px;
}

.gs-follow-pop p[b-xndlv09sxr] {
    margin: 0 0 8px;
    color: #cbd5e1;
}

.gs-follow-pop-close[b-xndlv09sxr] {
    appearance: none;
    background: #3498db;
    border: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
}

/* ===== SCORE ===== */
.gs-score-area[b-xndlv09sxr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 100px;
}

.gs-score[b-xndlv09sxr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gs-score-value[b-xndlv09sxr] {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    min-width: 30px;
    text-align: center;
}

.gs-score-separator[b-xndlv09sxr] {
    color: #334155;
    font-size: 24px;
    font-weight: 300;
}

/* ===== STATUS BADGE ===== */
.gs-status-badge[b-xndlv09sxr] {
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-scheduled[b-xndlv09sxr] {
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.status-1st-half[b-xndlv09sxr] {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.2);
    animation: gs-pulse-b-xndlv09sxr 2s ease-in-out infinite;
}

.status-halftime[b-xndlv09sxr] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.2);
}

.status-2nd-half[b-xndlv09sxr] {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.2);
    animation: gs-pulse-b-xndlv09sxr 2s ease-in-out infinite;
}

.status-final[b-xndlv09sxr] {
    background: rgba(149, 165, 166, 0.12);
    color: #95a5a6;
    border: 1px solid rgba(149, 165, 166, 0.2);
}

@keyframes gs-pulse-b-xndlv09sxr {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .gs-container[b-xndlv09sxr] {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }

    .gs-home[b-xndlv09sxr],
    .gs-visitor[b-xndlv09sxr] {
        justify-content: center;
    }

    .gs-team-info[b-xndlv09sxr],
    .gs-visitor-info[b-xndlv09sxr] {
        text-align: center;
    }

    .gs-team-name[b-xndlv09sxr] {
        font-size: 14px;
    }

    .gs-score-value[b-xndlv09sxr] {
        font-size: 28px;
    }

    .gs-score-area[b-xndlv09sxr] {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .gs-score-value[b-xndlv09sxr] {
        font-size: 24px;
    }

    .gs-team-color[b-xndlv09sxr] {
        display: none;
    }
}
/* /Components/Pages/GameComponents/LiveStreamPlayer.razor.rz.scp.css */
/* ===== LIVE STREAM PLAYER ===== */

.lsp-container[b-jhrtjatn6q] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ===== EMPTY / LOADING ===== */

.lsp-empty[b-jhrtjatn6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-height: 64px;
    padding: 12px;
    color: #64748b;
    font-size: 12px;
    text-align: center;
}

.lsp-empty-icon[b-jhrtjatn6q] {
    font-size: 20px;
}

.lsp-spinner[b-jhrtjatn6q] {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(52, 152, 219, 0.2);
    border-top-color: #3498db;
    border-radius: 50%;
    animation: lsp-spin-b-jhrtjatn6q 0.8s linear infinite;
}

@keyframes lsp-spin-b-jhrtjatn6q {
    to {
        transform: rotate(360deg);
    }
}

/* ===== STATUS STRIP (above the video, 2026-09-18) =====
   Live/delayed badge on the left, camera picker in the middle, viewer count
   on the right. Nothing sits over the picture any more. */

.lsp-topbar[b-jhrtjatn6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    padding: 0 2px 8px;
}

.lsp-topbar-left[b-jhrtjatn6q],
.lsp-topbar-right[b-jhrtjatn6q] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.lsp-topbar-right[b-jhrtjatn6q] {
    margin-left: auto;
}

/* ===== LIVE BADGE ===== */

.lsp-live-badge[b-jhrtjatn6q] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid #e74c3c;
    color: #ff6b5b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.lsp-live-dot[b-jhrtjatn6q] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e74c3c;
    animation: lsp-pulse-b-jhrtjatn6q 1.2s ease-in-out infinite;
}

@keyframes lsp-pulse-b-jhrtjatn6q {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* Shown instead of the red LIVE badge when playback has fallen behind the
   live edge — e.g. the viewer joined mid-recording (playback starts from
   the beginning of the recording, not the live edge), paused, or rewound. */
.lsp-live-badge-delayed[b-jhrtjatn6q] {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
    color: #fbbf24;
}

.lsp-live-dot-delayed[b-jhrtjatn6q] {
    background: #f59e0b;
    animation: none;
}

/* A finished recording (no live edge to speak of). */
.lsp-vod-badge[b-jhrtjatn6q] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ===== VIEWER COUNT ===== */

.lsp-viewers[b-jhrtjatn6q] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.lsp-viewers-dot[b-jhrtjatn6q] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e74c3c;
    animation: lsp-viewers-pulse-b-jhrtjatn6q 2s infinite;
}

@keyframes lsp-viewers-pulse-b-jhrtjatn6q {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* ===== VIDEO ===== */

.lsp-video-wrap[b-jhrtjatn6q] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

.lsp-video[b-jhrtjatn6q] {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
}

/* ===== PERIOD PICKER (2026-09-30) ===== */
/* The halves. Squarer than the angle pills so the two rows read as
   different things: which half, then which camera. */

.lsp-periods[b-jhrtjatn6q] {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    padding: 2px;
    border-radius: 9px;
    background: rgba(11, 25, 41, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.lsp-period-btn[b-jhrtjatn6q] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.lsp-period-btn:hover[b-jhrtjatn6q] {
    color: #e2e8f0;
}

.lsp-period-active[b-jhrtjatn6q] {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* ===== ANGLE SELECTOR (in the status strip) ===== */

.lsp-angles[b-jhrtjatn6q] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

.lsp-angle-btn[b-jhrtjatn6q] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(11, 25, 41, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.lsp-angle-btn:hover[b-jhrtjatn6q] {
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.25);
}

.lsp-angle-active[b-jhrtjatn6q] {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
}

.lsp-angle-dot[b-jhrtjatn6q] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e74c3c;
    flex-shrink: 0;
}

/* ===== MULTI-VIEW (2026-09-23) ===== */

.lsp-multi-btn[b-jhrtjatn6q] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(11, 25, 41, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    margin-right: 10px;
    transition: all 0.15s;
}

    .lsp-multi-btn:hover[b-jhrtjatn6q] {
        color: #e2e8f0;
        border-color: rgba(255, 255, 255, 0.25);
    }

.lsp-multi-active[b-jhrtjatn6q] {
    background: rgba(52, 152, 219, 0.2);
    border-color: #3498db;
    color: #ffffff;
}

/* The other cameras, stacked in the bottom-right corner of the main picture. */
.lsp-thumbs[b-jhrtjatn6q] {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 30%;
    max-width: 280px;
    min-width: 110px;
    z-index: 3;
}

.lsp-thumb[b-jhrtjatn6q] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: #000;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
    transition: border-color 0.15s, transform 0.15s;
}

    .lsp-thumb:hover[b-jhrtjatn6q] {
        border-color: #3498db;
        transform: scale(1.03);
    }

.lsp-thumb-video[b-jhrtjatn6q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.lsp-thumb-placeholder[b-jhrtjatn6q] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lsp-thumb-label[b-jhrtjatn6q] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 14px 6px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Room for the thumbnails on a phone: a touch bigger share of a small picture. */
@media (max-width: 520px) {
    .lsp-thumbs[b-jhrtjatn6q] {
        width: 36%;
        right: 6px;
        bottom: 6px;
        gap: 5px;
    }

    .lsp-thumb-label[b-jhrtjatn6q] {
        font-size: 10px;
        padding: 10px 5px 3px;
    }

    .lsp-multi-btn span[b-jhrtjatn6q] {
        display: none;
    }
}

/* ===== SCRUBBER ===== */
/* Position/labels are updated entirely from JS (see wireScrubber in
   livestream.js) driven by native <video> events — no Blazor round trips. */

.lsp-scrubber[b-jhrtjatn6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 2px 0;
}

.lsp-time-current[b-jhrtjatn6q],
.lsp-time-total[b-jhrtjatn6q] {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    min-width: 34px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.lsp-progress-track[b-jhrtjatn6q] {
    position: relative;
    flex: 1;
    height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.lsp-progress-track[b-jhrtjatn6q]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
}

.lsp-progress-buffered[b-jhrtjatn6q],
.lsp-progress-fill[b-jhrtjatn6q] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    border-radius: 2px;
    width: 0%;
}

.lsp-progress-buffered[b-jhrtjatn6q] {
    background: rgba(255, 255, 255, 0.28);
}

.lsp-progress-fill[b-jhrtjatn6q] {
    background: #3498db;
}

.lsp-progress-thumb[b-jhrtjatn6q] {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3498db;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* ===== SYNC POINT (2026-09-25) ===== */

.lsp-sync-btn[b-jhrtjatn6q] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    margin-right: 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .lsp-sync-btn:hover[b-jhrtjatn6q],
    .lsp-sync-btn-on[b-jhrtjatn6q] {
        background: rgba(52, 152, 219, 0.18);
        border-color: rgba(52, 152, 219, 0.5);
        color: #ffffff;
    }

    .lsp-sync-btn-set[b-jhrtjatn6q] {
        border-color: rgba(46, 204, 113, 0.6);
        color: #a7f3d0;
    }

.lsp-sync-panel[b-jhrtjatn6q] {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.28);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lsp-sync-text[b-jhrtjatn6q] {
    font-size: 12.5px;
    line-height: 1.5;
    color: #cbd5e1;
}

    .lsp-sync-text strong[b-jhrtjatn6q],
    .lsp-sync-text b[b-jhrtjatn6q] {
        color: #ffffff;
    }

.lsp-sync-current[b-jhrtjatn6q] {
    display: block;
    color: #a7f3d0;
    font-size: 12px;
}

.lsp-sync-actions[b-jhrtjatn6q] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lsp-sync-action[b-jhrtjatn6q] {
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    .lsp-sync-action:disabled[b-jhrtjatn6q] {
        opacity: 0.5;
        cursor: default;
    }

.lsp-sync-action-primary[b-jhrtjatn6q] {
    background: #3498db;
    border-color: #3498db;
    color: #ffffff;
}

.lsp-sync-message[b-jhrtjatn6q] {
    font-size: 12px;
    color: #a7f3d0;
}

.lsp-angle-cut[b-jhrtjatn6q] {
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(243, 156, 18, 0.18);
    color: #f6c177;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ===== ERROR ===== */

.lsp-error[b-jhrtjatn6q] {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 8px;
    color: #ff8a75;
    font-size: 12px;
}

/* ===== TRANSPORT CONTROLS ===== */
/* Three-part row: a left slot (Go live), the centred transport buttons, and
   a right slot (fullscreen). The side slots share one flex-basis so the
   play button stays exactly centred whether or not Go live is showing. */

.lsp-controls[b-jhrtjatn6q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 12px 0 4px;
}

.lsp-controls-side[b-jhrtjatn6q] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    min-width: 0;
}

.lsp-controls-side-left[b-jhrtjatn6q] {
    justify-content: flex-start;
}

.lsp-controls-side-right[b-jhrtjatn6q] {
    justify-content: flex-end;
}

.lsp-btn[b-jhrtjatn6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.lsp-btn span[b-jhrtjatn6q] {
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
}

.lsp-btn:hover[b-jhrtjatn6q] {
    background: rgba(255, 255, 255, 0.12);
}

.lsp-btn:active[b-jhrtjatn6q] {
    transform: scale(0.94);
}

.lsp-btn-play[b-jhrtjatn6q] {
    width: 52px;
    height: 52px;
    background: #3498db;
    border-color: #3498db;
}

.lsp-btn-play:hover[b-jhrtjatn6q] {
    background: #2f88c4;
}

/* Go live: quiet while already at the live edge, lit up when behind. */
.lsp-live-btn[b-jhrtjatn6q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.lsp-live-btn-dot[b-jhrtjatn6q] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.lsp-live-btn-at-edge[b-jhrtjatn6q] {
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #ff8a80;
    cursor: default;
}

.lsp-live-btn-behind[b-jhrtjatn6q] {
    background: #e74c3c;
    border: 1px solid #e74c3c;
    color: #ffffff;
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6);
    animation: lsp-golive-pulse-b-jhrtjatn6q 1.6s ease-out infinite;
}

.lsp-live-btn-behind:hover[b-jhrtjatn6q] {
    background: #d6412f;
}

@keyframes lsp-golive-pulse-b-jhrtjatn6q {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* Fullscreen toggle. */
.lsp-fs-btn[b-jhrtjatn6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    cursor: pointer;
    transition: background 0.15s;
}

.lsp-fs-btn:hover[b-jhrtjatn6q] {
    background: rgba(255, 255, 255, 0.12);
}

.lsp-fs-icon-exit[b-jhrtjatn6q] {
    display: none;
}

/* ===== FULLSCREEN =====
   The whole player container goes fullscreen (so the transport controls and
   Go live stay available), not just the <video>. livestream.js adds
   lsp-is-fullscreen from the fullscreenchange event. */

.lsp-container.lsp-is-fullscreen[b-jhrtjatn6q] {
    background: #000;
    padding: 12px 16px;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
}

.lsp-is-fullscreen .lsp-topbar[b-jhrtjatn6q] {
    display: none;
}

.lsp-is-fullscreen .lsp-video-wrap[b-jhrtjatn6q] {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
}

.lsp-is-fullscreen .lsp-video[b-jhrtjatn6q] {
    object-fit: contain;
}

.lsp-is-fullscreen .lsp-fs-icon-enter[b-jhrtjatn6q] {
    display: none;
}

.lsp-is-fullscreen .lsp-fs-icon-exit[b-jhrtjatn6q] {
    display: inline;
}

/* Shown over the (empty) video element between a recording stopping and
   Cloudflare's recording becoming playable. */
.lsp-processing[b-jhrtjatn6q] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    text-align: center;
    color: #cbd5e1;
    font-size: 0.9rem;
    background: rgba(11, 25, 41, 0.85);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 520px) {
    .lsp-topbar[b-jhrtjatn6q] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .lsp-topbar-right[b-jhrtjatn6q] {
        margin-left: 0;
    }

    .lsp-controls[b-jhrtjatn6q] {
        gap: 10px;
    }

    .lsp-live-btn[b-jhrtjatn6q] {
        padding: 6px 9px;
        font-size: 10px;
    }
}
/* /Components/Pages/GameComponents/MatchTimePicker.razor.rz.scp.css */
/* ===================================================================
   MatchTimePicker.razor.css  (rebuilt 2026-09-20)
   One mm:ss field with nudge buttons and an optional on-screen keypad.
   Touch targets are 44px so it works on a tablet at the field.
   =================================================================== */

.mtp-wrapper[b-dsu207is9o] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    min-width: 0;          /* never force a grid/flex parent wider than its column */
}

.mtp-row[b-dsu207is9o] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── The field ─────────────────────────────────────────────────── */

.mtp-field-wrap[b-dsu207is9o] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.mtp-time-input[b-dsu207is9o] {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 0 12px;
    /* Light field, dark digits (2026-09-20) -- matches the event-type and
       player pills and the Half box in the event dialogs. Solid, so the
       value stays readable whatever sits behind it. */
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #0f172a;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    text-align: center;
    letter-spacing: 1px;
    outline: none;
    caret-color: #3498db;
}

    .mtp-time-input:focus[b-dsu207is9o] {
        border-color: #3498db;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
    }

    .mtp-time-input[b-dsu207is9o]::placeholder {
        color: #94a3b8;
        font-weight: 600;
        letter-spacing: 0;
    }

.mtp-total[b-dsu207is9o] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    pointer-events: none;
}

/* ── Nudge buttons (row 2, four equal cells) ───────────────────── */

.mtp-nudges[b-dsu207is9o] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.mtp-nudge[b-dsu207is9o] {
    height: 40px;
    min-width: 0;
    padding: 0 4px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .mtp-nudge:hover[b-dsu207is9o],
    .mtp-nudge:active[b-dsu207is9o] {
        background: rgba(52, 152, 219, 0.14);
        border-color: rgba(52, 152, 219, 0.35);
        color: #ffffff;
    }

/* ── Keypad toggle ─────────────────────────────────────────────── */

.mtp-keypad-toggle[b-dsu207is9o] {
    height: 44px;
    width: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #64748b;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .mtp-keypad-toggle:hover[b-dsu207is9o] {
        color: #cbd5e1;
    }

.mtp-keypad-toggle-on[b-dsu207is9o] {
    background: rgba(52, 152, 219, 0.18);
    border-color: rgba(52, 152, 219, 0.4);
    color: #7cc4f5;
}

/* ── On-screen keypad ──────────────────────────────────────────── */

.mtp-keypad[b-dsu207is9o] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    background: #0e1e32;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.mtp-key[b-dsu207is9o] {
    height: 42px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    .mtp-key:active[b-dsu207is9o] {
        background: rgba(52, 152, 219, 0.25);
        border-color: rgba(52, 152, 219, 0.5);
    }

.mtp-key-alt[b-dsu207is9o] {
    color: #f39c12;
    font-family: inherit;
}

.mtp-key-ok[b-dsu207is9o] {
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
    font-family: inherit;
}
/* /Components/Pages/GameComponents/SoccerField.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.sf-container[b-m1i16mgsvg] {
    position: relative; /* ← popup is positioned relative to this */
    width: 100%;
    height: 100%;
}

/* ===== FIELD SVG ===== */
.sf-field[b-m1i16mgsvg] {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 8px;
    user-select: none;
}

/* Default cursor — no placement mode */
.sf-field[b-m1i16mgsvg] {
    cursor: default;
}

/* Crosshair only when placing a new event */
.sf-field-placement[b-m1i16mgsvg] {
    cursor: crosshair;
}

/* ===== EVENT MARKERS ===== */
.sf-event-marker[b-m1i16mgsvg] {
    cursor: pointer;
}

    .sf-event-marker circle[b-m1i16mgsvg],
    .sf-event-marker path[b-m1i16mgsvg] {
        transition: all 0.15s ease;
    }

/* ===== PLACEMENT MARKER ===== */
.sf-placement-marker[b-m1i16mgsvg] {
    animation: sf-place-b-m1i16mgsvg 0.25s ease-out;
}

@keyframes sf-place-b-m1i16mgsvg {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== HOVER POPUP ===== */
/* Identical structure to gfm-popup in GameFieldMap.razor.css */

.sf-popup[b-m1i16mgsvg] {
    position: absolute;
    width: 210px;
    background: #0e1e32;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    pointer-events: none; /* ← never intercepts mouse events */
    z-index: 200;
    animation: sf-popup-in-b-m1i16mgsvg 0.15s ease-out;
}

@keyframes sf-popup-in-b-m1i16mgsvg {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Header — team-color gradient background set inline */
.sf-popup-header[b-m1i16mgsvg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
}

/* Shape icon wrapper */
.sf-popup-shape-wrap[b-m1i16mgsvg] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Header text stack */
.sf-popup-header-info[b-m1i16mgsvg] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sf-popup-type[b-m1i16mgsvg] {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.sf-popup-team-name[b-m1i16mgsvg] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Body rows */
.sf-popup-body[b-m1i16mgsvg] {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sf-popup-row[b-m1i16mgsvg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sf-popup-label[b-m1i16mgsvg] {
    color: #475569;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.sf-popup-value[b-m1i16mgsvg] {
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-popup-time[b-m1i16mgsvg] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    color: #94a3b8;
}

.sf-popup-notes[b-m1i16mgsvg] {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #64748b;
    font-size: 11px;
    font-style: italic;
    line-height: 1.4;
}

/* ===== TAP HINT (placement mode) ===== */
.sf-tap-hint[b-m1i16mgsvg] {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    animation: sf-hint-pulse-b-m1i16mgsvg 2s ease-in-out infinite;
    white-space: nowrap;
}

@keyframes sf-hint-pulse-b-m1i16mgsvg {
    0%, 100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}
/* /Components/Pages/GameComponents/StartingLineupDialog.razor.rz.scp.css */
/* ===== COMPACT WINDOW SIZING (tablet-friendly) =====
   This dialog's own window (::deep reaches through BaseWindow into the
   TelerikWindow it renders) is capped to the viewport height and its
   Save/Cancel footer is pinned to the bottom of the scrollable area —
   otherwise, on a narrow/portrait tablet where .lc-dual-panel below
   stacks the two rosters instead of showing them side by side, the
   window can grow taller than the screen with no way to reach the
   buttons short of rotating to landscape. Scoped to this dialog only
   (not every BaseWindow user) via ::deep from this component's own
   stylesheet. */

[b-ccn4wv1a34] .base-dialog {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

[b-ccn4wv1a34] .base-dialog .k-window-content {
    flex: 1 1 auto;
    min-height: 0;
    /* Firefox: make the scrollbar for this long-content dialog clearly
       visible against the dark theme instead of relying on the OS's
       default (which some setups render as a barely-visible overlay). */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

    /* Chrome/Edge/Safari equivalent — a slim but unmistakable thumb so the
       dialog reads as "scroll for more" instead of "cut off". */
    [b-ccn4wv1a34] .base-dialog .k-window-content::-webkit-scrollbar {
        width: 10px;
    }

    [b-ccn4wv1a34] .base-dialog .k-window-content::-webkit-scrollbar-track {
        background: transparent;
    }

    [b-ccn4wv1a34] .base-dialog .k-window-content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.22);
        border-radius: 6px;
        border: 2px solid #0e1e32;
    }

        [b-ccn4wv1a34] .base-dialog .k-window-content::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.35);
        }

[b-ccn4wv1a34] .bd-content {
    padding: 16px 20px;
}

[b-ccn4wv1a34] .bd-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #0e1e32;
    padding-bottom: 6px;
}

/* ===== STICKY SUMMARY BAR ===== */
/* Sticks to the top of the BaseWindow scroll container so it
   always stays visible and behaves like a second title bar.    */

.lc-sticky-bar[b-ccn4wv1a34] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    margin-bottom: 10px;
    background: #1e2736; /* matches typical dark window bg */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0; /* flush edge-to-edge */
}

.lc-sticky-summary[b-ccn4wv1a34] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    flex: 1;
    flex-wrap: wrap;
}

/* ===== ON-FIELD COUNT BADGE ===== */

.lc-field-count[b-ccn4wv1a34] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid;
    margin-left: 6px;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.lc-count-ok[b-ccn4wv1a34] {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.3);
}

.lc-count-warn[b-ccn4wv1a34] {
    color: #f39c12;
    background: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.3);
}

/* ===== COUNT WARNING BANNER ===== */
/* Lives outside the minimized guard so it shows in compact mode too */

.lc-count-warning[b-ccn4wv1a34] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(243, 156, 18, 0.08);
    border: 1px solid rgba(243, 156, 18, 0.35);
    border-radius: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.lc-count-warning-icon[b-ccn4wv1a34] {
    font-size: 16px;
    flex-shrink: 0;
}

.lc-count-warning-text[b-ccn4wv1a34] {
    color: #f39c12;
    font-size: 12px;
    font-weight: 600;
    flex: 1;
    min-width: 160px;
}

.lc-count-warning-actions[b-ccn4wv1a34] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.lc-warn-btn[b-ccn4wv1a34] {
    padding: 5px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.15s ease;
}

.lc-warn-cancel[b-ccn4wv1a34] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #94a3b8;
}

    .lc-warn-cancel:hover[b-ccn4wv1a34] {
        background: rgba(255, 255, 255, 0.09);
        color: #e2e8f0;
    }

.lc-warn-save[b-ccn4wv1a34] {
    background: rgba(243, 156, 18, 0.15);
    border-color: rgba(243, 156, 18, 0.45);
    color: #f39c12;
}

    .lc-warn-save:hover[b-ccn4wv1a34] {
        background: rgba(243, 156, 18, 0.25);
    }

/* ===== VOICE CAPTURE SECTION =====
   Merged in from the retired VoiceSubstitutionDialog.razor.css — CSS isolation means this
   component needs its own copies of the vs-* classes rather than inheriting them, same
   reasoning as the window-sizing block at the top of this file. */

.lc-voice-section[b-ccn4wv1a34] {
    margin-bottom: 8px;
}

.lc-voice-header[b-ccn4wv1a34] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.lc-voice-btn[b-ccn4wv1a34] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(155, 89, 182, 0.12);
    border: 1px solid rgba(155, 89, 182, 0.35);
    border-radius: 8px;
    color: #9b59b6;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

    .lc-voice-btn:hover:not(:disabled)[b-ccn4wv1a34] {
        background: rgba(155, 89, 182, 0.2);
        border-color: rgba(155, 89, 182, 0.5);
    }

    .lc-voice-btn:disabled[b-ccn4wv1a34] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.lc-voice-btn-listening[b-ccn4wv1a34] {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.45);
    color: #e74c3c;
    animation: vs-pulse-b-ccn4wv1a34 1.2s ease-in-out infinite;
}

.lc-voice-elapsed[b-ccn4wv1a34] {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

@keyframes vs-pulse-b-ccn4wv1a34 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.vs-transcript-recap[b-ccn4wv1a34] {
    font-size: 0.85em;
    opacity: 0.7;
    padding: 4px 2px;
    font-style: italic;
}

.vs-error[b-ccn4wv1a34] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 2px;
    color: #e74c3c;
    font-size: 12px;
}

.vs-error-icon[b-ccn4wv1a34] {
    font-size: 1.1em;
}

.vs-unmatched[b-ccn4wv1a34] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    background: rgba(243, 156, 18, 0.1);
    border: 1px solid rgba(243, 156, 18, 0.3);
    border-radius: 8px;
    margin: 6px 0;
    color: #f39c12;
    font-size: 12px;
}

.vs-unmatched ul[b-ccn4wv1a34] {
    margin: 4px 0 0 0;
    padding-left: 20px;
}

/* ===== TIME SECTION ===== */

.lc-time-section[b-ccn4wv1a34] {
    margin-bottom: 8px;
    /* Anchors .lc-manual-time so it overlays instead of expanding the
       dialog — that expansion was what pushed the Cancel/Save footer
       out of view when Manual was selected. */
    position: relative;
}

.lc-time-header[b-ccn4wv1a34] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.lc-capture-btn[b-ccn4wv1a34] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

    .lc-capture-btn:hover[b-ccn4wv1a34] {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .lc-capture-btn:active[b-ccn4wv1a34] {
        transform: scale(0.97);
    }

.lc-capture-badge[b-ccn4wv1a34] {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.35);
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 11px;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-weight: 700;
}

.lc-time-grid[b-ccn4wv1a34] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 6px;
}

.lc-time-option[b-ccn4wv1a34] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
    user-select: none;
}

    .lc-time-option:hover:not(.lc-time-disabled)[b-ccn4wv1a34] {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.14);
    }

.lc-time-disabled[b-ccn4wv1a34] {
    opacity: 0.35;
    cursor: default;
}

.lc-time-selected[b-ccn4wv1a34] {
    background: rgba(52, 152, 219, 0.12) !important;
    border-color: rgba(52, 152, 219, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(52, 152, 219, 0.2);
}

.lc-time-icon[b-ccn4wv1a34] {
    font-size: 16px;
    line-height: 1;
}

.lc-time-label[b-ccn4wv1a34] {
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
}

.lc-time-selected .lc-time-label[b-ccn4wv1a34] {
    color: #3498db;
}

.lc-time-desc[b-ccn4wv1a34] {
    /* Was #475569 — too close to the card background to read at a
       glance except when the selected state's blue tint happened to
       help contrast. This is the actual time value/status for each
       option, so it needs to be legible all the time, not just when
       selected. */
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 600;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

/* Manual entry floats as a popover BELOW the time-option grid instead
   of pushing the rest of the dialog (and the Cancel/Save footer) down
   when selected. .lc-time-section (below) is its positioning anchor. */
.lc-manual-time[b-ccn4wv1a34] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    padding: 10px;
    background: #16233a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    z-index: 30;
}

/* ===== DUAL TEAM LAYOUT ===== */

.lc-dual-panel[b-ccn4wv1a34] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    min-height: 0;
}

.lc-team-panel[b-ccn4wv1a34] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.lc-team-header[b-ccn4wv1a34] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
    border-bottom: 2px solid;
    font-size: 13px;
    flex-shrink: 0;
}

.lc-team-dot[b-ccn4wv1a34] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== JERSEY INPUT FIELDS ===== */

.lc-jersey-inputs[b-ccn4wv1a34] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.lc-jersey-field[b-ccn4wv1a34] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lc-jersey-label[b-ccn4wv1a34] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.lc-jersey-label-in[b-ccn4wv1a34] {
    color: #2ecc71;
}

.lc-jersey-label-out[b-ccn4wv1a34] {
    color: #e74c3c;
}

.lc-jersey-input[b-ccn4wv1a34] {
    width: 100%;
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    font-size: 13px;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-weight: 600;
    outline: none;
    transition: border-color 0.18s ease;
    box-sizing: border-box;
}

.lc-jersey-input-in:focus[b-ccn4wv1a34] {
    border-color: rgba(46, 204, 113, 0.4);
    background: rgba(46, 204, 113, 0.04);
}

.lc-jersey-input-out:focus[b-ccn4wv1a34] {
    border-color: rgba(231, 76, 60, 0.4);
    background: rgba(231, 76, 60, 0.04);
}

/* ===== PLAYER LIST ===== */

.sl-player-list[b-ccn4wv1a34] {
    display: flex;
    flex-direction: column;
    /* Trimmed from 300px — this is the single biggest lever on overall
       dialog height, especially once .lc-dual-panel stacks the two
       rosters vertically below. The list keeps its own scrollbar, so
       every player is still reachable — just not all visible at once. */
    max-height: 210px;
    overflow-y: auto;
    gap: 2px;
}

    .sl-player-list[b-ccn4wv1a34]::-webkit-scrollbar {
        width: 4px;
    }

    .sl-player-list[b-ccn4wv1a34]::-webkit-scrollbar-track {
        background: transparent;
    }

    .sl-player-list[b-ccn4wv1a34]::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.1);
        border-radius: 2px;
    }

.sl-player[b-ccn4wv1a34] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .sl-player:hover:not(.sl-player-disabled)[b-ccn4wv1a34] {
        background: rgba(255, 255, 255, 0.04);
    }

.sl-player-disabled[b-ccn4wv1a34] {
    opacity: 0.4;
    cursor: default;
}

/* ===== PLAYER STATES ===== */

.lc-player-onfield[b-ccn4wv1a34] {
    background: rgba(46, 204, 113, 0.04);
}

    .lc-player-onfield:hover[b-ccn4wv1a34] {
        background: rgba(46, 204, 113, 0.08) !important;
    }

.lc-player-subin[b-ccn4wv1a34] {
    background: rgba(52, 152, 219, 0.08) !important;
}

.lc-player-subout[b-ccn4wv1a34] {
    background: rgba(231, 76, 60, 0.08) !important;
}

    .lc-player-subout:hover[b-ccn4wv1a34] {
        background: rgba(231, 76, 60, 0.12) !important;
    }

/* ===== SUB OUT CHECKBOX ===== */

.lc-check-out[b-ccn4wv1a34] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #e74c3c;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sl-pop-b-ccn4wv1a34 0.2s ease-out;
}

/* ===== BADGES ===== */

.lc-badge[b-ccn4wv1a34] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid;
    margin-top: 2px;
    width: fit-content;
}

.lc-badge-on[b-ccn4wv1a34] {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.25);
}

.lc-badge-out[b-ccn4wv1a34] {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.25);
}

/* ===== PLAYER STRUCTURE ===== */

.sl-checkbox[b-ccn4wv1a34] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sl-check-empty[b-ccn4wv1a34] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.sl-check-filled[b-ccn4wv1a34] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sl-pop-b-ccn4wv1a34 0.2s ease-out;
}

@keyframes sl-pop-b-ccn4wv1a34 {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.sl-jersey[b-ccn4wv1a34] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    font-family: 'Cascadia Code', monospace;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    color: #64748b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.15s ease;
}

.sl-player-info[b-ccn4wv1a34] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.sl-player-name[b-ccn4wv1a34] {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
}

.sl-empty[b-ccn4wv1a34] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: #334155;
    font-size: 13px;
    font-style: italic;
}

/* ===== SUMMARY DOT ===== */

.lc-summary-dot[b-ccn4wv1a34] {
    color: #334155;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 700px) {
    .lc-dual-panel[b-ccn4wv1a34] {
        grid-template-columns: 1fr;
    }

    .lc-time-grid[b-ccn4wv1a34] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* /Components/Pages/GameComponents/SubstitutionAuditDialog.razor.rz.scp.css */
/* ===== SUBSTITUTION AUDIT DIALOG (2026-10-01) ===== */

.sa-unavailable[b-egiaevxli4] {
    background: rgba(243, 156, 18, 0.12);
    border: 1px solid rgba(243, 156, 18, 0.4);
    color: #f5c26b;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

.sa-team-row[b-egiaevxli4],
.sa-window-row[b-egiaevxli4] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sa-team-btn[b-egiaevxli4],
.sa-window-btn[b-egiaevxli4] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
}

.sa-team-btn[b-egiaevxli4] {
    flex: 1 1 0;
    border-left: 4px solid var(--team, #3498db);
}

.sa-team-active[b-egiaevxli4],
.sa-window-active[b-egiaevxli4] {
    background: rgba(52, 152, 219, 0.2);
    border-color: #3498db;
    color: #ffffff;
}

.sa-cameras[b-egiaevxli4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sa-camera[b-egiaevxli4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #e2e8f0;
    cursor: pointer;
}

.sa-camera-dot[b-egiaevxli4] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e74c3c;
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.6);
}

.sa-camera-check[b-egiaevxli4] {
    width: 16px;
    height: 16px;
    accent-color: #3498db;
}

.sa-select[b-egiaevxli4] {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 10px;
}

.sa-select option[b-egiaevxli4] {
    background: #0f1f33;
    color: #e2e8f0;
}

.sa-camera-when[b-egiaevxli4] {
    margin-left: auto;
    font-size: 11px;
    color: #64748b;
}
/* /Components/Pages/GameReelPage.razor.rz.scp.css */
/* ===== Game reel page (2026-10-03) =====
   Same frame as the review tool: header with back link and title, the reel
   control on the left, a rail of the game's stored reels on the right. */

.grp-page[b-777heq80y8] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 12px 12px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.grp-header[b-777heq80y8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.grp-header-left[b-777heq80y8],
.grp-header-right[b-777heq80y8] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.grp-back[b-777heq80y8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 6px 10px 6px 6px;
    border-radius: 8px;
}

    .grp-back:hover[b-777heq80y8] {
        color: #e2e8f0;
        background: rgba(255,255,255,0.06);
    }

.grp-title[b-777heq80y8] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #f1f5f9;
}

.grp-game[b-777heq80y8] {
    font-size: 0.9rem;
    color: #94a3b8;
}

.grp-team-switch[b-777heq80y8] {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}

.grp-team[b-777heq80y8] {
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .grp-team[b-777heq80y8]::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--team-color, #3498db);
        opacity: 0.6;
    }

    .grp-team:hover:not(:disabled)[b-777heq80y8] {
        color: #e2e8f0;
    }

.grp-team-on[b-777heq80y8] {
    background: rgba(255,255,255,0.1);
    color: #f1f5f9;
}

    .grp-team-on[b-777heq80y8]::before {
        opacity: 1;
    }

.grp-link-btn[b-777heq80y8] {
    background: transparent;
    cursor: pointer;
    font-size: 0.78rem;
    margin-top: 6px;
}

.grp-link[b-777heq80y8] {
    font-size: 0.85rem;
    color: #3498db;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(52,152,219,0.3);
}

    .grp-link:hover[b-777heq80y8] {
        background: rgba(52,152,219,0.1);
    }

.grp-loading[b-777heq80y8],
.grp-error[b-777heq80y8],
.grp-reel-empty[b-777heq80y8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 40vh;
    color: #94a3b8;
    text-align: center;
}

.grp-loading-reel[b-777heq80y8] {
    min-height: 320px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}

.grp-reel-empty[b-777heq80y8] {
    min-height: 280px;
    padding: 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}

    .grp-reel-empty p[b-777heq80y8] {
        max-width: 520px;
        margin: 0;
    }

.grp-error-icon[b-777heq80y8] {
    font-size: 40px;
}

.grp-error h2[b-777heq80y8] {
    margin: 0;
    color: #f1f5f9;
    font-size: 1.2rem;
}

.grp-body[b-777heq80y8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .grp-body[b-777heq80y8] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.grp-main[b-777heq80y8] {
    min-width: 0;
}

.grp-side[b-777heq80y8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.grp-panel[b-777heq80y8] {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px 14px;
}

    .grp-panel h3[b-777heq80y8] {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 700;
        color: #e2e8f0;
    }

.grp-panel-head[b-777heq80y8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.grp-panel-count[b-777heq80y8] {
    font-size: 0.75rem;
    color: #94a3b8;
    background: rgba(255,255,255,0.06);
    padding: 2px 8px;
    border-radius: 999px;
}

.grp-panel-empty[b-777heq80y8] {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.5;
}

.grp-panel-help p[b-777heq80y8] {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.5;
}

.grp-reel-list[b-777heq80y8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.grp-reel[b-777heq80y8] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
}

    .grp-reel:hover[b-777heq80y8] {
        background: rgba(255,255,255,0.06);
    }

.grp-reel-on[b-777heq80y8] {
    background: rgba(52,152,219,0.15);
    box-shadow: inset 3px 0 0 #3498db;
}

.grp-reel-kind[b-777heq80y8] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: #cbd5e1;
}

.grp-reel-kind-team[b-777heq80y8] {
    background: rgba(52,152,219,0.2);
    color: #93c5fd;
}

.grp-reel-kind-player[b-777heq80y8] {
    background: rgba(142,68,173,0.25);
    color: #d8b4fe;
}

.grp-reel-main[b-777heq80y8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.grp-reel-title[b-777heq80y8] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grp-reel-meta[b-777heq80y8] {
    font-size: 0.72rem;
    color: #94a3b8;
}

.grp-reel-del[b-777heq80y8] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 0.8rem;
}

    .grp-reel-del:hover[b-777heq80y8] {
        background: rgba(239,68,68,0.2);
        color: #fca5a5;
    }

/* Logging lag panel (2026-10-03) */
.grp-lag-list[b-777heq80y8] {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.grp-lag[b-777heq80y8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px auto auto;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #cbd5e1;
}

.grp-lag-prior[b-777heq80y8] {
    color: #64748b;
}

.grp-lag-type[b-777heq80y8] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grp-lag-bar[b-777heq80y8] {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}

.grp-lag-fill[b-777heq80y8] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8e44ad, #3498db);
}

.grp-lag-prior .grp-lag-fill[b-777heq80y8] {
    opacity: 0.4;
}

.grp-lag-val[b-777heq80y8] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.grp-lag-n[b-777heq80y8] {
    font-size: 0.7rem;
    color: #64748b;
    min-width: 28px;
    text-align: right;
}
/* /Components/Pages/Games.razor.rz.scp.css */
/* ===== PAGE ===== */

.games-page[b-h42m6r72r9] {
    max-width: 100%;
    margin: 0 auto;
    padding: 32px 24px;
    animation: fadeIn-b-h42m6r72r9 0.4s ease-out;
}

@keyframes fadeIn-b-h42m6r72r9 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== HEADER ===== */
.page-header[b-h42m6r72r9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title[b-h42m6r72r9] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-h42m6r72r9] {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

[b-h42m6r72r9] .create-game-btn {
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    background: linear-gradient(135deg, #3498db, #2ecc71) !important;
    border: none !important;
}

    [b-h42m6r72r9] .create-game-btn:hover {
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
        filter: brightness(1.08);
    }

/* ===== LOADING ===== */
.loading-state[b-h42m6r72r9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-text[b-h42m6r72r9] {
    color: #64748b;
    font-size: 14px;
}

/* ===== EMPTY STATE ===== */
.empty-state[b-h42m6r72r9] {
    text-align: center;
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.empty-icon[b-h42m6r72r9] {
    font-size: 56px;
    margin-bottom: 16px;
}

.empty-title[b-h42m6r72r9] {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.empty-message[b-h42m6r72r9] {
    color: #64748b;
    font-size: 15px;
    margin: 0 0 24px 0;
}

/* ===== FILTER TABS ===== */
.game-filters[b-h42m6r72r9] {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.filter-tab[b-h42m6r72r9] {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .filter-tab:hover[b-h42m6r72r9] {
        color: #94a3b8;
        background: rgba(255, 255, 255, 0.04);
    }

.filter-active[b-h42m6r72r9] {
    color: #ffffff;
    background: rgba(52, 152, 219, 0.15);
}

    .filter-active.filter-live[b-h42m6r72r9] {
        background: rgba(231, 76, 60, 0.15);
        color: #e74c3c;
    }

    .filter-active.filter-final[b-h42m6r72r9] {
        background: rgba(46, 204, 113, 0.12);
        color: #2ecc71;
    }

.filter-count[b-h42m6r72r9] {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
}

/* ===== GRID ===== */
[b-h42m6r72r9] .games-grid {
    width: 100% !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
    overflow: hidden;
}

    [b-h42m6r72r9] .games-grid .k-grid-header {
        width: 100% !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

        [b-h42m6r72r9] .games-grid .k-grid-header th {
            color: #64748b !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            border-color: rgba(255, 255, 255, 0.04) !important;
            background: transparent !important;
            padding: 12px 16px !important;
        }

    [b-h42m6r72r9] .games-grid .k-grid-content {
        width: 100% !important;
        background: transparent !important;
    }

    [b-h42m6r72r9] .games-grid .k-grid-table td {
        color: #94a3b8 !important;
        border-color: rgba(255, 255, 255, 0.04) !important;
        padding: 14px 16px !important;
        background: transparent !important;
        font-size: 13px;
    }

    [b-h42m6r72r9] .games-grid .k-grid-table tr {
        cursor: pointer;
        transition: background 0.15s ease;
    }

        [b-h42m6r72r9] .games-grid .k-grid-table tr:hover td {
            background: rgba(255, 255, 255, 0.03) !important;
        }

        /* Live row — red tint */
        [b-h42m6r72r9] .games-grid .k-grid-table tr.game-row-live td {
            background: rgba(231, 76, 60, 0.04) !important;
        }

        [b-h42m6r72r9] .games-grid .k-grid-table tr.game-row-live:hover td {
            background: rgba(231, 76, 60, 0.08) !important;
        }

        /* Final row — subtle green tint */
        [b-h42m6r72r9] .games-grid .k-grid-table tr.game-row-final td {
            background: rgba(46, 204, 113, 0.03) !important;
        }

        [b-h42m6r72r9] .games-grid .k-grid-table tr.game-row-final:hover td {
            background: rgba(46, 204, 113, 0.06) !important;
        }

    [b-h42m6r72r9] .games-grid .k-pager {
        background: rgba(255, 255, 255, 0.02) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        color: #64748b !important;
    }

        [b-h42m6r72r9] .games-grid .k-pager .k-button {
            color: #64748b !important;
        }

            [b-h42m6r72r9] .games-grid .k-pager .k-button.k-selected {
                background: rgba(52, 152, 219, 0.15) !important;
                color: #3498db !important;
            }

/* ===== STATUS BADGE ===== */
.game-status[b-h42m6r72r9] {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.3px;
}

.status-live[b-h42m6r72r9] {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.25);
}

.status-scheduled[b-h42m6r72r9] {
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.status-1st-half[b-h42m6r72r9], .status-2nd-half[b-h42m6r72r9] {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.2);
}

.status-halftime[b-h42m6r72r9] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.2);
}

.status-overtime[b-h42m6r72r9] {
    background: rgba(155, 89, 182, 0.12);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.2);
}

.status-completed[b-h42m6r72r9] {
    background: rgba(149, 165, 166, 0.12);
    color: #95a5a6;
    border: 1px solid rgba(149, 165, 166, 0.2);
}

/* Final — green checkmark treatment, matches FinalizeButton badge */
.status-final[b-h42m6r72r9] {
    background: rgba(46, 204, 113, 0.10);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.live-dot[b-h42m6r72r9] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e74c3c;
    animation: livePulse-b-h42m6r72r9 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes livePulse-b-h42m6r72r9 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}

/* ===== TEAM CELL ===== */
.team-cell[b-h42m6r72r9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.team-cell-right[b-h42m6r72r9] {
    justify-content: flex-end;
}

.team-colors[b-h42m6r72r9] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.color-swatch[b-h42m6r72r9] {
    width: 14px;
    height: 22px;
    border-radius: 3px 0 0 3px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.color-swatch-secondary[b-h42m6r72r9] {
    width: 8px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.team-name[b-h42m6r72r9] {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== SCORE CELL ===== */
.score-cell[b-h42m6r72r9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.score-home[b-h42m6r72r9], .score-away[b-h42m6r72r9] {
    font-size: 22px;
    font-weight: 800;
    min-width: 28px;
    text-align: center;
}

/* Dim scores for finalized games */
.score-final .score-home[b-h42m6r72r9],
.score-final .score-away[b-h42m6r72r9] {
    font-size: 20px;
    opacity: 0.85;
}

.score-divider[b-h42m6r72r9] {
    color: #334155;
    font-size: 16px;
    font-weight: 300;
}

/* ===== TIME CELL ===== */
.time-cell[b-h42m6r72r9] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.time-live[b-h42m6r72r9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.time-value[b-h42m6r72r9] {
    color: #e74c3c;
    font-size: 16px;
    font-weight: 800;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

.time-period[b-h42m6r72r9] {
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Final time — green checkmark badge */
.time-final[b-h42m6r72r9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #2ecc71;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 8px;
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.2);
    border-radius: 20px;
}

.time-scheduled[b-h42m6r72r9] {
    color: #64748b;
    font-size: 13px;
}

/* ===== LOCATION ===== */
.location-text[b-h42m6r72r9] {
    color: #475569;
    font-size: 12px;
}

/* ===== VIEW BUTTON ===== */
[b-h42m6r72r9] .view-btn {
    color: #475569 !important;
    border-radius: 8px !important;
    width: 34px !important;
    height: 34px !important;
    transition: all 0.2s;
}

    [b-h42m6r72r9] .view-btn:hover {
        color: #3498db !important;
        background: rgba(52, 152, 219, 0.1) !important;
    }

/* Admin hard-delete button (2026-09-19): reads as danger on hover only, so
   the action cell stays quiet until the cursor lands on it. */
[b-h42m6r72r9] .delete-btn:hover {
    color: #ff6b6b !important;
    background: rgba(231, 76, 60, 0.12) !important;
}

/* Cloudflare cleanup toggle inside the delete confirmation. */
.delete-option[b-h42m6r72r9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
}

/* ===== CREATE DIALOG ===== */
[b-h42m6r72r9] .create-game-window {
    border-radius: 16px !important;
    overflow: hidden;
}

    [b-h42m6r72r9] .create-game-window .k-window-titlebar {
        background: linear-gradient(90deg, #0a1628, #0f2744) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
        padding: 16px 20px !important;
    }

    [b-h42m6r72r9] .create-game-window .k-window-content {
        background: #0e1e32 !important;
        padding: 0 !important;
    }

.dialog-content[b-h42m6r72r9] {
    padding: 24px;
}

.field-group[b-h42m6r72r9] {
    margin-bottom: 18px;
}

.field-row[b-h42m6r72r9] {
    display: flex;
    gap: 12px;
}

    .field-row .field-group[b-h42m6r72r9] {
        flex: 1;
    }

.field-label[b-h42m6r72r9] {
    display: block;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

[b-h42m6r72r9] .dialog-input .k-input,
[b-h42m6r72r9] .dialog-input .k-picker {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    height: 44px !important;
}

    [b-h42m6r72r9] .dialog-input .k-input:focus,
    [b-h42m6r72r9] .dialog-input .k-input.k-focus {
        border-color: #3498db !important;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
    }

.dialog-actions[b-h42m6r72r9] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[b-h42m6r72r9] .dialog-cancel-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

[b-h42m6r72r9] .dialog-submit-btn {
    background: linear-gradient(135deg, #3498db, #2ecc71) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

    [b-h42m6r72r9] .dialog-submit-btn:hover {
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
    }

/* ===== ERROR BANNER ===== */
.error-banner[b-h42m6r72r9] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #e74c3c;
    font-size: 13px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .games-page[b-h42m6r72r9] {
        padding: 20px 16px;
    }

    .page-title[b-h42m6r72r9] {
        font-size: 22px;
    }

    .game-filters[b-h42m6r72r9] {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .filter-tab[b-h42m6r72r9] {
        white-space: nowrap;
    }

    .field-row[b-h42m6r72r9] {
        flex-direction: column;
        gap: 0;
    }

    [b-h42m6r72r9] .create-game-window {
        width: 95vw !important;
    }
}

/* ===== Team Search Autocomplete ===== */
.team-search-item[b-h42m6r72r9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.team-search-colors[b-h42m6r72r9] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.search-swatch[b-h42m6r72r9] {
    width: 12px;
    height: 20px;
    border-radius: 3px 0 0 3px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.search-swatch-secondary[b-h42m6r72r9] {
    width: 6px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.team-search-info[b-h42m6r72r9] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.team-search-name[b-h42m6r72r9] {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-search-meta[b-h42m6r72r9] {
    color: #64748b;
    font-size: 11px;
}

.team-search-empty[b-h42m6r72r9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
    color: #94a3b8;
    font-size: 13px;
}

.team-search-hint[b-h42m6r72r9] {
    color: #475569;
    font-size: 11px;
    font-style: italic;
}

.field-hint[b-h42m6r72r9] {
    color: #475569;
    font-size: 11px;
    margin: 4px 0 0 0;
}

[b-h42m6r72r9] .dialog-input .k-animation-container .k-list {
    background: #0e1e32 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

[b-h42m6r72r9] .dialog-input .k-list-item {
    color: #94a3b8 !important;
    padding: 8px 12px !important;
    transition: background 0.15s;
}

    [b-h42m6r72r9] .dialog-input .k-list-item:hover,
    [b-h42m6r72r9] .dialog-input .k-list-item.k-hover {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
    }

    [b-h42m6r72r9] .dialog-input .k-list-item.k-selected {
        background: rgba(52, 152, 219, 0.15) !important;
        color: #3498db !important;
    }

[b-h42m6r72r9] .dialog-input .k-nodata {
    background: #0e1e32 !important;
    padding: 12px !important;
}
/* /Components/Pages/GameTracker.razor.rz.scp.css */
/* ===== PAGE LAYOUT ===== */
.gt-page[b-t42sf6i4s9] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 12px;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== MAIN LAYOUT: Left | Middle | Right ===== */
.gt-main-layout[b-t42sf6i4s9] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

/* ===== LEFT PANEL: Roster ===== */
.gt-left-panel[b-t42sf6i4s9] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.gt-roster-section[b-t42sf6i4s9] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== MIDDLE PANEL: Event Logger ===== */
/* overflow: visible is critical — the ⋮ popup and share panel are
   absolutely positioned and must be able to escape the panel boundary.
   z-index: 2 ensures the middle panel's stacking context paints above
   the roster and field-map siblings.                                    */
.gt-middle-panel[b-t42sf6i4s9] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    position: relative;
    z-index: 2;
}

/* The gt-section wrapper inside the middle panel must also allow overflow
   so the popup can escape it. Height is constrained by the panel, not
   by clipping. */
.gt-events-section[b-t42sf6i4s9] {
    flex: 1;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    /* Use a box-shadow border instead of overflow:hidden so corners are
       still rounded but nothing is clipped */
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

/* ===== RIGHT PANEL: Scoreboard + Clock + Field Map ===== */
.gt-right-panel[b-t42sf6i4s9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* ===== TOP ROW: Scoreboard + Clock ===== */
.gt-top-row[b-t42sf6i4s9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex-shrink: 0;
}

/* ===== LIVE VIEWERS BADGE =====
   Replaces the old video preview panel — stats get captured live at the
   game, so a small "N watching" indicator earns its space better than a
   video box did. */
/* ===== SUBSTITUTION AUDIT BANNER (2026-10-01) ===== */

.gt-audit-banner[b-t42sf6i4s9] {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 14px;
    margin-bottom: 12px;
}

.gt-audit-running[b-t42sf6i4s9] { border-color: rgba(52, 152, 219, 0.45); background: rgba(52, 152, 219, 0.08); }
.gt-audit-ok[b-t42sf6i4s9]      { border-color: rgba(46, 204, 113, 0.45); background: rgba(46, 204, 113, 0.08); }
.gt-audit-warn[b-t42sf6i4s9]    { border-color: rgba(243, 156, 18, 0.5);  background: rgba(243, 156, 18, 0.1); }
.gt-audit-failed[b-t42sf6i4s9]  { border-color: rgba(231, 76, 60, 0.5);   background: rgba(231, 76, 60, 0.1); }

.gt-audit-head[b-t42sf6i4s9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.gt-audit-icon[b-t42sf6i4s9] {
    font-size: 18px;
    line-height: 1.2;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.gt-audit-spinner[b-t42sf6i4s9] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(52, 152, 219, 0.25);
    border-top-color: #3498db;
    border-radius: 50%;
    animation: gt-audit-spin-b-t42sf6i4s9 0.8s linear infinite;
}

@keyframes gt-audit-spin-b-t42sf6i4s9 { to { transform: rotate(360deg); } }

.gt-audit-text[b-t42sf6i4s9] { flex: 1 1 auto; min-width: 0; }

.gt-audit-title[b-t42sf6i4s9] {
    font-size: 14px;
    font-weight: 700;
    color: #f8fafc;
}

.gt-audit-sub[b-t42sf6i4s9] {
    font-size: 13px;
    color: #cbd5e1;
    margin-top: 2px;
}

.gt-audit-actions[b-t42sf6i4s9] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.gt-audit-btn[b-t42sf6i4s9] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
}

.gt-audit-btn:hover[b-t42sf6i4s9] { color: #ffffff; border-color: rgba(255, 255, 255, 0.3); }

.gt-audit-findings[b-t42sf6i4s9] {
    list-style: none;
    margin: 10px 0 0 34px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gt-audit-finding[b-t42sf6i4s9] {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: #e2e8f0;
}

.gt-audit-match[b-t42sf6i4s9] { color: #a7e3bf; }
.gt-audit-seen-not-logged[b-t42sf6i4s9],
.gt-audit-direction-mismatch[b-t42sf6i4s9] { color: #f5c26b; }
.gt-audit-logged-not-seen[b-t42sf6i4s9] { color: #fbd38d; }
.gt-audit-unreadable[b-t42sf6i4s9],
.gt-audit-note[b-t42sf6i4s9] { color: #94a3b8; }

.gt-audit-meta[b-t42sf6i4s9] {
    margin: 8px 0 0 34px;
    font-size: 11px;
    color: #64748b;
}

.gt-audit-history[b-t42sf6i4s9] {
    list-style: none;
    margin: 10px 0 0 34px;
    padding: 8px 0 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #94a3b8;
}

.gt-audit-history-when[b-t42sf6i4s9] {
    display: inline-block;
    min-width: 130px;
    color: #cbd5e1;
}

.gt-viewers-badge[b-t42sf6i4s9] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 10px 14px;
    flex-shrink: 0;
}

.gt-viewers-dot[b-t42sf6i4s9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3498db;
    flex-shrink: 0;
    animation: gt-viewers-pulse-b-t42sf6i4s9 2s ease-out infinite;
}

@keyframes gt-viewers-pulse-b-t42sf6i4s9 {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.5);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(52, 152, 219, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}

.gt-viewers-count[b-t42sf6i4s9] {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.gt-viewers-label[b-t42sf6i4s9] {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

/* Link to the camera setup page, pushed to the right end of the viewers badge. */
.gt-cameras-link[b-t42sf6i4s9] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 10px;
    border: 1px solid rgba(52, 152, 219, 0.35);
    background: rgba(52, 152, 219, 0.12);
    color: #7cc4f5;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

    .gt-cameras-link:hover[b-t42sf6i4s9] {
        background: rgba(52, 152, 219, 0.25);
        color: #ffffff;
    }

/* Video review link sits right after Cameras; only the first of the pair
   pushes itself to the right edge. */
.gt-review-link[b-t42sf6i4s9] {
    margin-left: 0;
}

/* Game reel link (2026-10-03): same pill, purple so it reads as "highlights". */
.gt-reel-link[b-t42sf6i4s9] {
    margin-left: 0;
    color: #e9d5ff;
    border-color: rgba(142, 68, 173, 0.45);
    background: rgba(142, 68, 173, 0.15);
}

    .gt-reel-link:hover[b-t42sf6i4s9] {
        background: rgba(142, 68, 173, 0.3);
        color: #ffffff;
    }

/* Number of phones currently connected for this game (live via SignalR). */
.gt-cameras-count[b-t42sf6i4s9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.gt-cameras-count-live[b-t42sf6i4s9] {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

/* At least one phone is recording right now. */
.gt-cameras-recording[b-t42sf6i4s9] {
    border-color: rgba(231, 76, 60, 0.45);
    background: rgba(231, 76, 60, 0.12);
    color: #ff8a80;
}

    .gt-cameras-recording .gt-cameras-count[b-t42sf6i4s9] {
        background: rgba(231, 76, 60, 0.25);
        color: #ff6b6b;
        animation: gt-cameras-pulse-b-t42sf6i4s9 1.4s ease-in-out infinite;
    }

@keyframes gt-cameras-pulse-b-t42sf6i4s9 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

.gt-header[b-t42sf6i4s9] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

.gt-clock-panel[b-t42sf6i4s9] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* The event replay popup moved to EventVideoPopup.razor.css (2026-09-21). */

/* ===== FIELD MAP SECTION ===== */
.gt-field-section[b-t42sf6i4s9] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ===== SECTIONS (used by roster + field map — NOT events) ===== */
.gt-section[b-t42sf6i4s9] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

/* ===== LOADING ===== */
.gt-loading[b-t42sf6i4s9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
    color: #64748b;
    font-size: 15px;
}

/* ===== ERROR PAGE ===== */
.gt-error-page[b-t42sf6i4s9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 12px;
    text-align: center;
    padding: 40px 20px;
}

.gt-error-icon[b-t42sf6i4s9] {
    font-size: 48px;
}

.gt-error-page h2[b-t42sf6i4s9] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.gt-error-page p[b-t42sf6i4s9] {
    color: #64748b;
    font-size: 15px;
    margin: 0 0 16px 0;
}

/* ===== PLACEHOLDER ===== */
.gt-placeholder[b-t42sf6i4s9] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    border: 2px dashed rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin: 12px;
    flex: 1;
}

/* ===== RESPONSIVE: TABLET (collapse to 2 columns) ===== */
@media (max-width: 1200px) {
    .gt-page[b-t42sf6i4s9] {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .gt-main-layout[b-t42sf6i4s9] {
        grid-template-columns: 1fr 1fr;
        flex: none;
        min-height: unset;
        height: auto;
    }

    .gt-right-panel[b-t42sf6i4s9] {
        grid-column: 1 / -1;
        order: 1;
        overflow: visible;
        min-height: unset;
        height: auto;
    }

    .gt-middle-panel[b-t42sf6i4s9] {
        order: 2;
        overflow: visible;
        min-height: unset;
        height: auto;
    }

    .gt-left-panel[b-t42sf6i4s9] {
        order: 3;
        overflow: visible;
        min-height: unset;
        height: auto;
    }

    .gt-roster-section[b-t42sf6i4s9],
    .gt-events-section[b-t42sf6i4s9],
    .gt-field-section[b-t42sf6i4s9] {
        overflow: visible;
        min-height: unset;
        flex: unset;
        height: auto;
    }
}

/* ===== RESPONSIVE: MOBILE (single column) ===== */
@media (max-width: 768px) {
    .gt-page[b-t42sf6i4s9] {
        padding: 8px;
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .gt-main-layout[b-t42sf6i4s9] {
        grid-template-columns: 1fr;
        gap: 8px;
        flex: none;
        min-height: unset;
        height: auto;
    }

    .gt-right-panel[b-t42sf6i4s9] {
        grid-column: unset;
        order: 1;
        min-height: unset;
        height: auto;
    }

    .gt-middle-panel[b-t42sf6i4s9] {
        order: 2;
        min-height: unset;
        height: auto;
    }

    .gt-left-panel[b-t42sf6i4s9] {
        order: 3;
        min-height: unset;
        height: auto;
    }
}

/* Flash on the clock panel when the app-bar clock pill is clicked (2026-09-22). */
.gt-clock-attention[b-t42sf6i4s9] {
    animation: gt-clock-attention-b-t42sf6i4s9 0.6s ease-in-out 4;
    border-radius: 14px;
}

@keyframes gt-clock-attention-b-t42sf6i4s9 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
    50% { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0.55); }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ===== PAGE ===== */
.home-page[b-699l3auobx] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ===================================================
   LOGGED IN — DASHBOARD
   =================================================== */

/* ===== WELCOME HEADER ===== */
.dash-welcome[b-699l3auobx] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
}

.dash-welcome-left[b-699l3auobx] {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ===== SMALL HERO GRAPHIC ===== */
.dash-hero-graphic[b-699l3auobx] {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.dash-soccer-svg[b-699l3auobx] {
    width: 100%;
    height: 100%;
}

/* ===== WELCOME TEXT ===== */
.dash-welcome-text[b-699l3auobx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-title[b-699l3auobx] {
    font-size: 28px;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.5px;
    line-height: 1;
}

.dash-subtitle[b-699l3auobx] {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

.dash-quick-actions[b-699l3auobx] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* ===== ANNOUNCEMENT ===== */
.dash-announcement[b-699l3auobx] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(52, 152, 219, 0.06);
    border: 1px solid rgba(52, 152, 219, 0.15);
    border-radius: 12px;
    max-width: 280px;
}

.dash-announcement-icon[b-699l3auobx] {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.dash-announcement-content[b-699l3auobx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dash-announcement-title[b-699l3auobx] {
    color: #3498db;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-announcement-text[b-699l3auobx] {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

/* ===== DASHBOARD GRID ===== */
.dash-grid[b-699l3auobx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ===== DASHBOARD CARDS ===== */
.dash-card[b-699l3auobx] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dash-card-header[b-699l3auobx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.dash-card-title-row[b-699l3auobx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-card-title[b-699l3auobx] {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.dash-card-count[b-699l3auobx] {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.dash-card-body[b-699l3auobx] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dash-card-footer[b-699l3auobx] {
    padding: 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

/* ===== LOADING ===== */
.dash-loading[b-699l3auobx] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

/* ===== EMPTY STATE ===== */
.dash-empty[b-699l3auobx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: #475569;
    font-size: 13px;
    text-align: center;
}

.dash-empty-icon[b-699l3auobx] {
    font-size: 28px;
    opacity: 0.5;
}

.dash-empty-btn[b-699l3auobx] {
    color: #3498db;
    font-size: 12px;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .dash-empty-btn:hover[b-699l3auobx] {
        color: #5dade2;
    }

/* ===== TEAM ROWS ===== */
.dash-team-row[b-699l3auobx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

    .dash-team-row:hover[b-699l3auobx] {
        background: rgba(255, 255, 255, 0.04);
    }

    .dash-team-row:last-child[b-699l3auobx] {
        border-bottom: none;
    }

.dash-team-colors[b-699l3auobx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.dash-team-swatch[b-699l3auobx] {
    width: 4px;
    height: 14px;
    border-radius: 2px;
}

.dash-team-swatch-secondary[b-699l3auobx] {
    opacity: 0.5;
}

.dash-team-info[b-699l3auobx] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.dash-team-name[b-699l3auobx] {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-team-meta[b-699l3auobx] {
    color: #475569;
    font-size: 11px;
}

.dash-team-stats[b-699l3auobx] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}

.dash-team-role[b-699l3auobx] {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

.dash-team-players[b-699l3auobx] {
    color: #334155;
    font-size: 10px;
}

/* ===== GAME ROWS ===== */
.dash-game-row[b-699l3auobx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

    .dash-game-row:hover[b-699l3auobx] {
        background: rgba(255, 255, 255, 0.04);
    }

    .dash-game-row:last-child[b-699l3auobx] {
        border-bottom: none;
    }

.dash-game-date[b-699l3auobx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 40px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    flex-shrink: 0;
}

.dash-game-month[b-699l3auobx] {
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.dash-game-day[b-699l3auobx] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.dash-game-info[b-699l3auobx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dash-game-matchup[b-699l3auobx] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.dash-game-team[b-699l3auobx] {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.dash-game-vs[b-699l3auobx] {
    color: #334155;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.dash-game-location[b-699l3auobx] {
    color: #475569;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-game-time[b-699l3auobx] {
    color: #334155;
    font-size: 10px;
}

.dash-game-status[b-699l3auobx] {
    flex-shrink: 0;
}

/* ===== GAME STATUS BADGES ===== */
.dash-badge-scheduled[b-699l3auobx] {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.dash-badge-live[b-699l3auobx] {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.2);
    animation: dash-pulse-b-699l3auobx 2s ease-in-out infinite;
}

.dash-badge-halftime[b-699l3auobx] {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.2);
}

.dash-badge-final[b-699l3auobx] {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(149, 165, 166, 0.12);
    color: #95a5a6;
    border: 1px solid rgba(149, 165, 166, 0.2);
}

@keyframes dash-pulse-b-699l3auobx {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* ===== SHOW MORE ===== */
.dash-show-more[b-699l3auobx] {
    display: block;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    color: #3498db;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}

    .dash-show-more:hover[b-699l3auobx] {
        background: rgba(52, 152, 219, 0.06);
    }

/* ===== ADD BUTTON ===== */
.dash-add-btn[b-699l3auobx] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .dash-add-btn:hover[b-699l3auobx] {
        background: rgba(52, 152, 219, 0.1);
        border-color: rgba(52, 152, 219, 0.2);
        color: #3498db;
    }

/* ===================================================
   NOT LOGGED IN — MARKETING
   =================================================== */

/* ===== HERO ===== */
.hero-section[b-699l3auobx] {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 40px;
    align-items: center;
    padding: 40px 0 8px;
}

.hero-content[b-699l3auobx] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-badge[b-699l3auobx] {
    display: flex;
}

.hero-title[b-699l3auobx] {
    font-size: 52px;
    font-weight: 900;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -1px;
}

.hero-subtitle[b-699l3auobx] {
    color: #64748b;
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

.hero-buttons[b-699l3auobx] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-graphic[b-699l3auobx] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.soccer-svg[b-699l3auobx] {
    width: 100%;
    max-width: 380px;
    height: auto;
}

/* ===== HERO LIVE VIEW (2026-09-19) =====
   A real frame from a streamed game, framed like the public watch page:
   LIVE pill top-left, caption strip along the bottom. The image is the
   web-sized copy (SoccerTrackLiveView-web.jpg, ~220 KB) of the 6 MB PNG. */
.hero-live-frame[b-699l3auobx] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.03);
}

.hero-live-img[b-699l3auobx] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-live-topbar[b-699l3auobx] {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-live-badge[b-699l3auobx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(231, 76, 60, 0.92);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-live-badge-dot[b-699l3auobx] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
    animation: dash-pulse-b-699l3auobx 1.4s ease-in-out infinite;
}

.hero-live-watching[b-699l3auobx] {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.hero-live-caption[b-699l3auobx] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 16px 12px;
    background: linear-gradient(to top, rgba(6, 14, 26, 0.92), rgba(6, 14, 26, 0));
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-live-caption-title[b-699l3auobx] {
    color: #7cc4f5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.hero-live-caption-text[b-699l3auobx] {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

/* ===== SHARED TITLE COLORS ===== */
.title-white[b-699l3auobx] {
    color: #ffffff;
}

.title-accent[b-699l3auobx] {
    color: #3498db;
}

.title-dot[b-699l3auobx] {
    color: #475569;
    font-size: 0.75em;
}

/* ===== STATS SECTION ===== */
.stats-section[b-699l3auobx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card-inner[b-699l3auobx] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon[b-699l3auobx] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-blue[b-699l3auobx] {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.stat-icon-green[b-699l3auobx] {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.stat-icon-orange[b-699l3auobx] {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

.stat-icon-red[b-699l3auobx] {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.stat-text[b-699l3auobx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-number[b-699l3auobx] {
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
}

.stat-label[b-699l3auobx] {
    color: #64748b;
    font-size: 12px;
}

/* ===== FEATURES ===== */
.features-section[b-699l3auobx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title[b-699l3auobx] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.section-subtitle[b-699l3auobx] {
    color: #64748b;
    font-size: 15px;
    margin: 0;
    text-align: center;
}

.tile-text[b-699l3auobx] {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* ===== FOOTER ===== */
.home-footer[b-699l3auobx] {
    text-align: center;
    color: #334155;
    font-size: 13px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ===== SVG ANIMATIONS ===== */
.ring-rotate[b-699l3auobx] {
    transform-origin: center;
    animation: rotate-b-699l3auobx 20s linear infinite;
}

.ring-rotate-reverse[b-699l3auobx] {
    transform-origin: center;
    animation: rotate-b-699l3auobx 15s linear infinite reverse;
}

.arc-spin[b-699l3auobx] {
    transform-origin: center;
    animation: rotate-b-699l3auobx 8s linear infinite;
}

.arc-spin-delay[b-699l3auobx] {
    transform-origin: center;
    animation: rotate-b-699l3auobx 12s linear infinite reverse;
}

.arc-spin-slow[b-699l3auobx] {
    transform-origin: center;
    animation: rotate-b-699l3auobx 18s linear infinite;
}

.ball-float[b-699l3auobx] {
    animation: float-b-699l3auobx 4s ease-in-out infinite;
}

.dot-pulse[b-699l3auobx] {
    animation: pulse-b-699l3auobx 2s ease-in-out infinite;
}

.dot-pulse-delay[b-699l3auobx] {
    animation: pulse-b-699l3auobx 2s ease-in-out 1s infinite;
}

@keyframes rotate-b-699l3auobx {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes float-b-699l3auobx {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes pulse-b-699l3auobx {
    0%, 100% {
        opacity: 0.3;
        r: 3;
    }

    50% {
        opacity: 1;
        r: 5;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .dash-grid[b-699l3auobx] {
        grid-template-columns: 1fr;
    }

    .stats-section[b-699l3auobx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-section[b-699l3auobx] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-title[b-699l3auobx] {
        font-size: 36px;
    }

    .hero-graphic[b-699l3auobx] {
        order: -1;
    }

    .hero-live-frame[b-699l3auobx] {
        border-radius: 12px;
    }

    .hero-live-caption-text[b-699l3auobx] {
        font-size: 12px;
    }

    .soccer-svg[b-699l3auobx] {
        max-width: 240px;
    }

    .hero-buttons[b-699l3auobx] {
        justify-content: center;
    }

    .dash-welcome[b-699l3auobx] {
        grid-template-columns: 1fr;
    }

    .dash-announcement[b-699l3auobx] {
        max-width: 100%;
    }

    .stats-section[b-699l3auobx] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .hero-title[b-699l3auobx] {
        font-size: 28px;
    }

    .stats-section[b-699l3auobx] {
        grid-template-columns: 1fr;
    }

    .dash-welcome-left[b-699l3auobx] {
        flex-direction: column;
        text-align: center;
    }

    .dash-quick-actions[b-699l3auobx] {
        justify-content: center;
    }
}
/* /Components/Pages/Impersonate.razor.rz.scp.css */
/* Impersonate page (rebuilt 2026-09-19) -- same page chrome as the other
   admin pages, plus the search card, result cells and the "already
   impersonating" notice. */

.impersonate-page[b-wjwr8virvr] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
}

.page-header[b-wjwr8virvr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-left[b-wjwr8virvr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-wjwr8virvr] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

.header-right[b-wjwr8virvr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-subtitle[b-wjwr8virvr] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

.loading-state[b-wjwr8virvr],
.empty-state[b-wjwr8virvr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    color: #64748b;
}

.loading-text[b-wjwr8virvr] {
    font-size: 14px;
    margin: 0;
}

.empty-title[b-wjwr8virvr] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.empty-message[b-wjwr8virvr] {
    max-width: 420px;
    text-align: center;
    font-size: 13px;
    margin: 0;
}

.page-error[b-wjwr8virvr] {
    padding: 12px 16px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 10px;
    color: #e74c3c;
    font-size: 13px;
}

/* ===== SEARCH ===== */
.imp-search-card[b-wjwr8virvr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}

.imp-search-row[b-wjwr8virvr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .imp-search-row > :first-child[b-wjwr8virvr] {
        flex: 1;
    }

/* ===== RESULTS ===== */
.imp-name[b-wjwr8virvr] {
    color: #e2e8f0;
    font-weight: 600;
}

.imp-email[b-wjwr8virvr] {
    color: #cbd5e1;
}

.imp-username[b-wjwr8virvr] {
    color: #64748b;
    font-family: Consolas, "SFMono-Regular", Menlo, monospace;
    font-size: 12px;
}

.imp-no-login[b-wjwr8virvr] {
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

[b-wjwr8virvr] .imp-btn {
    font-weight: 700 !important;
}

/* ===== ALREADY IMPERSONATING ===== */
.imp-active[b-wjwr8virvr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(243, 156, 18, 0.1);
    border: 1px solid rgba(243, 156, 18, 0.3);
    border-radius: 12px;
    color: #fbd38d;
    font-size: 14px;
}

    .imp-active strong[b-wjwr8virvr] {
        color: #ffffff;
    }

.imp-active-dot[b-wjwr8virvr] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f39c12;
    flex-shrink: 0;
    animation: imp-pulse-b-wjwr8virvr 1.6s ease-out infinite;
}

@keyframes imp-pulse-b-wjwr8virvr {
    0% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.55);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(243, 156, 18, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0);
    }
}

.badge[b-wjwr8virvr] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 6px;
}

.badge-system[b-wjwr8virvr] {
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: #3498db;
}

.badge-inactive[b-wjwr8virvr] {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
}

.delete-confirm[b-wjwr8virvr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 8px 8px 4px;
}

.delete-icon[b-wjwr8virvr] {
    font-size: 32px;
}

.delete-title[b-wjwr8virvr] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.delete-message[b-wjwr8virvr] {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
}
/* /Components/Pages/Integrations.razor.rz.scp.css */
.integrations-page[b-ypgllzxlrp] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
}

.page-header[b-ypgllzxlrp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.header-left[b-ypgllzxlrp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 320px;
}

.page-title[b-ypgllzxlrp] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-ypgllzxlrp] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

.loading-state[b-ypgllzxlrp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 64px 24px;
    color: #64748b;
}

.loading-text[b-ypgllzxlrp] { font-size: 14px; margin: 0; }

.config-only[b-ypgllzxlrp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(241, 196, 15, 0.08);
    border: 1px solid rgba(241, 196, 15, 0.35);
    color: #e2e8f0;
    font-size: 13.5px;
    line-height: 1.5;
}

    .config-only strong[b-ypgllzxlrp] {
        color: #fde68a;
    }

    .config-only span[b-ypgllzxlrp] {
        color: #cbd5e1;
    }

.load-error[b-ypgllzxlrp],
.card-error[b-ypgllzxlrp] {
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.35);
    color: #f1948a;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
}

/* ── Cards ─────────────────────────────────────────────── */

.cards[b-ypgllzxlrp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
}

.card[b-ypgllzxlrp] {
    background: #1e293b;
    border: 1px solid #334155;
    border-left: 4px solid #475569;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.card.st-ok[b-ypgllzxlrp] { border-left-color: #2ecc71; }
.card.st-warn[b-ypgllzxlrp] { border-left-color: #f39c12; }
.card.st-bad[b-ypgllzxlrp] { border-left-color: #e74c3c; }

.card-head[b-ypgllzxlrp] { display: flex; flex-direction: column; gap: 4px; }

.card-title-wrap[b-ypgllzxlrp] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.card-title[b-ypgllzxlrp] {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.card-desc[b-ypgllzxlrp] {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
}

.status-pill[b-ypgllzxlrp] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid #475569;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
}

.status-pill.st-ok[b-ypgllzxlrp] { color: #2ecc71; border-color: rgba(46, 204, 113, 0.4); background: rgba(46, 204, 113, 0.12); }
.status-pill.st-warn[b-ypgllzxlrp] { color: #f39c12; border-color: rgba(243, 156, 18, 0.4); background: rgba(243, 156, 18, 0.12); }
.status-pill.st-bad[b-ypgllzxlrp] { color: #e74c3c; border-color: rgba(231, 76, 60, 0.4); background: rgba(231, 76, 60, 0.12); }

/* ── Status box ────────────────────────────────────────── */

.status-box[b-ypgllzxlrp] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.status-line[b-ypgllzxlrp] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.status-msg[b-ypgllzxlrp] { color: #e2e8f0; }
.status-when[b-ypgllzxlrp] { color: #64748b; font-size: 12px; white-space: nowrap; }

.status-warning[b-ypgllzxlrp] {
    color: #f39c12;
    font-weight: 600;
}

.details-toggle[b-ypgllzxlrp],
.link-btn[b-ypgllzxlrp] {
    background: none;
    border: none;
    padding: 0;
    color: #3498db;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
}

.details-toggle:hover[b-ypgllzxlrp],
.link-btn:hover[b-ypgllzxlrp] { text-decoration: underline; }

.link-btn:disabled[b-ypgllzxlrp] { color: #475569; cursor: default; text-decoration: none; }

.status-details[b-ypgllzxlrp] {
    margin: 0;
    padding-left: 18px;
    color: #94a3b8;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Fields ────────────────────────────────────────────── */

.fields[b-ypgllzxlrp] { display: flex; flex-direction: column; gap: 12px; }

.field[b-ypgllzxlrp] { display: flex; flex-direction: column; gap: 4px; }

.field-label-row[b-ypgllzxlrp] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.field-label[b-ypgllzxlrp] {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
}

.field-source[b-ypgllzxlrp] {
    font-size: 11px;
    color: #64748b;
}

.field-source.src-database[b-ypgllzxlrp] { color: #2ecc71; }
.field-source.src-config[b-ypgllzxlrp] { color: #94a3b8; }
.field-source.src-unreadable[b-ypgllzxlrp] { color: #e74c3c; }
.field-source.src-none[b-ypgllzxlrp] { color: #f39c12; }

.field-help-row[b-ypgllzxlrp] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.field-help[b-ypgllzxlrp] { color: #64748b; font-size: 12px; }

.field-updated[b-ypgllzxlrp] { color: #475569; font-size: 11px; }

/* ── Actions ───────────────────────────────────────────── */

.card-actions[b-ypgllzxlrp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid #334155;
}

.console-link[b-ypgllzxlrp] {
    margin-left: auto;
    color: #3498db;
    font-size: 12px;
    text-decoration: none;
}

.console-link:hover[b-ypgllzxlrp] { text-decoration: underline; }

.page-footnote[b-ypgllzxlrp] {
    color: #475569;
    font-size: 12px;
    margin: 0;
}

/* ── Roll confirm ──────────────────────────────────────── */

.confirm[b-ypgllzxlrp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 4px 0;
    color: #e2e8f0;
    font-size: 14px;
}

.confirm p[b-ypgllzxlrp] { margin: 0; }

.confirm-note[b-ypgllzxlrp] { color: #94a3b8; font-size: 13px; }

.confirm-actions[b-ypgllzxlrp] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 6px;
}

/* ── Phone ─────────────────────────────────────────────── */

@media (max-width: 640px) {
    .integrations-page[b-ypgllzxlrp] { padding: 12px; }
    .cards[b-ypgllzxlrp] { grid-template-columns: 1fr; }
    .card[b-ypgllzxlrp] { padding: 12px; }
    .card-actions[b-ypgllzxlrp]  .k-button { flex: 1 1 45%; }
    .console-link[b-ypgllzxlrp] { margin-left: 0; flex-basis: 100%; }
}
/* /Components/Pages/JoinTeam.razor.rz.scp.css */
.join-page[b-k1kny2w39n] {
    min-height: 100vh;
    background-color: #0b1929;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.join-card[b-k1kny2w39n] {
    background-color: #0e1e32;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
    max-width: 500px;
}

.join-header[b-k1kny2w39n] {
    background: linear-gradient(90deg, #0a1628, #0f2744);
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.brand-soccer[b-k1kny2w39n] {
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.brand-track[b-k1kny2w39n] {
    font-size: 20px;
    font-weight: 800;
    color: #3498db;
}

.brand-reg[b-k1kny2w39n] {
    color: #475569;
    font-size: 9px;
}

.join-body[b-k1kny2w39n] {
    padding: 40px 32px;
    text-align: center;
}

.join-icon[b-k1kny2w39n] {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

    .join-icon.success svg[b-k1kny2w39n] {
        filter: drop-shadow(0 0 12px rgba(46, 204, 113, 0.3));
    }

    .join-icon.error svg[b-k1kny2w39n] {
        filter: drop-shadow(0 0 12px rgba(231, 76, 60, 0.3));
    }

    .join-icon.warning svg[b-k1kny2w39n] {
        filter: drop-shadow(0 0 12px rgba(243, 156, 18, 0.3));
    }

.join-crest[b-k1kny2w39n] {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.join-title[b-k1kny2w39n] {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 12px 0;
}

.join-message[b-k1kny2w39n] {
    color: #8899aa;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

    .join-message strong[b-k1kny2w39n] {
        color: #e2e8f0;
    }

.join-note[b-k1kny2w39n] {
    background: rgba(52, 152, 219, 0.06);
    border: 1px solid rgba(52, 152, 219, 0.12);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
}

    .join-note p[b-k1kny2w39n] {
        margin: 0;
        color: #94a3b8;
        font-size: 14px;
        line-height: 1.6;
        font-style: italic;
    }

.join-notice[b-k1kny2w39n] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
}

    .join-notice p[b-k1kny2w39n] {
        margin: 0;
        color: #8899aa;
        font-size: 13px;
        line-height: 1.6;
    }

    .join-notice strong[b-k1kny2w39n] {
        color: #e2e8f0;
    }

.join-error[b-k1kny2w39n] {
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.18);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #f87171;
    font-size: 13px;
}

.join-actions[b-k1kny2w39n] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.join-btn[b-k1kny2w39n] {
    display: inline-block;
    padding: 14px 40px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    letter-spacing: 0.3px;
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
    width: 100%;
    max-width: 320px;
}

    .join-btn:disabled[b-k1kny2w39n] {
        opacity: 0.6;
        cursor: default;
    }

    .join-btn.primary[b-k1kny2w39n] {
        background: linear-gradient(135deg, #3498db, #2ecc71);
        color: #ffffff;
    }

        .join-btn.primary:hover:not(:disabled)[b-k1kny2w39n] {
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }

    .join-btn.secondary[b-k1kny2w39n] {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #94a3b8;
    }

        .join-btn.secondary:hover:not(:disabled)[b-k1kny2w39n] {
            background: rgba(255, 255, 255, 0.1);
        }

.join-signed-in[b-k1kny2w39n] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}

    .join-signed-in a[b-k1kny2w39n] {
        color: #3498db;
        text-decoration: none;
    }

.join-expiry[b-k1kny2w39n] {
    margin: 24px 0 0;
    color: #475569;
    font-size: 12px;
}

.join-footer[b-k1kny2w39n] {
    padding: 24px 32px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 520px) {
    .join-body[b-k1kny2w39n] {
        padding: 32px 20px;
    }

    .join-title[b-k1kny2w39n] {
        font-size: 22px;
    }
}
/* /Components/Pages/Leagues.razor.rz.scp.css */
/* Leagues admin page (2026-09-19). This page had no stylesheet at all, so
   the header/empty/delete text picked up the Kendo body colour and was
   unreadable on the dark background. Same layout rules as LicensePlans. */

.leagues-page[b-pojljy5isx] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
}

.page-header[b-pojljy5isx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-left[b-pojljy5isx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-pojljy5isx] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

.header-right[b-pojljy5isx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-pojljy5isx] .create-league-btn {
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #3498db, #2ecc71) !important;
    border: none !important;
}

.page-subtitle[b-pojljy5isx] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

.loading-state[b-pojljy5isx],
.empty-state[b-pojljy5isx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    color: #64748b;
}

.loading-text[b-pojljy5isx] {
    font-size: 14px;
    margin: 0;
}

.empty-title[b-pojljy5isx] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.empty-message[b-pojljy5isx] {
    max-width: 420px;
    text-align: center;
    font-size: 13px;
    margin: 0;
}

.page-error[b-pojljy5isx] {
    padding: 12px 16px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 10px;
    color: #e74c3c;
    font-size: 13px;
}

.league-name[b-pojljy5isx] {
    font-weight: 600;
    margin-right: 8px;
}

.badge[b-pojljy5isx] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 6px;
}

.badge-system[b-pojljy5isx] {
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: #3498db;
}

.badge-inactive[b-pojljy5isx] {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
}

.delete-confirm[b-pojljy5isx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 8px 8px 4px;
}

.delete-icon[b-pojljy5isx] {
    font-size: 32px;
}

.delete-title[b-pojljy5isx] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.delete-message[b-pojljy5isx] {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
}
/* /Components/Pages/LicensePlanEditor.razor.rz.scp.css */
.license-plan-editor-page[b-hz00j3jdbm] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    max-width: 980px;
}

.page-header[b-hz00j3jdbm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.header-left[b-hz00j3jdbm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-right[b-hz00j3jdbm] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.page-title[b-hz00j3jdbm] {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.page-subtitle[b-hz00j3jdbm] {
    color: #64748b;
    font-size: 12px;
    margin: 0;
    max-width: 680px;
}

.editor-error[b-hz00j3jdbm] {
    padding: 12px 16px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 10px;
    color: #e74c3c;
    font-size: 13px;
}

.loading-state[b-hz00j3jdbm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    color: #64748b;
}

.loading-text[b-hz00j3jdbm] {
    font-size: 14px;
    margin: 0;
}

.editor-form[b-hz00j3jdbm] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.field-row[b-hz00j3jdbm] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.field-grow[b-hz00j3jdbm] {
    flex: 1;
    min-width: 0;
}

.field-label-row[b-hz00j3jdbm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

    .field-label-row .field-label[b-hz00j3jdbm] {
        margin-bottom: 0;
    }

.system-hint[b-hz00j3jdbm] {
    color: #f39c12;
}

.features-section[b-hz00j3jdbm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

[b-hz00j3jdbm] .features-grid .k-grid-toolbar {
    justify-content: flex-start;
}

@media (max-width: 640px) {
    .field-row[b-hz00j3jdbm] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/LicensePlans.razor.rz.scp.css */
.license-plans-page[b-4j57sh7cqx] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
}

.page-header[b-4j57sh7cqx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-left[b-4j57sh7cqx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-4j57sh7cqx] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-4j57sh7cqx] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

.loading-state[b-4j57sh7cqx],
.empty-state[b-4j57sh7cqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    color: #64748b;
}

.loading-text[b-4j57sh7cqx] {
    font-size: 14px;
    margin: 0;
}

.empty-title[b-4j57sh7cqx] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.empty-message[b-4j57sh7cqx] {
    max-width: 420px;
    text-align: center;
    font-size: 13px;
    margin: 0;
}

.page-error[b-4j57sh7cqx] {
    padding: 12px 16px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 10px;
    color: #e74c3c;
    font-size: 13px;
}

.template-name[b-4j57sh7cqx] {
    font-weight: 600;
    margin-right: 8px;
}

.badge[b-4j57sh7cqx] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 6px;
}

.badge-system[b-4j57sh7cqx] {
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: #3498db;
}

.badge-inactive[b-4j57sh7cqx] {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
}

.delete-confirm[b-4j57sh7cqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 8px 8px 4px;
}

.delete-icon[b-4j57sh7cqx] {
    font-size: 32px;
}

.delete-title[b-4j57sh7cqx] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.delete-message[b-4j57sh7cqx] {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ===== PAGE ROOT ===== */

.login-page[b-6rceg7d1zf] {
    min-height: 100vh;
    background: linear-gradient(160deg, #0b1929 0%, #0f2744 50%, #132f4c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* ===== BACKGROUND ORBS ===== */ .bg-orbs[b-6rceg7d1zf] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.orb[b-6rceg7d1zf] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orbFloat-b-6rceg7d1zf 10s ease-in-out infinite;
}

.orb-1[b-6rceg7d1zf] {
    width: 400px;
    height: 400px;
    background: rgba(52, 152, 219, 0.08);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.orb-2[b-6rceg7d1zf] {
    width: 350px;
    height: 350px;
    background: rgba(46, 204, 113, 0.06);
    bottom: -80px;
    right: -80px;
    animation-delay: 3s;
}

.orb-3[b-6rceg7d1zf] {
    width: 250px;
    height: 250px;
    background: rgba(231, 76, 60, 0.05);
    top: 50%;
    left: 50%;
    animation-delay: 6s;
}

@keyframes orbFloat-b-6rceg7d1zf {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -20px) scale(1.1);
    }
}

/* ===== LOGIN CONTAINER ===== */ .login-container[b-6rceg7d1zf] {
    display: flex;
    width: 100%;
    max-width: 960px;
    min-height: 580px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    animation: containerIn-b-6rceg7d1zf 0.6s ease-out;
}

@keyframes containerIn-b-6rceg7d1zf {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== LEFT BRANDING PANEL ===== */ .login-branding[b-6rceg7d1zf] {
    flex: 1;
    background: linear-gradient(160deg, #0d2137 0%, #112d4e 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.branding-content[b-6rceg7d1zf] {
    text-align: center;
}

.branding-svg[b-6rceg7d1zf] {
    width: 200px;
    height: 200px;
    margin-bottom: 24px;
}

/* SVG Animations */ .ring-spin[b-6rceg7d1zf] {
    animation: spin-b-6rceg7d1zf 20s linear infinite;
    transform-origin: 150px 150px;
}

.arc-1[b-6rceg7d1zf] {
    animation: spin-b-6rceg7d1zf 8s linear infinite;
    transform-origin: 150px 150px;
}

.arc-2[b-6rceg7d1zf] {
    animation: spin-b-6rceg7d1zf 12s linear infinite reverse;
    transform-origin: 150px 150px;
}

.ball-hover[b-6rceg7d1zf] {
    animation: hover-b-6rceg7d1zf 3s ease-in-out infinite;
    transform-origin: 150px 150px;
}

.dot-float[b-6rceg7d1zf] {
    animation: dotPulse-b-6rceg7d1zf 3s ease-in-out infinite;
}

.dot-float-delay[b-6rceg7d1zf] {
    animation: dotPulse-b-6rceg7d1zf 3s ease-in-out infinite 1.5s;
}

@keyframes spin-b-6rceg7d1zf {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes hover-b-6rceg7d1zf {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes dotPulse-b-6rceg7d1zf {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

.branding-title[b-6rceg7d1zf] {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.brand-white[b-6rceg7d1zf] {
    color: #ffffff;
}

.brand-accent[b-6rceg7d1zf] {
    background: linear-gradient(135deg, #3498db, #2ecc71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-dot[b-6rceg7d1zf] {
    color: #64748b;
    font-weight: 300;
    font-size: 24px;
}

.branding-tagline[b-6rceg7d1zf] {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 28px 0;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

.branding-features[b-6rceg7d1zf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    max-width: 220px;
    margin: 0 auto;
}

.feature-item[b-6rceg7d1zf] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8899aa;
    font-size: 13px;
}

.feature-check[b-6rceg7d1zf] {
    color: #2ecc71;
    font-weight: 700;
    font-size: 14px;
}

/* ===== RIGHT FORM PANEL ===== */ .login-form-panel[b-6rceg7d1zf] {
    flex: 1;
    background: #0e1e32;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.form-wrapper[b-6rceg7d1zf] {
    width: 100%;
    max-width: 360px;
}

/* ===== INVITE BANNER (2026-09-23) ===== */
.invite-banner[b-6rceg7d1zf] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.25);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.invite-crest[b-6rceg7d1zf] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
}

.invite-banner-title[b-6rceg7d1zf] {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.invite-banner-sub[b-6rceg7d1zf] {
    display: block;
    color: #8899aa;
    font-size: 12px;
    margin-top: 2px;
}

.form-header[b-6rceg7d1zf] {
    margin-bottom: 32px;
}

.form-title[b-6rceg7d1zf] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.form-subtitle[b-6rceg7d1zf] {
    color: #64748b;
    font-size: 15px;
    margin: 0;
}

/* ===== ERROR BANNER ===== */ .error-banner[b-6rceg7d1zf] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
    color: #e74c3c;
    font-size: 14px;
    animation: shakeIn-b-6rceg7d1zf 0.4s ease-out;
}

@keyframes shakeIn-b-6rceg7d1zf {
    0% {
        transform: translateX(-8px);
        opacity: 0;
    }

    25% {
        transform: translateX(6px);
    }

    50% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===== FORM FIELDS ===== */ .field-group[b-6rceg7d1zf] {
    margin-bottom: 20px;
}

.field-label[b-6rceg7d1zf] {
    display: block;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.field-label-row[b-6rceg7d1zf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.forgot-link[b-6rceg7d1zf] {
    color: #3498db;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

    .forgot-link:hover[b-6rceg7d1zf] {
        color: #5dade2;
    }

/* Telerik TextBox overrides */
[b-6rceg7d1zf].login-input.k-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    height: 48px !important;
    transition: all 0.2s ease;
}

    [b-6rceg7d1zf].login-input.k-input:focus,
    [b-6rceg7d1zf].login-input.k-input.k-focus {
        border-color: #3498db !important;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
        background: rgba(255, 255, 255, 0.06) !important;
    }

    [b-6rceg7d1zf].login-input.k-input::placeholder {
        color: #475569 !important;
    }

/* Validation messages */
[b-6rceg7d1zf].validation-message {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
}

/* ===== SUBMIT BUTTON ===== */
[b-6rceg7d1zf].login-submit-btn {
    width: 100% !important;
    height: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    margin-top: 8px;
    background: linear-gradient(135deg, #3498db, #2ecc71) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

    [b-6rceg7d1zf].login-submit-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(52, 152, 219, 0.35) !important;
        filter: brightness(1.08);
    }

    [b-6rceg7d1zf].login-submit-btn:active {
        transform: translateY(0) !important;
    }

    [b-6rceg7d1zf].login-submit-btn:disabled {
        opacity: 0.6 !important;
        transform: none !important;
        box-shadow: none !important;
    }

/* ===== DIVIDER ===== */ .divider[b-6rceg7d1zf] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0;
}

.divider-line[b-6rceg7d1zf] {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.divider-text[b-6rceg7d1zf] {
    color: #475569;
    font-size: 13px;
    font-weight: 500;
}

/* ===== REGISTER PROMPT ===== */ .register-prompt[b-6rceg7d1zf] {
    text-align: center;
    font-size: 14px;
    color: #64748b;
}

.register-link[b-6rceg7d1zf] {
    color: #3498db;
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
    transition: color 0.2s;
}

    .register-link:hover[b-6rceg7d1zf] {
        color: #5dade2;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .login-container[b-6rceg7d1zf] {
        flex-direction: column;
        max-width: 440px;
        min-height: auto;
    }

    .login-branding[b-6rceg7d1zf] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 30px 20px;
    }

    .branding-svg[b-6rceg7d1zf] {
        width: 140px;
        height: 140px;
        margin-bottom: 16px;
    }

    .branding-title[b-6rceg7d1zf] {
        font-size: 26px;
    }

    .branding-features[b-6rceg7d1zf] {
        display: none;
    }

    .login-form-panel[b-6rceg7d1zf] {
        padding: 30px 24px;
    }

    .form-title[b-6rceg7d1zf] {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .login-page[b-6rceg7d1zf] {
        padding: 10px;
    }

    .login-branding[b-6rceg7d1zf] {
        padding: 24px 16px;
    }

    .branding-tagline[b-6rceg7d1zf] {
        display: none;
    }

    .login-form-panel[b-6rceg7d1zf] {
        padding: 24px 20px;
    }
}
/* /Components/Pages/MenuAdmin.razor.rz.scp.css */
/* Navigation menu admin page (2026-09-19). Same page chrome as Leagues,
   plus the tree-indented item cell and the visibility/position badges. */

.menu-admin-page[b-dex7oh8ap7] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
}

.page-header[b-dex7oh8ap7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-left[b-dex7oh8ap7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-dex7oh8ap7] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

.header-right[b-dex7oh8ap7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-dex7oh8ap7] .create-menu-btn {
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #3498db, #2ecc71) !important;
    border: none !important;
}

.page-subtitle[b-dex7oh8ap7] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

.loading-state[b-dex7oh8ap7],
.empty-state[b-dex7oh8ap7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    color: #64748b;
}

.loading-text[b-dex7oh8ap7] {
    font-size: 14px;
    margin: 0;
}

.empty-title[b-dex7oh8ap7] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.empty-message[b-dex7oh8ap7] {
    max-width: 420px;
    text-align: center;
    font-size: 13px;
    margin: 0;
}

.page-error[b-dex7oh8ap7] {
    padding: 12px 16px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 10px;
    color: #e74c3c;
    font-size: 13px;
}

/* ===== ITEM CELL (tree) ===== */
.mi-cell[b-dex7oh8ap7] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mi-branch[b-dex7oh8ap7] {
    color: #334155;
    font-size: 12px;
}

.mi-icon[b-dex7oh8ap7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #7cc4f5;
    flex-shrink: 0;
}

.mi-text[b-dex7oh8ap7] {
    color: #e2e8f0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mi-url[b-dex7oh8ap7] {
    color: #64748b;
    font-family: Consolas, "SFMono-Regular", Menlo, monospace;
    font-size: 12px;
}

.mi-tag[b-dex7oh8ap7] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mi-tag-group[b-dex7oh8ap7] {
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: #3498db;
}

.mi-tag-off[b-dex7oh8ap7] {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
}

.mi-tag-warn[b-dex7oh8ap7] {
    background: rgba(243, 156, 18, 0.12);
    border: 1px solid rgba(243, 156, 18, 0.35);
    color: #f39c12;
}

/* ===== VISIBILITY / POSITION BADGES ===== */
.mi-vis[b-dex7oh8ap7],
.mi-pos[b-dex7oh8ap7] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.mi-vis-anonymous[b-dex7oh8ap7] {
    color: #94a3b8;
}

.mi-vis-authenticated[b-dex7oh8ap7] {
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

.mi-vis-aspnetrole[b-dex7oh8ap7] {
    background: rgba(231, 76, 60, 0.12);
    border-color: rgba(231, 76, 60, 0.3);
    color: #ff8a80;
}

.mi-vis-approle[b-dex7oh8ap7] {
    background: rgba(155, 89, 182, 0.14);
    border-color: rgba(155, 89, 182, 0.35);
    color: #c39bd3;
}

.mi-vis-entry[b-dex7oh8ap7] {
    background: rgba(243, 156, 18, 0.12);
    border-color: rgba(243, 156, 18, 0.35);
    color: #f39c12;
}

.mi-pos-top[b-dex7oh8ap7] {
    color: #7cc4f5;
}

.mi-pos-bottom[b-dex7oh8ap7] {
    color: #f39c12;
}

[b-dex7oh8ap7] .menu-row-disabled td {
    opacity: 0.5;
}

[b-dex7oh8ap7] .menu-row-group td {
    background: rgba(255, 255, 255, 0.025) !important;
}

.menu-hint[b-dex7oh8ap7] {
    color: #475569;
    font-size: 12px;
    margin: 0;
}

    .menu-hint strong[b-dex7oh8ap7] {
        color: #94a3b8;
    }

.badge[b-dex7oh8ap7] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 6px;
}

.badge-system[b-dex7oh8ap7] {
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: #3498db;
}

.badge-inactive[b-dex7oh8ap7] {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
}

.delete-confirm[b-dex7oh8ap7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 8px 8px 4px;
}

.delete-icon[b-dex7oh8ap7] {
    font-size: 32px;
}

.delete-title[b-dex7oh8ap7] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.delete-message[b-dex7oh8ap7] {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
}
/* /Components/Pages/Messages.razor.rz.scp.css */
/* ===== PAGE LAYOUT ===== */
.msg-page[b-ub9whhf1tv] {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - 60px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    gap: 16px;
}

/* ===== LEFT PANEL ===== */
.msg-list-panel[b-ub9whhf1tv] {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    min-height: 0;
}

/* ===== LIST HEADER ===== */
.msg-list-header[b-ub9whhf1tv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.msg-list-title-row[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.msg-list-title[b-ub9whhf1tv] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.msg-unread-badge[b-ub9whhf1tv] {
    background: #3498db;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.msg-list-actions[b-ub9whhf1tv] {
    display: flex;
    gap: 8px;
}

.msg-filter-btn[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    justify-content: center;
}

    .msg-filter-btn:hover[b-ub9whhf1tv] {
        background: rgba(255, 255, 255, 0.08);
        color: #94a3b8;
    }

.msg-filter-active[b-ub9whhf1tv] {
    background: rgba(52, 152, 219, 0.12) !important;
    border-color: rgba(52, 152, 219, 0.3) !important;
    color: #3498db !important;
}

.msg-compose-btn[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    justify-content: center;
}

    .msg-compose-btn:hover[b-ub9whhf1tv] {
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        transform: translateY(-1px);
    }

/* ===== MESSAGE LIST ===== */
.msg-list[b-ub9whhf1tv] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.msg-list-item[b-ub9whhf1tv] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

    .msg-list-item:hover[b-ub9whhf1tv] {
        background: rgba(255, 255, 255, 0.04);
    }

.msg-selected[b-ub9whhf1tv] {
    background: rgba(52, 152, 219, 0.08) !important;
}

.msg-unread[b-ub9whhf1tv] {
    background: rgba(52, 152, 219, 0.04);
}

/* Unread indicator bar */
.msg-item-indicator[b-ub9whhf1tv] {
    width: 3px;
    border-radius: 2px;
    margin-right: 12px;
    flex-shrink: 0;
    background: transparent;
}

.msg-indicator-unread[b-ub9whhf1tv] {
    background: #3498db;
}

.msg-item-content[b-ub9whhf1tv] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.msg-item-top[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.msg-item-from[b-ub9whhf1tv] {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-item-date[b-ub9whhf1tv] {
    color: #475569;
    font-size: 11px;
    flex-shrink: 0;
}

.msg-item-subject[b-ub9whhf1tv] {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-item-subject-unread[b-ub9whhf1tv] {
    color: #e2e8f0;
    font-weight: 700;
}

.msg-item-meta[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

/* ===== LOADING / EMPTY ===== */
.msg-list-loading[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    flex: 1;
}

.msg-list-empty[b-ub9whhf1tv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: #334155;
    font-size: 13px;
    flex: 1;
}

/* ===== PAGINATION ===== */
.msg-pagination[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.msg-page-btn[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

    .msg-page-btn:hover:not(:disabled)[b-ub9whhf1tv] {
        background: rgba(255, 255, 255, 0.08);
        color: #94a3b8;
    }

    .msg-page-btn:disabled[b-ub9whhf1tv] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.msg-page-info[b-ub9whhf1tv] {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

/* ===== RIGHT PANEL ===== */
.msg-detail-panel[b-ub9whhf1tv] {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    min-height: 0;
}

.msg-detail-empty[b-ub9whhf1tv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    color: #334155;
    font-size: 14px;
}

/* ===== MESSAGE DETAIL ===== */
.msg-detail[b-ub9whhf1tv] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.msg-detail-header[b-ub9whhf1tv] {
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.msg-detail-subject[b-ub9whhf1tv] {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}

.msg-detail-meta-row[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.msg-detail-meta[b-ub9whhf1tv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.msg-detail-from[b-ub9whhf1tv] {
    color: #94a3b8;
    font-size: 13px;
}

    .msg-detail-from strong[b-ub9whhf1tv] {
        color: #64748b;
    }

.msg-detail-date[b-ub9whhf1tv] {
    color: #475569;
    font-size: 12px;
}

.msg-detail-actions[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.msg-action-btn[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.msg-delete-btn:hover[b-ub9whhf1tv] {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}

/* ===== MESSAGE BODY ===== */
.msg-detail-body[b-ub9whhf1tv] {
    padding: 24px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ===== THREAD ===== */
.msg-thread[b-ub9whhf1tv] {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.msg-thread-divider[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.02);
}

    .msg-thread-divider[b-ub9whhf1tv]::before,
    .msg-thread-divider[b-ub9whhf1tv]::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.06);
    }

    .msg-thread-divider span[b-ub9whhf1tv] {
        color: #475569;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

.msg-thread-item[b-ub9whhf1tv] {
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.msg-thread-header[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.msg-thread-from[b-ub9whhf1tv] {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.msg-thread-date[b-ub9whhf1tv] {
    color: #475569;
    font-size: 11px;
}

.msg-thread-body[b-ub9whhf1tv] {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

/* ===== REPLY BOX ===== */
.msg-reply-box[b-ub9whhf1tv] {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}

.msg-reply-header[b-ub9whhf1tv] {
    margin-bottom: 8px;
}

.msg-reply-label[b-ub9whhf1tv] {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[b-ub9whhf1tv] .msg-reply-input .k-textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    resize: none !important;
}

    [b-ub9whhf1tv] .msg-reply-input .k-textarea:focus {
        border-color: #3498db !important;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
    }

.msg-reply-error[b-ub9whhf1tv] {
    color: #e74c3c;
    font-size: 12px;
    margin: 6px 0;
}

.msg-reply-actions[b-ub9whhf1tv] {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.msg-reply-btn[b-ub9whhf1tv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

    .msg-reply-btn:hover:not(:disabled)[b-ub9whhf1tv] {
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        transform: translateY(-1px);
    }

    .msg-reply-btn:disabled[b-ub9whhf1tv] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ===== TARGET BADGES ===== */
.msg-target-badge[b-ub9whhf1tv] {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.msg-badge-direct[b-ub9whhf1tv] {
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.msg-badge-team[b-ub9whhf1tv] {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.2);
}

.msg-badge-game[b-ub9whhf1tv] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.2);
}

.msg-badge-broadcast[b-ub9whhf1tv] {
    background: rgba(155, 89, 182, 0.12);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.2);
}

/* ===== SCROLLBARS ===== */
.msg-list[b-ub9whhf1tv]::-webkit-scrollbar,
.msg-detail-body[b-ub9whhf1tv]::-webkit-scrollbar {
    width: 4px;
}

.msg-list[b-ub9whhf1tv]::-webkit-scrollbar-track,
.msg-detail-body[b-ub9whhf1tv]::-webkit-scrollbar-track {
    background: transparent;
}

.msg-list[b-ub9whhf1tv]::-webkit-scrollbar-thumb,
.msg-detail-body[b-ub9whhf1tv]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .msg-page[b-ub9whhf1tv] {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 768px) {
    .msg-page[b-ub9whhf1tv] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .msg-list-panel[b-ub9whhf1tv] {
        max-height: 400px;
    }

    .msg-detail-panel[b-ub9whhf1tv] {
        min-height: 500px;
    }
}
/* /Components/Pages/MyStats.razor.rz.scp.css */
/* ===== MY STATS (2026-09-21) ===== */
.ms-page[b-ar6y5wa3q6] {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px 32px;
    animation: fadeIn-b-ar6y5wa3q6 0.4s ease-out;
}

@keyframes fadeIn-b-ar6y5wa3q6 {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.loading-state[b-ar6y5wa3q6], .empty-state[b-ar6y5wa3q6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    text-align: center;
}

.loading-text[b-ar6y5wa3q6] { color: #64748b; font-size: 14px; }
.empty-icon[b-ar6y5wa3q6] { font-size: 56px; }
.empty-title[b-ar6y5wa3q6] { color: #ffffff; font-size: 22px; font-weight: 700; margin: 0; }
.empty-message[b-ar6y5wa3q6] { color: #64748b; font-size: 15px; margin: 0 0 16px 0; max-width: 440px; }

.ms-header[b-ar6y5wa3q6] { margin-top: 28px; margin-bottom: 18px; }
.ms-title[b-ar6y5wa3q6] { color: #ffffff; font-size: 26px; font-weight: 800; margin: 0 0 4px; }
.ms-subtitle[b-ar6y5wa3q6] { color: #64748b; font-size: 14px; margin: 0; }

.ms-grid[b-ar6y5wa3q6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.ms-card[b-ar6y5wa3q6] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    transition: all 0.15s;
}

    .ms-card:hover[b-ar6y5wa3q6] {
        background: rgba(52, 152, 219, 0.08);
        border-color: rgba(52, 152, 219, 0.35);
        transform: translateY(-1px);
    }

.ms-jersey[b-ar6y5wa3q6] {
    width: 44px;
    height: 52px;
    border-radius: 8px 8px 5px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
    border: 1px solid rgba(15, 23, 42, 0.35);
}

.ms-card-text[b-ar6y5wa3q6] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ms-card-name[b-ar6y5wa3q6] { color: #ffffff; font-size: 15px; font-weight: 700; }
.ms-card-team[b-ar6y5wa3q6] { color: #94a3b8; font-size: 12px; }
/* /Components/Pages/NewUserWizard.razor.rz.scp.css */
/* ===== PAGE ROOT ===== */

.wizard-page[b-tav4hbmcg3] {
    min-height: 100vh;
    background: linear-gradient(160deg, #0b1929 0%, #0f2744 50%, #132f4c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* ===== BACKGROUND ORBS ===== */ .bg-orbs[b-tav4hbmcg3] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.orb[b-tav4hbmcg3] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orbFloat-b-tav4hbmcg3 10s ease-in-out infinite;
}

.orb-1[b-tav4hbmcg3] {
    width: 400px;
    height: 400px;
    background: rgba(52,152,219,0.08);
    top: -100px;
    left: -100px;
}

.orb-2[b-tav4hbmcg3] {
    width: 350px;
    height: 350px;
    background: rgba(46,204,113,0.06);
    bottom: -80px;
    right: -80px;
    animation-delay: 3s;
}

.orb-3[b-tav4hbmcg3] {
    width: 250px;
    height: 250px;
    background: rgba(243,156,18,0.05);
    top: 40%;
    left: 60%;
    animation-delay: 6s;
}

@keyframes orbFloat-b-tav4hbmcg3 {
    0%, 100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(30px,-20px) scale(1.1);
    }
}

/* ===== CONTAINER ===== */ .wizard-container[b-tav4hbmcg3] {
    display: flex;
    width: 100%;
    max-width: 1060px;
    min-height: 620px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0,0,0,0.5);
    position: relative;
    z-index: 1;
    animation: containerIn-b-tav4hbmcg3 0.6s ease-out;
}

@keyframes containerIn-b-tav4hbmcg3 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== LEFT BRANDING ===== */ .wizard-branding[b-tav4hbmcg3] {
    flex: 0 0 360px;
    background: linear-gradient(160deg, #0d2137 0%, #112d4e 100%);
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.branding-content[b-tav4hbmcg3] {
    text-align: center;
}

.branding-svg[b-tav4hbmcg3] {
    width: 160px;
    height: 160px;
    margin-bottom: 20px;
}

.ring-spin[b-tav4hbmcg3] {
    animation: spin-b-tav4hbmcg3 20s linear infinite;
    transform-origin: 150px 150px;
}

.arc-1[b-tav4hbmcg3] {
    animation: spin-b-tav4hbmcg3 8s linear infinite;
    transform-origin: 150px 150px;
}

.arc-2[b-tav4hbmcg3] {
    animation: spin-b-tav4hbmcg3 12s linear infinite reverse;
    transform-origin: 150px 150px;
}

.dot-float[b-tav4hbmcg3] {
    animation: dotPulse-b-tav4hbmcg3 3s ease-in-out infinite;
}

.dot-float-delay[b-tav4hbmcg3] {
    animation: dotPulse-b-tav4hbmcg3 3s ease-in-out infinite 1.5s;
}

@keyframes spin-b-tav4hbmcg3 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes dotPulse-b-tav4hbmcg3 {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

.branding-title[b-tav4hbmcg3] {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.brand-white[b-tav4hbmcg3] {
    color: #ffffff;
}

.brand-accent[b-tav4hbmcg3] {
    background: linear-gradient(135deg,#3498db,#2ecc71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-dot[b-tav4hbmcg3] {
    color: #64748b;
    font-weight: 300;
    font-size: 20px;
}

.branding-tagline[b-tav4hbmcg3] {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 28px 0;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== INVITED TEAM (2026-09-23) ===== */
.invited-team[b-tav4hbmcg3] {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.25);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 auto 28px;
    max-width: 300px;
}

.invited-crest[b-tav4hbmcg3] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    flex-shrink: 0;
}

.invited-text[b-tav4hbmcg3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.invited-label[b-tav4hbmcg3] {
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.invited-name[b-tav4hbmcg3] {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.invited-role[b-tav4hbmcg3] {
    color: #8899aa;
    font-size: 12px;
    margin-top: 2px;
}

.wizard-loading[b-tav4hbmcg3] {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

    .wizard-loading p[b-tav4hbmcg3] {
        color: #94a3b8;
        font-size: 15px;
        margin: 0;
    }

/* ===== STEP PROGRESS ===== */ .step-progress[b-tav4hbmcg3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 8px;
}

.step-item[b-tav4hbmcg3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.step-circle[b-tav4hbmcg3] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.step-active.step-circle[b-tav4hbmcg3] {
    border-color: #3498db;
    color: #3498db;
    background: rgba(52,152,219,0.1);
}

.step-complete.step-circle[b-tav4hbmcg3] {
    border-color: #2ecc71;
    color: #2ecc71;
    background: rgba(46,204,113,0.1);
}

.step-text[b-tav4hbmcg3] {
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    transition: color 0.3s;
}

.step-active.step-text[b-tav4hbmcg3] {
    color: #94a3b8;
}

.step-complete.step-text[b-tav4hbmcg3] {
    color: #2ecc71;
}

.step-line[b-tav4hbmcg3] {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.08);
    margin: 0 8px;
    margin-bottom: 22px;
    transition: background 0.3s;
}

.step-line-active[b-tav4hbmcg3] {
    background: #2ecc71;
}

/* ===== RIGHT FORM PANEL ===== */ .wizard-form-panel[b-tav4hbmcg3] {
    flex: 1;
    background: #0e1e32;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 40px;
    overflow-y: auto;
}

.form-wrapper[b-tav4hbmcg3] {
    width: 100%;
    max-width: 480px;
    position: relative;
}

/* ===== WIZARD COMPONENT OVERRIDES ===== */
[b-tav4hbmcg3].wizard-component {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

    [b-tav4hbmcg3].wizard-component.k-stepper {
        display: none !important;
    }

    [b-tav4hbmcg3].wizard-component.k-wizard-content {
        padding: 0 !important;
        background: transparent !important;
    }

    [b-tav4hbmcg3].wizard-component.k-wizard-buttons {
        padding: 24px 0 0 0 !important;
        background: transparent !important;
        border-top: 1px solid rgba(255,255,255,0.06) !important;
        margin-top: 24px;
    }

        [b-tav4hbmcg3].wizard-component.k-wizard-buttons.k-button {
            border-radius: 10px !important;
            font-weight: 600 !important;
            padding: 10px 28px !important;
            font-size: 14px !important;
        }

        [b-tav4hbmcg3].wizard-component.k-wizard-buttons.k-button-solid-primary {
            background: linear-gradient(135deg, #3498db, #2ecc71) !important;
            border: none !important;
        }

            [b-tav4hbmcg3].wizard-component.k-wizard-buttons.k-button-solid-primary:hover {
                box-shadow: 0 4px 15px rgba(52,152,219,0.3) !important;
                filter: brightness(1.08);
            }

        [b-tav4hbmcg3].wizard-component.k-wizard-buttons.k-button-solid-base {
            background: rgba(255,255,255,0.06) !important;
            border: 1px solid rgba(255,255,255,0.1) !important;
            color: #94a3b8 !important;
        }

            [b-tav4hbmcg3].wizard-component.k-wizard-buttons.k-button-solid-base:hover {
                background: rgba(255,255,255,0.1) !important;
                color: #ffffff !important;
            }

/* ===== STEP CONTENT ===== */ .wizard-step-content[b-tav4hbmcg3] {
    animation: stepFadeIn-b-tav4hbmcg3 0.3s ease-out;
}

@keyframes stepFadeIn-b-tav4hbmcg3 {
    from {
        opacity: 0;
        transform: translateX(12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-header[b-tav4hbmcg3] {
    margin-bottom: 24px;
}

.step-title[b-tav4hbmcg3] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.step-subtitle[b-tav4hbmcg3] {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

/* ===== FORM FIELDS ===== */ .field-row[b-tav4hbmcg3] {
    display: flex;
    gap: 12px;
}

    .field-row.field-group[b-tav4hbmcg3] {
        flex: 1;
    }

.field-group[b-tav4hbmcg3] {
    margin-bottom: 18px;
}

.field-grow[b-tav4hbmcg3] {
    flex: 2 !important;
}

.field-small[b-tav4hbmcg3] {
    flex: 0 0 80px !important;
}

.field-medium[b-tav4hbmcg3] {
    flex: 0 0 110px !important;
}

/* Under the contact-email box (2026-09-24). */
.field-hint[b-tav4hbmcg3] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
}

    .field-hint-link[b-tav4hbmcg3] {
        background: none;
        border: none;
        padding: 0;
        margin-left: 4px;
        color: #3498db;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

        .field-hint-link:hover[b-tav4hbmcg3] {
            text-decoration: underline;
        }

.field-hint-warn[b-tav4hbmcg3] {
    color: #f6c177;
}

.field-label[b-tav4hbmcg3] {
    display: block;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

[b-tav4hbmcg3].wizard-input.k-input,
[b-tav4hbmcg3].wizard-input.k-picker {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    height: 44px !important;
    transition: all 0.2s ease;
}

    [b-tav4hbmcg3].wizard-input.k-input:focus,
    [b-tav4hbmcg3].wizard-input.k-input.k-focus,
    [b-tav4hbmcg3].wizard-input.k-picker:focus {
        border-color: #3498db !important;
        box-shadow: 0 0 0 3px rgba(52,152,219,0.15) !important;
        background: rgba(255,255,255,0.06) !important;
    }

    [b-tav4hbmcg3].wizard-input.k-input::placeholder {
        color: #475569 !important;
    }

[b-tav4hbmcg3].validation-message {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
}

/* ===== TEAM TOGGLE ===== */ .team-toggle[b-tav4hbmcg3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    margin-bottom: 24px;
}

.team-toggle-label[b-tav4hbmcg3] {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
}

/* ===== COLOR PICKER ===== */ .color-picker-row[b-tav4hbmcg3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-preview[b-tav4hbmcg3] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.15);
}

.color-hex[b-tav4hbmcg3] {
    color: #64748b;
    font-family: 'Cascadia Code','Fira Code','Consolas',monospace;
    font-size: 12px;
}

/* ===== TEAM PREVIEW ===== */ .team-preview[b-tav4hbmcg3] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    margin-top: 8px;
}

.jersey-preview[b-tav4hbmcg3] {
    width: 56px;
    height: 68px;
    border-radius: 8px 8px 4px 4px;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .jersey-preview[b-tav4hbmcg3]::before {
        content: '';
        position: absolute;
        top: -3px;
        left: 30%;
        right: 30%;
        height: 8px;
        background: inherit;
        border-radius: 0 0 4px 4px;
    }

.jersey-number[b-tav4hbmcg3] {
    font-size: 22px;
    font-weight: 800;
}

.team-preview-name[b-tav4hbmcg3] {
    color: #94a3b8;
    font-size: 16px;
    font-weight: 600;
}

/* ===== SKIP TEAM ===== */ .skip-team-message[b-tav4hbmcg3] {
    text-align: center;
    padding: 32px 20px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: 12px;
}

.skip-icon[b-tav4hbmcg3] {
    font-size: 36px;
    display: block;
    margin-bottom: 12px;
}

.skip-team-message p[b-tav4hbmcg3] {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

/* ===== ERROR BANNER ===== */ .error-banner[b-tav4hbmcg3] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(231,76,60,0.1);
    border: 1px solid rgba(231,76,60,0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 16px;
    color: #e74c3c;
    font-size: 14px;
    animation: shakeIn-b-tav4hbmcg3 0.4s ease-out;
}

@keyframes shakeIn-b-tav4hbmcg3 {
    0% {
        transform: translateX(-8px);
        opacity: 0;
    }

    25% {
        transform: translateX(6px);
    }

    50% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===== SUBMITTING OVERLAY ===== */ .submitting-overlay[b-tav4hbmcg3] {
    position: absolute;
    inset: 0;
    background: rgba(14,30,50,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-radius: 12px;
    z-index: 10;
}

    .submitting-overlay p[b-tav4hbmcg3] {
        color: #94a3b8;
        font-size: 15px;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .wizard-container[b-tav4hbmcg3] {
        flex-direction: column;
        max-width: 520px;
        min-height: auto;
    }

    .wizard-branding[b-tav4hbmcg3] {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        padding: 24px 20px;
    }

    .branding-svg[b-tav4hbmcg3] {
        width: 100px;
        height: 100px;
        margin-bottom: 12px;
    }

    .branding-title[b-tav4hbmcg3] {
        font-size: 22px;
    }

    .branding-tagline[b-tav4hbmcg3] {
        display: none;
    }

    .wizard-form-panel[b-tav4hbmcg3] {
        padding: 24px 20px;
    }

    .step-title[b-tav4hbmcg3] {
        font-size: 20px;
    }

    .field-row[b-tav4hbmcg3] {
        flex-direction: column;
        gap: 0;
    }

    .field-small[b-tav4hbmcg3], .field-medium[b-tav4hbmcg3] {
        flex: 1 !important;
    }
}

@media (max-width: 480px) {
    .wizard-page[b-tav4hbmcg3] {
        padding: 10px;
    }

    .wizard-branding[b-tav4hbmcg3] {
        padding: 20px 16px;
    }

    .step-progress[b-tav4hbmcg3] {
        display: none;
    }

    .wizard-form-panel[b-tav4hbmcg3] {
        padding: 20px 16px;
    }
}
/* /Components/Pages/OpeningPage.razor.rz.scp.css */
/* ===== ROOT LAYOUT ===== */

.landing-page[b-lc85ds2318] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f2027 0%, #203a43 40%, #2c5364 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ===== FLOATING PARTICLES ===== */ .particles[b-lc85ds2318] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.particle[b-lc85ds2318] {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    animation: float-b-lc85ds2318 8s ease-in-out infinite;
}

.p1[b-lc85ds2318] {
    width: 300px;
    height: 300px;
    background: #e74c3c;
    top: -80px;
    left: -80px;
    animation-delay: 0s;
}

.p2[b-lc85ds2318] {
    width: 200px;
    height: 200px;
    background: #f39c12;
    top: 60%;
    right: -60px;
    animation-delay: 2s;
}

.p3[b-lc85ds2318] {
    width: 150px;
    height: 150px;
    background: #2ecc71;
    bottom: -40px;
    left: 30%;
    animation-delay: 4s;
}

.p4[b-lc85ds2318] {
    width: 100px;
    height: 100px;
    background: #3498db;
    top: 20%;
    left: 60%;
    animation-delay: 1s;
}

.p5[b-lc85ds2318] {
    width: 180px;
    height: 180px;
    background: #9b59b6;
    bottom: 10%;
    right: 25%;
    animation-delay: 3s;
}

.p6[b-lc85ds2318] {
    width: 120px;
    height: 120px;
    background: #1abc9c;
    top: 10%;
    right: 40%;
    animation-delay: 5s;
}

@keyframes float-b-lc85ds2318 {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-30px) scale(1.05);
    }
}

/* ===== HERO SECTION ===== */ .hero[b-lc85ds2318] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    max-width: 700px;
    width: 100%;
}

/* ===== SVG GRAPHIC ===== */ .svg-container[b-lc85ds2318] {
    width: 100%;
    max-width: 420px;
    margin-bottom: 10px;
    animation: fadeSlideDown-b-lc85ds2318 1s ease-out;
}

.action-svg[b-lc85ds2318] {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
    border-radius: 16px;
    overflow: hidden;
}

/* Player kick animation */ .player-kick[b-lc85ds2318] {
    animation: playerBounce-b-lc85ds2318 2s ease-in-out infinite;
    transform-origin: 130px 340px;
}

@keyframes playerBounce-b-lc85ds2318 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.kick-leg[b-lc85ds2318] {
    animation: kickMotion-b-lc85ds2318 1.5s ease-in-out infinite;
    transform-origin: 135px 290px;
}

@keyframes kickMotion-b-lc85ds2318 {
    0%, 100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

/* Ball animation */ .ball-fly[b-lc85ds2318] {
    animation: ballPulse-b-lc85ds2318 1.5s ease-in-out infinite;
}

@keyframes ballPulse-b-lc85ds2318 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(5px, -5px) scale(1.08);
    }
}

.ball-glow[b-lc85ds2318] {
    animation: glowPulse-b-lc85ds2318 1.5s ease-in-out infinite;
}

@keyframes glowPulse-b-lc85ds2318 {
    0%, 100% {
        opacity: 0.4;
        r: 25;
    }

    50% {
        opacity: 0.7;
        r: 30;
    }
}

/* Speed lines */ .speed-lines[b-lc85ds2318] {
    animation: speedFade-b-lc85ds2318 1.5s ease-in-out infinite;
}

@keyframes speedFade-b-lc85ds2318 {
    0%, 100% {
        opacity: 0.3;
        transform: translateX(0);
    }

    50% {
        opacity: 0.8;
        transform: translateX(-4px);
    }
}

/* Impact burst */ .impact-burst[b-lc85ds2318] {
    animation: burstPulse-b-lc85ds2318 1.5s ease-in-out infinite;
}

@keyframes burstPulse-b-lc85ds2318 {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.2);
    }
}

/* Twinkling stars */ .twinkle[b-lc85ds2318] {
    animation: twinkleAnim-b-lc85ds2318 2s ease-in-out infinite;
}

.twinkle-delay[b-lc85ds2318] {
    animation: twinkleAnim-b-lc85ds2318 2s ease-in-out infinite 1s;
}

@keyframes twinkleAnim-b-lc85ds2318 {
    0%, 100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.8;
    }
}

.player-shadow[b-lc85ds2318] {
    animation: shadowPulse-b-lc85ds2318 2s ease-in-out infinite;
}

@keyframes shadowPulse-b-lc85ds2318 {
    0%, 100% {
        rx: 40;
        opacity: 0.3;
    }

    50% {
        rx: 38;
        opacity: 0.2;
    }
}

/* ===== HERO CONTENT ===== */ .hero-content[b-lc85ds2318] {
    animation: fadeSlideUp-b-lc85ds2318 1s ease-out 0.3s both;
}

@keyframes fadeSlideUp-b-lc85ds2318 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeSlideDown-b-lc85ds2318 {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Badge */ .badge-pill[b-lc85ds2318] {
    display: inline-block;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* Title */ .title[b-lc85ds2318] {
    font-size: 52px;
    font-weight: 800;
    margin: 0 0 12px 0;
    line-height: 1.1;
}

.title-soccer[b-lc85ds2318] {
    color: #ffffff;
}

.title-track[b-lc85ds2318] {
    background: linear-gradient(135deg, #f39c12, #e74c3c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title-dot[b-lc85ds2318] {
    color: #2ecc71;
    font-weight: 400;
    font-size: 36px;
}

/* Subtitle */ .subtitle[b-lc85ds2318] {
    color: #94a3b8;
    font-size: 17px;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto 28px auto;
}

/* ===== STATS PREVIEW ===== */ .stats-preview[b-lc85ds2318] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.stat-item[b-lc85ds2318] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-number[b-lc85ds2318] {
    font-size: 28px;
}

.stat-label[b-lc85ds2318] {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-divider[b-lc85ds2318] {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

/* ===== CTA BUTTONS ===== */ .cta-buttons[b-lc85ds2318] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.btn-login[b-lc85ds2318], .btn-register[b-lc85ds2318] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-login[b-lc85ds2318] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

    .btn-login:hover[b-lc85ds2318] {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }

.btn-register[b-lc85ds2318] {
    background: linear-gradient(135deg, #e74c3c, #f39c12);
    color: #ffffff;
    border: 2px solid transparent;
}

    .btn-register:hover[b-lc85ds2318] {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(231, 76, 60, 0.4);
        filter: brightness(1.1);
    }

.btn-icon[b-lc85ds2318] {
    font-size: 18px;
}

/* Footer note */ .footer-note[b-lc85ds2318] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .title[b-lc85ds2318] {
        font-size: 36px;
    }

    .title-dot[b-lc85ds2318] {
        font-size: 26px;
    }

    .subtitle[b-lc85ds2318] {
        font-size: 15px;
    }

    .svg-container[b-lc85ds2318] {
        max-width: 320px;
    }

    .cta-buttons[b-lc85ds2318] {
        flex-direction: column;
        align-items: stretch;
        padding: 0 20px;
    }

    .btn-login[b-lc85ds2318], .btn-register[b-lc85ds2318] {
        justify-content: center;
    }

    .stats-preview[b-lc85ds2318] {
        gap: 12px;
    }

    .stat-divider[b-lc85ds2318] {
        display: none;
    }
}
/* /Components/Pages/PlayerStats.razor.rz.scp.css */
/* ===== PLAYER STATS PAGE (2026-09-21) =====
   Same base as TeamStats.razor.css under a "ps-" prefix (CSS isolation
   keeps the two apart). If you restyle one, restyle the other. */

.ps-page[b-4ns9a1preo] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 32px;
    animation: fadeIn-b-4ns9a1preo 0.4s ease-out;
}

@keyframes fadeIn-b-4ns9a1preo {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== LOADING / EMPTY ===== */
.loading-state[b-4ns9a1preo], .empty-state[b-4ns9a1preo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    text-align: center;
}

.loading-text[b-4ns9a1preo] { color: #64748b; font-size: 14px; }
.empty-icon[b-4ns9a1preo] { font-size: 56px; }
.empty-title[b-4ns9a1preo] { color: #ffffff; font-size: 22px; font-weight: 700; margin: 0; }
.empty-message[b-4ns9a1preo] { color: #64748b; font-size: 15px; margin: 0 0 16px 0; max-width: 480px; }

.empty-section[b-4ns9a1preo] {
    text-align: center;
    padding: 32px 20px;
    color: #475569;
    font-size: 14px;
}

/* ===== HEADER ===== */
.ps-header[b-4ns9a1preo] { border-radius: 16px; margin-top: 24px; overflow: hidden; }

.ps-header-content[b-4ns9a1preo] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 28px 24px;
    background: rgba(0, 0, 0, 0.22);
}

.ps-header-left[b-4ns9a1preo] { display: flex; align-items: center; gap: 18px; }

.ps-jersey[b-4ns9a1preo] {
    width: 64px;
    height: 76px;
    border-radius: 10px 10px 6px 6px;
    border: 4px solid;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 26px;
    font-weight: 800;
}

.ps-back[b-4ns9a1preo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 4px;
}

    .ps-back:hover[b-4ns9a1preo] { color: #ffffff; text-decoration: underline; }

.ps-title[b-4ns9a1preo] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 6px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ps-meta[b-4ns9a1preo] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ps-meta-tag[b-4ns9a1preo] { color: rgba(255, 255, 255, 0.75); font-size: 14px; font-weight: 500; }
.ps-meta-dot[b-4ns9a1preo] { color: rgba(255, 255, 255, 0.3); }

.ps-other-team[b-4ns9a1preo] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .ps-other-team:hover[b-4ns9a1preo] { background: rgba(0, 0, 0, 0.35); color: #ffffff; }

.ps-other-swatch[b-4ns9a1preo] { width: 9px; height: 9px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.35); }

.ps-header-right[b-4ns9a1preo] { display: flex; align-items: center; gap: 8px; }

.ps-season-label[b-4ns9a1preo] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ps-season-select[b-4ns9a1preo] {
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    min-width: 180px;
}

    .ps-season-select option[b-4ns9a1preo] { color: #0f172a; }

/* ===== OUTSIDE-SEASON NOTICE ===== */
.ps-outside[b-4ns9a1preo] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(243, 156, 18, 0.08);
    border: 1px solid rgba(243, 156, 18, 0.3);
    color: #fbd38d;
    font-size: 13px;
}

.ps-outside-icon[b-4ns9a1preo] { font-size: 18px; }
    .ps-outside-text strong[b-4ns9a1preo] { color: #ffffff; }
    .ps-outside-text em[b-4ns9a1preo] { color: #ffffff; font-style: normal; font-weight: 700; }

/* ===== TILES ===== */
.ps-tiles[b-4ns9a1preo] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.ps-tile[b-4ns9a1preo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    text-align: center;
}

.ps-tile-accent[b-4ns9a1preo] { background: rgba(46, 204, 113, 0.08); border-color: rgba(46, 204, 113, 0.25); }
.ps-tile-value[b-4ns9a1preo] { color: #ffffff; font-size: 26px; font-weight: 800; line-height: 1.1; }
.ps-tile-label[b-4ns9a1preo] { color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.ps-tile-sub[b-4ns9a1preo] { color: #64748b; font-size: 11px; }

/* ===== SECTIONS ===== */
.ps-columns[b-4ns9a1preo] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 20px;
    align-items: start;
}

.ps-section[b-4ns9a1preo] {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
}

.ps-section-header[b-4ns9a1preo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ps-section-title[b-4ns9a1preo] { color: #ffffff; font-size: 16px; font-weight: 700; margin: 0; }
.ps-section-note[b-4ns9a1preo] { color: #64748b; font-size: 12px; text-align: right; }

/* ===== TOTALS (season vs career) ===== */
.ps-totals[b-4ns9a1preo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #94a3b8;
}

    .ps-totals th[b-4ns9a1preo], .ps-totals td[b-4ns9a1preo] {
        padding: 7px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        text-align: right;
    }

    .ps-totals th[b-4ns9a1preo] {
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        background: rgba(255, 255, 255, 0.03);
    }

    .ps-totals td:first-child[b-4ns9a1preo], .ps-totals th:first-child[b-4ns9a1preo] { text-align: left; color: #cbd5e1; }
    .ps-totals td:nth-child(2)[b-4ns9a1preo] { color: #ffffff; font-weight: 800; }
    .ps-totals tr:last-child td[b-4ns9a1preo] { border-bottom: 0; }

/* ===== SEASON HIGHS ===== */
.ps-highs[b-4ns9a1preo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 14px 16px 18px;
}

.ps-high[b-4ns9a1preo] {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(46, 204, 113, 0.06);
    border: 1px solid rgba(46, 204, 113, 0.22);
    border-left: 4px solid #2ecc71;
}

.ps-high-neg[b-4ns9a1preo] {
    background: rgba(243, 156, 18, 0.06);
    border-color: rgba(243, 156, 18, 0.25);
    border-left-color: #f39c12;
}

.ps-high-top[b-4ns9a1preo] { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ps-high-value[b-4ns9a1preo] { color: #ffffff; font-size: 24px; font-weight: 800; line-height: 1; }
.ps-high-label[b-4ns9a1preo] { color: #cbd5e1; font-size: 12px; font-weight: 700; }
.ps-high-games[b-4ns9a1preo] { display: flex; flex-direction: column; gap: 4px; }

.ps-high-game[b-4ns9a1preo] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 12px;
    text-decoration: none;
}

    .ps-high-game:hover[b-4ns9a1preo] { background: rgba(255, 255, 255, 0.08); color: #ffffff; }

.ps-high-date[b-4ns9a1preo] { font-weight: 700; color: #cbd5e1; }
.ps-high-opp[b-4ns9a1preo] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== RESULT CHIPS ===== */
.ps-result[b-4ns9a1preo] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.ps-result-W[b-4ns9a1preo] { background: rgba(46, 204, 113, 0.18); color: #2ecc71; }
.ps-result-L[b-4ns9a1preo] { background: rgba(231, 76, 60, 0.18); color: #e74c3c; }
.ps-result-D[b-4ns9a1preo] { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }

.ps-live-pill[b-4ns9a1preo] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #ffb4a8;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ===== GAME TABLE ===== */
.ps-table-wrap[b-4ns9a1preo] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.ps-table[b-4ns9a1preo] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #94a3b8;
    min-width: 900px;
}

    .ps-table th[b-4ns9a1preo], .ps-table td[b-4ns9a1preo] {
        padding: 8px 10px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        white-space: nowrap;
    }

    .ps-table th[b-4ns9a1preo] {
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        background: rgba(255, 255, 255, 0.03);
    }

.ps-col-sticky[b-4ns9a1preo] { position: sticky; background: #0d1c30; z-index: 1; }
.ps-col-date[b-4ns9a1preo] { left: 0; width: 64px; min-width: 64px; text-align: left !important; color: #cbd5e1; font-weight: 700; }
.ps-col-name[b-4ns9a1preo] { left: 64px; text-align: left !important; min-width: 180px; }
.ps-table th.ps-col-sticky[b-4ns9a1preo] { z-index: 2; background: #0f2036; }

.ps-row-link[b-4ns9a1preo] { cursor: pointer; transition: background 0.12s; }
    .ps-row-link:hover td[b-4ns9a1preo] { background: rgba(255, 255, 255, 0.04); }
    .ps-row-link:hover td.ps-col-sticky[b-4ns9a1preo] { background: #132842; }
.ps-row-live td[b-4ns9a1preo] { background: rgba(231, 76, 60, 0.04); }

.ps-strong[b-4ns9a1preo] { color: #ffffff; font-weight: 600; }
.ps-zero[b-4ns9a1preo] { color: #334155; }

.ps-opp-swatch[b-4ns9a1preo] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 7px;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===== EVENTS ===== */
.ps-events[b-4ns9a1preo] { padding: 8px 0 12px; }

.ps-events-game[b-4ns9a1preo] { padding: 6px 0; }

.ps-events-game-title[b-4ns9a1preo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px 6px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
}

    .ps-events-game-title:hover[b-4ns9a1preo] { color: #ffffff; }

/* ── Player reel (2026-10-03) ── */
.ps-events-game-head[b-4ns9a1preo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-right: 20px;
}

.ps-reel-btn[b-4ns9a1preo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, rgba(142,68,173,0.55), rgba(52,152,219,0.55));
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

    .ps-reel-btn:hover[b-4ns9a1preo] { filter: brightness(1.12); }

.ps-reel-btn-sm[b-4ns9a1preo] {
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
    border-color: rgba(142,68,173,0.45);
    background: rgba(142,68,173,0.18);
    color: #e9d5ff;
}

.ps-reel-loading[b-4ns9a1preo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 260px;
    color: #94a3b8;
    text-align: center;
}

    .ps-reel-loading p[b-4ns9a1preo] { margin: 0; max-width: 420px; }

.ps-event[b-4ns9a1preo] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px;
}

    .ps-event:hover[b-4ns9a1preo] { background: rgba(255, 255, 255, 0.03); }

.ps-event-time[b-4ns9a1preo] {
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Cascadia Code', monospace;
    min-width: 62px;
    text-align: right;
    flex-shrink: 0;
}

.ps-event-icon[b-4ns9a1preo] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.ps-event-details[b-4ns9a1preo] { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ps-event-type[b-4ns9a1preo] { color: #e2e8f0; font-size: 13px; font-weight: 700; }
.ps-event-secondary[b-4ns9a1preo] { color: #64748b; font-size: 11px; }
.ps-event-notes[b-4ns9a1preo] { color: #94a3b8; font-size: 12px; font-style: italic; }

.ps-event-watch[b-4ns9a1preo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid rgba(52, 152, 219, 0.35);
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    cursor: pointer;
    transition: all 0.15s;
}

    .ps-event-watch:hover[b-4ns9a1preo], .ps-event-watch-on[b-4ns9a1preo] { background: #3498db; color: #ffffff; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .ps-tiles[b-4ns9a1preo] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ps-columns[b-4ns9a1preo] { grid-template-columns: 1fr; gap: 0; }
    .ps-header-content[b-4ns9a1preo] { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
    .ps-page[b-4ns9a1preo] { padding: 0 12px 24px; }
    .ps-tiles[b-4ns9a1preo] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ps-section-header[b-4ns9a1preo] { flex-direction: column; align-items: flex-start; gap: 4px; }
    .ps-section-note[b-4ns9a1preo] { text-align: left; }
}
/* /Components/Pages/ProfilePage.razor.rz.scp.css */
/* =====================================================
   PROFILE PAGE (rewritten 2026-09-19)
   The previous ProfilePage.razor.css was a copy of MainLayout's stylesheet
   (brand, user menu, SignalR dot, impersonation banner) and styled nothing
   this page renders, so headings, labels and cards fell back to the Kendo
   body colour and were unreadable on the dark background. This file covers
   every class ProfilePage.razor actually uses.
   ===================================================== */

.profile-page[b-0zxvuezkkq] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: pp-fade-in-b-0zxvuezkkq 0.35s ease-out;
}

@keyframes pp-fade-in-b-0zxvuezkkq {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-loading[b-0zxvuezkkq] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}

/* ===== HEADER CARD ===== */

.profile-header-card[b-0zxvuezkkq] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
}

.profile-avatar-large[b-0zxvuezkkq] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.25);
}

.profile-header-info[b-0zxvuezkkq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.profile-display-name[b-0zxvuezkkq] {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-email-badge[b-0zxvuezkkq] {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}

/* ===== TABS (Telerik TabStrip on the dark theme) ===== */

[b-0zxvuezkkq] .k-tabstrip {
    background: transparent;
}

[b-0zxvuezkkq] .k-tabstrip-items-wrapper {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px 12px 0 0;
    padding: 4px 6px 0;
}

[b-0zxvuezkkq] .k-tabstrip .k-item {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border-color: transparent;
}

    [b-0zxvuezkkq] .k-tabstrip .k-item:hover {
        color: #cbd5e1;
    }

    [b-0zxvuezkkq] .k-tabstrip .k-item.k-active {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) transparent;
    }

[b-0zxvuezkkq] .k-tabstrip-content {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: none;
    border-radius: 0 0 16px 16px;
    color: #cbd5e1;
    padding: 0;
}

.tab-content-panel[b-0zxvuezkkq] {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-heading[b-0zxvuezkkq] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

/* ===== FORMS ===== */

.form-grid[b-0zxvuezkkq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

.form-field[b-0zxvuezkkq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .form-field label[b-0zxvuezkkq] {
        color: #94a3b8;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    /* Blazor's validation messages render as plain divs; make them readable
       and unmistakably errors. */
    .form-field[b-0zxvuezkkq]  .validation-message {
        color: #ff8a80;
        font-size: 12px;
    }

.form-field--full[b-0zxvuezkkq] {
    grid-column: 1 / -1;
}

.form-actions[b-0zxvuezkkq] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.field-hint[b-0zxvuezkkq] {
    color: #64748b;
    font-size: 12px;
}

    .field-hint strong[b-0zxvuezkkq] {
        color: #cbd5e1;
    }

/* ===== EMPTY STATE ===== */

.empty-state[b-0zxvuezkkq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 14px;
}

    .empty-state p[b-0zxvuezkkq] {
        margin: 0;
    }

.empty-icon[b-0zxvuezkkq] {
    font-size: 36px;
    margin-bottom: 8px;
}

/* ===== MY TEAMS TAB ===== */

.invitations-banner[b-0zxvuezkkq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(243, 156, 18, 0.1);
    border: 1px solid rgba(243, 156, 18, 0.3);
    color: #fbd38d;
    font-size: 13px;
}

    .invitations-banner strong[b-0zxvuezkkq] {
        color: #ffffff;
    }

.inv-icon[b-0zxvuezkkq] {
    font-size: 18px;
}

.teams-grid[b-0zxvuezkkq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.team-card[b-0zxvuezkkq] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px 12px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .team-card:hover[b-0zxvuezkkq] {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.12);
    }

.team-card-color-bar[b-0zxvuezkkq] {
    width: 6px;
    flex-shrink: 0;
    border-radius: 0 3px 3px 0;
}

.team-card-body[b-0zxvuezkkq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.team-card-name[b-0zxvuezkkq] {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-card-role[b-0zxvuezkkq] {
    color: #7cc4f5;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.team-card-source[b-0zxvuezkkq] {
    color: #64748b;
    font-size: 11px;
}

.team-card-actions[b-0zxvuezkkq] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ===== INVITATIONS TAB ===== */

.invitations-list[b-0zxvuezkkq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.invitation-card[b-0zxvuezkkq] {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 12px 14px 12px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
}

.invitation-color-bar[b-0zxvuezkkq] {
    width: 6px;
    flex-shrink: 0;
    border-radius: 0 3px 3px 0;
}

.invitation-body[b-0zxvuezkkq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.invitation-team[b-0zxvuezkkq] {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.invitation-email[b-0zxvuezkkq] {
    color: #94a3b8;
    font-size: 12px;
}

.invitation-expiry[b-0zxvuezkkq] {
    color: #f39c12;
    font-size: 11px;
    font-weight: 600;
}

.invitation-actions[b-0zxvuezkkq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ===== SETTINGS TAB ===== */
/*
    The raw key → textbox grid that used to live here (.settings-grid,
    .setting-row, .setting-key) is gone: the Settings tab now renders
    <SettingsForm>, which brings its own scoped styles. What is left here is the
    layout around it — a vertical tab rail on the left, one tab per scope.
*/

.settings-layout[b-0zxvuezkkq] {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* ── Vertical tab rail ─────────────────────────────────────────── */

.settings-rail[b-0zxvuezkkq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 12px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.settings-rail-tab[b-0zxvuezkkq] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #cbd5e1;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    /* A 3px transparent inset on the left so the active marker appearing
       doesn't shift the label sideways. */
    box-shadow: inset 3px 0 0 transparent;
}

.settings-rail-tab:hover[b-0zxvuezkkq] {
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}

.settings-rail-tab:focus-visible[b-0zxvuezkkq] {
    outline: 2px solid #3498db;
    outline-offset: 1px;
}

.settings-rail-tab.is-active[b-0zxvuezkkq] {
    background: rgba(52, 152, 219, 0.14);
    color: #ffffff;
    box-shadow: inset 3px 0 0 #3498db;
}

.settings-rail-crest[b-0zxvuezkkq] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #ffffff;
    /* Team colours can be light; a shadow keeps the initials readable on any. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.settings-rail-crest-me[b-0zxvuezkkq] {
    background: linear-gradient(135deg, #3498db, #2ecc71);
}

.settings-rail-labels[b-0zxvuezkkq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.settings-rail-title[b-0zxvuezkkq] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-rail-sub[b-0zxvuezkkq] {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-rail-tab.is-active .settings-rail-sub[b-0zxvuezkkq] {
    color: #94a3b8;
}

/* Marks a hidden panel that has edits waiting — without it, typing on one tab
   and switching away would hide the unsaved work completely. */
.settings-rail-dot[b-0zxvuezkkq] {
    flex: 0 0 auto;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f39c12;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.18);
}

/* ── Panels ────────────────────────────────────────────────────── */

.settings-panels[b-0zxvuezkkq] {
    min-width: 0;
}

.settings-panel.is-hidden[b-0zxvuezkkq] {
    display: none;
}

.settings-scope[b-0zxvuezkkq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-scope-heading[b-0zxvuezkkq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-scope-role[b-0zxvuezkkq] {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

.settings-intro[b-0zxvuezkkq] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #94a3b8;
    max-width: 68ch;
}

/* ===== GUIDED TIPS PANEL (2026-09-24) ===== */
.tips-panel[b-0zxvuezkkq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.22);
}

.tips-panel-text[b-0zxvuezkkq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tips-panel-title[b-0zxvuezkkq] {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.tips-panel-sub[b-0zxvuezkkq] {
    color: #94a3b8;
    font-size: 12.5px;
    line-height: 1.45;
}

[b-0zxvuezkkq] .tips-panel-btn {
    flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */

/* The rail needs to fold before the rest of the page does — 232px of tabs plus a
   settings form is tight well above the 640px breakpoint below, so it becomes a
   horizontal scroller of compact tabs first. */
@media (max-width: 900px) {
    .settings-layout[b-0zxvuezkkq] {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .settings-rail[b-0zxvuezkkq] {
        position: static;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        /* Room for the focus ring and the unsaved dot, which would otherwise be
           clipped by the scroll container. */
        padding: 8px;
    }

    .settings-rail-tab[b-0zxvuezkkq] {
        flex: 0 0 auto;
        width: auto;
        box-shadow: inset 0 3px 0 transparent;
    }

    .settings-rail-tab.is-active[b-0zxvuezkkq] {
        box-shadow: inset 0 3px 0 #3498db;
    }

    .settings-rail-sub[b-0zxvuezkkq] {
        display: none;
    }

    .settings-rail-dot[b-0zxvuezkkq] {
        margin-left: 2px;
    }
}

@media (max-width: 640px) {
    .profile-page[b-0zxvuezkkq] {
        padding: 16px 12px;
    }

    .profile-header-card[b-0zxvuezkkq] {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-grid[b-0zxvuezkkq] {
        grid-template-columns: 1fr;
    }

    .team-card[b-0zxvuezkkq],
    .invitation-card[b-0zxvuezkkq] {
        flex-wrap: wrap;
    }

    .invitation-actions[b-0zxvuezkkq],
    .team-card-actions[b-0zxvuezkkq] {
        width: 100%;
        justify-content: flex-end;
        padding-left: 20px;
    }
}
/* /Components/Pages/PublicGameView.razor.rz.scp.css */
/* ===== PUBLIC GAME VIEW ===== */

.pv-page[b-4x9raz12pl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
        "video   video"
        "narrate narrate"
        "score   clock"
        "field   events"
        "field   events";
    gap: 12px;
    padding: 12px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 100px);
}

.pv-card[b-4x9raz12pl] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
}

.pv-video[b-4x9raz12pl] {
    grid-area: video;
    padding: 12px;
    position: relative;
}

/* .pv-viewer-badge / .pv-viewer-dot were removed 2026-09-18: the viewer
   count is now rendered inside LiveStreamPlayer's status strip. */

/* ===== NARRATION (2026-09-30) ===== */

.pv-narrate[b-4x9raz12pl] {
    grid-area: narrate;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}

.pv-narrate-on[b-4x9raz12pl] {
    border-color: rgba(52, 152, 219, 0.45);
    background: rgba(52, 152, 219, 0.08);
}

.pv-narrate-btn[b-4x9raz12pl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: #3498db;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
}

.pv-narrate-btn:hover[b-4x9raz12pl] {
    background: #2f89c5;
}

.pv-narrate-on .pv-narrate-btn[b-4x9raz12pl] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.6);
}

.pv-narrate-icon[b-4x9raz12pl] {
    font-size: 15px;
    line-height: 1;
}

.pv-narrate-hint[b-4x9raz12pl] {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.35;
    min-width: 0;
}

.pv-scoreboard[b-4x9raz12pl] {
    grid-area: score;
}

.pv-clock[b-4x9raz12pl] {
    grid-area: clock;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pv-field[b-4x9raz12pl] {
    grid-area: field;
    /* Top of its column, not stretched to the (ever-growing) events list
       beside it -- which centred the map further and further down the page
       as events came in (2026-09-18). Sticky so it stays in view while the
       event log scrolls. */
    align-self: start;
    position: sticky;
    top: 12px;
}

.pv-events[b-4x9raz12pl] {
    grid-area: events;
    overflow-y: auto;
}

/* ===== LOADING ===== */

.pv-loading[b-4x9raz12pl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 16px;
    color: #64748b;
    font-size: 15px;
}

.pv-spinner[b-4x9raz12pl] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(52, 152, 219, 0.2);
    border-top-color: #3498db;
    border-radius: 50%;
    animation: pv-spin-b-4x9raz12pl 0.8s linear infinite;
}

@keyframes pv-spin-b-4x9raz12pl {
    to {
        transform: rotate(360deg);
    }
}

/* ===== ERROR ===== */

.pv-error[b-4x9raz12pl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 12px;
    text-align: center;
    padding: 40px 20px;
}

.pv-error-icon[b-4x9raz12pl] {
    font-size: 48px;
}

.pv-error h2[b-4x9raz12pl] {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.pv-error p[b-4x9raz12pl] {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

/* ===== RESPONSIVE: tablet ===== */

@media (max-width: 900px) {
    .pv-page[b-4x9raz12pl] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "video"
            "narrate"
            "score"
            "clock"
            "field"
            "events";
        min-height: unset;
    }

    .pv-events[b-4x9raz12pl] {
        overflow-y: visible;
        max-height: unset;
    }

    /* Single column: the map sits above the events, so it must scroll away
       with the page rather than stick over them. */
    .pv-field[b-4x9raz12pl] {
        position: static;
    }
}

/* ===== RESPONSIVE: mobile ===== */

@media (max-width: 480px) {
    .pv-page[b-4x9raz12pl] {
        padding: 8px;
        gap: 8px;
    }

    .pl-header[b-4x9raz12pl] {
        padding: 8px 12px;
    }

    .pv-audio-banner[b-4x9raz12pl] {
        flex-wrap: wrap;
    }

    .pv-narrate[b-4x9raz12pl] {
        flex-wrap: wrap;
        gap: 6px 12px;
    }
}
/* /Components/Pages/PublicReelView.razor.rz.scp.css */
/* ===== Followers' reel page (2026-10-03) =====
   Lives in PublicLayout like the watch page: dark background, centred column. */

.prv-page[b-mehzv1o4jd] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 12px 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.prv-loading[b-mehzv1o4jd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 16px;
    color: #64748b;
    font-size: 15px;
}

.prv-spinner[b-mehzv1o4jd] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(52, 152, 219, 0.2);
    border-top-color: #3498db;
    border-radius: 50%;
    animation: prv-spin-b-mehzv1o4jd 0.8s linear infinite;
}

@keyframes prv-spin-b-mehzv1o4jd {
    to { transform: rotate(360deg); }
}

.prv-error[b-mehzv1o4jd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 12px;
    text-align: center;
    padding: 40px 20px;
}

.prv-error-icon[b-mehzv1o4jd] {
    font-size: 48px;
}

.prv-error h2[b-mehzv1o4jd] {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.prv-error p[b-mehzv1o4jd] {
    color: #64748b;
    font-size: 14px;
    margin: 0;
    max-width: 480px;
}

.prv-link[b-mehzv1o4jd] {
    color: #3498db;
    text-decoration: none;
    font-size: 14px;
}

    .prv-link:hover[b-mehzv1o4jd] {
        text-decoration: underline;
    }

.prv-head[b-mehzv1o4jd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.prv-score[b-mehzv1o4jd] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.prv-team[b-mehzv1o4jd] {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 700;
    color: #f1f5f9;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .prv-team[b-mehzv1o4jd]::before {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--team-color, #3498db);
    }

.prv-num[b-mehzv1o4jd] {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.prv-dash[b-mehzv1o4jd] {
    color: #64748b;
    font-size: 1.4rem;
}

.prv-meta[b-mehzv1o4jd] {
    color: #94a3b8;
    font-size: 0.9rem;
}

.prv-team-switch[b-mehzv1o4jd] {
    display: inline-flex;
    margin-top: 6px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}

.prv-team-btn[b-mehzv1o4jd] {
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.prv-team-on[b-mehzv1o4jd] {
    background: rgba(255,255,255,0.1);
    color: #f1f5f9;
}

.prv-foot[b-mehzv1o4jd] {
    margin: 0;
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    color: #64748b;
    font-size: 0.8rem;
}
/* /Components/Pages/Register.razor.rz.scp.css */
/* ===== PAGE ROOT ===== */

.register-page[b-to2sheo5ow] {
    min-height: 100vh;
    background: linear-gradient(160deg, #0b1929 0%, #0f2744 50%, #132f4c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* ===== BACKGROUND ORBS ===== */ .bg-orbs[b-to2sheo5ow] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.orb[b-to2sheo5ow] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orbFloat-b-to2sheo5ow 10s ease-in-out infinite;
}

.orb-1[b-to2sheo5ow] {
    width: 400px;
    height: 400px;
    background: rgba(46, 204, 113, 0.08);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.orb-2[b-to2sheo5ow] {
    width: 350px;
    height: 350px;
    background: rgba(52, 152, 219, 0.06);
    bottom: -80px;
    left: -80px;
    animation-delay: 3s;
}

.orb-3[b-to2sheo5ow] {
    width: 250px;
    height: 250px;
    background: rgba(243, 156, 18, 0.05);
    top: 40%;
    left: 60%;
    animation-delay: 6s;
}

@keyframes orbFloat-b-to2sheo5ow {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -20px) scale(1.1);
    }
}

/* ===== REGISTER CONTAINER ===== */ .register-container[b-to2sheo5ow] {
    display: flex;
    width: 100%;
    max-width: 1020px;
    min-height: 640px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    animation: containerIn-b-to2sheo5ow 0.6s ease-out;
}

@keyframes containerIn-b-to2sheo5ow {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== LEFT BRANDING PANEL ===== */ .register-branding[b-to2sheo5ow] {
    flex: 0 0 380px;
    background: linear-gradient(160deg, #0d2137 0%, #112d4e 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.branding-content[b-to2sheo5ow] {
    text-align: center;
}

.branding-svg[b-to2sheo5ow] {
    width: 180px;
    height: 180px;
    margin-bottom: 24px;
}

/* SVG Animations */ .ring-spin[b-to2sheo5ow] {
    animation: spin-b-to2sheo5ow 20s linear infinite;
    transform-origin: 150px 150px;
}

.arc-1[b-to2sheo5ow] {
    animation: spin-b-to2sheo5ow 8s linear infinite;
    transform-origin: 150px 150px;
}

.arc-2[b-to2sheo5ow] {
    animation: spin-b-to2sheo5ow 12s linear infinite reverse;
    transform-origin: 150px 150px;
}

.badge-hover[b-to2sheo5ow] {
    animation: badgeFloat-b-to2sheo5ow 3s ease-in-out infinite;
    transform-origin: 150px 150px;
}

.dot-float[b-to2sheo5ow] {
    animation: dotPulse-b-to2sheo5ow 3s ease-in-out infinite;
}

.dot-float-delay[b-to2sheo5ow] {
    animation: dotPulse-b-to2sheo5ow 3s ease-in-out infinite 1.5s;
}

@keyframes spin-b-to2sheo5ow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes badgeFloat-b-to2sheo5ow {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-6px) scale(1.02);
    }
}

@keyframes dotPulse-b-to2sheo5ow {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

.branding-title[b-to2sheo5ow] {
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.brand-white[b-to2sheo5ow] {
    color: #ffffff;
}

.brand-accent[b-to2sheo5ow] {
    background: linear-gradient(135deg, #2ecc71, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-dot[b-to2sheo5ow] {
    color: #64748b;
    font-weight: 300;
    font-size: 22px;
}

.branding-tagline[b-to2sheo5ow] {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 28px 0;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

.branding-features[b-to2sheo5ow] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    max-width: 220px;
    margin: 0 auto;
}

.feature-item[b-to2sheo5ow] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8899aa;
    font-size: 13px;
}

.feature-check[b-to2sheo5ow] {
    color: #2ecc71;
    font-weight: 700;
    font-size: 14px;
}

/* ===== RIGHT FORM PANEL ===== */ .register-form-panel[b-to2sheo5ow] {
    flex: 1;
    background: #0e1e32;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    overflow-y: auto;
}

.form-wrapper[b-to2sheo5ow] {
    width: 100%;
    max-width: 400px;
}

.form-header[b-to2sheo5ow] {
    margin-bottom: 28px;
}

.form-title[b-to2sheo5ow] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.form-subtitle[b-to2sheo5ow] {
    color: #64748b;
    font-size: 15px;
    margin: 0;
}

/* ===== INVITE BANNER (2026-09-23) ===== */
.invite-banner[b-to2sheo5ow] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.25);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.invite-crest[b-to2sheo5ow] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
}

.invite-banner-title[b-to2sheo5ow] {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.invite-banner-sub[b-to2sheo5ow] {
    display: block;
    color: #8899aa;
    font-size: 12px;
    margin-top: 2px;
}

/* ===== SUCCESS BANNER ===== */ .success-banner[b-to2sheo5ow] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
    color: #2ecc71;
    font-size: 14px;
    animation: slideIn-b-to2sheo5ow 0.4s ease-out;
}

/* ===== ERROR BANNER ===== */ .error-banner[b-to2sheo5ow] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
    color: #e74c3c;
    font-size: 14px;
    animation: shakeIn-b-to2sheo5ow 0.4s ease-out;
}

    .error-banner svg[b-to2sheo5ow] {
        flex-shrink: 0;
        margin-top: 1px;
    }

.error-list[b-to2sheo5ow] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@keyframes shakeIn-b-to2sheo5ow {
    0% {
        transform: translateX(-8px);
        opacity: 0;
    }

    25% {
        transform: translateX(6px);
    }

    50% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideIn-b-to2sheo5ow {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== FORM FIELDS ===== */ .field-row[b-to2sheo5ow] {
    display: flex;
    gap: 12px;
}

    .field-row.field-group[b-to2sheo5ow] {
        flex: 1;
    }

.field-group[b-to2sheo5ow] {
    margin-bottom: 18px;
}

.field-label[b-to2sheo5ow] {
    display: block;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

/* Telerik TextBox overrides */
[b-to2sheo5ow].register-input.k-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    height: 46px !important;
    transition: all 0.2s ease;
}

    [b-to2sheo5ow].register-input.k-input:focus,
    [b-to2sheo5ow].register-input.k-input.k-focus {
        border-color: #2ecc71 !important;
        box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15) !important;
        background: rgba(255, 255, 255, 0.06) !important;
    }

    [b-to2sheo5ow].register-input.k-input::placeholder {
        color: #475569 !important;
    }

/* Validation messages */
[b-to2sheo5ow].validation-message {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
}

/* ===== PASSWORD HINTS ===== */ .password-hints[b-to2sheo5ow] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 0 2px;
}

.hint-item[b-to2sheo5ow] {
    font-size: 12px;
    color: #475569;
    font-weight: 500;
    transition: color 0.3s ease;
}

.hint-met[b-to2sheo5ow] {
    color: #2ecc71;
}

/* ===== SUBMIT BUTTON ===== */
[b-to2sheo5ow].register-submit-btn {
    width: 100% !important;
    height: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    margin-top: 4px;
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

    [b-to2sheo5ow].register-submit-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(46, 204, 113, 0.35) !important;
        filter: brightness(1.08);
    }

    [b-to2sheo5ow].register-submit-btn:active {
        transform: translateY(0) !important;
    }

    [b-to2sheo5ow].register-submit-btn:disabled {
        opacity: 0.6 !important;
        transform: none !important;
        box-shadow: none !important;
    }

/* ===== DIVIDER ===== */ .divider[b-to2sheo5ow] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
}

.divider-line[b-to2sheo5ow] {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.divider-text[b-to2sheo5ow] {
    color: #475569;
    font-size: 13px;
    font-weight: 500;
}

/* ===== LOGIN PROMPT ===== */ .login-prompt[b-to2sheo5ow] {
    text-align: center;
    font-size: 14px;
    color: #64748b;
}

.login-link[b-to2sheo5ow] {
    color: #2ecc71;
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
    transition: color 0.2s;
}

    .login-link:hover[b-to2sheo5ow] {
        color: #58d68d;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .register-container[b-to2sheo5ow] {
        flex-direction: column;
        max-width: 480px;
        min-height: auto;
    }

    .register-branding[b-to2sheo5ow] {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 30px 20px;
    }

    .branding-svg[b-to2sheo5ow] {
        width: 120px;
        height: 120px;
        margin-bottom: 16px;
    }

    .branding-title[b-to2sheo5ow] {
        font-size: 24px;
    }

    .branding-features[b-to2sheo5ow] {
        display: none;
    }

    .register-form-panel[b-to2sheo5ow] {
        padding: 30px 24px;
    }

    .form-title[b-to2sheo5ow] {
        font-size: 24px;
    }

    .field-row[b-to2sheo5ow] {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 480px) {
    .register-page[b-to2sheo5ow] {
        padding: 10px;
    }

    .register-branding[b-to2sheo5ow] {
        padding: 24px 16px;
    }

    .branding-tagline[b-to2sheo5ow] {
        display: none;
    }

    .register-form-panel[b-to2sheo5ow] {
        padding: 24px 20px;
    }

    .password-hints[b-to2sheo5ow] {
        gap: 8px;
    }
}
/* /Components/Pages/ReportViewer.razor.rz.scp.css */
/* ===== PAGE ===== */
.rv-page[b-j8xjn8er10] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    animation: rv-fadeIn-b-j8xjn8er10 0.3s ease-out;
}

@keyframes rv-fadeIn-b-j8xjn8er10 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== HEADER ===== */
.rv-header[b-j8xjn8er10] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.rv-header-left[b-j8xjn8er10] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rv-title[b-j8xjn8er10] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

.rv-subtitle[b-j8xjn8er10] {
    color: #64748b;
    font-size: 12px;
    margin: 0;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

/* ===== BACK LINK ===== */
.rv-back-link[b-j8xjn8er10] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .rv-back-link:hover[b-j8xjn8er10] {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }

/* ===== LOADING ===== */
.rv-loading[b-j8xjn8er10] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 16px;
    color: #64748b;
    font-size: 14px;
}

/* ===== ERROR ===== */
.rv-error[b-j8xjn8er10] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 24px;
    padding: 16px 20px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 12px;
    color: #e74c3c;
}

    .rv-error svg[b-j8xjn8er10] {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .rv-error strong[b-j8xjn8er10] {
        display: block;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .rv-error p[b-j8xjn8er10] {
        margin: 0;
        font-size: 12px;
        color: #94a3b8;
        font-family: 'Cascadia Code', 'Fira Code', monospace;
    }

/* ===== VIEWER HOST ===== */
/* The ReportViewer resizes to fill its container.            */
/* Subtract the top app bar (48px) + page header (72px)      */
/* + bottom app bar (40px) = 160px total.                    */
.rv-viewer-host[b-j8xjn8er10] {
    position: relative;
    width: 100%;
    height: calc(100vh - 160px);
    min-height: 480px;
    overflow: hidden;
}

/* ===== FILL THE HOST (2026-09-23, from a measured DOM listing) =====
   Telerik renders, inside the host:
     .trv-content-wrapper            position: relative, no height -> collapses to its content
       .trv-nav                      the toolbar (~47px)
       .trv-parameters-splitter      Kendo flex splitter (horizontal)
         .trv-document-map-splitter  a pane that is itself a splitter
           .trv-pages-area           the pane the report renders in
             .trv-page-container     position: absolute -- the actual page
         .trv-parameters-area        hidden pane
   Nothing in that chain has a height, so the pages area was 0px and the report page showed as
   a clipped 60px strip. Pin the chain: wrapper fills the host as a flex column, toolbar keeps
   its size, the outer splitter takes the rest, everything below is 100% / absolute fill.
   ::deep because these are Telerik's elements; .rv-viewer-host carries the scope attribute.
   SizeViewerAsync applies the same inline and then nudges the Kendo splitter to re-lay out. */
[b-j8xjn8er10] .rv-viewer-host .trv-content-wrapper {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

[b-j8xjn8er10] .rv-viewer-host .trv-nav {
    flex: 0 0 auto !important;
}

[b-j8xjn8er10] .rv-viewer-host .trv-parameters-splitter {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
}

[b-j8xjn8er10] .rv-viewer-host .trv-document-map-splitter,
[b-j8xjn8er10] .rv-viewer-host .trv-pages-area {
    height: 100% !important;
}

[b-j8xjn8er10] .rv-viewer-host .trv-page-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* ===== TELERIK VIEWER OVERRIDES ===== */
/* Keep the viewer chrome consistent with the dark theme     */

[b-j8xjn8er10] .trv-toolbar {
    background: #0e1e32 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ===== TOOLBAR BUTTONS (2026-09-23) =====
   The viewer ships the light Kendo theme, so on our dark toolbar its icons and text came out
   in the theme's dark grey and every button read as disabled. Paint the enabled ones light,
   give them a hover, and reserve the faded look for the ones that really are disabled
   (k-disabled / k-state-disabled / aria-disabled, depending on the viewer version). Covers
   both the older font-icon (.k-icon) and newer SVG (.k-svg-icon) toolbars, and the page
   number box. */
[b-j8xjn8er10] .rv-viewer-host .trv-nav {
    background: #0e1e32 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-menu,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-toolbar {
    background: transparent !important;
    border-color: transparent !important;
}

[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item > .k-link,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-button,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-link {
    color: #e2e8f0 !important;
    background: transparent !important;
    border-color: transparent !important;
    opacity: 1 !important;
    border-radius: 6px;
    cursor: pointer;
}

[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-icon,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-svg-icon,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-svg-icon svg {
    color: #e2e8f0 !important;
    fill: currentColor !important;
    opacity: 1 !important;
}

[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item:hover > .k-link,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item.k-hover > .k-link,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-button:hover,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-link:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}

[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item.k-selected > .k-link,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item.k-state-selected > .k-link,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-button.k-selected {
    background: rgba(52, 152, 219, 0.28) !important;
    color: #ffffff !important;
}

/* Really disabled: faded, no hover, default cursor. */
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item.k-disabled,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item.k-state-disabled,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item[aria-disabled="true"],
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-link.k-disabled,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-link.k-state-disabled,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-link[aria-disabled="true"],
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-button.k-disabled,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-button:disabled,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item.k-disabled > .k-link,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item.k-state-disabled > .k-link,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item[aria-disabled="true"] > .k-link {
    color: #e2e8f0 !important;
    opacity: 0.3 !important;
    background: transparent !important;
    cursor: default !important;
}

    [b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item.k-disabled .k-icon,
    [b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item.k-state-disabled .k-icon,
    [b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item[aria-disabled="true"] .k-icon,
    [b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item.k-disabled .k-svg-icon,
    [b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item.k-state-disabled .k-svg-icon,
    [b-j8xjn8er10] .rv-viewer-host .trv-nav .k-item[aria-disabled="true"] .k-svg-icon {
        opacity: 1 !important; /* the parent already fades it; don't double up */
    }

/* Page number box and separators. */
[b-j8xjn8er10] .rv-viewer-host .trv-nav input,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-input,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-textbox,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-input-inner {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

[b-j8xjn8er10] .rv-viewer-host .trv-nav .k-separator,
[b-j8xjn8er10] .rv-viewer-host .trv-nav .trv-menu-separator {
    border-color: rgba(255, 255, 255, 0.12) !important;
    opacity: 1 !important;
}


/* The pages area used to be pinned here with top: 40px -- but it sits inside trv-content, not
   directly under the viewer, so 40px inside an already-collapsed wrapper was part of the
   problem. SizeViewerAsync now pins the whole wrapper chain instead. */
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .rv-header[b-j8xjn8er10] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .rv-viewer-host[b-j8xjn8er10] {
        height: calc(100vh - 180px);
    }
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
/* ===== PAGE ROOT ===== */

.reset-page[b-oz1gc89px4] {
    min-height: 100vh;
    background: linear-gradient(160deg, #0b1929 0%, #0f2744 50%, #132f4c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* ===== BACKGROUND ORBS ===== */ .bg-orbs[b-oz1gc89px4] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.orb[b-oz1gc89px4] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orbFloat-b-oz1gc89px4 10s ease-in-out infinite;
}

.orb-1[b-oz1gc89px4] {
    width: 400px;
    height: 400px;
    background: rgba(155, 89, 182, 0.08);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.orb-2[b-oz1gc89px4] {
    width: 350px;
    height: 350px;
    background: rgba(52, 152, 219, 0.06);
    bottom: -80px;
    left: -80px;
    animation-delay: 3s;
}

.orb-3[b-oz1gc89px4] {
    width: 250px;
    height: 250px;
    background: rgba(46, 204, 113, 0.05);
    top: 40%;
    left: 30%;
    animation-delay: 6s;
}

@keyframes orbFloat-b-oz1gc89px4 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -20px) scale(1.1);
    }
}

/* ===== CONTAINER ===== */ .reset-container[b-oz1gc89px4] {
    display: flex;
    width: 100%;
    max-width: 960px;
    min-height: 580px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    animation: containerIn-b-oz1gc89px4 0.6s ease-out;
}

@keyframes containerIn-b-oz1gc89px4 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== LEFT BRANDING PANEL ===== */ .reset-branding[b-oz1gc89px4] {
    flex: 0 0 380px;
    background: linear-gradient(160deg, #0d2137 0%, #112d4e 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.branding-content[b-oz1gc89px4] {
    text-align: center;
}

.branding-svg[b-oz1gc89px4] {
    width: 180px;
    height: 180px;
    margin-bottom: 24px;
}

/* SVG Animations */ .ring-spin[b-oz1gc89px4] {
    animation: spin-b-oz1gc89px4 20s linear infinite;
    transform-origin: 150px 150px;
}

.arc-1[b-oz1gc89px4] {
    animation: spin-b-oz1gc89px4 8s linear infinite;
    transform-origin: 150px 150px;
}

.arc-2[b-oz1gc89px4] {
    animation: spin-b-oz1gc89px4 12s linear infinite reverse;
    transform-origin: 150px 150px;
}

.key-hover[b-oz1gc89px4] {
    animation: keyFloat-b-oz1gc89px4 3s ease-in-out infinite;
    transform-origin: 150px 155px;
}

.dot-float[b-oz1gc89px4] {
    animation: dotPulse-b-oz1gc89px4 3s ease-in-out infinite;
}

.dot-float-delay[b-oz1gc89px4] {
    animation: dotPulse-b-oz1gc89px4 3s ease-in-out infinite 1.5s;
}

@keyframes spin-b-oz1gc89px4 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes keyFloat-b-oz1gc89px4 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-6px) rotate(3deg);
    }
}

@keyframes dotPulse-b-oz1gc89px4 {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

.branding-title[b-oz1gc89px4] {
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.brand-white[b-oz1gc89px4] {
    color: #ffffff;
}

.brand-accent[b-oz1gc89px4] {
    background: linear-gradient(135deg, #9b59b6, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-dot[b-oz1gc89px4] {
    color: #64748b;
    font-weight: 300;
    font-size: 22px;
}

.branding-tagline[b-oz1gc89px4] {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 28px 0;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

.branding-features[b-oz1gc89px4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    max-width: 220px;
    margin: 0 auto;
}

.feature-item[b-oz1gc89px4] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8899aa;
    font-size: 13px;
}

.feature-check[b-oz1gc89px4] {
    color: #9b59b6;
    font-weight: 700;
    font-size: 14px;
}

/* ===== RIGHT FORM PANEL ===== */ .reset-form-panel[b-oz1gc89px4] {
    flex: 1;
    background: #0e1e32;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    overflow-y: auto;
}

.form-wrapper[b-oz1gc89px4] {
    width: 100%;
    max-width: 380px;
}

.form-header[b-oz1gc89px4] {
    margin-bottom: 28px;
}

.form-title[b-oz1gc89px4] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.form-subtitle[b-oz1gc89px4] {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ===== ERROR BANNER ===== */ .error-banner[b-oz1gc89px4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
    color: #e74c3c;
    font-size: 14px;
    animation: shakeIn-b-oz1gc89px4 0.4s ease-out;
}

    .error-banner svg[b-oz1gc89px4] {
        flex-shrink: 0;
        margin-top: 1px;
    }

.error-list[b-oz1gc89px4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@keyframes shakeIn-b-oz1gc89px4 {
    0% {
        transform: translateX(-8px);
        opacity: 0;
    }

    25% {
        transform: translateX(6px);
    }

    50% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===== FORM FIELDS ===== */ .field-group[b-oz1gc89px4] {
    margin-bottom: 20px;
}

.field-label[b-oz1gc89px4] {
    display: block;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

/* Telerik TextBox overrides */
[b-oz1gc89px4].reset-input.k-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    height: 48px !important;
    transition: all 0.2s ease;
}

    [b-oz1gc89px4].reset-input.k-input:focus,
    [b-oz1gc89px4].reset-input.k-input.k-focus {
        border-color: #9b59b6 !important;
        box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.15) !important;
        background: rgba(255, 255, 255, 0.06) !important;
    }

    [b-oz1gc89px4].reset-input.k-input::placeholder {
        color: #475569 !important;
    }

[b-oz1gc89px4].validation-message {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
}

/* ===== PASSWORD HINTS ===== */ .password-hints[b-oz1gc89px4] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 0 2px;
}

.hint-item[b-oz1gc89px4] {
    font-size: 12px;
    color: #475569;
    font-weight: 500;
    transition: color 0.3s ease;
}

.hint-met[b-oz1gc89px4] {
    color: #2ecc71;
}

/* ===== SUBMIT BUTTON ===== */
[b-oz1gc89px4].reset-submit-btn {
    width: 100% !important;
    height: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    margin-top: 4px;
    background: linear-gradient(135deg, #9b59b6, #8e44ad) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

    [b-oz1gc89px4].reset-submit-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(155, 89, 182, 0.35) !important;
        filter: brightness(1.08);
    }

    [b-oz1gc89px4].reset-submit-btn:active {
        transform: translateY(0) !important;
    }

    [b-oz1gc89px4].reset-submit-btn:disabled {
        opacity: 0.6 !important;
        transform: none !important;
        box-shadow: none !important;
    }

/* ===== SUCCESS STATE ===== */ .success-state[b-oz1gc89px4] {
    text-align: center;
    animation: fadeUp-b-oz1gc89px4 0.5s ease-out;
}

.success-icon[b-oz1gc89px4] {
    margin-bottom: 20px;
}

    .success-icon svg[b-oz1gc89px4] {
        animation: checkPulse-b-oz1gc89px4 2s ease-in-out infinite;
    }

@keyframes checkPulse-b-oz1gc89px4 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.success-title[b-oz1gc89px4] {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.success-message[b-oz1gc89px4] {
    color: #8899aa;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 28px 0;
}

[b-oz1gc89px4].login-redirect-btn {
    width: 100% !important;
    height: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #3498db, #2ecc71) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

    [b-oz1gc89px4].login-redirect-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(52, 152, 219, 0.35) !important;
        filter: brightness(1.08);
    }

/* ===== ERROR STATE (Invalid Link) ===== */ .error-state[b-oz1gc89px4] {
    text-align: center;
    animation: fadeUp-b-oz1gc89px4 0.5s ease-out;
}

.error-icon[b-oz1gc89px4] {
    margin-bottom: 20px;
}

    .error-icon svg[b-oz1gc89px4] {
        animation: errorPulse-b-oz1gc89px4 2s ease-in-out infinite;
    }

@keyframes errorPulse-b-oz1gc89px4 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

.error-state-title[b-oz1gc89px4] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.error-state-message[b-oz1gc89px4] {
    color: #8899aa;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 28px 0;
}

[b-oz1gc89px4].retry-btn {
    width: 100% !important;
    height: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

    [b-oz1gc89px4].retry-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(243, 156, 18, 0.35) !important;
        filter: brightness(1.08);
    }

@keyframes fadeUp-b-oz1gc89px4 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== DIVIDER ===== */ .divider[b-oz1gc89px4] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0;
}

.divider-line[b-oz1gc89px4] {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.divider-text[b-oz1gc89px4] {
    color: #475569;
    font-size: 13px;
    font-weight: 500;
}

/* ===== NAV LINKS ===== */ .nav-links[b-oz1gc89px4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.nav-link[b-oz1gc89px4] {
    font-size: 14px;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.back-link[b-oz1gc89px4] {
    color: #9b59b6;
}

    .back-link:hover[b-oz1gc89px4] {
        color: #bb8fce;
    }

.nav-separator[b-oz1gc89px4] {
    color: #334155;
    font-size: 18px;
}

.forgot-link[b-oz1gc89px4] {
    color: #f39c12;
}

    .forgot-link:hover[b-oz1gc89px4] {
        color: #f5b041;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .reset-container[b-oz1gc89px4] {
        flex-direction: column;
        max-width: 440px;
        min-height: auto;
    }

    .reset-branding[b-oz1gc89px4] {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 30px 20px;
    }

    .branding-svg[b-oz1gc89px4] {
        width: 120px;
        height: 120px;
        margin-bottom: 16px;
    }

    .branding-title[b-oz1gc89px4] {
        font-size: 24px;
    }

    .branding-features[b-oz1gc89px4] {
        display: none;
    }

    .reset-form-panel[b-oz1gc89px4] {
        padding: 30px 24px;
    }

    .form-title[b-oz1gc89px4] {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .reset-page[b-oz1gc89px4] {
        padding: 10px;
    }

    .reset-branding[b-oz1gc89px4] {
        padding: 24px 16px;
    }

    .branding-tagline[b-oz1gc89px4] {
        display: none;
    }

    .reset-form-panel[b-oz1gc89px4] {
        padding: 24px 20px;
    }

    .password-hints[b-oz1gc89px4] {
        gap: 8px;
    }

    .nav-links[b-oz1gc89px4] {
        flex-direction: column;
        gap: 8px;
    }

    .nav-separator[b-oz1gc89px4] {
        display: none;
    }
}
/* /Components/Pages/SessionExpiryDialog.razor.rz.scp.css */
/* ===================================================================
   SessionExpiryDialog.razor.css
   Telerik TelerikWindow override — matches SoccerTrack dark theme
   =================================================================== */

/* ── Window chrome ─────────────────────────────────────────────── */

[b-ofjx17ujmk] .sed-window .k-window {
    background: #0e1e32 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden;
    animation: sedSlideUp-b-ofjx17ujmk 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Warning variant — amber accent on top border */
[b-ofjx17ujmk] .sed-window-warning .k-window {
    border-top: 3px solid #f39c12 !important;
}

/* Expired variant — red accent on top border */
[b-ofjx17ujmk] .sed-window-expired .k-window {
    border-top: 3px solid #e74c3c !important;
}

/* ── Title bar ─────────────────────────────────────────────────── */

[b-ofjx17ujmk] .sed-window .k-window-titlebar {
    background: linear-gradient(90deg, #0a1628, #0f2744) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 14px 20px !important;
    min-height: unset !important;
}

[b-ofjx17ujmk] .sed-window .k-window-title {
    width: 100% !important;
    padding: 0 !important;
}

/* ── Window content area ───────────────────────────────────────── */

[b-ofjx17ujmk] .sed-window .k-window-content {
    background: #0e1e32 !important;
    padding: 0 !important;
}

/* ── Title bar inner layout ────────────────────────────────────── */

.sed-title-bar[b-ofjx17ujmk] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.sed-brand-icon[b-ofjx17ujmk] {
    font-size: 18px;
    line-height: 1;
}

.sed-brand-name[b-ofjx17ujmk] {
    line-height: 1;
}

.sed-brand-white[b-ofjx17ujmk] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.sed-brand-accent[b-ofjx17ujmk] {
    color: #3498db;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.sed-title-pipe[b-ofjx17ujmk] {
    color: rgba(255, 255, 255, 0.15);
    font-size: 16px;
    font-weight: 300;
    margin: 0 2px;
}

.sed-title-label[b-ofjx17ujmk] {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.sed-label-warning[b-ofjx17ujmk] {
    color: #f39c12;
}

.sed-label-expired[b-ofjx17ujmk] {
    color: #e74c3c;
}

/* ── Body ──────────────────────────────────────────────────────── */

.sed-body[b-ofjx17ujmk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px 28px 28px;
}

/* ── Icon ring ─────────────────────────────────────────────────── */

.sed-icon-ring[b-ofjx17ujmk] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: sedFadeIn-b-ofjx17ujmk 0.35s ease-out;
}

.sed-ring-warning[b-ofjx17ujmk] {
    background: rgba(243, 156, 18, 0.12);
    border: 1px solid rgba(243, 156, 18, 0.28);
    color: #f39c12;
    box-shadow: 0 0 24px rgba(243, 156, 18, 0.15);
}

.sed-ring-expired[b-ofjx17ujmk] {
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.28);
    color: #e74c3c;
    box-shadow: 0 0 24px rgba(231, 76, 60, 0.15);
}

/* ── Message ───────────────────────────────────────────────────── */

.sed-message[b-ofjx17ujmk] {
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.65;
    text-align: center;
    margin: 0;
    max-width: 340px;
}

/* ── Countdown number ──────────────────────────────────────────── */

.sed-countdown[b-ofjx17ujmk] {
    display: inline-block;
    color: #f39c12;
    font-size: 20px;
    font-weight: 900;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    min-width: 30px;
    text-align: center;
    vertical-align: middle;
    line-height: 1;
}

/* ── Progress bar ──────────────────────────────────────────────── */

.sed-progress-track[b-ofjx17ujmk] {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

.sed-progress-bar[b-ofjx17ujmk] {
    height: 100%;
    background: linear-gradient(90deg, #e74c3c, #f39c12);
    border-radius: 4px;
    transition: width 1s linear;
    min-width: 4px;
}

/* ── Error banner ──────────────────────────────────────────────── */

.sed-error[b-ofjx17ujmk] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: #e74c3c;
    font-size: 13px;
    padding: 10px 14px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.18);
    border-radius: 10px;
    text-align: left;
    line-height: 1.5;
}

/* ── Action buttons row ────────────────────────────────────────── */

.sed-actions[b-ofjx17ujmk] {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

/* Extend / Stay Logged In — gradient blue primary */
[b-ofjx17ujmk] .sed-btn-extend.k-button {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(52, 152, 219, 0.35) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    min-width: 160px;
    flex: 1;
    justify-content: center;
    gap: 7px;
}

    [b-ofjx17ujmk] .sed-btn-extend.k-button:hover:not(:disabled) {
        box-shadow: 0 4px 18px rgba(52, 152, 219, 0.5) !important;
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

    [b-ofjx17ujmk] .sed-btn-extend.k-button:disabled {
        opacity: 0.6 !important;
        cursor: not-allowed;
    }

/* Log Out — subtle ghost */
[b-ofjx17ujmk] .sed-btn-logout.k-button {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #64748b !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    min-width: 140px;
    flex: 1;
    justify-content: center;
    gap: 7px;
    transition: all 0.2s ease !important;
}

    [b-ofjx17ujmk] .sed-btn-logout.k-button:hover:not(:disabled) {
        background: rgba(231, 76, 60, 0.1) !important;
        border-color: rgba(231, 76, 60, 0.25) !important;
        color: #e74c3c !important;
        transform: translateY(-1px);
    }

/* Shared icon + label alignment */
.sed-btn-icon[b-ofjx17ujmk] {
    flex-shrink: 0;
}

.sed-btn-label[b-ofjx17ujmk] {
    white-space: nowrap;
}

/* ── Overlay backdrop ──────────────────────────────────────────── */

[b-ofjx17ujmk] .k-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* ── Animations ────────────────────────────────────────────────── */

@keyframes sedSlideUp-b-ofjx17ujmk {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes sedFadeIn-b-ofjx17ujmk {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 520px) {
    [b-ofjx17ujmk] .sed-window .k-window {
        width: calc(100vw - 32px) !important;
        max-width: 100% !important;
        border-radius: 14px !important;
    }

    .sed-body[b-ofjx17ujmk] {
        padding: 24px 20px 20px;
    }

    .sed-actions[b-ofjx17ujmk] {
        flex-direction: column;
    }

    [b-ofjx17ujmk] .sed-btn-extend.k-button,
    [b-ofjx17ujmk] .sed-btn-logout.k-button {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/shared/BaseWindow.razor.rz.scp.css */
/* ===== WINDOW CHROME ===== */
[b-0bk9iy5pr6] .base-dialog {
    border-radius: 16px !important;
    overflow: hidden;
}

    [b-0bk9iy5pr6] .base-dialog .k-window-titlebar {
        background: linear-gradient(90deg, #0a1628, #0f2744) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
        padding: 16px 20px !important;
    }

    [b-0bk9iy5pr6] .base-dialog .k-window-content {
        background: #0e1e32 !important;
        padding: 0 !important;
        overflow-y: auto !important;
    }

/* Individual dialogs (e.g. StartingLineupDialog) cap their own height with
   a max-height so long content scrolls instead of overflowing the screen.
   That cap should not survive into the Maximize button's full-viewport
   state — otherwise "Maximize" would just re-apply the same ceiling it's
   meant to escape. */
[b-0bk9iy5pr6] .base-dialog.k-window-maximized {
    max-height: 100vh !important;
    max-width: 100vw !important;
}

/* ===== CONTENT ===== */
.bd-content[b-0bk9iy5pr6] {
    padding: 24px;
}

/* ===== LOADING ===== */
.bd-loading[b-0bk9iy5pr6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    color: #64748b;
    font-size: 14px;
}

/* ===== BANNERS ===== */
.bd-error[b-0bk9iy5pr6] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #e74c3c;
    font-size: 13px;
}

.bd-success[b-0bk9iy5pr6] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #2ecc71;
    font-size: 13px;
    animation: bd-fadeIn-b-0bk9iy5pr6 0.3s ease-out;
}

@keyframes bd-fadeIn-b-0bk9iy5pr6 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== FOOTER ===== */
.bd-footer[b-0bk9iy5pr6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bd-footer-left[b-0bk9iy5pr6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bd-footer-right[b-0bk9iy5pr6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== CHECKBOX ===== */
.bd-checkbox-label[b-0bk9iy5pr6] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
}

/* ===== BUTTONS ===== */
[b-0bk9iy5pr6] .bd-cancel-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

[b-0bk9iy5pr6] .bd-save-btn {
    background: linear-gradient(135deg, #3498db, #2ecc71) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

    [b-0bk9iy5pr6] .bd-save-btn:hover {
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
    }

[b-0bk9iy5pr6] .bd-delete-btn {
    background: rgba(231, 76, 60, 0.15) !important;
    border: 1px solid rgba(231, 76, 60, 0.3) !important;
    color: #e74c3c !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

    [b-0bk9iy5pr6] .bd-delete-btn:hover {
        background: rgba(231, 76, 60, 0.25) !important;
        box-shadow: 0 4px 15px rgba(231, 76, 60, 0.2) !important;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    [b-0bk9iy5pr6] .base-dialog {
        width: 95vw !important;
    }

    .bd-footer[b-0bk9iy5pr6] {
        flex-direction: column;
    }

    .bd-footer-left[b-0bk9iy5pr6],
    .bd-footer-right[b-0bk9iy5pr6] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Components/Pages/shared/CameraZoomPicture.razor.rz.scp.css */
/* ===== CameraZoomPicture (2026-09-22) =====
   The picture block itself (moved here from GameCameras.razor.css's
   .gc-picture so the overlay can live inside it) plus the zoom toolbar. */

.czp-picture[b-xdmbjwx57x] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, 0.06);
    user-select: none;
}

    .czp-picture img[b-xdmbjwx57x] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.czp-targetable[b-xdmbjwx57x] { cursor: crosshair; }

.czp-empty[b-xdmbjwx57x] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #475569;
    font-size: 13px;
}

.czp-wait[b-xdmbjwx57x] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(11, 18, 32, 0.6);
    color: #cbd5e1;
    font-size: 13px;
    pointer-events: none;
}

/* The window the phone will stream, drawn on the picture. */
.czp-box[b-xdmbjwx57x] {
    position: absolute;
    border: 2px solid #f1c40f;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    border-radius: 4px;
    pointer-events: none;
}

.czp-cross[b-xdmbjwx57x] {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid #f1c40f;
    border-radius: 50%;
    background: rgba(241, 196, 15, 0.25);
    pointer-events: none;
}

.czp-applied[b-xdmbjwx57x] {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 2px 9px;
    border-radius: 8px;
    background: rgba(241, 196, 15, 0.85);
    color: #0f172a;
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
}

/* ===== TOOLBAR ===== */
.czp-toolbar[b-xdmbjwx57x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(241, 196, 15, 0.05);
    border: 1px solid rgba(241, 196, 15, 0.18);
}

.czp-toolbar-muted[b-xdmbjwx57x] {
    color: #64748b;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
}

.czp-levels[b-xdmbjwx57x] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.czp-level[b-xdmbjwx57x] {
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .czp-level:hover:not(:disabled)[b-xdmbjwx57x] { background: rgba(255, 255, 255, 0.09); color: #ffffff; }
    .czp-level:disabled[b-xdmbjwx57x] { opacity: 0.5; cursor: default; }

/* The ultra-wide chip (2026-09-24): dashed, since it widens rather than magnifies. */
.czp-level-wide[b-xdmbjwx57x] {
    border-style: dashed;
}

.czp-level-on[b-xdmbjwx57x] {
    background: rgba(241, 196, 15, 0.2);
    border-color: rgba(241, 196, 15, 0.6);
    color: #ffffff;
}

.czp-slider[b-xdmbjwx57x] {
    flex: 1;
    min-width: 120px;
    accent-color: #f1c40f;
}

.czp-actions[b-xdmbjwx57x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.czp-hint[b-xdmbjwx57x] {
    flex: 1;
    min-width: 0;
    color: #94a3b8;
    font-size: 12px;
}

.czp-btn[b-xdmbjwx57x] {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

    .czp-btn:hover:not(:disabled)[b-xdmbjwx57x] { background: rgba(255, 255, 255, 0.09); color: #ffffff; }
    .czp-btn:disabled[b-xdmbjwx57x] { opacity: 0.45; cursor: default; }

.czp-btn-primary[b-xdmbjwx57x] {
    background: #f1c40f;
    border-color: #f1c40f;
    color: #0f172a;
}

    .czp-btn-primary:hover:not(:disabled)[b-xdmbjwx57x] { background: #f4d03f; color: #0f172a; }
/* /Components/Pages/shared/ComposeMessageDialog.razor.rz.scp.css */
/* ===== RECIPIENT SEARCH ITEM ===== */
.cmp-recipient-item[b-11uyxomprr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.cmp-recipient-avatar[b-11uyxomprr] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cmp-recipient-info[b-11uyxomprr] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cmp-recipient-name[b-11uyxomprr] {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.cmp-recipient-email[b-11uyxomprr] {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-no-results[b-11uyxomprr] {
    padding: 8px 4px;
    color: #64748b;
    font-size: 13px;
    font-style: italic;
}

/* ===== GAME SEARCH ITEM ===== */
.cmp-game-item[b-11uyxomprr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}

.cmp-game-teams[b-11uyxomprr] {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.cmp-game-date[b-11uyxomprr] {
    color: #64748b;
    font-size: 11px;
}

/* ===== BROADCAST NOTICE ===== */
.cmp-broadcast-notice[b-11uyxomprr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(155, 89, 182, 0.08);
    border: 1px solid rgba(155, 89, 182, 0.2);
    border-radius: 10px;
    margin-bottom: 16px;
    color: #9b59b6;
    font-size: 13px;
}

    .cmp-broadcast-notice strong[b-11uyxomprr] {
        color: #b07cc6;
    }

/* ===== RECIPIENT COUNT ===== */
.cmp-recipient-count[b-11uyxomprr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(52, 152, 219, 0.06);
    border: 1px solid rgba(52, 152, 219, 0.12);
    border-radius: 8px;
    color: #64748b;
    font-size: 12px;
}

    .cmp-recipient-count strong[b-11uyxomprr] {
        color: #3498db;
    }
/* /Components/Pages/shared/CreateGameDialog.razor.rz.scp.css */
/* ===== DIALOG WINDOW ===== */
[b-8yyfpubng9].create-game-window {
    border-radius: 16px !important;
    overflow: hidden;
}

/* ===== FIT THE VIEWPORT (2026-09-19) =====
   BaseWindow is opened here with no Height, so Telerik sizes the window to
   its content -- and with league, two team pickers, date, location, half
   length, colours, weather, comments and the preview, that content is
   taller than a laptop screen, leaving the Create button off the bottom
   with no way to scroll to it. Same fix StartingLineupDialog uses: cap the
   window to the viewport and let .k-window-content scroll. Scoped to this
   dialog through ::deep from its own stylesheet. */
[b-8yyfpubng9] .base-dialog {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 24px);
}

[b-8yyfpubng9] .base-dialog .k-window-content {
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

    [b-8yyfpubng9] .base-dialog .k-window-content::-webkit-scrollbar {
        width: 8px;
    }

    [b-8yyfpubng9] .base-dialog .k-window-content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.22);
        border-radius: 4px;
    }

/* ===== COMPACT FORM (2026-09-19) =====
   Two-column rows (see the razor) plus a slightly tighter vertical rhythm
   than base-dialog.css's 16px so the whole form fits ~700px of height. */
.field-group[b-8yyfpubng9] {
    margin-bottom: 12px;
}

/* One hint for both team pickers, tucked under the row. */
.cg-teams-hint[b-8yyfpubng9] {
    margin: -6px 0 12px 0;
}

/* Under the league filter (2026-09-23): says what the dropdown does and doesn't do. */
.cg-league-hint[b-8yyfpubng9] {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.4;
}

    .cg-league-hint strong[b-8yyfpubng9] {
        color: #94a3b8;
        font-weight: 600;
    }

/* Force dark background on dropdown popup */
[b-8yyfpubng9] .k-popup .k-list-item .team-search-name {
    color: #1e293b;
}

[b-8yyfpubng9] .k-animation-container .k-popup {
    background: #0e1e32;
}
/* /Components/Pages/shared/CreateTeamDialog.razor.rz.scp.css */
/* ===== DIALOG WINDOW ===== */
[b-qoz3d1bd9r].create-team-window {
    border-radius: 16px !important;
    overflow: hidden;
}
/* /Components/Pages/shared/EditGameDialog.razor.rz.scp.css */
/* ===== DIALOG WINDOW ===== */
[b-3rg83ag618].create-game-window {
    border-radius: 16px !important;
    overflow: hidden;
}
/* /Components/Pages/shared/EditTeamDialog.razor.rz.scp.css */
/* ===== DIALOG WINDOW ===== */
[b-opiwc574ib].edit-team-window {
    border-radius: 16px !important;
    overflow: hidden;
}

/* ===== Level, shown but not owned (2026-09-20) =====
   The level moved to TeamSeason, so this dialog displays it and the Season dialog on the team
   page edits it. Styled as information, not as a disabled input someone should try to click. */
.field-readonly[b-opiwc574ib] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    padding: 11px 0 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

    .field-readonly .field-hint[b-opiwc574ib] {
        font-weight: 500;
    }
/* /Components/Pages/shared/EventReel.razor.rz.scp.css */
/* ===== Event reel control (2026-10-03) =====
   Same visual language as the review tool: translucent panels on the dark
   app background, 14px radii, slate text ramp. One stage, a transport bar,
   and the clip list underneath (beside it on wide screens). */

.er[b-wqkxotezqf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #e2e8f0;
}

.er-empty[b-wqkxotezqf] {
    padding: 40px 16px;
    text-align: center;
    color: #94a3b8;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}

/* ── Head ── */
.er-head[b-wqkxotezqf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.er-title[b-wqkxotezqf] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}

.er-subtitle[b-wqkxotezqf] {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: #94a3b8;
}

.er-head-right[b-wqkxotezqf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.er-count[b-wqkxotezqf],
.er-nov[b-wqkxotezqf] {
    font-size: 0.78rem;
    color: #94a3b8;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
}

.er-nov[b-wqkxotezqf] {
    color: #fbbf24;
    border-color: rgba(251,191,36,0.3);
    background: rgba(251,191,36,0.08);
}

.er-btn[b-wqkxotezqf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .er-btn:hover:not(:disabled)[b-wqkxotezqf] {
        background: rgba(255,255,255,0.1);
    }

    .er-btn:disabled[b-wqkxotezqf] {
        opacity: 0.5;
        cursor: default;
    }

.er-btn-download[b-wqkxotezqf] {
    background: linear-gradient(135deg, #8e44ad, #3498db);
    border-color: transparent;
    color: #fff;
}

    .er-btn-download:hover:not(:disabled)[b-wqkxotezqf] {
        filter: brightness(1.1);
    }

.er-btn-ready[b-wqkxotezqf] {
    background: linear-gradient(135deg, #16a085, #27ae60);
}

.er-spin[b-wqkxotezqf] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    animation: er-rotate-b-wqkxotezqf 0.8s linear infinite;
}

@keyframes er-rotate-b-wqkxotezqf {
    to { transform: rotate(360deg); }
}

.er-note[b-wqkxotezqf] {
    font-size: 0.85rem;
    color: #cbd5e1;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(52,152,219,0.1);
    border: 1px solid rgba(52,152,219,0.3);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.er-note-error[b-wqkxotezqf] {
    color: #fecaca;
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.35);
}

.er-progress[b-wqkxotezqf] {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}

.er-progress-bar[b-wqkxotezqf] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8e44ad, #3498db);
    transition: width 0.6s ease;
}

/* ── Body: stage + transport + list ── */
.er-body[b-wqkxotezqf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
        "stage list"
        "transport list"
        "trim list";
    gap: 12px;
    align-items: start;
}

@media (max-width: 900px) {
    .er-body[b-wqkxotezqf] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "stage"
            "transport"
            "trim"
            "list";
    }
}

.er-compact .er-body[b-wqkxotezqf] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "stage"
        "transport"
        "trim"
        "list";
}

.er-stage[b-wqkxotezqf] {
    grid-area: stage;
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0b1220;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

.er-video[b-wqkxotezqf] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
    cursor: pointer;
}

.er-video-hidden[b-wqkxotezqf] {
    opacity: 0;
}

.er-placeholder[b-wqkxotezqf] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #94a3b8;
    text-align: center;
    padding: 24px;
    pointer-events: none;
}

    .er-placeholder p[b-wqkxotezqf] {
        margin: 0;
        font-size: 1rem;
    }

.er-placeholder-nov[b-wqkxotezqf] {
    background: radial-gradient(ellipse at center, rgba(251,191,36,0.08), transparent 70%);
}

.er-nov-icon[b-wqkxotezqf] {
    font-size: 2rem;
    opacity: 0.6;
}

.er-lower-third[b-wqkxotezqf] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 18px 14px;
    background: linear-gradient(to top, rgba(5,10,20,0.92), rgba(5,10,20,0.55) 60%, transparent);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.er-lt-main[b-wqkxotezqf] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.er-lt-game[b-wqkxotezqf] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.er-lt-caption[b-wqkxotezqf] {
    font-size: clamp(0.95rem, 2.2vw, 1.3rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.er-lt-sub[b-wqkxotezqf] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.82rem;
    color: #cbd5e1;
}

.er-lt-angle[b-wqkxotezqf] {
    color: #94a3b8;
}

.er-load-error[b-wqkxotezqf] {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(239,68,68,0.85);
    color: #fff;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.er-btn-reload[b-wqkxotezqf] {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
    white-space: nowrap;
}

/* ── Transport ── */
.er-transport[b-wqkxotezqf] {
    grid-area: transport;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
}

.er-tbtn[b-wqkxotezqf] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .er-tbtn:hover:not(:disabled)[b-wqkxotezqf] {
        background: rgba(255,255,255,0.12);
    }

    .er-tbtn:disabled[b-wqkxotezqf] {
        opacity: 0.4;
        cursor: default;
    }

.er-tbtn-play[b-wqkxotezqf] {
    width: 48px;
    background: #3498db;
    border-color: transparent;
    color: #fff;
    font-size: 1.1rem;
}

    .er-tbtn-play:hover:not(:disabled)[b-wqkxotezqf] {
        background: #2d8bcb;
    }

.er-tbtn-fs[b-wqkxotezqf] {
    margin-left: auto;
}

.er-pos[b-wqkxotezqf] {
    font-size: 0.85rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    min-width: 64px;
}

.er-auto[b-wqkxotezqf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #cbd5e1;
    cursor: pointer;
    user-select: none;
}

    .er-auto input[b-wqkxotezqf] {
        accent-color: #3498db;
    }

/* Playback quality picker (2026-10-11). */
.er-quality[b-wqkxotezqf] {
    display: inline-flex;
    align-items: center;
}

    .er-quality .er-quality-select[b-wqkxotezqf] {
        padding: 3px 8px;
        border-radius: 8px;
        border: 1px solid rgba(148, 163, 184, 0.25);
        background: rgba(15, 23, 42, 0.6);
        color: #e2e8f0;
        font-size: 0.8rem;
        font-weight: 600;
        color-scheme: dark;
    }

/* ── Clip list ── */
.er-list[b-wqkxotezqf] {
    grid-area: list;
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.er-compact .er-list[b-wqkxotezqf] {
    max-height: 260px;
}

.er-item[b-wqkxotezqf] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}

    .er-item:hover[b-wqkxotezqf] {
        background: rgba(255,255,255,0.06);
    }

.er-item-current[b-wqkxotezqf] {
    background: rgba(52,152,219,0.18);
    box-shadow: inset 3px 0 0 #3498db;
}

.er-item-angle[b-wqkxotezqf] {
    padding-top: 4px;
    padding-bottom: 4px;
}

    .er-item-angle .er-item-caption[b-wqkxotezqf] {
        font-weight: 500;
        color: #94a3b8;
        font-size: 0.8rem;
    }

.er-item-nov[b-wqkxotezqf] {
    opacity: 0.6;
}

.er-item-n[b-wqkxotezqf] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.er-item-main[b-wqkxotezqf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.er-item-game[b-wqkxotezqf] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.er-item-caption[b-wqkxotezqf] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.er-item-sub[b-wqkxotezqf] {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.er-item-tags[b-wqkxotezqf] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.er-tag[b-wqkxotezqf] {
    font-size: 0.68rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    color: #cbd5e1;
    white-space: nowrap;
}

.er-tag-dur[b-wqkxotezqf] {
    font-variant-numeric: tabular-nums;
    color: #94a3b8;
}

.er-tag-nov[b-wqkxotezqf] {
    color: #fbbf24;
    background: rgba(251,191,36,0.12);
}

/* ── Trim (per-moment window, 2026-10-03) ── */
.er-trim[b-wqkxotezqf] {
    grid-area: trim;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    font-size: 0.82rem;
    color: #cbd5e1;
}

.er-trim-label[b-wqkxotezqf] {
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
}

.er-trim-group[b-wqkxotezqf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.er-trim-name[b-wqkxotezqf] {
    color: #94a3b8;
    margin-right: 4px;
}

.er-trim-btn[b-wqkxotezqf] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

    .er-trim-btn:hover:not(:disabled)[b-wqkxotezqf] {
        background: rgba(255,255,255,0.12);
    }

    .er-trim-btn:disabled[b-wqkxotezqf] {
        opacity: 0.4;
        cursor: default;
    }

.er-trim-input[b-wqkxotezqf] {
    width: 48px;
    height: 26px;
    text-align: center;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: #f1f5f9;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

    .er-trim-input[b-wqkxotezqf]::-webkit-outer-spin-button,
    .er-trim-input[b-wqkxotezqf]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.er-trim-unit[b-wqkxotezqf] {
    color: #64748b;
}

.er-trim-actions[b-wqkxotezqf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.er-btn-sm[b-wqkxotezqf] {
    padding: 4px 10px;
    font-size: 0.78rem;
}

.er-btn-apply[b-wqkxotezqf] {
    background: #3498db;
    border-color: transparent;
    color: #fff;
}

    .er-btn-apply:hover:not(:disabled)[b-wqkxotezqf] {
        background: #2d8bcb;
    }

.er-tag-custom[b-wqkxotezqf] {
    color: #c4b5fd;
    background: rgba(142,68,173,0.25);
}

.er-trim-error[b-wqkxotezqf] {
    flex-basis: 100%;
    color: #fecaca;
    font-size: 0.78rem;
}

/* Clip-length indicator in the trim bar */
.er-trim-length[b-wqkxotezqf] {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    min-width: 150px;
    flex: 1 1 150px;
}

.er-trim-strip[b-wqkxotezqf] {
    position: relative;
    display: block;
    height: 12px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    cursor: pointer;
}

    .er-trim-strip:hover[b-wqkxotezqf] {
        background: rgba(255,255,255,0.12);
    }

.er-trim-logged[b-wqkxotezqf] {
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 2px;
    margin-left: -1px;
    background: repeating-linear-gradient(to bottom, #94a3b8 0 2px, transparent 2px 4px);
    pointer-events: none;
}

.er-trim-playhead[b-wqkxotezqf] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    margin-left: -1.5px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
    transition: left 0.2s linear;
    pointer-events: none;
}

.er-trim-length-text[b-wqkxotezqf] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.er-trim-pos[b-wqkxotezqf] {
    color: #e2e8f0;
    font-weight: 600;
}

.er-trim-window[b-wqkxotezqf] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #8e44ad, #3498db);
    transition: left 0.15s, width 0.15s;
}

.er-trim-mark[b-wqkxotezqf] {
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 2px;
    margin-left: -1px;
    background: #fbbf24;
}

.er-trim-length-text[b-wqkxotezqf] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.er-trim-length-bad .er-trim-window[b-wqkxotezqf] {
    background: #ef4444;
}

.er-trim-length-bad .er-trim-length-text[b-wqkxotezqf] {
    color: #fca5a5;
}
/* /Components/Pages/shared/FieldCoveragePicker.razor.rz.scp.css */
.fcp[b-lrapkj5z1q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fcp-field[b-lrapkj5z1q] {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
}

.fcp-compact .fcp-field[b-lrapkj5z1q] {
    max-width: 300px;
}

.fcp-cell[b-lrapkj5z1q] {
    fill: rgba(0, 0, 0, 0.35);
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 2;
    cursor: pointer;
    transition: fill 0.12s;
}

    .fcp-cell:hover[b-lrapkj5z1q] {
        fill: rgba(52, 152, 219, 0.3);
    }

.fcp-cell-on[b-lrapkj5z1q] {
    fill: rgba(46, 204, 113, 0.45);
    stroke: rgba(46, 204, 113, 0.9);
}

    .fcp-cell-on:hover[b-lrapkj5z1q] {
        fill: rgba(46, 204, 113, 0.6);
    }

.fcp-disabled .fcp-cell[b-lrapkj5z1q] {
    cursor: default;
    opacity: 0.7;
}

.fcp-tools[b-lrapkj5z1q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.fcp-chip[b-lrapkj5z1q] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    cursor: pointer;
}

    .fcp-chip:hover[b-lrapkj5z1q] {
        background: rgba(52, 152, 219, 0.2);
        border-color: rgba(52, 152, 219, 0.5);
    }

    .fcp-chip:disabled[b-lrapkj5z1q] {
        opacity: 0.45;
        cursor: default;
    }

.fcp-chip-clear[b-lrapkj5z1q] {
    color: #94a3b8;
}

.fcp-summary[b-lrapkj5z1q] {
    margin-left: auto;
    font-size: 12px;
    color: #94a3b8;
}

.fcp-primary[b-lrapkj5z1q] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #e2e8f0;
    cursor: pointer;
}

    .fcp-primary input[b-lrapkj5z1q] {
        width: 16px;
        height: 16px;
        accent-color: #2ecc71;
    }

    .fcp-primary small[b-lrapkj5z1q] {
        color: #94a3b8;
    }
/* /Components/Pages/shared/LiveGamesPanel.razor.rz.scp.css */
/* "Live right now" panel (2026-09-19) — home page, both signed-in and
   visitor views. Rows are anchors to the public watch page. */

.lg-panel[b-numgdxhfh4] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lg-header[b-numgdxhfh4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lg-header-left[b-numgdxhfh4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lg-live-dot[b-numgdxhfh4] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #475569;
    flex-shrink: 0;
}

.lg-live-dot-on[b-numgdxhfh4] {
    background: #e74c3c;
    animation: lg-pulse-b-numgdxhfh4 1.6s ease-out infinite;
}

@keyframes lg-pulse-b-numgdxhfh4 {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.55);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(231, 76, 60, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

.lg-title[b-numgdxhfh4] {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.lg-count[b-numgdxhfh4] {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.lg-hint[b-numgdxhfh4] {
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

.lg-body[b-numgdxhfh4] {
    display: flex;
    flex-direction: column;
}

.lg-loading[b-numgdxhfh4] {
    display: flex;
    justify-content: center;
    padding: 24px;
}

/* ===== EMPTY ===== */

.lg-empty[b-numgdxhfh4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 28px 20px;
    text-align: center;
}

.lg-empty-icon[b-numgdxhfh4] {
    font-size: 26px;
    opacity: 0.5;
    margin-bottom: 4px;
}

.lg-empty-title[b-numgdxhfh4] {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
}

.lg-empty-text[b-numgdxhfh4] {
    color: #475569;
    font-size: 12px;
    line-height: 1.5;
    max-width: 420px;
}

/* ===== ROWS ===== */

.lg-row[b-numgdxhfh4] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.15s ease;
}

    .lg-row:hover[b-numgdxhfh4] {
        background: rgba(231, 76, 60, 0.06);
    }

    .lg-row:last-child[b-numgdxhfh4] {
        border-bottom: none;
    }

.lg-colors[b-numgdxhfh4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.lg-swatch[b-numgdxhfh4] {
    width: 4px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.lg-matchup[b-numgdxhfh4] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lg-teams[b-numgdxhfh4] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.lg-team[b-numgdxhfh4] {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    /* Team colours are user chosen; a thin dark outline keeps white/yellow readable. */
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.6);
}

.lg-score[b-numgdxhfh4] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.lg-score-sep[b-numgdxhfh4] {
    color: #64748b;
    font-weight: 600;
}

.lg-meta[b-numgdxhfh4] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lg-location[b-numgdxhfh4] {
    color: #475569;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lg-viewers[b-numgdxhfh4] {
    color: #3498db;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.lg-right[b-numgdxhfh4] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lg-video[b-numgdxhfh4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.25);
    color: #7cc4f5;
    font-size: 10px;
    font-weight: 700;
}

.lg-status[b-numgdxhfh4] {
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.lg-status-live[b-numgdxhfh4] {
    background: rgba(231, 76, 60, 0.14);
    color: #ff6b6b;
    border: 1px solid rgba(231, 76, 60, 0.3);
    animation: lg-blink-b-numgdxhfh4 2s ease-in-out infinite;
}

.lg-status-halftime[b-numgdxhfh4] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.25);
}

.lg-status-overtime[b-numgdxhfh4] {
    background: rgba(155, 89, 182, 0.14);
    color: #c39bd3;
    border: 1px solid rgba(155, 89, 182, 0.3);
}

@keyframes lg-blink-b-numgdxhfh4 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.lg-chevron[b-numgdxhfh4] {
    color: #475569;
    flex-shrink: 0;
}

.lg-row:hover .lg-chevron[b-numgdxhfh4] {
    color: #e2e8f0;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 560px) {
    .lg-hint[b-numgdxhfh4] {
        display: none;
    }

    .lg-video[b-numgdxhfh4] {
        display: none;
    }

    .lg-teams[b-numgdxhfh4] {
        flex-wrap: wrap;
        row-gap: 2px;
    }
}
/* /Components/Pages/shared/MenuItemDialog.razor.rz.scp.css */
/* Menu item dialog (2026-09-19) */

.mid-icon-row[b-rlcjy3ezvt] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mid-icon-preview[b-rlcjy3ezvt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #7cc4f5;
}

.mid-switch-group[b-rlcjy3ezvt] {
    flex: 0 0 auto !important;
    min-width: 90px;
}

    .mid-switch-group .field-label[b-rlcjy3ezvt] {
        margin-bottom: 8px;
    }

[b-rlcjy3ezvt] .k-animation-container .k-popup {
    background: #0e1e32;
}
/* /Components/Pages/shared/QuickRosterDialog.razor.rz.scp.css */
/* ===== INPUT ROW ===== */
.qr-form[b-auaago1s2h] {
    margin-bottom: 16px;
}

.qr-input-row[b-auaago1s2h] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.qr-field[b-auaago1s2h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qr-jersey-field[b-auaago1s2h] {
    flex: 0 0 65px;
}

.qr-name-field[b-auaago1s2h] {
    flex: 1;
}

.qr-add-field[b-auaago1s2h] {
    flex: 0 0 44px;
}

.qr-add-btn[b-auaago1s2h] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

    .qr-add-btn:hover:not(:disabled)[b-auaago1s2h] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
    }

    .qr-add-btn:disabled[b-auaago1s2h] {
        opacity: 0.5;
        cursor: not-allowed;
    }

[b-auaago1s2h] .qr-jersey-input .k-input {
    text-align: center !important;
    font-weight: 800 !important;
    font-family: 'Cascadia Code', monospace !important;
}

/* ===== ADDED PLAYERS ===== */
.qr-added-header[b-auaago1s2h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.qr-added-title[b-auaago1s2h] {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.qr-added-list[b-auaago1s2h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
}

.qr-added-player[b-auaago1s2h] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(46, 204, 113, 0.04);
    border: 1px solid rgba(46, 204, 113, 0.1);
    border-left: 3px solid;
    border-radius: 8px;
    animation: qr-slide-in-b-auaago1s2h 0.2s ease-out;
}

@keyframes qr-slide-in-b-auaago1s2h {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.qr-added-jersey[b-auaago1s2h] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    font-family: 'Cascadia Code', monospace;
    flex-shrink: 0;
}

.qr-added-name[b-auaago1s2h] {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    flex: 1;
}

/* ===== EMPTY HINT ===== */
.qr-empty-hint[b-auaago1s2h] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    color: #334155;
    font-size: 13px;
    font-style: italic;
    text-align: center;
}

/* ===== SCROLLBAR ===== */
.qr-added-list[b-auaago1s2h]::-webkit-scrollbar {
    width: 4px;
}

.qr-added-list[b-auaago1s2h]::-webkit-scrollbar-track {
    background: transparent;
}

.qr-added-list[b-auaago1s2h]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .qr-input-row[b-auaago1s2h] {
        flex-wrap: wrap;
    }

    .qr-jersey-field[b-auaago1s2h] {
        flex: 0 0 60px;
    }

    .qr-name-field[b-auaago1s2h] {
        flex: 1 1 120px;
    }

    .qr-add-field[b-auaago1s2h] {
        flex: 0 0 100%;
    }

    .qr-add-btn[b-auaago1s2h] {
        width: 100%;
    }
}
/* /Components/Pages/shared/RosterImportDialog.razor.rz.scp.css */
/* =====================================================
   ROSTER IMPORT DIALOG (2026-09-21)

   BaseWindow supplies the chrome (title bar, footer buttons, error banner) and
   the dialog-input override for Telerik fields; everything here is this dialog's
   own. The pill tints are a local copy — CSS isolation scopes a .razor.css to its
   own component, so the set used by the admin pages can't be shared from here.

   NOTE: a .razor.css is plain CSS — the Razor compiler never parses it — so
   at-rules take a SINGLE @. A doubled @@media emits a literal @@media, which
   browsers drop along with the whole block.
   ===================================================== */

.dialog-text[b-8cf9sa810o] {
    color: #cbd5e1;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 16px;
}

/* The quieter asides — what happens to the file, what editing a row means. */
.dialog-note[b-8cf9sa810o] {
    margin: 14px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

.field-group[b-8cf9sa810o] {
    margin-bottom: 16px;
}

.field-label[b-8cf9sa810o] {
    display: block;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.field-hint[b-8cf9sa810o] {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.5;
}

/* ── Step 1: the file input ──────────────────────────────────────── */
/* A plain <InputFile>, so it needs dressing to sit next to Telerik fields. */

.roster-file-input[b-8cf9sa810o] {
    width: 100%;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.03);
    color: #cbd5e1;
    font-size: 13px;
    cursor: pointer;
}

    .roster-file-input:hover[b-8cf9sa810o] {
        border-color: rgba(52, 152, 219, 0.45);
    }

    .roster-file-input[b-8cf9sa810o]::file-selector-button {
        margin-right: 12px;
        padding: 6px 14px;
        border: none;
        border-radius: 8px;
        background: rgba(52, 152, 219, 0.2);
        color: #cfe6f7;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
    }

        .roster-file-input[b-8cf9sa810o]::file-selector-button:hover {
            background: rgba(52, 152, 219, 0.32);
        }

.roster-chosen[b-8cf9sa810o] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 4px;
    color: #ffffff;
    font-size: 13px;
}

.roster-chosen-size[b-8cf9sa810o] {
    color: #64748b;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* ── Step 2: summary and warnings ────────────────────────────────── */

.roster-summary[b-8cf9sa810o] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    color: #94a3b8;
    font-size: 12.5px;
}

.roster-source strong[b-8cf9sa810o] {
    color: #ffffff;
}

.roster-season[b-8cf9sa810o] {
    color: #64748b;
}

.roster-warnings[b-8cf9sa810o] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.roster-warning[b-8cf9sa810o] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(243, 156, 18, 0.07);
    border: 1px solid rgba(243, 156, 18, 0.22);
    color: #cbd5e1;
    font-size: 12.5px;
    line-height: 1.5;
}

.roster-counts[b-8cf9sa810o] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

/* ── Toolbar ─────────────────────────────────────────────────────── */

.roster-toolbar[b-8cf9sa810o] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}

.roster-link[b-8cf9sa810o] {
    padding: 0;
    border: none;
    background: none;
    color: #3498db;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .roster-link:hover[b-8cf9sa810o] {
        color: #5dade2;
        text-decoration: underline;
    }

.roster-sep[b-8cf9sa810o] {
    color: #475569;
}

.roster-count-right[b-8cf9sa810o] {
    margin-left: auto;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

/* ── The review rows ─────────────────────────────────────────────── */
/* Capped height with its own scroll: a club PDF can carry forty players, and the
   footer buttons have to stay reachable without scrolling the whole dialog. */

.roster-rows[b-8cf9sa810o] {
    display: flex;
    flex-direction: column;
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.roster-row[b-8cf9sa810o] {
    display: grid;
    grid-template-columns: 34px 78px minmax(90px, 1fr) minmax(90px, 1fr) minmax(150px, 1.3fr);
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

    .roster-row:last-child[b-8cf9sa810o] {
        border-bottom: none;
    }

.roster-row-head[b-8cf9sa810o] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #16263c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #64748b;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* A row needing a decision, and one that can't be used at all. Tinted rather than
   moved, so the order still matches the document the coach is holding. */
.roster-row-flagged[b-8cf9sa810o] {
    background: rgba(243, 156, 18, 0.05);
}

.roster-row-bad[b-8cf9sa810o] {
    background: rgba(231, 76, 60, 0.05);
}

.roster-row-quiet[b-8cf9sa810o] {
    opacity: 0.62;
}

.roster-cell-check[b-8cf9sa810o] {
    display: flex;
    justify-content: center;
}

.roster-cell-num[b-8cf9sa810o] {
    display: flex;
}

.roster-cell-action[b-8cf9sa810o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.roster-note[b-8cf9sa810o] {
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

/* Shorter than the dialog default — forty of these stacked otherwise makes the
   list twice as tall as it needs to be. */
[b-8cf9sa810o] .roster-input.k-input {
    height: 32px !important;
    font-size: 12.5px !important;
}

/* ── Result ──────────────────────────────────────────────────────── */

.roster-result[b-8cf9sa810o] {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(46, 204, 113, 0.06);
    border: 1px solid rgba(46, 204, 113, 0.2);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.55;
}

.roster-failures[b-8cf9sa810o] {
    margin: 8px 0 0;
    padding-left: 18px;
    color: #f39c12;
    font-size: 12px;
    line-height: 1.55;
}

/* What a ticked conflict did (2026-09-23): informational, not a failure. */
.roster-notes[b-8cf9sa810o] {
    margin: 8px 0 0;
    padding-left: 18px;
    color: #7cc4f5;
    font-size: 12px;
    line-height: 1.55;
}

/* ── Pills ───────────────────────────────────────────────────────── */

.pill[b-8cf9sa810o] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.pill-ok[b-8cf9sa810o] {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.25);
}

.pill-info[b-8cf9sa810o] {
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.25);
}

.pill-warn[b-8cf9sa810o] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.25);
}

.pill-danger[b-8cf9sa810o] {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.25);
}

.pill-muted[b-8cf9sa810o] {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* ── Narrow screens ──────────────────────────────────────────────── */
/* The grid stops working under ~560px, so each row becomes a small stacked card
   with the header hidden. */

@media (max-width: 560px) {
    .roster-row-head[b-8cf9sa810o] {
        display: none;
    }

    .roster-row[b-8cf9sa810o] {
        grid-template-columns: 34px 1fr;
        grid-template-areas:
            "check num"
            "check first"
            "check last"
            "check action";
        row-gap: 6px;
        padding: 10px;
    }

        .roster-row .roster-cell-check[b-8cf9sa810o] {
            grid-area: check;
            align-self: start;
        }

        .roster-row .roster-cell-num[b-8cf9sa810o] {
            grid-area: num;
        }

        .roster-row .roster-cell-action[b-8cf9sa810o] {
            grid-area: action;
        }
}
/* /Components/Pages/shared/ScratchPad.razor.rz.scp.css */
/* ===== WRAPPER ===== */
/* border-color is set inline per-instance to the team colour (see
   ScratchPad.razor) so each pad's perimeter is clearly visible and
   ties it to its team at a glance — the old 1px near-white/12% border
   was easy to miss entirely on a bright tablet screen. Plain CSS on
   the component's own root, so it (and whatever's drawn inside)
   stays intact across minimize/restore — nothing here depends on
   the dialog's minimized state. */
.sp-wrapper[b-8iwstiaz02] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.02);
}

/* ===== TOOLBAR ===== */
.sp-toolbar[b-8iwstiaz02] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp-label[b-8iwstiaz02] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}

.sp-clear-btn[b-8iwstiaz02] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .sp-clear-btn:hover[b-8iwstiaz02] {
        background: rgba(231, 76, 60, 0.1);
        border-color: rgba(231, 76, 60, 0.25);
        color: #e74c3c;
    }

    .sp-clear-btn:active[b-8iwstiaz02] {
        transform: scale(0.96);
    }

/* ===== CLEAR CONFIRM (2026-10-02) ===== */
/* Replaces the Clear button in place while the question is open, so nothing
   moves and a finger that is already there lands on Keep, not on Yes. */
.sp-confirm[b-8iwstiaz02] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sp-confirm-text[b-8iwstiaz02] {
    font-size: 11px;
    font-weight: 600;
    color: #e2e8f0;
}

.sp-confirm-yes[b-8iwstiaz02],
.sp-confirm-no[b-8iwstiaz02] {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
}

.sp-confirm-yes[b-8iwstiaz02] {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}

.sp-confirm-no[b-8iwstiaz02] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

/* ===== CANVAS ===== */
.sp-canvas[b-8iwstiaz02] {
    width: 100%;
    display: block;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    cursor: crosshair;
    /* Critical — prevents the page/dialog from scrolling while drawing */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ===== HINT ===== */
.sp-hint[b-8iwstiaz02] {
    font-size: 10px;
    color: #334155;
    text-align: center;
    font-style: italic;
}
/* /Components/Pages/shared/SeasonDialog.razor.rz.scp.css */
/* =====================================================
   SEASON DIALOG (2026-09-20)

   Only what this dialog adds. The field/dialog chrome (.field-group, .field-label,
   .field-row, .dialog-input, .error-banner) comes from BaseWindow's own stylesheet,
   which is why it isn't restated here.

   NOTE: a .razor.css is plain CSS -- the Razor compiler never parses it -- so at-rules
   take a SINGLE @. A doubled @@media emits a literal @@media and the browser drops the
   whole block.
   ===================================================== */

/* "Here is what you're about to close." */
.season-rollover-note[b-ozjgv53c48] {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(52, 152, 219, 0.07);
    border: 1px solid rgba(52, 152, 219, 0.2);
    color: #cbd5e1;
    font-size: 12.5px;
    line-height: 1.55;
}

    .season-rollover-note strong[b-ozjgv53c48] {
        color: #ffffff;
    }

.field-hint[b-ozjgv53c48] {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.bd-checkbox-label[b-ozjgv53c48] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
/* /Components/Pages/TeamDetail.razor.rz.scp.css */
/* ===== PAGE ===== */

/* ── Tabs (2026-09-30, mirrors .detail-tabs on the Entry Manager) ── */
.team-tabs[b-hdiyj8a99e] {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    overflow-x: auto;
}

.team-tab[b-hdiyj8a99e] {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.team-tab:hover[b-hdiyj8a99e] {
    color: #e2e8f0;
}

.team-tab-active[b-hdiyj8a99e] {
    color: #f8fafc;
    border-bottom-color: #3498db;
}

.team-tab-count[b-hdiyj8a99e] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(52, 152, 219, 0.2);
    color: #7cc4f5;
}

/* Something is waiting on a manager (join requests, open invitations). */
.team-tab-alert[b-hdiyj8a99e] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(243, 156, 18, 0.25);
    color: #f5c26b;
}

.team-detail-page[b-hdiyj8a99e] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px 32px;
    animation: fadeIn-b-hdiyj8a99e 0.4s ease-out;
}

@keyframes fadeIn-b-hdiyj8a99e {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== LOADING / EMPTY ===== */ .loading-state[b-hdiyj8a99e], .empty-state[b-hdiyj8a99e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    text-align: center;
}

.loading-text[b-hdiyj8a99e] {
    color: #64748b;
    font-size: 14px;
}

.empty-icon[b-hdiyj8a99e] {
    font-size: 56px;
}

.empty-title[b-hdiyj8a99e] {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.empty-message[b-hdiyj8a99e] {
    color: #64748b;
    font-size: 15px;
    margin: 0 0 16px 0;
}

/* ===== TEAM HEADER ===== */ .team-header[b-hdiyj8a99e] {
    border-radius: 16px;
    margin-top: 24px;
    overflow: hidden;
}

.team-header-content[b-hdiyj8a99e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px;
    background: rgba(0, 0, 0, 0.2);
}
.team-header-row[b-hdiyj8a99e] {
display: flex;
align-items: center;
gap: 10px;
}
.team-header-left[b-hdiyj8a99e] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.team-jersey-large[b-hdiyj8a99e] {
    width: 64px;
    height: 76px;
    border-radius: 10px 10px 6px 6px;
    border: 4px solid;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.jersey-initials[b-hdiyj8a99e] {
    font-size: 22px;
    font-weight: 800;
}

.team-header-name[b-hdiyj8a99e] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 6px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.team-header-meta[b-hdiyj8a99e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.meta-tag[b-hdiyj8a99e] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
}

.meta-dot[b-hdiyj8a99e] {
    color: rgba(255, 255, 255, 0.3);
}

.meta-role[b-hdiyj8a99e] {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.team-header-right[b-hdiyj8a99e] {
    display: flex;
    gap: 16px;
}

.team-stat-pill[b-hdiyj8a99e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.stat-pill-number[b-hdiyj8a99e] {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.stat-pill-label[b-hdiyj8a99e] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

/* ===== CONTENT SECTIONS ===== */ .team-content[b-hdiyj8a99e] {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.content-section[b-hdiyj8a99e] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
}

.section-header[b-hdiyj8a99e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.section-title[b-hdiyj8a99e] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

[b-hdiyj8a99e].section-action-btn {
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #3498db, #2ecc71) !important;
    border: none !important;
}

[b-hdiyj8a99e].section-action-btn-secondary {
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}

.empty-section[b-hdiyj8a99e] {
    text-align: center;
    padding: 40px 20px;
    color: #475569;
    font-size: 14px;
}

.empty-section-icon[b-hdiyj8a99e] {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

/* ===== SETTINGS SECTION (2026-09-19, roadmap item #1) ===== */
/* .content-section carries no padding of its own — every section pads its own
   body (see .roster-grid, .games-list), so the settings form gets the same
   treatment. The form is a separate component with its own scoped styles;
   nothing here reaches inside it. */

.settings-section-body[b-hdiyj8a99e] {
    padding: 16px 20px 20px;
}

/* Sits at the right of a .section-header, where other sections put a button. */
.section-note[b-hdiyj8a99e] {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ===== ROSTER GRID ===== */ .roster-grid[b-hdiyj8a99e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    padding: 12px;
}

.player-card[b-hdiyj8a99e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s;
}

    .player-card:hover[b-hdiyj8a99e] {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }

.player-number[b-hdiyj8a99e] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}

.player-info[b-hdiyj8a99e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.player-name[b-hdiyj8a99e] {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-position[b-hdiyj8a99e] {
    color: #64748b;
    font-size: 12px;
}

.player-actions[b-hdiyj8a99e] {
    display: flex;
    gap: 2px;
    opacity: 1;
    transition: opacity 0.2s;
}

/* Per-player stats link (2026-09-21) -- sits between the name and the manager buttons. */
.player-stats-link[b-hdiyj8a99e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #64748b;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.15s;
}

    .player-stats-link:hover[b-hdiyj8a99e] {
        color: #3498db;
        background: rgba(52, 152, 219, 0.12);
    }

/* The header's Stats pill is a link styled like its sibling pills. */
.team-stat-link[b-hdiyj8a99e] {
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

    .team-stat-link:hover[b-hdiyj8a99e] {
        background: rgba(255, 255, 255, 0.22);
    }

/* The season-to-date report pill has a longer label than its siblings; keep it on one line. */
.team-stat-report .stat-pill-label[b-hdiyj8a99e] {
    white-space: nowrap;
}

.player-card:hover.player-actions[b-hdiyj8a99e] {
    opacity: 1;
}
[b-hdiyj8a99e].player-edit-btn {
    color: #64748b !important;
    width: 30px !important;
    height: 30px !important;
}

    [b-hdiyj8a99e].player-edit-btn:hover {
        color: #3498db !important;
        background: rgba(52, 152, 219, 0.1) !important;
    }

[b-hdiyj8a99e].player-delete-btn {
    color: #64748b !important;
    width: 30px !important;
    height: 30px !important;
}

    [b-hdiyj8a99e].player-delete-btn:hover {
        color: #e74c3c !important;
        background: rgba(231, 76, 60, 0.1) !important;
    }

/* ===== MEMBERS LIST ===== */ .members-list[b-hdiyj8a99e] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.member-item[b-hdiyj8a99e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background 0.15s;
}

    .member-item:hover[b-hdiyj8a99e] {
        background: rgba(255, 255, 255, 0.03);
    }

.member-avatar[b-hdiyj8a99e] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.member-info[b-hdiyj8a99e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;          /* pushes the row's action buttons to the right (2026-09-23) */
    min-width: 0;
}

.member-name[b-hdiyj8a99e] {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.member-role[b-hdiyj8a99e] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.role-coach[b-hdiyj8a99e] {
    color: #f39c12;
}

.role-manager[b-hdiyj8a99e] {
    color: #9b59b6;
}

.role-player[b-hdiyj8a99e] {
    color: #3498db;
}

/* ===== GAMES LIST ===== */ .games-list[b-hdiyj8a99e] {
    padding: 8px 12px;
}

.game-item[b-hdiyj8a99e] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

    .game-item:last-child[b-hdiyj8a99e] {
        border-bottom: none;
    }

    .game-item:hover[b-hdiyj8a99e] {
        background: rgba(255, 255, 255, 0.03);
    }

.game-date[b-hdiyj8a99e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 60px;
}

.game-day[b-hdiyj8a99e] {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
}

.game-time[b-hdiyj8a99e] {
    color: #475569;
    font-size: 11px;
}

.game-teams[b-hdiyj8a99e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.game-team[b-hdiyj8a99e] {
    font-size: 14px;
    font-weight: 600;
    flex: 1;
}

.game-score-mini[b-hdiyj8a99e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
}

.score-dash[b-hdiyj8a99e] {
    color: #334155;
    font-weight: 300;
    font-size: 14px;
}

.game-status-mini[b-hdiyj8a99e] {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Game reel link on finished games (2026-10-03) */
.game-reel-link[b-hdiyj8a99e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    color: #e9d5ff;
    background: rgba(142, 68, 173, 0.2);
    border: 1px solid rgba(142, 68, 173, 0.45);
    flex-shrink: 0;
}

    .game-reel-link:hover[b-hdiyj8a99e] {
        background: rgba(142, 68, 173, 0.35);
        color: #ffffff;
    }

/* ===== PLAYER PREVIEW (in dialogs) ===== */ .player-preview[b-hdiyj8a99e] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 16px;
}

.preview-jersey[b-hdiyj8a99e] {
    width: 44px;
    height: 52px;
    border-radius: 8px 8px 4px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.preview-player-info[b-hdiyj8a99e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preview-player-name[b-hdiyj8a99e] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.preview-player-position[b-hdiyj8a99e] {
    color: #64748b;
    font-size: 13px;
}

/* ===== DIALOG EXTRAS ===== */ .dialog-section-title[b-hdiyj8a99e] {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* ===== SEASONS (2026-09-20) ===== */

/* The selector sits inside the coloured team header, so it borrows the header's own
   translucent-white idiom rather than the page's slate palette -- a slate control on a team's
   gradient reads as a rendering bug. */
.team-header-season[b-hdiyj8a99e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.season-select-label[b-hdiyj8a99e] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.season-select[b-hdiyj8a99e] {
    max-width: 320px;
    padding: 5px 10px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.22);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    .season-select:hover[b-hdiyj8a99e] {
        border-color: rgba(255, 255, 255, 0.45);
    }

    /* The list itself renders on the browser's own surface, not the header's, so its options need
       colours that work there -- without this they are white-on-white on most platforms. */
    .season-select option[b-hdiyj8a99e] {
        background: #0e1e32;
        color: #ffffff;
    }

[b-hdiyj8a99e] .season-btn {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.18) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
}

    [b-hdiyj8a99e] .season-btn:hover {
        background: rgba(0, 0, 0, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }

/* Viewing a past season. Amber rather than red: nothing is wrong, the page is just showing
   history, and a red banner would read as an error. */
.season-history-banner[b-hdiyj8a99e] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(243, 156, 18, 0.07);
    border: 1px solid rgba(243, 156, 18, 0.22);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
}

.season-history-icon[b-hdiyj8a99e] {
    font-size: 15px;
    line-height: 1.3;
    flex-shrink: 0;
}

.season-history-link[b-hdiyj8a99e] {
    margin-left: 6px;
    padding: 0;
    border: none;
    background: none;
    color: #f39c12;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

    .season-history-link:hover[b-hdiyj8a99e] {
        color: #f5b041;
    }

/* .season-rollover-note and .field-readonly deliberately live in SeasonDialog.razor.css and
   EditTeamDialog.razor.css instead: CSS isolation scopes this file to TeamDetail, so a copy here
   could never reach either dialog -- it would just be dead rules that look live. */

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .team-header-content[b-hdiyj8a99e] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .team-header-left[b-hdiyj8a99e] {
        flex-direction: column;
    }

    .team-header-name[b-hdiyj8a99e] {
        font-size: 22px;
    }

    .roster-grid[b-hdiyj8a99e] {
        grid-template-columns: 1fr;
    }

    .game-teams[b-hdiyj8a99e] {
        flex-direction: column;
        gap: 4px;
    }
}

/* ── Staff invitations (2026-09-23) ─────────────────────── */
.pending-invitations[b-hdiyj8a99e] {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.invitation-avatar[b-hdiyj8a99e] {
    background: rgba(52, 152, 219, 0.15) !important;
    color: #3498db;
}

.invitation-item .member-name[b-hdiyj8a99e] {
    word-break: break-all;
}

.invitation-actions[b-hdiyj8a99e] {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.invitation-notice[b-hdiyj8a99e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    color: #2ecc71;
    font-size: 13px;
}

.invitation-notice-close[b-hdiyj8a99e] {
    background: none;
    border: none;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

    .invitation-notice-close:hover[b-hdiyj8a99e] {
        color: #ffffff;
    }
/* /Components/Pages/Teams.razor.rz.scp.css */
/* ===== PAGE ===== */

.teams-page[b-5acx39ptmh] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
    animation: fadeIn-b-5acx39ptmh 0.4s ease-out;
}

@keyframes fadeIn-b-5acx39ptmh {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== HEADER ===== */ .page-header[b-5acx39ptmh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title[b-5acx39ptmh] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-5acx39ptmh] {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

[b-5acx39ptmh].create-team-btn {
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    background: linear-gradient(135deg, #3498db, #2ecc71) !important;
    border: none !important;
}

    [b-5acx39ptmh].create-team-btn:hover {
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
        filter: brightness(1.08);
    }

/* ===== SECTION HEADING (shared by Join a Team / Your Teams) ===== */
.section-heading[b-5acx39ptmh] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px 0;
}

/* ===== PENDING JOIN REQUESTS ===== */
.pending-requests-list[b-5acx39ptmh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.pending-request-card[b-5acx39ptmh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(243, 156, 18, 0.06);
    border: 1px solid rgba(243, 156, 18, 0.2);
    border-radius: 12px;
}

.pending-request-swatch[b-5acx39ptmh] {
    width: 10px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
}

.pending-request-body[b-5acx39ptmh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: auto;
    min-width: 0;
}

.pending-request-team[b-5acx39ptmh] {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.pending-request-role[b-5acx39ptmh] {
    color: #f39c12;
    font-size: 12px;
    font-weight: 600;
}

/* ===== JOIN A TEAM ===== */
.join-team-section[b-5acx39ptmh] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 28px;
}

.join-team-row[b-5acx39ptmh] {
    max-width: 420px;
}

.team-search-results[b-5acx39ptmh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.team-search-item[b-5acx39ptmh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.team-search-swatch[b-5acx39ptmh] {
    width: 10px;
    height: 28px;
    border-radius: 4px;
    flex-shrink: 0;
}

.team-search-name[b-5acx39ptmh] {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    margin-right: auto;
}

.join-role-row[b-5acx39ptmh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .join-role-row label[b-5acx39ptmh] {
        color: #94a3b8;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }

.field-hint[b-5acx39ptmh] {
    color: #64748b;
    font-size: 12px;
    flex-basis: 100%;
    margin: 0;
}

/* ===== LOADING ===== */ .loading-state[b-5acx39ptmh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-text[b-5acx39ptmh] {
    color: #64748b;
    font-size: 14px;
}

/* ===== EMPTY STATE ===== */ .empty-state[b-5acx39ptmh] {
    text-align: center;
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.empty-icon[b-5acx39ptmh] {
    margin-bottom: 16px;
}

.empty-title[b-5acx39ptmh] {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.empty-message[b-5acx39ptmh] {
    color: #64748b;
    font-size: 15px;
    margin: 0 0 24px 0;
}

/* ===== VIEW SWITCH (2026-09-19) ===== */
.header-right[b-5acx39ptmh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.view-switch[b-5acx39ptmh] {
    display: inline-flex;
    padding: 3px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.view-switch-btn[b-5acx39ptmh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .view-switch-btn:hover[b-5acx39ptmh] {
        color: #e2e8f0;
    }

.view-switch-active[b-5acx39ptmh] {
    background: rgba(52, 152, 219, 0.2);
    color: #ffffff;
}

/* ===== TEAM LIST VIEW (2026-09-19) ===== */
.teams-list[b-5acx39ptmh] {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}

.teams-list-head[b-5acx39ptmh],
.teams-list-row[b-5acx39ptmh] {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) 0.9fr 0.9fr 1.2fr 96px 76px 76px 120px 28px;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
}

.teams-list-head[b-5acx39ptmh] {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.teams-list-hcell[b-5acx39ptmh] {
    padding: 10px 0;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

    .teams-list-hcell:hover[b-5acx39ptmh] {
        color: #e2e8f0;
    }

span.teams-list-hcell[b-5acx39ptmh] {
    cursor: default;
}

.teams-list-row[b-5acx39ptmh] {
    min-height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.15s ease;
}

    .teams-list-row:last-child[b-5acx39ptmh] {
        border-bottom: none;
    }

    .teams-list-row:hover[b-5acx39ptmh] {
        background: rgba(255, 255, 255, 0.04);
    }

.teams-list-cell[b-5acx39ptmh] {
    color: #cbd5e1;
    font-size: 13px;
    min-width: 0;
}

.teams-list-col-name[b-5acx39ptmh] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.teams-list-swatch[b-5acx39ptmh] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 2px solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.teams-list-name[b-5acx39ptmh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teams-list-league[b-5acx39ptmh] {
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visibility-pill[b-5acx39ptmh] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.visibility-public[b-5acx39ptmh] {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.25);
}

.visibility-private[b-5acx39ptmh] {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.teams-list-num[b-5acx39ptmh] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.teams-list-chevron[b-5acx39ptmh] {
    color: #475569;
    display: flex;
    justify-content: flex-end;
}

.teams-list-row:hover .teams-list-chevron[b-5acx39ptmh] {
    color: #3498db;
}

@media (max-width: 900px) {
    .teams-list-head[b-5acx39ptmh] {
        display: none;
    }

    /* Rows become a wrapped flex line: the name takes the first line, the
       remaining cells flow underneath as small chips. */
    .teams-list-row[b-5acx39ptmh] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        padding: 10px 14px;
    }

    .teams-list-row .teams-list-col-name[b-5acx39ptmh] {
        flex: 1 1 100%;
    }

    .teams-list-row .teams-list-chevron[b-5acx39ptmh] {
        display: none;
    }

    .teams-list-row .teams-list-cell:not(.teams-list-col-name):not(.teams-list-chevron)[b-5acx39ptmh] {
        font-size: 12px;
        color: #94a3b8;
        padding-left: 46px; /* line up under the name, past the swatch */
    }

        .teams-list-row .teams-list-cell:not(.teams-list-col-name):not(.teams-list-chevron) ~ .teams-list-cell[b-5acx39ptmh] {
            padding-left: 0;
        }

    .teams-list-row .teams-list-num[b-5acx39ptmh]::before {
        content: attr(data-label) " ";
        color: #64748b;
    }
}

/* ===== TEAM CARDS GRID ===== */ .teams-grid[b-5acx39ptmh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* ===== TEAM CARD ===== */ .team-card[b-5acx39ptmh] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .team-card:hover[b-5acx39ptmh] {
        border-color: rgba(255, 255, 255, 0.12);
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    }

/* Card header */ .team-card-header[b-5acx39ptmh] {
    padding: 24px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

    .team-card-header[b-5acx39ptmh]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
    }

.team-jersey[b-5acx39ptmh] {
    width: 48px;
    height: 56px;
    border-radius: 8px 8px 4px 4px;
    border: 3px solid;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.jersey-number[b-5acx39ptmh] {
    font-size: 16px;
    font-weight: 800;
}

.team-color-dots[b-5acx39ptmh] {
    display: flex;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.color-dot[b-5acx39ptmh] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid;
}

/* Card body */ .team-card-body[b-5acx39ptmh] {
    padding: 20px;
}

.team-card-name[b-5acx39ptmh] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-card-details[b-5acx39ptmh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.detail-item[b-5acx39ptmh] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-icon[b-5acx39ptmh] {
    font-size: 12px;
    flex-shrink: 0;
}

.detail-label[b-5acx39ptmh] {
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-value[b-5acx39ptmh] {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    margin-left: auto;
}

/* Role badge */ .team-card-role[b-5acx39ptmh] {
    display: flex;
}

.role-badge[b-5acx39ptmh] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.role-coach[b-5acx39ptmh] {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.2);
}

.role-manager[b-5acx39ptmh] {
    background: rgba(155, 89, 182, 0.12);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.2);
}

.role-player[b-5acx39ptmh] {
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.role-member[b-5acx39ptmh] {
    background: rgba(149, 165, 166, 0.12);
    color: #95a5a6;
    border: 1px solid rgba(149, 165, 166, 0.2);
}

/* Card footer */ .team-card-footer[b-5acx39ptmh] {
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    justify-content: flex-end;
}

.footer-link[b-5acx39ptmh] {
    color: #3498db;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.team-card:hover.footer-link[b-5acx39ptmh] {
    color: #5dade2;
}

/* ===== CREATE DIALOG ===== */
[b-5acx39ptmh].create-team-window {
    border-radius: 16px !important;
    overflow: hidden;
}

    [b-5acx39ptmh].create-team-window.k-window-titlebar {
        background: linear-gradient(90deg, #0a1628, #0f2744) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
        padding: 16px 20px !important;
    }

    [b-5acx39ptmh].create-team-window.k-window-content {
        background: #0e1e32 !important;
        padding: 0 !important;
    }

.dialog-content[b-5acx39ptmh] {
    padding: 24px;
}

.field-group[b-5acx39ptmh] {
    margin-bottom: 18px;
}

.field-row[b-5acx39ptmh] {
    display: flex;
    gap: 12px;
}

    .field-row.field-group[b-5acx39ptmh] {
        flex: 1;
    }

.field-label[b-5acx39ptmh] {
    display: block;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

[b-5acx39ptmh].dialog-input.k-input,
[b-5acx39ptmh].dialog-input.k-picker {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    height: 44px !important;
}

    [b-5acx39ptmh].dialog-input.k-input:focus,
    [b-5acx39ptmh].dialog-input.k-input.k-focus {
        border-color: #3498db !important;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
    }

/* Color picker */ .color-picker-row[b-5acx39ptmh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-preview[b-5acx39ptmh] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.color-hex[b-5acx39ptmh] {
    color: #64748b;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
}

/* Live preview */ .team-preview-card[b-5acx39ptmh] {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.preview-header[b-5acx39ptmh] {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-jersey[b-5acx39ptmh] {
    width: 40px;
    height: 48px;
    border-radius: 6px 6px 3px 3px;
    border: 3px solid;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-body[b-5acx39ptmh] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 255, 255, 0.02);
}

.preview-name[b-5acx39ptmh] {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.preview-meta[b-5acx39ptmh] {
    color: #64748b;
    font-size: 12px;
}

/* Dialog actions */ .dialog-actions[b-5acx39ptmh] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[b-5acx39ptmh].dialog-cancel-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

[b-5acx39ptmh].dialog-submit-btn {
    background: linear-gradient(135deg, #3498db, #2ecc71) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

    [b-5acx39ptmh].dialog-submit-btn:hover {
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
    }

/* Error banner */ .error-banner[b-5acx39ptmh] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #e74c3c;
    font-size: 13px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .teams-page[b-5acx39ptmh] {
        padding: 20px 16px;
    }

    .page-title[b-5acx39ptmh] {
        font-size: 22px;
    }

    .teams-grid[b-5acx39ptmh] {
        grid-template-columns: 1fr;
    }

    .field-row[b-5acx39ptmh] {
        flex-direction: column;
        gap: 0;
    }

    [b-5acx39ptmh].create-team-window {
        width: 95vw !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .teams-grid[b-5acx39ptmh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .teams-grid[b-5acx39ptmh] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* /Components/Pages/TeamStats.razor.rz.scp.css */
/* ===== TEAM STATS PAGE (2026-09-21) =====
   Shares its look with TeamDetail (page width, header gradient, section
   cards) but nothing is shared -- CSS isolation scopes that file to its
   own component. PlayerStats.razor.css carries the same base under a
   "ps-" prefix; if you restyle one, restyle the other. */

.ts-page[b-lp11cc19hx] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 32px;
    animation: fadeIn-b-lp11cc19hx 0.4s ease-out;
}

@keyframes fadeIn-b-lp11cc19hx {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== LOADING / EMPTY ===== */
.loading-state[b-lp11cc19hx], .empty-state[b-lp11cc19hx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    text-align: center;
}

.loading-text[b-lp11cc19hx] { color: #64748b; font-size: 14px; }
.empty-icon[b-lp11cc19hx] { font-size: 56px; }
.empty-title[b-lp11cc19hx] { color: #ffffff; font-size: 22px; font-weight: 700; margin: 0; }
.empty-message[b-lp11cc19hx] { color: #64748b; font-size: 15px; margin: 0 0 16px 0; max-width: 480px; }

.empty-section[b-lp11cc19hx] {
    text-align: center;
    padding: 36px 20px;
    color: #475569;
    font-size: 14px;
}

.empty-section-icon[b-lp11cc19hx] { font-size: 32px; display: block; margin-bottom: 8px; }

/* ===== HEADER ===== */
.ts-header[b-lp11cc19hx] {
    border-radius: 16px;
    margin-top: 24px;
    overflow: hidden;
}

.ts-header-content[b-lp11cc19hx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 28px 24px;
    background: rgba(0, 0, 0, 0.22);
}

.ts-back[b-lp11cc19hx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 6px;
}

    .ts-back:hover[b-lp11cc19hx] { color: #ffffff; text-decoration: underline; }

.ts-title[b-lp11cc19hx] {
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 6px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ts-meta[b-lp11cc19hx] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-meta-tag[b-lp11cc19hx] { color: rgba(255, 255, 255, 0.75); font-size: 14px; font-weight: 500; }
.ts-meta-dot[b-lp11cc19hx] { color: rgba(255, 255, 255, 0.3); }

.ts-live-pill[b-lp11cc19hx] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(231, 76, 60, 0.25);
    border: 1px solid rgba(231, 76, 60, 0.5);
    color: #ffb4a8;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.ts-header-right[b-lp11cc19hx] { display: flex; align-items: center; gap: 8px; }

.ts-season-label[b-lp11cc19hx] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ts-season-select[b-lp11cc19hx] {
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    min-width: 180px;
}

    .ts-season-select option[b-lp11cc19hx] { color: #0f172a; }

/* ===== OUTSIDE-SEASON NOTICE ===== */
/* Amber, not red: nothing is broken, the season dates just don't cover these games. */
.ts-outside[b-lp11cc19hx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(243, 156, 18, 0.08);
    border: 1px solid rgba(243, 156, 18, 0.3);
    color: #fbd38d;
    font-size: 13px;
}

.ts-outside-icon[b-lp11cc19hx] { font-size: 18px; }
.ts-outside-text[b-lp11cc19hx] { flex: 1; min-width: 240px; }
    .ts-outside-text strong[b-lp11cc19hx] { color: #ffffff; }
    .ts-outside-text em[b-lp11cc19hx] { color: #ffffff; font-style: normal; font-weight: 700; }

.ts-outside-games[b-lp11cc19hx] { display: flex; flex-wrap: wrap; gap: 6px; }

    .ts-outside-games a[b-lp11cc19hx], .ts-outside-games span[b-lp11cc19hx] {
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.25);
        color: #fbd38d;
        font-size: 12px;
        text-decoration: none;
        white-space: nowrap;
    }

        .ts-outside-games a:hover[b-lp11cc19hx] { color: #ffffff; background: rgba(0, 0, 0, 0.4); }

/* ===== TILES ===== */
.ts-tiles[b-lp11cc19hx] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.ts-tile[b-lp11cc19hx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    text-align: center;
}

.ts-tile-record[b-lp11cc19hx] { background: rgba(52, 152, 219, 0.08); border-color: rgba(52, 152, 219, 0.25); }

.ts-tile-value[b-lp11cc19hx] { color: #ffffff; font-size: 26px; font-weight: 800; line-height: 1.1; }
.ts-tile-label[b-lp11cc19hx] { color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.ts-tile-sub[b-lp11cc19hx] { color: #64748b; font-size: 11px; }
.ts-pos[b-lp11cc19hx] { color: #2ecc71; }
.ts-neg[b-lp11cc19hx] { color: #e74c3c; }

/* ===== SECTIONS ===== */
.ts-section[b-lp11cc19hx] {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
}

.ts-section-header[b-lp11cc19hx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ts-section-title[b-lp11cc19hx] { color: #ffffff; font-size: 16px; font-weight: 700; margin: 0; }
.ts-section-note[b-lp11cc19hx] { color: #64748b; font-size: 12px; text-align: right; }

/* ===== SEASON HIGHS ===== */
.ts-highs[b-lp11cc19hx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    padding: 16px 20px 20px;
}

.ts-high[b-lp11cc19hx] {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(46, 204, 113, 0.06);
    border: 1px solid rgba(46, 204, 113, 0.22);
    border-left: 4px solid #2ecc71;
}

.ts-high-neg[b-lp11cc19hx] {
    background: rgba(243, 156, 18, 0.06);
    border-color: rgba(243, 156, 18, 0.25);
    border-left-color: #f39c12;
}

.ts-high-top[b-lp11cc19hx] { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ts-high-value[b-lp11cc19hx] { color: #ffffff; font-size: 26px; font-weight: 800; line-height: 1; }
.ts-high-label[b-lp11cc19hx] { color: #cbd5e1; font-size: 13px; font-weight: 700; }

.ts-high-games[b-lp11cc19hx] { display: flex; flex-direction: column; gap: 4px; }

.ts-high-game[b-lp11cc19hx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 12px;
    text-decoration: none;
}

    .ts-high-game:hover[b-lp11cc19hx] { background: rgba(255, 255, 255, 0.08); color: #ffffff; }

.ts-high-date[b-lp11cc19hx] { font-weight: 700; color: #cbd5e1; }
.ts-high-opp[b-lp11cc19hx] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-high-leader[b-lp11cc19hx] { width: 100%; color: #7cc4f5; font-size: 11px; font-weight: 600; }

/* ===== RESULT CHIPS ===== */
.ts-result[b-lp11cc19hx] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.ts-result-W[b-lp11cc19hx] { background: rgba(46, 204, 113, 0.18); color: #2ecc71; }
.ts-result-L[b-lp11cc19hx] { background: rgba(231, 76, 60, 0.18); color: #e74c3c; }
.ts-result-D[b-lp11cc19hx] { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }

/* ===== TABLES ===== */
.ts-table-wrap[b-lp11cc19hx] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.ts-table[b-lp11cc19hx] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #94a3b8;
    min-width: 900px;
}

    .ts-table th[b-lp11cc19hx], .ts-table td[b-lp11cc19hx] {
        padding: 8px 10px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        white-space: nowrap;
    }

    .ts-table th[b-lp11cc19hx] {
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        background: rgba(255, 255, 255, 0.03);
        cursor: pointer;
        user-select: none;
        position: sticky;
        top: 0;
    }

        .ts-table th:hover[b-lp11cc19hx] { color: #cbd5e1; }

    .ts-table tfoot td[b-lp11cc19hx] {
        color: #ffffff;
        font-weight: 800;
        background: rgba(52, 152, 219, 0.08);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 0;
    }

.ts-sort[b-lp11cc19hx] { font-size: 9px; margin-left: 3px; color: #3498db; }

/* Sticky identity columns so the name stays put while the numbers scroll. */
.ts-col-sticky[b-lp11cc19hx] {
    position: sticky;
    background: #0d1c30;
    z-index: 1;
}

.ts-col-num[b-lp11cc19hx] { left: 0; width: 44px; min-width: 44px; }
.ts-col-date[b-lp11cc19hx] { left: 0; width: 64px; min-width: 64px; text-align: left !important; color: #cbd5e1; font-weight: 700; }
.ts-col-name[b-lp11cc19hx] { left: 44px; text-align: left !important; min-width: 180px; }
.ts-games .ts-col-name[b-lp11cc19hx] { left: 64px; }
.ts-table th.ts-col-sticky[b-lp11cc19hx] { z-index: 2; background: #0f2036; }

.ts-row-link[b-lp11cc19hx] { cursor: pointer; transition: background 0.12s; }
    .ts-row-link:hover td[b-lp11cc19hx] { background: rgba(255, 255, 255, 0.04); }
    .ts-row-link:hover td.ts-col-sticky[b-lp11cc19hx] { background: #132842; }
.ts-row-live td[b-lp11cc19hx] { background: rgba(231, 76, 60, 0.04); }
.ts-row-off-roster[b-lp11cc19hx] { opacity: 0.55; }

.ts-jersey[b-lp11cc19hx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgba(15, 23, 42, 0.35);
}

.ts-player-name[b-lp11cc19hx] { color: #ffffff; font-weight: 600; }
.ts-player-pos[b-lp11cc19hx] { color: #64748b; font-size: 11px; margin-left: 6px; }
.ts-zero[b-lp11cc19hx] { color: #334155; }

.ts-opp-swatch[b-lp11cc19hx] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 7px;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .ts-tiles[b-lp11cc19hx] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ts-header-content[b-lp11cc19hx] { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
    .ts-page[b-lp11cc19hx] { padding: 0 12px 24px; }
    .ts-tiles[b-lp11cc19hx] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ts-section-header[b-lp11cc19hx] { flex-direction: column; align-items: flex-start; gap: 4px; }
    .ts-section-note[b-lp11cc19hx] { text-align: left; }
}
/* /Components/Pages/VideoReview.razor.rz.scp.css */
/* ===== Video review tool (2026-09-25) =====
   Same visual language as GameCameras / GameTracker: translucent panels on
   the dark app background, 14px radii, slate text ramp. Left rail for the
   camera and event lists, the stage on the right holds the video tiles, the
   shared transport and the clip bar. */

.vr-page[b-3wwiwxinxg] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 12px 12px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vr-loading[b-3wwiwxinxg],
.vr-error-page[b-3wwiwxinxg],
.vr-empty[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 40vh;
    color: #94a3b8;
    text-align: center;
}

    .vr-empty p[b-3wwiwxinxg] {
        max-width: 460px;
        line-height: 1.5;
    }

.vr-empty-note[b-3wwiwxinxg] {
    color: #64748b;
    font-size: 13px;
}

.vr-error-icon[b-3wwiwxinxg] {
    font-size: 40px;
}

/* ===== Header ===== */
.vr-header[b-3wwiwxinxg] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.vr-header-left[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vr-back[b-3wwiwxinxg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

    .vr-back:hover[b-3wwiwxinxg] {
        color: #e2e8f0;
    }

.vr-title[b-3wwiwxinxg] {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}

.vr-header-right[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vr-game-label[b-3wwiwxinxg] {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vr-select[b-3wwiwxinxg] {
    min-width: 280px;
    max-width: 60vw;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.6);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
}

    .vr-select:focus[b-3wwiwxinxg] {
        outline: none;
        border-color: rgba(52, 152, 219, 0.7);
    }

/* ===== Body ===== */
.vr-body[b-3wwiwxinxg] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.vr-rail[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
}

/* 2026-10-04: the cameras moved to a strip over the stage (.vr-camstrip), so the
   rail is the events panel alone and it may use the whole height. */
.vr-rail > .vr-panel-events[b-3wwiwxinxg] {
    flex: 1 1 auto;
    max-height: 100%;
}

.vr-panel[b-3wwiwxinxg] {
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.vr-panel-events[b-3wwiwxinxg] {
    flex: 1 1 auto;
    min-height: 120px;
    overflow: hidden;
}

.vr-panel-head[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .vr-panel-head h3[b-3wwiwxinxg] {
        margin: 0;
        font-size: 13px;
        font-weight: 800;
        color: #cbd5e1;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.vr-panel-count[b-3wwiwxinxg] {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vr-panel-empty[b-3wwiwxinxg] {
    margin: 4px 0;
    color: #64748b;
    font-size: 12.5px;
}

/* ----- Camera list ----- */
.vr-event-list[b-3wwiwxinxg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vr-camera label[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

    .vr-camera label:hover[b-3wwiwxinxg] {
        background: rgba(255, 255, 255, 0.04);
    }

.vr-camera-on label[b-3wwiwxinxg] {
    background: rgba(52, 152, 219, 0.12);
    border-color: rgba(52, 152, 219, 0.35);
}

.vr-camera-off label[b-3wwiwxinxg] {
    cursor: default;
    opacity: 0.55;
}

.vr-camera input[type="checkbox"][b-3wwiwxinxg] {
    width: 16px;
    height: 16px;
    accent-color: #3498db;
    flex: 0 0 auto;
}

.vr-camera-main[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.vr-camera-name[b-3wwiwxinxg] {
    font-size: 13.5px;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vr-camera-meta[b-3wwiwxinxg] {
    font-size: 11.5px;
    color: #94a3b8;
}

.vr-camera-tags[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

/* "add sync" on a recording without markers: writes a start marker from the
   recording's own timestamps so it can join synced playback. */
.vr-camera-sync-btn[b-3wwiwxinxg] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(46, 204, 113, 0.45);
    background: rgba(46, 204, 113, 0.08);
    color: #6fdc9a;
    cursor: pointer;
}

    .vr-camera-sync-btn:hover[b-3wwiwxinxg] {
        background: rgba(46, 204, 113, 0.2);
    }

    .vr-camera-sync-btn:disabled[b-3wwiwxinxg] {
        opacity: 0.5;
        cursor: default;
    }

/* Field coverage on a row (2026-10-03): the tag reads what the camera covers; amber when it was
   never set up. The editor opens under the row. */
.vr-camera-cov-btn[b-3wwiwxinxg] {
    border-color: rgba(52, 152, 219, 0.45);
    background: rgba(52, 152, 219, 0.08);
    color: #7cc0ec;
    text-transform: none;
    letter-spacing: 0;
}

    .vr-camera-cov-btn:hover[b-3wwiwxinxg] {
        background: rgba(52, 152, 219, 0.2);
    }

.vr-camera-cov-unset[b-3wwiwxinxg] {
    border-color: rgba(243, 156, 18, 0.45);
    background: rgba(243, 156, 18, 0.08);
    color: #f5b041;
}

.vr-coverage-edit[b-3wwiwxinxg] {
    margin: 4px 0 6px 36px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vr-coverage-actions[b-3wwiwxinxg] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Delete a recording (2026-10-03): quiet until hovered, red when it is. Lives inside the
   row's <label>, so it stops the click from reaching the checkbox. */
.vr-camera-del-btn[b-3wwiwxinxg] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: all 0.12s;
}

    .vr-camera-del-btn:hover[b-3wwiwxinxg] {
        color: #e74c3c;
        background: rgba(231, 76, 60, 0.12);
        border-color: rgba(231, 76, 60, 0.35);
    }

    .vr-camera-del-btn:disabled[b-3wwiwxinxg] {
        opacity: 0.4;
        cursor: default;
    }

.vr-camera-off .vr-camera-del-btn[b-3wwiwxinxg] {
    opacity: 1;   /* the row is dimmed, the way out of it must not be */
}

.vr-camera-note[b-3wwiwxinxg] {
    margin: 8px 2px 0;
    font-size: 12px;
    color: #94a3b8;
}

.vr-camera-note-error[b-3wwiwxinxg] {
    color: #f1948a;
}

.vr-del-confirm[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 4px 0;
    color: #e2e8f0;
    font-size: 14px;
}

    .vr-del-confirm p[b-3wwiwxinxg] {
        margin: 0;
    }

.vr-del-title[b-3wwiwxinxg] {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.vr-del-meta[b-3wwiwxinxg] {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
}

.vr-del-warn[b-3wwiwxinxg] {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(243, 156, 18, 0.12);
    border: 1px solid rgba(243, 156, 18, 0.4);
    color: #f5b041;
    font-size: 13px;
}

.vr-del-actions[b-3wwiwxinxg] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 6px;
}

/* ── Build reel dialog (2026-10-03) ── */
.vr-btn-reel[b-3wwiwxinxg] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(142,68,173,0.35), rgba(52,152,219,0.35));
    border: 1px solid rgba(142,68,173,0.5);
    color: #e9d5ff;
}

    .vr-btn-reel:hover[b-3wwiwxinxg] {
        filter: brightness(1.15);
    }

.vr-reel-form[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 4px 0;
    color: #e2e8f0;
    font-size: 14px;
}

.vr-reel-field[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

    .vr-reel-field > span[b-3wwiwxinxg] {
        font-size: 12px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

.vr-reel-field-num[b-3wwiwxinxg] {
    max-width: 160px;
}

.vr-reel-row[b-3wwiwxinxg] {
    display: flex;
    gap: 12px;
}

.vr-reel-input[b-3wwiwxinxg] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: #f1f5f9;
    font-size: 14px;
    color-scheme: dark;      /* native select lists and number spinners draw dark too */
}

    .vr-reel-input option[b-3wwiwxinxg] {
        color: #f1f5f9;
        background: #0e1e32;
    }

    .vr-reel-input[b-3wwiwxinxg]::placeholder {
        color: #64748b;
    }

    .vr-reel-input:focus[b-3wwiwxinxg] {
        outline: none;
        border-color: #3498db;
    }

.vr-reel-types[b-3wwiwxinxg] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vr-reel-type[b-3wwiwxinxg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #cbd5e1;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

    .vr-reel-type input[b-3wwiwxinxg] {
        display: none;
    }

.vr-reel-type-on[b-3wwiwxinxg] {
    background: rgba(52,152,219,0.18);
    border-color: rgba(52,152,219,0.5);
    color: #f1f5f9;
}

.vr-reel-type-n[b-3wwiwxinxg] {
    font-size: 11px;
    color: #94a3b8;
    background: rgba(255,255,255,0.08);
    padding: 1px 6px;
    border-radius: 999px;
}

.vr-reel-hint[b-3wwiwxinxg] {
    margin: 0;
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.5;
}

/* Per-tile sync nudge (synced mode): shifts one camera against the others
   and saves it as the recording's SyncOffsetSeconds. */
.vr-tile-nudge[b-3wwiwxinxg] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.75);
    opacity: 0;
    transition: opacity 0.15s;
}

.vr-tile:hover .vr-tile-nudge[b-3wwiwxinxg] {
    opacity: 1;
}

.vr-tile-nudge button[b-3wwiwxinxg] {
    height: 24px;
    min-width: 30px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(30, 41, 59, 0.9);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

    .vr-tile-nudge button:hover[b-3wwiwxinxg] {
        border-color: rgba(52, 152, 219, 0.7);
        background: rgba(52, 152, 219, 0.25);
    }

.vr-tile-nudge-value[b-3wwiwxinxg] {
    font-size: 11px;
    font-weight: 700;
    color: #f5d76e;
    font-variant-numeric: tabular-nums;
    padding: 0 4px;
}

.vr-align-btn[b-3wwiwxinxg] {
    margin-left: 4px;
    border-color: rgba(241, 196, 15, 0.45) !important;
    color: #f5d76e !important;
}

/* Align mode banner along the bottom of the tile (2026-09-25). Sits above the video's
   native controls, which are on while aligning. */
.vr-align[b-3wwiwxinxg] {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 48px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(241, 196, 15, 0.45);
}

.vr-align-text[b-3wwiwxinxg] {
    flex: 1 1 auto;
    font-size: 12px;
    color: #e2e8f0;
}

    .vr-align-text b[b-3wwiwxinxg] {
        color: #7cc4f5;
    }

.vr-tag[b-3wwiwxinxg] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

.vr-tag-sync[b-3wwiwxinxg] {
    background: rgba(46, 204, 113, 0.15);
    color: #6fdc9a;
}

.vr-tag-cut[b-3wwiwxinxg] {
    background: rgba(230, 126, 34, 0.18);
    color: #f5b072;
}

.vr-tag-live[b-3wwiwxinxg] {
    background: rgba(231, 76, 60, 0.2);
    color: #ff8a7a;
}

.vr-tag-wait[b-3wwiwxinxg] {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}

/* ----- Event list ----- */
.vr-event-list[b-3wwiwxinxg] {
    overflow-y: auto;
    min-height: 0;
    padding-right: 2px;
}

.vr-event[b-3wwiwxinxg] {
    display: grid;
    grid-template-columns: 8px 62px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}

    .vr-event:hover[b-3wwiwxinxg] {
        background: rgba(255, 255, 255, 0.05);
    }

.vr-event-now[b-3wwiwxinxg] {
    background: rgba(52, 152, 219, 0.14);
    border-color: rgba(52, 152, 219, 0.4);
}

.vr-event-uncovered[b-3wwiwxinxg] {
    opacity: 0.45;
}

.vr-event-dot[b-3wwiwxinxg] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.vr-event-time[b-3wwiwxinxg] {
    font-size: 11.5px;
    font-weight: 700;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.vr-event-text[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vr-event-type[b-3wwiwxinxg] {
    font-size: 12.5px;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vr-event-player[b-3wwiwxinxg] {
    font-size: 11.5px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Stage ===== */
.vr-stage[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ----- Camera strip (2026-10-04) ----- */
.vr-camstrip[b-3wwiwxinxg] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
}

.vr-camstrip-label[b-3wwiwxinxg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-right: 2px;
}

.vr-camstrip-empty[b-3wwiwxinxg] {
    font-size: 12px;
    color: #64748b;
}

.vr-camstrip-list[b-3wwiwxinxg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.vr-cam[b-3wwiwxinxg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px 3px 4px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    transition: background 0.12s, border-color 0.12s;
}

.vr-cam-on[b-3wwiwxinxg] {
    background: rgba(52, 152, 219, 0.14);
    border-color: rgba(52, 152, 219, 0.4);
}

.vr-cam-off .vr-cam-main[b-3wwiwxinxg],
.vr-cam-off .vr-tag[b-3wwiwxinxg] {
    opacity: 0.55;   /* the chip dims; its delete button stays plain, that's the way out of a dead row */
}

.vr-cam-editing[b-3wwiwxinxg] {
    border-color: rgba(142, 68, 173, 0.6);
}

.vr-cam-main[b-3wwiwxinxg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
}

    .vr-cam-main:hover[b-3wwiwxinxg] {
        background: rgba(255, 255, 255, 0.05);
    }

.vr-cam-off .vr-cam-main[b-3wwiwxinxg] {
    cursor: default;
}

.vr-cam-main input[type="checkbox"][b-3wwiwxinxg] {
    width: 14px;
    height: 14px;
    accent-color: #3498db;
    margin: 0;
}

.vr-cam-name[b-3wwiwxinxg] {
    font-size: 12.5px;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
}

.vr-cam-meta[b-3wwiwxinxg] {
    font-size: 11px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.vr-cam .vr-camera-sync-btn[b-3wwiwxinxg],
.vr-cam .vr-camera-cov-btn[b-3wwiwxinxg] {
    padding: 1px 7px;
    font-size: 10.5px;
}

.vr-cam .vr-camera-del-btn[b-3wwiwxinxg] {
    width: 22px;
    height: 22px;
}

.vr-coverage-edit-strip[b-3wwiwxinxg] {
    margin: 2px 0 0;
    flex-basis: 100%;
    max-width: 420px;
}

.vr-coverage-title[b-3wwiwxinxg] {
    font-size: 12px;
    font-weight: 700;
    color: #cbd5e1;
}

.vr-camstrip .vr-camera-note[b-3wwiwxinxg] {
    flex-basis: 100%;
    margin: 0;
}

.vr-stage-empty[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 320px;
    border-radius: 14px;
    border: 1px dashed rgba(148, 163, 184, 0.25);
    color: #94a3b8;
}

.vr-mode[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vr-mode-badge[b-3wwiwxinxg] {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: 8px;
}

.vr-mode-synced[b-3wwiwxinxg] {
    background: rgba(46, 204, 113, 0.15);
    color: #6fdc9a;
}

.vr-mode-free[b-3wwiwxinxg] {
    background: rgba(241, 196, 15, 0.15);
    color: #f5d76e;
}

.vr-mode-note[b-3wwiwxinxg] {
    font-size: 12px;
    color: #94a3b8;
}

/* Playback quality picker (2026-10-11), one per camera in the tile's tool strip. */
.vr-tile-quality[b-3wwiwxinxg] {
    appearance: auto;
    padding: 0 4px;
    font-weight: 700;
    color-scheme: dark;
    max-width: 72px;
}

    .vr-tile-quality option[b-3wwiwxinxg] {
        background: #0f172a;
        color: #e2e8f0;
    }

.vr-tile-quality-native[b-3wwiwxinxg] {
    cursor: default;
    color: #94a3b8;
    font-weight: 600;
    text-transform: none;
}

/* ----- Video grid ----- */
.vr-grid[b-3wwiwxinxg] {
    display: grid;
    gap: 10px;
}

.vr-grid-1[b-3wwiwxinxg] {
    grid-template-columns: 1fr;
}

.vr-grid-2[b-3wwiwxinxg] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vr-grid-4[b-3wwiwxinxg] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vr-tile[b-3wwiwxinxg] {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(148, 163, 184, 0.15);
    aspect-ratio: 16 / 9;
}

.vr-tile-master[b-3wwiwxinxg] {
    border-color: rgba(52, 152, 219, 0.6);
}

.vr-video[b-3wwiwxinxg] {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    object-fit: contain;
    transform-origin: 0 0;                 /* the zoom tool sets transform: translate() scale() */
    transition: transform 0.25s ease;
}

/* Zoom / draw layer (2026-09-25). Ignores the pointer until a tool is active so the
   video's own controls keep working in independent mode. */
.vr-draw[b-3wwiwxinxg] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    touch-action: none;
    z-index: 1;
}

.vr-draw-active[b-3wwiwxinxg] {
    pointer-events: auto;
}

.vr-draw-zoom[b-3wwiwxinxg] {
    cursor: zoom-in;
}

.vr-draw-pen[b-3wwiwxinxg] {
    cursor: crosshair;
}

/* The whole tile goes full screen (video + drawing + tool bar). */
.vr-tile:fullscreen[b-3wwiwxinxg] {
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
}

/* Transport repeated inside a full-screen tile (2026-09-28). Only rendered while the tile is
   full screen (Blazor), and only shown there (CSS), so it never appears in the grid. Sits above
   the nudge control at the bottom, under a fade so the buttons read over bright grass. */
.vr-tile-transport[b-3wwiwxinxg] {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px 14px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.vr-tile:fullscreen .vr-tile-transport[b-3wwiwxinxg] {
    display: flex;
}

.vr-tile-transport-row[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .vr-tile-transport-row .vr-btn[b-3wwiwxinxg] {
        height: 40px;
        min-width: 44px;
        font-size: 14px;
    }

    .vr-tile-transport-row .vr-btn-rate[b-3wwiwxinxg] {
        height: 34px;
        padding: 0 12px;
        font-size: 13px;
    }

/* The hover nudge control moves up out of the transport's way while full screen. */
.vr-tile:fullscreen .vr-tile-nudge[b-3wwiwxinxg] {
    bottom: 96px;
}

    .vr-tile:fullscreen .vr-tile-bar[b-3wwiwxinxg] {
        padding: 12px 16px;
    }

.vr-tile-bar[b-3wwiwxinxg] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 2;
}

/* Tool buttons at the right end of the bar: the bar ignores the mouse, these take it back. */
.vr-tile-tools[b-3wwiwxinxg] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
    flex: 0 0 auto;
}

.vr-tile-clip ~ .vr-tile-tools[b-3wwiwxinxg] {
    margin-left: 8px;
}

.vr-tool[b-3wwiwxinxg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 7px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.7);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

    .vr-tool:hover[b-3wwiwxinxg] {
        background: rgba(52, 152, 219, 0.35);
        border-color: rgba(52, 152, 219, 0.7);
    }

.vr-tool-on[b-3wwiwxinxg] {
    background: rgba(52, 152, 219, 0.45);
    border-color: #7cc4f5;
    color: #fff;
}

.vr-tool:disabled[b-3wwiwxinxg] {
    opacity: 0.5;
    cursor: default;
}

/* Bigger targets while the tile is full screen -- fingers, not a mouse. */
.vr-tile:fullscreen .vr-tool[b-3wwiwxinxg] {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
}

    .vr-tile:fullscreen .vr-tool svg[b-3wwiwxinxg] {
        width: 18px;
        height: 18px;
    }

.vr-tile:fullscreen .vr-pen[b-3wwiwxinxg] {
    width: 22px;
    height: 22px;
}

.vr-tool-text[b-3wwiwxinxg] {
    letter-spacing: 0.02em;
}

.vr-pen-colors[b-3wwiwxinxg] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 2px;
}

.vr-pen[b-3wwiwxinxg] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(15, 23, 42, 0.8);
    cursor: pointer;
    padding: 0;
}

.vr-pen-on[b-3wwiwxinxg] {
    border-color: #fff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.8);
}

.vr-tile-name[b-3wwiwxinxg] {
    font-size: 12.5px;
    font-weight: 800;
    color: #f8fafc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.vr-tile-role[b-3wwiwxinxg],
.vr-tile-clip[b-3wwiwxinxg],
.vr-tile-error[b-3wwiwxinxg] {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.7);
    color: #cbd5e1;
}

.vr-tile-role[b-3wwiwxinxg] {
    color: #7cc4f5;
}

/* "set master" on the non-master tiles: the same chip, quiet until hovered. The bar itself
   ignores the mouse (so clicks reach the video); like .vr-tile-tools this takes it back. */
.vr-tile-role-btn[b-3wwiwxinxg] {
    pointer-events: auto;
    cursor: pointer;
    border: 1px solid rgba(124, 196, 245, 0.35);
    color: #7fa3bf;
    background: rgba(15, 23, 42, 0.5);
    font: inherit;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.vr-tile-role-btn:hover[b-3wwiwxinxg] {
    color: #7cc4f5;
    border-color: rgba(124, 196, 245, 0.7);
    background: rgba(15, 23, 42, 0.8);
}

.vr-tile-clip[b-3wwiwxinxg] {
    text-transform: none;
    letter-spacing: 0;
    color: #f5d76e;
    margin-left: auto;
}

.vr-tile-error[b-3wwiwxinxg] {
    color: #ff8a7a;
}


/* ----- Transport ----- */
.vr-transport[b-3wwiwxinxg] {
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vr-transport-row[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vr-btn[b-3wwiwxinxg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.6);
    color: #e2e8f0;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

    .vr-btn:hover[b-3wwiwxinxg] {
        background: rgba(52, 152, 219, 0.2);
        border-color: rgba(52, 152, 219, 0.5);
    }

.vr-btn-play[b-3wwiwxinxg] {
    width: 44px;
    min-width: 44px;
    background: rgba(52, 152, 219, 0.25);
    border-color: rgba(52, 152, 219, 0.6);
}

/* Reverse play: same size as Play, quieter until it is running. */
.vr-btn-rev[b-3wwiwxinxg] {
    width: 40px;
    min-width: 40px;
}

.vr-btn-rev-on[b-3wwiwxinxg] {
    background: rgba(52, 152, 219, 0.3);
    border-color: rgba(52, 152, 219, 0.7);
    color: #fff;
}

.vr-btn-resync[b-3wwiwxinxg] {
    font-size: 12px;
    padding: 0 10px;
}

/* Resync report in the mode line and the live drift chip in a tile's bar (2026-09-28). */
.vr-sync-note[b-3wwiwxinxg] {
    flex-basis: 100%;
    font-size: 12px;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}

.vr-tile-drift[b-3wwiwxinxg] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: rgba(15, 23, 42, 0.7);
    color: #f5d76e;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* 2026-10-04: the pill is a button -- a click forces this camera back onto the master. */
.vr-tile-drift:hover[b-3wwiwxinxg] {
    border-color: currentColor;
    background: rgba(15, 23, 42, 0.9);
}

.vr-tile-drift-bad[b-3wwiwxinxg] {
    color: #f87171;
}

.vr-btn-rate[b-3wwiwxinxg] {
    min-width: 0;
    height: 28px;
    padding: 0 9px;
    font-size: 11.5px;
}

.vr-btn-rate-on[b-3wwiwxinxg] {
    background: rgba(52, 152, 219, 0.3);
    border-color: rgba(52, 152, 219, 0.7);
    color: #fff;
}

.vr-btn-quiet[b-3wwiwxinxg] {
    height: 28px;
    font-size: 11.5px;
    color: #94a3b8;
}

.vr-rates[b-3wwiwxinxg] {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}

.vr-time[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

.vr-time-match[b-3wwiwxinxg] {
    font-size: 15px;
    font-weight: 800;
    color: #f1f5f9;
}

.vr-time-wall[b-3wwiwxinxg] {
    font-size: 11px;
    color: #94a3b8;
}

/* Scrubber: a native range input over a strip of event ticks. */
.vr-scrub[b-3wwiwxinxg] {
    position: relative;
    padding-top: 10px;
}

.vr-scrub-ticks[b-3wwiwxinxg] {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 0;
    height: 8px;
    pointer-events: none;
}

.vr-scrub-tick[b-3wwiwxinxg] {
    position: absolute;
    top: 0;
    width: 3px;
    height: 8px;
    border-radius: 2px;
    transform: translateX(-50%);
    pointer-events: auto;      /* the strip itself ignores the mouse; ticks take it for the hover card */
    cursor: pointer;
}

    /* A wider invisible hit area than the 3px mark. */
    .vr-scrub-tick[b-3wwiwxinxg]::before {
        content: "";
        position: absolute;
        left: -6px;
        right: -6px;
        top: -4px;
        bottom: -4px;
    }

    .vr-scrub-tick:hover[b-3wwiwxinxg] {
        height: 10px;
        top: -1px;
    }

/* Hover card above a tick: type, time, player, team, notes. */
.vr-tick-tip[b-3wwiwxinxg] {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    gap: 4px;
    min-width: 170px;
    max-width: 280px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
    text-align: left;
    z-index: 30;
    pointer-events: none;
}

    .vr-tick-tip[b-3wwiwxinxg]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #0f172a;
    }

.vr-tick-tip-left[b-3wwiwxinxg] {
    left: 0;
    transform: none;
}

    .vr-tick-tip-left[b-3wwiwxinxg]::after {
        left: 8px;
        transform: none;
    }

.vr-tick-tip-right[b-3wwiwxinxg] {
    left: auto;
    right: 0;
    transform: none;
}

    .vr-tick-tip-right[b-3wwiwxinxg]::after {
        left: auto;
        right: 8px;
        transform: none;
    }

.vr-scrub-tick:hover .vr-tick-tip[b-3wwiwxinxg] {
    display: flex;
}

.vr-tick-tip-head[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vr-tick-tip-dot[b-3wwiwxinxg] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.vr-tick-tip-type[b-3wwiwxinxg] {
    font-weight: 800;
    color: #f8fafc;
}

.vr-tick-tip-time[b-3wwiwxinxg] {
    margin-left: auto;
    font-weight: 700;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.vr-tick-tip-player[b-3wwiwxinxg] {
    font-weight: 700;
    color: #e2e8f0;
}

.vr-tick-tip-team[b-3wwiwxinxg] {
    color: #94a3b8;
    font-size: 11.5px;
}

.vr-tick-tip-notes[b-3wwiwxinxg] {
    color: #cbd5e1;
    font-style: italic;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding-top: 4px;
}

.vr-tick-tip-hint[b-3wwiwxinxg] {
    color: #64748b;
    font-size: 10.5px;
}

.vr-scrub-clip[b-3wwiwxinxg] {
    position: absolute;
    top: 2px;
    height: 4px;
    border-radius: 2px;
    background: rgba(241, 196, 15, 0.8);
}

/* Clock stoppages on the scrubber (2026-09-26): hatched bands where the game clock was frozen.
   Corrections (stoppages added from the video) are tinted. Below the ticks, so they never take
   a hover from an event. */
.vr-scrub-stop[b-3wwiwxinxg] {
    position: absolute;
    top: 0;
    height: 8px;
    background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.45) 0 2px, transparent 2px 5px);
    pointer-events: auto;
}

.vr-scrub-stop-fix[b-3wwiwxinxg] {
    background: repeating-linear-gradient(135deg, rgba(46, 204, 113, 0.55) 0 2px, transparent 2px 5px);
}

.vr-btn-clock-missing[b-3wwiwxinxg] {
    border-color: rgba(241, 196, 15, 0.55) !important;
    color: #f5d76e !important;
}

/* ── Game clock panel (2026-09-26) ── */
.vr-clockpanel[b-3wwiwxinxg] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.18);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vr-clockpanel-head[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
}

.vr-clockpanel-note[b-3wwiwxinxg] {
    color: #94a3b8;
    font-size: 12px;
    flex: 1 1 240px;
}

.vr-clockpanel-cols[b-3wwiwxinxg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.vr-clockpanel-col h4[b-3wwiwxinxg] {
    margin: 0 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.vr-clockpanel-help[b-3wwiwxinxg] {
    margin: 0 0 8px;
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.4;
}

.vr-stop-list[b-3wwiwxinxg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vr-stop[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vr-stop-jump[b-3wwiwxinxg] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(30, 41, 59, 0.6);
    color: #e2e8f0;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
}

    .vr-stop-jump:hover[b-3wwiwxinxg] {
        border-color: rgba(52, 152, 219, 0.6);
    }

.vr-stop-fix .vr-stop-jump[b-3wwiwxinxg] {
    border-color: rgba(46, 204, 113, 0.45);
}

.vr-stop-at[b-3wwiwxinxg] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.vr-stop-len[b-3wwiwxinxg] {
    color: #cbd5e1;
}

.vr-stop-kind[b-3wwiwxinxg] {
    margin-left: auto;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.vr-stop-fix .vr-stop-kind[b-3wwiwxinxg] {
    color: #2ecc71;
}

.vr-fix-steps[b-3wwiwxinxg] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.vr-fix-field[b-3wwiwxinxg] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #cbd5e1;
}

.vr-select[b-3wwiwxinxg],
.vr-input[b-3wwiwxinxg] {
    font: inherit;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.7);
    color: #f8fafc;
}

.vr-fix-actions[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vr-clockpanel-h4-gap[b-3wwiwxinxg] {
    margin-top: 14px !important;
}

.vr-fix-inline[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vr-fix-now[b-3wwiwxinxg] {
    font-size: 12.5px;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}

.vr-input-clock[b-3wwiwxinxg] {
    width: 130px;
    font-variant-numeric: tabular-nums;
}

.vr-scrub-input[b-3wwiwxinxg] {
    width: 100%;
    margin: 0;
    accent-color: #3498db;
    cursor: pointer;
}

.vr-scrub-labels[b-3wwiwxinxg] {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

/* ----- Clip bar ----- */
.vr-clip[b-3wwiwxinxg] {
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(241, 196, 15, 0.2);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.vr-clip-marks[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vr-btn-mark[b-3wwiwxinxg] {
    border-color: rgba(241, 196, 15, 0.4);
}

    .vr-btn-mark:hover[b-3wwiwxinxg] {
        background: rgba(241, 196, 15, 0.18);
        border-color: rgba(241, 196, 15, 0.7);
    }

.vr-clip-summary[b-3wwiwxinxg] {
    font-size: 12.5px;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}

.vr-clip-export[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vr-clip-status[b-3wwiwxinxg] {
    font-size: 12px;
    color: #6fdc9a;
}

.vr-clip-error[b-3wwiwxinxg] {
    font-size: 12px;
    color: #ff8a7a;
}

/* ===== Narrow screens: rail above the stage ===== */
@media (max-width: 980px) {
    .vr-body[b-3wwiwxinxg] {
        grid-template-columns: 1fr;
    }

    .vr-rail[b-3wwiwxinxg] {
        position: static;
        max-height: none;
    }

    .vr-panel-events[b-3wwiwxinxg] {
        max-height: 40vh;
    }

    .vr-grid-2[b-3wwiwxinxg],
    .vr-grid-4[b-3wwiwxinxg] {
        grid-template-columns: 1fr;
    }

    .vr-select[b-3wwiwxinxg] {
        min-width: 0;
        width: 100%;
        max-width: none;
    }

    .vr-header-right[b-3wwiwxinxg] {
        width: 100%;
    }
}

/* ── Record check (2026-10-03): filters, edit/delete, lock ── */
.vr-chip[b-3wwiwxinxg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, opacity 0.12s;
}

    .vr-chip:hover[b-3wwiwxinxg] {
        background: rgba(255, 255, 255, 0.1);
    }

.vr-chip-dot[b-3wwiwxinxg] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip-color, #64748b);
}

.vr-chip-n[b-3wwiwxinxg] {
    color: #64748b;
    font-weight: 500;
}

.vr-chip-off[b-3wwiwxinxg] {
    opacity: 0.4;
    text-decoration: line-through;
}

.vr-chip-on[b-3wwiwxinxg] {
    background: color-mix(in srgb, var(--chip-color, #3498db) 28%, transparent);
    border-color: var(--chip-color, #3498db);
    color: #f1f5f9;
}

.vr-chip-sys[b-3wwiwxinxg] {
    margin-left: auto;
    --chip-color: #94a3b8;
}

.vr-chip-team[b-3wwiwxinxg]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip-color);
}

.vr-chip-clear[b-3wwiwxinxg] {
    color: #94a3b8;
    border-style: dashed;
}

.vr-filter-row[b-3wwiwxinxg] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    padding: 6px 0 8px;
}

.vr-filter-sep[b-3wwiwxinxg] {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 3px;
}

.vr-record[b-3wwiwxinxg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
}

.vr-record-locked[b-3wwiwxinxg] {
    background: rgba(241, 196, 15, 0.08);
    border-color: rgba(241, 196, 15, 0.3);
}

.vr-record-badge[b-3wwiwxinxg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.02em;
}

.vr-record-open[b-3wwiwxinxg] {
    color: #94a3b8;
    font-weight: 600;
}

.vr-record-confirm[b-3wwiwxinxg] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #e2e8f0;
}

.vr-btn-xs[b-3wwiwxinxg] {
    padding: 3px 9px;
    font-size: 11.5px;
    border-radius: 8px;
}

.vr-btn-warn[b-3wwiwxinxg] {
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid rgba(241, 196, 15, 0.5);
    color: #fde68a;
}

    .vr-btn-warn:hover[b-3wwiwxinxg] {
        background: rgba(241, 196, 15, 0.32);
    }

.vr-event-editable[b-3wwiwxinxg] {
    grid-template-columns: 8px 62px minmax(0, 1fr) auto;
}

.vr-event-actions[b-3wwiwxinxg] {
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s;
}

.vr-event:hover .vr-event-actions[b-3wwiwxinxg],
.vr-event-now .vr-event-actions[b-3wwiwxinxg] {
    opacity: 1;
}

.vr-event-act[b-3wwiwxinxg] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .vr-event-act:hover[b-3wwiwxinxg] {
        background: rgba(52, 152, 219, 0.25);
        color: #fff;
    }

.vr-event-act-del:hover[b-3wwiwxinxg] {
    background: rgba(239, 68, 68, 0.3);
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.nb-container[b-m3i5atay0z] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ===== TRIGGER BUTTON ===== */
.nb-trigger[b-m3i5atay0z] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: all 0.2s;
}

    .nb-trigger:hover .nb-avatar[b-m3i5atay0z] {
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
    }

/* ===== AVATAR ===== */
.nb-avatar[b-m3i5atay0z] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s;
    user-select: none;
}

/* ===== UNREAD BADGE ===== */
.nb-badge[b-m3i5atay0z] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e74c3c;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid #0a1628;
    animation: nb-badge-pop-b-m3i5atay0z 0.3s ease-out;
}

@keyframes nb-badge-pop-b-m3i5atay0z {
    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* ===== BACKDROP ===== */
.nb-backdrop[b-m3i5atay0z] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: transparent;
}

/* ===== DROPDOWN ===== */
.nb-dropdown[b-m3i5atay0z] {
    position: fixed;
    top: 56px; /* matches your AppBar height */
    right: 12px;
    width: 240px;
    background: #0e1e32;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    overflow: hidden;
    animation: nb-dropdown-in-b-m3i5atay0z 0.15s ease-out;
}

@keyframes nb-dropdown-in-b-m3i5atay0z {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== DROPDOWN HEADER ===== */
.nb-dropdown-header[b-m3i5atay0z] {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
}

.nb-user-name[b-m3i5atay0z] {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.nb-user-email[b-m3i5atay0z] {
    display: block;
    color: #64748b;
    font-size: 11px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== DIVIDER ===== */
.nb-divider[b-m3i5atay0z] {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

/* ===== MENU ITEMS ===== */
.nb-menu-item[b-m3i5atay0z] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

    .nb-menu-item:hover[b-m3i5atay0z] {
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff;
    }

    .nb-menu-item svg[b-m3i5atay0z] {
        flex-shrink: 0;
        color: #64748b;
        transition: color 0.15s;
    }

    .nb-menu-item:hover svg[b-m3i5atay0z] {
        color: #3498db;
    }

/* ===== DANGER ITEM (Sign Out) ===== */
.nb-menu-item--danger[b-m3i5atay0z] {
    color: #e74c3c;
}

    .nb-menu-item--danger svg[b-m3i5atay0z] {
        color: #e74c3c;
    }

    .nb-menu-item--danger:hover[b-m3i5atay0z] {
        background: rgba(231, 76, 60, 0.08);
        color: #e74c3c;
    }

        .nb-menu-item--danger:hover svg[b-m3i5atay0z] {
            color: #e74c3c;
        }

/* ===== ITEM BADGE ===== */
.nb-item-badge[b-m3i5atay0z] {
    margin-left: auto;
    background: #3498db;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .nb-dropdown[b-m3i5atay0z] {
        right: 8px;
        width: 220px;
    }
}
/* /Components/Shared/SettingsForm.razor.rz.scp.css */
/*
    Colours are the app's existing dark-theme literals (#0e1e32 surfaces,
    rgba(255,255,255,.0x) fills, #3498db accent) rather than tokens, because the
    token refactor is roadmap item #7 and hasn't happened yet. When it does, these
    are ordinary --st-* substitutions with no structural change.
*/

.settings-form[b-pgz2ihcay7] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-form-loading[b-pgz2ihcay7] {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

.settings-form-empty[b-pgz2ihcay7] {
    padding: 1rem;
    color: #94a3b8;
    font-size: .9rem;
}

/* ── Groups ──────────────────────────────────────────────────────── */

.settings-group[b-pgz2ihcay7] {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 1rem 1.25rem 1.25rem;
}

.settings-group-title[b-pgz2ihcay7] {
    margin: 0 0 .25rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* ── Rows ────────────────────────────────────────────────────────── */

.setting-row[b-pgz2ihcay7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .95rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.setting-row:last-child[b-pgz2ihcay7] {
    border-bottom: none;
    padding-bottom: 0;
}

.setting-row-inert[b-pgz2ihcay7] {
    opacity: .72;
}

.setting-row-readonly .setting-control[b-pgz2ihcay7] {
    opacity: .7;
}

.setting-meta[b-pgz2ihcay7] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    flex: 1 1 auto;
}

.setting-name[b-pgz2ihcay7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .95rem;
    font-weight: 600;
    color: #e2e8f0;
}

.setting-help[b-pgz2ihcay7] {
    font-size: .8rem;
    line-height: 1.45;
    color: #94a3b8;
    max-width: 52ch;
}

.setting-override[b-pgz2ihcay7] {
    font-size: .78rem;
    color: #f39c12;
}

.setting-error[b-pgz2ihcay7] {
    font-size: .78rem;
    color: #e74c3c;
}

.setting-badge[b-pgz2ihcay7] {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #94a3b8;
    white-space: nowrap;
}

.setting-badge-dirty[b-pgz2ihcay7] {
    border-color: rgba(243, 156, 18, .45);
    background: rgba(243, 156, 18, .12);
    color: #f39c12;
}

.setting-control[b-pgz2ihcay7] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    min-width: 220px;
}

/* ── Switch (native checkbox, styled) ────────────────────────────── */
/*
    A plain checkbox rather than a Telerik switch: nothing else in this app uses
    TelerikSwitch yet, and a native input styled here has no version-dependent
    API to get wrong.
*/

.setting-switch[b-pgz2ihcay7] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    user-select: none;
}

.setting-switch input[b-pgz2ihcay7] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.setting-switch-track[b-pgz2ihcay7] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: background .18s ease, border-color .18s ease;
}

.setting-switch-knob[b-pgz2ihcay7] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: transform .18s ease, background .18s ease;
}

.setting-switch input:checked + .setting-switch-track[b-pgz2ihcay7] {
    background: rgba(46, 204, 113, .35);
    border-color: rgba(46, 204, 113, .55);
}

.setting-switch input:checked + .setting-switch-track .setting-switch-knob[b-pgz2ihcay7] {
    transform: translateX(20px);
    background: #2ecc71;
}

.setting-switch input:focus-visible + .setting-switch-track[b-pgz2ihcay7] {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

.setting-switch input:disabled + .setting-switch-track[b-pgz2ihcay7] {
    opacity: .5;
}

.setting-switch input:disabled ~ .setting-switch-text[b-pgz2ihcay7] {
    opacity: .5;
}

.setting-switch-text[b-pgz2ihcay7] {
    font-size: .85rem;
    font-weight: 600;
    color: #94a3b8;
    min-width: 2.2rem;
}

/* ── Email list ──────────────────────────────────────────────────── */

.setting-emails[b-pgz2ihcay7] {
    width: 320px;
    max-width: 100%;
    padding: .55rem .7rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
    color: #e2e8f0;
    font-family: inherit;
    font-size: .85rem;
    line-height: 1.5;
    resize: vertical;
}

.setting-emails:focus[b-pgz2ihcay7] {
    outline: none;
    border-color: #3498db;
}

.setting-chips[b-pgz2ihcay7] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
    max-width: 320px;
}

.setting-chip[b-pgz2ihcay7] {
    padding: .15rem .5rem;
    border-radius: 999px;
    background: rgba(52, 152, 219, .14);
    border: 1px solid rgba(52, 152, 219, .3);
    font-size: .72rem;
    color: #cbd5e1;
    word-break: break-all;
}

/* ── Colour and number ───────────────────────────────────────────── */

.setting-color[b-pgz2ihcay7] {
    width: 56px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.setting-number[b-pgz2ihcay7] {
    width: 120px;
    padding: .45rem .6rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
    color: #e2e8f0;
    font-family: inherit;
    font-size: .9rem;
}

.setting-number:focus[b-pgz2ihcay7] {
    outline: none;
    border-color: #3498db;
}

/* ── Actions ─────────────────────────────────────────────────────── */

.settings-actions[b-pgz2ihcay7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .75rem;
}

.settings-save-error[b-pgz2ihcay7] {
    margin-right: auto;
    font-size: .82rem;
    color: #e74c3c;
}

.settings-saved-note[b-pgz2ihcay7] {
    font-size: .82rem;
    color: #2ecc71;
}

.settings-readonly-note[b-pgz2ihcay7] {
    font-size: .8rem;
    color: #64748b;
    font-style: italic;
}

/* ── Narrow screens ──────────────────────────────────────────────── */
/* A .razor.css is plain CSS -- the Razor compiler never parses it -- so at-rules
   take a single @. An earlier revision of this file doubled it on the mistaken
   belief that Razor escaping applied here, which emits a literal doubled at-rule
   that browsers drop, so this block silently did nothing. Teams.razor.css and
   GameRoster.razor.css have had it right all along. */

@media (max-width: 720px) {
    .setting-row[b-pgz2ihcay7] {
        flex-direction: column;
        gap: .75rem;
    }

    .setting-control[b-pgz2ihcay7] {
        align-items: flex-start;
        min-width: 0;
        width: 100%;
    }

    .setting-chips[b-pgz2ihcay7] {
        justify-content: flex-start;
    }

    .setting-emails[b-pgz2ihcay7] {
        width: 100%;
    }
}
/* /Components/Shared/ToastNotification.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.toast-container[b-93qv90d63j] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    width: calc(100vw - 40px);
    pointer-events: none;
}

/* ===== TOAST ===== */
.toast[b-93qv90d63j] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0e1e32;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
    pointer-events: all;
    backdrop-filter: blur(8px);
}

/* ===== ANIMATIONS ===== */
.toast-entering[b-93qv90d63j] {
    animation: toast-slide-in-b-93qv90d63j 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.toast-leaving[b-93qv90d63j] {
    animation: toast-slide-out-b-93qv90d63j 0.3s ease-in forwards;
}

@keyframes toast-slide-in-b-93qv90d63j {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toast-slide-out-b-93qv90d63j {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
        max-height: 200px;
        margin-bottom: 0;
    }

    to {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
        max-height: 0;
        margin-bottom: -10px;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ===== TYPE VARIANTS ===== */
.toast-success[b-93qv90d63j] {
    border-left: 3px solid #2ecc71;
}

    .toast-success .toast-icon[b-93qv90d63j] {
        color: #2ecc71;
    }

.toast-error[b-93qv90d63j] {
    border-left: 3px solid #e74c3c;
}

    .toast-error .toast-icon[b-93qv90d63j] {
        color: #e74c3c;
    }

.toast-warning[b-93qv90d63j] {
    border-left: 3px solid #f39c12;
}

    .toast-warning .toast-icon[b-93qv90d63j] {
        color: #f39c12;
    }

.toast-info[b-93qv90d63j] {
    border-left: 3px solid #3498db;
}

    .toast-info .toast-icon[b-93qv90d63j] {
        color: #3498db;
    }

.toast-message-type[b-93qv90d63j] {
    border-left: 3px solid #9b59b6;
}

    .toast-message-type .toast-icon[b-93qv90d63j] {
        color: #9b59b6;
    }

/* ===== ICON ===== */
.toast-icon[b-93qv90d63j] {
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.toast-content[b-93qv90d63j] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.toast-title[b-93qv90d63j] {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.toast-message[b-93qv90d63j] {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
}

/* ===== CLOSE BUTTON ===== */
.toast-close[b-93qv90d63j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin-top: -2px;
    padding: 0;
}

    .toast-close:hover[b-93qv90d63j] {
        background: rgba(255, 255, 255, 0.08);
        color: #94a3b8;
    }

/* ===== PROGRESS BAR ===== */
.toast-progress[b-93qv90d63j] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: rgba(255, 255, 255, 0.15);
    transform-origin: left;
    animation: toast-progress-b-93qv90d63j linear forwards;
}

@keyframes toast-progress-b-93qv90d63j {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .toast-container[b-93qv90d63j] {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}
/* /Components/Shared/TourOverlay.razor.rz.scp.css */
/* TourOverlay.razor.css (2026-09-24) -- the guided tips.
   Everything is position: fixed and sits above the Telerik app bars and drawer (which stop
   around z-index 100). The spotlight is a hole: a box the size of the target whose enormous
   box-shadow dims everything else, so no cut-out maths is needed. */

.tour-root[b-5b2mss4p3v] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;      /* children opt back in */
}

/* Swallows clicks on the page while a tour is up. Transparent when there is a spotlight
   (its shadow does the dimming); dimmed itself for a centred card. */
.tour-backdrop[b-5b2mss4p3v] {
    position: fixed;
    inset: 0;
    pointer-events: auto;
    background: transparent;
}

.tour-backdrop-dim[b-5b2mss4p3v] {
    background: rgba(2, 8, 20, 0.62);
    animation: tour-fade-b-5b2mss4p3v 0.2s ease-out;
}

.tour-spot[b-5b2mss4p3v] {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(2, 8, 20, 0.62), 0 0 0 2px rgba(52, 152, 219, 0.85), 0 0 24px rgba(52, 152, 219, 0.45);
    pointer-events: none;
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}

/* ===== CARD ===== */
.tour-card[b-5b2mss4p3v] {
    position: fixed;
    width: min(360px, calc(100vw - 20px));
    background: #0f1f35;
    border: 1px solid rgba(52, 152, 219, 0.35);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    padding: 14px 16px 12px;
    color: #e2e8f0;
    pointer-events: auto;
    animation: tour-pop-b-5b2mss4p3v 0.22s ease-out;
    --tour-arrow: 40px;
}

/* Rendered once, invisible, so tour.js can measure it before it is placed. */
.tour-card-measuring[b-5b2mss4p3v] {
    visibility: hidden;
    animation: none;
}

/* The pointer toward the target. tour.js says which side the card sits on and how far
   along the edge the target's centre is (--tour-arrow). */
.tour-card[b-5b2mss4p3v]::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: #0f1f35;
    border: 1px solid rgba(52, 152, 219, 0.35);
    transform: rotate(45deg);
    display: none;
}

.tour-side-bottom[b-5b2mss4p3v]::before {                 /* card is below the target: arrow on its top edge */
    display: block;
    top: -8px;
    left: calc(var(--tour-arrow) - 7px);
    border-right: none;
    border-bottom: none;
}

.tour-side-top[b-5b2mss4p3v]::before {                    /* card is above the target */
    display: block;
    bottom: -8px;
    left: calc(var(--tour-arrow) - 7px);
    border-left: none;
    border-top: none;
}

.tour-side-right[b-5b2mss4p3v]::before {                  /* card is right of the target */
    display: block;
    left: -8px;
    top: calc(var(--tour-arrow) - 7px);
    border-right: none;
    border-top: none;
}

.tour-side-left[b-5b2mss4p3v]::before {                   /* card is left of the target */
    display: block;
    right: -8px;
    top: calc(var(--tour-arrow) - 7px);
    border-left: none;
    border-bottom: none;
}

.tour-card-head[b-5b2mss4p3v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.tour-card-kicker[b-5b2mss4p3v] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3498db;
}

.tour-close[b-5b2mss4p3v] {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    border-radius: 6px;
}

    .tour-close:hover[b-5b2mss4p3v] {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
    }

.tour-card-title[b-5b2mss4p3v] {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
}

.tour-card-body[b-5b2mss4p3v] {
    font-size: 13.5px;
    line-height: 1.5;
    color: #cbd5e1;
}

    .tour-card-body b[b-5b2mss4p3v] {
        color: #ffffff;
    }

.tour-card-closing[b-5b2mss4p3v] {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(46, 204, 113, 0.10);
    border: 1px solid rgba(46, 204, 113, 0.25);
    font-size: 12.5px;
    color: #a7f3d0;
}

    .tour-card-closing b[b-5b2mss4p3v] {
        color: #ffffff;
    }

.tour-dots[b-5b2mss4p3v] {
    display: flex;
    gap: 5px;
    margin: 12px 0 10px;
}

.tour-dot[b-5b2mss4p3v] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.tour-dot-done[b-5b2mss4p3v] {
    background: rgba(52, 152, 219, 0.5);
}

.tour-dot-on[b-5b2mss4p3v] {
    background: #3498db;
    width: 18px;
    border-radius: 3px;
}

.tour-card-actions[b-5b2mss4p3v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tour-link[b-5b2mss4p3v] {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .tour-link:hover[b-5b2mss4p3v] {
        color: #94a3b8;
    }

.tour-nav[b-5b2mss4p3v] {
    display: flex;
    gap: 8px;
}

.tour-btn[b-5b2mss4p3v] {
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.tour-btn-ghost[b-5b2mss4p3v] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

    .tour-btn-ghost:hover[b-5b2mss4p3v] {
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff;
    }

.tour-btn-primary[b-5b2mss4p3v] {
    background: #3498db;
    color: #ffffff;
}

    .tour-btn-primary:hover[b-5b2mss4p3v] {
        background: #2f89c6;
    }

@keyframes tour-pop-b-5b2mss4p3v {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes tour-fade-b-5b2mss4p3v {
    from { opacity: 0; }
    to   { opacity: 1; }
}