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

/* =====================================================
   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;
}
/* /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 0.4s ease-out;
}

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

    to[b-u96mz77pv0] {
        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 0.25s ease-out;
}

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

    to[b-u96mz77pv0] {
        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/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 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 {
    0%[b-xhwgaeo56l], 100%[b-xhwgaeo56l] {
        transform: translate(0, 0) scale(1);
    }

    50%[b-xhwgaeo56l] {
        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 0.6s ease-out;
}

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

    to[b-xhwgaeo56l] {
        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 20s linear infinite;
    transform-origin: 150px 150px;
}

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

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

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

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

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

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

    to[b-xhwgaeo56l] {
        transform: rotate(360deg);
    }
}

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

    50%[b-xhwgaeo56l] {
        transform: translateY(-6px) scale(1.02);
    }
}

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

    50%[b-xhwgaeo56l] {
        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 0.4s ease-out;
}

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

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

    25%[b-xhwgaeo56l] {
        transform: translateX(6px);
    }

    50%[b-xhwgaeo56l] {
        transform: translateX(-4px);
    }

    75%[b-xhwgaeo56l] {
        transform: translateX(2px);
    }

    100%[b-xhwgaeo56l] {
        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 0.5s ease-out;
}

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

    to[b-xhwgaeo56l] {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

    50%[b-xhwgaeo56l] {
        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/GameComponents/EventFieldDialog.razor.rz.scp.css */
/* ===== OVERLAY ===== */
.efd-overlay[b-j949t9o3ru] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: efd-fade-in 0.15s ease-out;
}

@@keyframes efd-fade-in {
    from[b-j949t9o3ru] {
        opacity: 0;
    }

    to[b-j949t9o3ru] {
        opacity: 1;
    }
}

/* ===== DIALOG ===== */
.efd-dialog[b-j949t9o3ru] {
    background: #0e1e32;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    animation: efd-slide-in 0.2s ease-out;
}

@@keyframes efd-slide-in {
    from[b-j949t9o3ru] {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to[b-j949t9o3ru] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== HEADER ===== */
.efd-header[b-j949t9o3ru] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(90deg, #0a1628, #0f2744);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px 16px 0 0;
}

.efd-header-left[b-j949t9o3ru] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.efd-event-badge[b-j949t9o3ru] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.efd-header-info[b-j949t9o3ru] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.efd-event-name[b-j949t9o3ru] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.efd-player-name[b-j949t9o3ru] {
    font-size: 13px;
    font-weight: 600;
}

.efd-header-right[b-j949t9o3ru] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.efd-match-time[b-j949t9o3ru] {
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    font-family: 'Cascadia Code', monospace;
}

.efd-half[b-j949t9o3ru] {
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== ERROR ===== */
.efd-error[b-j949t9o3ru] {
    color: #e74c3c;
    font-size: 12px;
    padding: 10px 20px;
    background: rgba(231, 76, 60, 0.08);
    border-bottom: 1px solid rgba(231, 76, 60, 0.15);
}

/* ===== FIELD ===== */
.efd-field-wrapper[b-j949t9o3ru] {
    padding: 12px 16px;
}

/* ===== SECONDARY PLAYER ===== */
.efd-secondary[b-j949t9o3ru] {
    padding: 0 20px 12px;
}

.efd-label[b-j949t9o3ru] {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.efd-secondary-list[b-j949t9o3ru] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 120px;
    overflow-y: auto;
}

.efd-secondary-btn[b-j949t9o3ru] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.1s ease;
    font-size: 12px;
}

    .efd-secondary-btn:hover[b-j949t9o3ru] {
        background: rgba(255, 255, 255, 0.06);
        color: #e2e8f0;
    }

.efd-secondary-selected[b-j949t9o3ru] {
    background: rgba(52, 152, 219, 0.15) !important;
    border-color: rgba(52, 152, 219, 0.3) !important;
    color: #3498db !important;
}

.efd-secondary-num[b-j949t9o3ru] {
    font-weight: 800;
    font-family: 'Cascadia Code', monospace;
    font-size: 11px;
}

.efd-secondary-name[b-j949t9o3ru] {
    font-weight: 600;
}

/* ===== NOTES ===== */
.efd-notes[b-j949t9o3ru] {
    padding: 0 20px 16px;
}

.efd-notes-input[b-j949t9o3ru] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ffffff;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

    .efd-notes-input:focus[b-j949t9o3ru] {
        border-color: #3498db;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
    }

    .efd-notes-input[b-j949t9o3ru]::placeholder {
        color: #475569;
    }

/* ===== ACTIONS ===== */
.efd-actions[b-j949t9o3ru] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 0 16px 16px;
}

.efd-btn[b-j949t9o3ru] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #ffffff;
}

    .efd-btn:disabled[b-j949t9o3ru] {
        opacity: 0.4;
        cursor: not-allowed;
    }

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

    .efd-btn-cancel:hover[b-j949t9o3ru] {
        background: rgba(255, 255, 255, 0.1);
    }

.efd-btn-save-no-loc[b-j949t9o3ru] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

    .efd-btn-save-no-loc:hover:not(:disabled)[b-j949t9o3ru] {
        background: rgba(255, 255, 255, 0.1);
        color: #e2e8f0;
    }

.efd-btn-save[b-j949t9o3ru] {
    background: linear-gradient(135deg, #3498db, #2ecc71);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

    .efd-btn-save:hover:not(:disabled)[b-j949t9o3ru] {
        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
        transform: translateY(-1px);
    }

/* ===== SCROLLBAR ===== */
.efd-dialog[b-j949t9o3ru]::-webkit-scrollbar {
    width: 4px;
}

.efd-dialog[b-j949t9o3ru]::-webkit-scrollbar-track {
    background: transparent;
}

.efd-dialog[b-j949t9o3ru]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.efd-secondary-list[b-j949t9o3ru]::-webkit-scrollbar {
    width: 3px;
}

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

/* ===== RESPONSIVE ===== */
@@media (max-width: 768px) {
    .efd-overlay[b-j949t9o3ru] {
        padding: 10px;
        align-items: flex-start;
    }

    .efd-dialog[b-j949t9o3ru] {
        max-height: 95vh;
        border-radius: 12px;
    }

    .efd-header[b-j949t9o3ru] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        border-radius: 12px 12px 0 0;
    }

    .efd-header-right[b-j949t9o3ru] {
        align-items: flex-start;
        flex-direction: row;
        gap: 8px;
    }

    .efd-actions[b-j949t9o3ru] {
        flex-direction: column;
        border-radius: 0 0 12px 12px;
    }

    .efd-btn[b-j949t9o3ru] {
        width: 100%;
        justify-content: center;
    }
}
/* /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;
}

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

/* ===== NO PLAYER SELECTED ===== */
.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;
}

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

/* ===== 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; /* needed for popup positioning */
}

    .el-event:hover[b-vpuiq5wddw] {
        background: rgba(255, 255, 255, 0.02);
    }

/* ===== EVENT TIME ===== */
.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;
}

/* ===== EVENT ICON ===== */
.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;
}

/* ===== EVENT DETAILS ===== */
.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;
}

/* ===== TEAM COLOR BAR ===== */
.el-event-team-color[b-vpuiq5wddw] {
    width: 3px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
    opacity: 0.6;
}

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

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

/* ===== 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);
    }
/* /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 1s step-end infinite;
}

.gc-time-running .gc-minutes[b-fjo5r9nx19],
.gc-time-running .gc-seconds[b-fjo5r9nx19] {
    color: #ffffff;
}

@@keyframes gc-blink {
    0%[b-fjo5r9nx19], 100%[b-fjo5r9nx19] {
        opacity: 1;
    }

    50%[b-fjo5r9nx19] {
        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; /* Changed from visible/auto to 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;
}

.gfm-title[b-ts5pj19z0h] {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
}

/* ===== LEGEND ===== */
.gfm-legend[b-ts5pj19z0h] {
    display: flex;
    align-items: center;
    gap: 8px;
    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;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

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

.gfm-legend-dot[b-ts5pj19z0h] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    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; /* Add this */
}

/* ===== FIELD LAYOUT — horizontal with side labels ===== */
.gfm-field-layout[b-ts5pj19z0h] {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    padding: 8px;
    gap: 8px;
    overflow: hidden; /* Add this */
}

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

.gfm-side-role[b-ts5pj19z0h] {
    color: #475569;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gfm-side-arrow[b-ts5pj19z0h] {
    color: #334155;
    font-size: 9px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.gfm-side-right .gfm-side-arrow[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; /* Add this */
}

.gfm-field[b-ts5pj19z0h] {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 6px;
}

/* ===== EVENT MARKERS ===== */
.gfm-marker[b-ts5pj19z0h] {
    cursor: pointer;
    transition: all 0.15s ease;
}

    .gfm-marker circle[b-ts5pj19z0h],
    .gfm-marker text[b-ts5pj19z0h] {
        transition: all 0.15s ease;
    }

.gfm-marker-hovered circle:first-of-type[b-ts5pj19z0h] {
    filter: drop-shadow(0 0 6px currentColor);
}

/* ===== HOVER POPUP ===== */
.gfm-popup[b-ts5pj19z0h] {
    position: absolute;
    width: 200px;
    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 0.15s ease-out;
}

@@keyframes gfm-popup-in {
    from[b-ts5pj19z0h] {
        opacity: 0;
        transform: scale(0.95);
    }

    to[b-ts5pj19z0h] {
        opacity: 1;
        transform: scale(1);
    }
}

.gfm-popup-header[b-ts5pj19z0h] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

.gfm-popup-icon[b-ts5pj19z0h] {
    font-size: 14px;
    line-height: 1;
}

.gfm-popup-type[b-ts5pj19z0h] {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

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

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

.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 — no scrollbar ===== */
.gr-player-list[b-ejpfqaqm5r] {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.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 */
.gr-player-bench[b-ejpfqaqm5r] {
    opacity: 0.7;
}

    .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 ===== */
.gr-player-jersey[b-ejpfqaqm5r] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    font-family: 'Cascadia Code', monospace;
}

.gr-jersey-active[b-ejpfqaqm5r] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.gr-jersey-bench[b-ejpfqaqm5r] {
    background: rgba(255, 255, 255, 0.06);
    color: #64748b;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== 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: #e2e8f0;
    font-size: 12px;
    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: #475569;
}

/* Pulse dot for active players */
.gr-pulse-dot[b-ejpfqaqm5r] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2ecc71;
    animation: gr-pulse 2s ease-in-out infinite;
}

@@keyframes gr-pulse {
    0%[b-ejpfqaqm5r], 100%[b-ejpfqaqm5r] {
        opacity: 1;
        transform: scale(1);
    }

    50%[b-ejpfqaqm5r] {
        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.6;
}

    .gr-sub-btn:hover[b-ejpfqaqm5r] {
        opacity: 1;
        transform: scale(1.1);
    }

.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 0.2s ease-out;
}

@@keyframes gr-slide-in {
    from[b-ejpfqaqm5r] {
        opacity: 0;
        transform: translateY(-6px);
    }

    to[b-ejpfqaqm5r] {
        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;
}

/* ===== 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 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 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 {
    0%[b-xndlv09sxr], 100%[b-xndlv09sxr] {
        opacity: 1;
    }

    50%[b-xndlv09sxr] {
        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/SoccerField.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.sf-container[b-m1i16mgsvg] {
    position: relative;
    width: 100%;
}

.sf-field[b-m1i16mgsvg] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    cursor: crosshair;
    user-select: none;
}

/* ===== EVENT MARKERS ===== */
.sf-event-marker[b-m1i16mgsvg] {
    cursor: pointer;
    transition: transform 0.15s ease;
}

    .sf-event-marker:hover[b-m1i16mgsvg] {
        transform: scale(1.3);
    }

/* ===== PLACEMENT MARKER ===== */
.sf-placement-marker[b-m1i16mgsvg] {
    animation: sf-place 0.3s ease-out;
}

@@keyframes sf-place {
    0%[b-m1i16mgsvg] {
        opacity: 0;
        transform: scale(0.5);
    }

    100%[b-m1i16mgsvg] {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== TAP HINT ===== */
.sf-tap-hint[b-m1i16mgsvg] {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    animation: sf-hint-pulse 2s ease-in-out infinite;
}

@@keyframes sf-hint-pulse {
    0%[b-m1i16mgsvg], 100%[b-m1i16mgsvg] {
        opacity: 0.8;
    }

    50%[b-m1i16mgsvg] {
        opacity: 1;
    }
}
/* /Components/Pages/GameComponents/StartingLineupDialog.razor.rz.scp.css */
/* ===== INFO BAR ===== */
.sl-info[b-ccn4wv1a34] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 12px;
}

.sl-info-text[b-ccn4wv1a34] {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
    flex: 1;
}

.sl-count[b-ccn4wv1a34] {
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
    margin-left: 12px;
}

/* ===== PLAYER LIST ===== */
.sl-player-list[b-ccn4wv1a34] {
    display: flex;
    flex-direction: column;
    max-height: 350px;
    overflow-y: auto;
    gap: 2px;
}

.sl-player[b-ccn4wv1a34] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    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-selected[b-ccn4wv1a34] {
    background: rgba(52, 152, 219, 0.08) !important;
}

.sl-player-disabled[b-ccn4wv1a34] {
    opacity: 0.4;
    cursor: default;
}

/* ===== CHECKBOX ===== */
.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 0.2s ease-out;
}

@@keyframes sl-pop {
    0%[b-ccn4wv1a34] {
        transform: scale(0.8);
    }

    50%[b-ccn4wv1a34] {
        transform: scale(1.1);
    }

    100%[b-ccn4wv1a34] {
        transform: scale(1);
    }
}

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

/* ===== PLAYER INFO ===== */
.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-already-playing[b-ccn4wv1a34] {
    color: #2ecc71;
    font-size: 10px;
    font-weight: 600;
}

/* ===== EMPTY ===== */
.sl-empty[b-ccn4wv1a34] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: #334155;
    font-size: 13px;
    font-style: italic;
}

/* ===== SCROLLBAR ===== */
.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;
}
/* /Components/Pages/Games.razor.rz.scp.css */
/* ===== PAGE ===== */

.games-page[b-h42m6r72r9] {
    max-width: 100%;
    margin: 0 auto;
    padding: 32px 24px;
    animation: fadeIn 0.4s ease-out;
}

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

    to[b-h42m6r72r9] {
        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-count[b-h42m6r72r9] {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.filter-active.filter-count[b-h42m6r72r9] {
    background: rgba(255, 255, 255, 0.15);
}

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

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

    [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 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

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

.status-final[b-h42m6r72r9] {
    background: rgba(149, 165, 166, 0.12);
    color: #95a5a6;
    border: 1px solid rgba(149, 165, 166, 0.2);
}

.live-dot[b-h42m6r72r9] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e74c3c;
    animation: livePulse 1.5s ease-in-out infinite;
}

@@keyframes livePulse {
    0%[b-h42m6r72r9], 100%[b-h42m6r72r9] {
        opacity: 1;
        transform: scale(1);
    }

    50%[b-h42m6r72r9] {
        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;
}

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

.time-final[b-h42m6r72r9] {
    color: #95a5a6;
    font-size: 13px;
    font-weight: 600;
}

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

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

/* Style the autocomplete dropdown */
[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;
}
/* Team search item in dropdown */ .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;
}
/* /Components/Pages/GameTracker.razor.rz.scp.css */
/* ===== PAGE LAYOUT ===== */
.gt-page[b-t42sf6i4s9] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== MAIN LAYOUT: Left + Right ===== */
.gt-main-layout[b-t42sf6i4s9] {
    display: grid;
    grid-template-columns: 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;
}

.gt-roster-section[b-t42sf6i4s9] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== RIGHT PANEL: Scoreboard + Clock + Events ===== */
.gt-right-panel[b-t42sf6i4s9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow: visible;
}

/* ===== TOP ROW: Scoreboard + Clock ===== */
.gt-top-row[b-t42sf6i4s9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex-shrink: 0;
}

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

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

/* ===== EVENTS SECTION ===== */
.gt-events-section[b-t42sf6i4s9] {
    flex: 1;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

/* ===== SECTIONS ===== */
.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 ===== */
@@media (max-width: 1024px) {
    .gt-main-layout[b-t42sf6i4s9] {
        grid-template-columns: 1fr;
    }

    .gt-top-row[b-t42sf6i4s9] {
        grid-template-columns: 1fr;
    }

    .gt-page[b-t42sf6i4s9] {
        height: auto;
        overflow: visible;
    }

    .gt-left-panel[b-t42sf6i4s9],
    .gt-right-panel[b-t42sf6i4s9] {
        overflow: visible;
    }

    .gt-roster-section[b-t42sf6i4s9] {
        overflow: visible;
    }
}

/* ===== RESPONSIVE: MOBILE ===== */
@@media (max-width: 768px) {
    .gt-page[b-t42sf6i4s9] {
        padding: 8px;
    }

    .gt-main-layout[b-t42sf6i4s9] {
        gap: 8px;
    }
}
/* ===== FIELD MAP SECTION ===== */
.gt-field-section[b-t42sf6i4s9] {
    flex: 1;
    min-height: 0;
    overflow: hidden; /* Changed from visible to hidden */
}
/* ===== EVENTS SECTION ===== */
.gt-events-section[b-t42sf6i4s9] {
    flex: 1;
    min-height: 0;
    overflow: visible;
}
/* /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 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 {
    0%[b-699l3auobx], 100%[b-699l3auobx] {
        opacity: 1;
    }

    50%[b-699l3auobx] {
        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 1fr;
    gap: 40px;
    align-items: center;
    padding: 40px 0 20px;
}

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

/* ===== 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 20s linear infinite;
}

.ring-rotate-reverse[b-699l3auobx] {
    transform-origin: center;
    animation: rotate 15s linear infinite reverse;
}

.arc-spin[b-699l3auobx] {
    transform-origin: center;
    animation: rotate 8s linear infinite;
}

.arc-spin-delay[b-699l3auobx] {
    transform-origin: center;
    animation: rotate 12s linear infinite reverse;
}

.arc-spin-slow[b-699l3auobx] {
    transform-origin: center;
    animation: rotate 18s linear infinite;
}

.ball-float[b-699l3auobx] {
    animation: float 4s ease-in-out infinite;
}

.dot-pulse[b-699l3auobx] {
    animation: pulse 2s ease-in-out infinite;
}

.dot-pulse-delay[b-699l3auobx] {
    animation: pulse 2s ease-in-out 1s infinite;
}

@@keyframes rotate {
    from[b-699l3auobx] {
        transform: rotate(0deg);
    }

    to[b-699l3auobx] {
        transform: rotate(360deg);
    }
}

@@keyframes float {
    0%[b-699l3auobx], 100%[b-699l3auobx] {
        transform: translateY(0);
    }

    50%[b-699l3auobx] {
        transform: translateY(-8px);
    }
}

@@keyframes pulse {
    0%[b-699l3auobx], 100%[b-699l3auobx] {
        opacity: 0.3;
        r: 3;
    }

    50%[b-699l3auobx] {
        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;
    }

    .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/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 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 {
    0%[b-6rceg7d1zf], 100%[b-6rceg7d1zf] {
        transform: translate(0, 0) scale(1);
    }

    50%[b-6rceg7d1zf] {
        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 0.6s ease-out;
}

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

    to[b-6rceg7d1zf] {
        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 20s linear infinite;
    transform-origin: 150px 150px;
}

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

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

.ball-hover[b-6rceg7d1zf] {
    animation: hover 3s ease-in-out infinite;
    transform-origin: 150px 150px;
}

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

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

@@keyframes spin {
    from[b-6rceg7d1zf] {
        transform: rotate(0deg);
    }

    to[b-6rceg7d1zf] {
        transform: rotate(360deg);
    }
}

@@keyframes hover {
    0%[b-6rceg7d1zf], 100%[b-6rceg7d1zf] {
        transform: translateY(0);
    }

    50%[b-6rceg7d1zf] {
        transform: translateY(-6px);
    }
}

@@keyframes dotPulse {
    0%[b-6rceg7d1zf], 100%[b-6rceg7d1zf] {
        opacity: 0.3;
    }

    50%[b-6rceg7d1zf] {
        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;
}

.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 0.4s ease-out;
}

@@keyframes shakeIn {
    0%[b-6rceg7d1zf] {
        transform: translateX(-8px);
        opacity: 0;
    }

    25%[b-6rceg7d1zf] {
        transform: translateX(6px);
    }

    50%[b-6rceg7d1zf] {
        transform: translateX(-4px);
    }

    75%[b-6rceg7d1zf] {
        transform: translateX(2px);
    }

    100%[b-6rceg7d1zf] {
        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/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/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 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 {
    0%[b-tav4hbmcg3], 100%[b-tav4hbmcg3] {
        transform: translate(0,0) scale(1);
    }

    50%[b-tav4hbmcg3] {
        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 0.6s ease-out;
}

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

    to[b-tav4hbmcg3] {
        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 20s linear infinite;
    transform-origin: 150px 150px;
}

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

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

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

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

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

    to[b-tav4hbmcg3] {
        transform: rotate(360deg);
    }
}

@@keyframes dotPulse {
    0%[b-tav4hbmcg3], 100%[b-tav4hbmcg3] {
        opacity: 0.3;
    }

    50%[b-tav4hbmcg3] {
        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;
}

/* ===== 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 0.3s ease-out;
}

@@keyframes stepFadeIn {
    from[b-tav4hbmcg3] {
        opacity: 0;
        transform: translateX(12px);
    }

    to[b-tav4hbmcg3] {
        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;
}

.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 0.4s ease-out;
}

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

    25%[b-tav4hbmcg3] {
        transform: translateX(6px);
    }

    50%[b-tav4hbmcg3] {
        transform: translateX(-4px);
    }

    75%[b-tav4hbmcg3] {
        transform: translateX(2px);
    }

    100%[b-tav4hbmcg3] {
        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/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 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 {
    0%[b-to2sheo5ow], 100%[b-to2sheo5ow] {
        transform: translate(0, 0) scale(1);
    }

    50%[b-to2sheo5ow] {
        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 0.6s ease-out;
}

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

    to[b-to2sheo5ow] {
        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 20s linear infinite;
    transform-origin: 150px 150px;
}

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

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

.badge-hover[b-to2sheo5ow] {
    animation: badgeFloat 3s ease-in-out infinite;
    transform-origin: 150px 150px;
}

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

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

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

    to[b-to2sheo5ow] {
        transform: rotate(360deg);
    }
}

@@keyframes badgeFloat {
    0%[b-to2sheo5ow], 100%[b-to2sheo5ow] {
        transform: translateY(0) scale(1);
    }

    50%[b-to2sheo5ow] {
        transform: translateY(-6px) scale(1.02);
    }
}

@@keyframes dotPulse {
    0%[b-to2sheo5ow], 100%[b-to2sheo5ow] {
        opacity: 0.3;
    }

    50%[b-to2sheo5ow] {
        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;
}

/* ===== 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 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 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 {
    0%[b-to2sheo5ow] {
        transform: translateX(-8px);
        opacity: 0;
    }

    25%[b-to2sheo5ow] {
        transform: translateX(6px);
    }

    50%[b-to2sheo5ow] {
        transform: translateX(-4px);
    }

    75%[b-to2sheo5ow] {
        transform: translateX(2px);
    }

    100%[b-to2sheo5ow] {
        transform: translateX(0);
        opacity: 1;
    }
}

@@keyframes slideIn {
    from[b-to2sheo5ow] {
        opacity: 0;
        transform: translateY(-8px);
    }

    to[b-to2sheo5ow] {
        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/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 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 {
    0%[b-oz1gc89px4], 100%[b-oz1gc89px4] {
        transform: translate(0, 0) scale(1);
    }

    50%[b-oz1gc89px4] {
        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 0.6s ease-out;
}

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

    to[b-oz1gc89px4] {
        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 20s linear infinite;
    transform-origin: 150px 150px;
}

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

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

.key-hover[b-oz1gc89px4] {
    animation: keyFloat 3s ease-in-out infinite;
    transform-origin: 150px 155px;
}

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

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

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

    to[b-oz1gc89px4] {
        transform: rotate(360deg);
    }
}

@@keyframes keyFloat {
    0%[b-oz1gc89px4], 100%[b-oz1gc89px4] {
        transform: translateY(0) rotate(0deg);
    }

    50%[b-oz1gc89px4] {
        transform: translateY(-6px) rotate(3deg);
    }
}

@@keyframes dotPulse {
    0%[b-oz1gc89px4], 100%[b-oz1gc89px4] {
        opacity: 0.3;
    }

    50%[b-oz1gc89px4] {
        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 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 {
    0%[b-oz1gc89px4] {
        transform: translateX(-8px);
        opacity: 0;
    }

    25%[b-oz1gc89px4] {
        transform: translateX(6px);
    }

    50%[b-oz1gc89px4] {
        transform: translateX(-4px);
    }

    75%[b-oz1gc89px4] {
        transform: translateX(2px);
    }

    100%[b-oz1gc89px4] {
        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 0.5s ease-out;
}

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

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

@@keyframes checkPulse {
    0%[b-oz1gc89px4], 100%[b-oz1gc89px4] {
        transform: scale(1);
    }

    50%[b-oz1gc89px4] {
        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 0.5s ease-out;
}

.error-icon[b-oz1gc89px4] {
    margin-bottom: 20px;
}

    .error-icon svg[b-oz1gc89px4] {
        animation: errorPulse 2s ease-in-out infinite;
    }

@@keyframes errorPulse {
    0%[b-oz1gc89px4], 100%[b-oz1gc89px4] {
        transform: scale(1);
        opacity: 0.9;
    }

    50%[b-oz1gc89px4] {
        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 {
    from[b-oz1gc89px4] {
        opacity: 0;
        transform: translateY(16px);
    }

    to[b-oz1gc89px4] {
        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/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;
    }

/* ===== 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 0.3s ease-out;
}

@@keyframes bd-fadeIn {
    from[b-0bk9iy5pr6] {
        opacity: 0;
        transform: translateY(-4px);
    }

    to[b-0bk9iy5pr6] {
        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/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;
}
/* /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;
}
/* /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 0.2s ease-out;
}

@@keyframes qr-slide-in {
    from[b-auaago1s2h] {
        opacity: 0;
        transform: translateX(-8px);
    }

    to[b-auaago1s2h] {
        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/TeamDetail.razor.rz.scp.css */
/* ===== PAGE ===== */

.team-detail-page[b-hdiyj8a99e] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px 32px;
    animation: fadeIn 0.4s ease-out;
}

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

    to[b-hdiyj8a99e] {
        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;
}

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

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

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

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

/* ===== 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;
    }
}
/* /Components/Pages/Teams.razor.rz.scp.css */
/* ===== PAGE ===== */

.teams-page[b-5acx39ptmh] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
    animation: fadeIn 0.4s ease-out;
}

@@keyframes fadeIn {
    from[b-5acx39ptmh] {
        opacity: 0;
        transform: translateY(12px);
    }

    to[b-5acx39ptmh] {
        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);
    }

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

/* ===== 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/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 0.3s ease-out;
}

@@keyframes nb-badge-pop {
    0%[b-m3i5atay0z] {
        transform: scale(0);
    }

    70%[b-m3i5atay0z] {
        transform: scale(1.2);
    }

    100%[b-m3i5atay0z] {
        transform: scale(1);
    }
}

/* ===== BACKDROP ===== */
.nb-backdrop[b-m3i5atay0z] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: transparent;
}

/* ===== DROPDOWN — fixed position escapes all stacking contexts ===== */
.nb-dropdown[b-m3i5atay0z] {
    position: fixed;
    top: 56px; /* Height of your AppBar — adjust if needed */
    right: 12px; /* Distance from right edge */
    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 0.15s ease-out;
}

@@keyframes nb-dropdown-in {
    from[b-m3i5atay0z] {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }

    to[b-m3i5atay0z] {
        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;
    }

/* ===== 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/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 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.toast-leaving[b-93qv90d63j] {
    animation: toast-slide-out 0.3s ease-in forwards;
}

@@keyframes toast-slide-in {
    from[b-93qv90d63j] {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }

    to[b-93qv90d63j] {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@@keyframes toast-slide-out {
    from[b-93qv90d63j] {
        opacity: 1;
        transform: translateX(0) scale(1);
        max-height: 200px;
        margin-bottom: 0;
    }

    to[b-93qv90d63j] {
        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 linear forwards;
}

@@keyframes toast-progress {
    from[b-93qv90d63j] {
        transform: scaleX(1);
    }

    to[b-93qv90d63j] {
        transform: scaleX(0);
    }
}

/* ===== RESPONSIVE ===== */
@@media (max-width: 480px) {
    .toast-container[b-93qv90d63j] {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}