/* Estilos Globais do OSPR - v2.0 */

/* Unified Card System */
    .unified-container { max-width: 48rem; margin: 0 auto; padding: 1rem; }

    .unified-card {
        background: white;
        border-radius: 0.75rem;
        border: 1px solid #e5e7eb;
        margin-bottom: 1.5rem;
        overflow: hidden;
    }

    .card-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid #f3f4f6;
        background: #fafafa;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .card-header h3 {
        font-size: 0.9375rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .card-title {
        font-size: 0.875rem;
        font-weight: 800;
        color: #111827;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .card-body {
        padding: 1.5rem;
    }

    .score-square {
        border: 1px solid #e5e7eb;
        background: #f9fafb;
        border-radius: 0.5rem;
        padding: 1rem;
        text-align: center;
        min-width: 5.5rem;
    }

    .score-value {
        font-size: 2.25rem;
        font-weight: 800;
        color: #111827;
        line-height: 1;
    }

    .score-label {
        font-size: 0.625rem;
        font-weight: 700;
        color: #9ca3af;
        text-transform: uppercase;
        margin-top: 0.25rem;
    }

    .player-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem;
        background: #fff;
        border: 1px solid #f3f4f6;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .player-row:last-child {
        margin-bottom: 0;
    }

    .chart-container-large {
        position: relative;
        height: 200px;
        width: 100%;
    }

    .metric-card {
        border: 1px solid #f3f4f6;
        border-radius: 0.5rem;
        padding: 1rem;
        text-align: center;
        background: #fff;
    }

    .metric-label { font-size: 0.625rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; margin-bottom: 0.25rem; }
    .metric-value { font-size: 1.25rem; font-weight: 800; color: #111827; }
    .metric-change { font-size: 0.75rem; font-weight: 600; margin-top: 0.125rem; }
.mgr-player-modal-item {
    padding: 0.875rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}
.mgr-player-modal-item:hover { background: #f8f9fa; border-left-color: #f97316; }
.mgr-player-modal-item .player-avatar {
    width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: #f3f4f6; display: flex; align-items: center; justify-content: center;
}
.mgr-player-modal-item .player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mgr-player-modal-item .player-info { flex: 1; min-width: 0; }
.mgr-player-modal-item .player-nickname { font-size: 0.9375rem; font-weight: 600; color: #111827; line-height: 1.2; }
.mgr-player-modal-item .player-badges { display: flex; gap: 0.375rem; margin-top: 0.375rem; flex-wrap: wrap; }
.mgr-player-modal-item .badge { padding: 0.125rem 0.5rem; border-radius: 1rem; font-size: 0.625rem; font-weight: 600; }
.mgr-player-modal-item .badge-rating { background: #f3f4f6; color: #374151; }
.mgr-player-modal-item .badge-gender-m { background: #dbeafe; color: #1e40af; }
.mgr-player-modal-item .badge-gender-f { background: #fce7f3; color: #9d174d; }
.mgr-player-modal-item .badge-frequent { background: #dcfce7; color: #16a34a; font-size: 0.75rem; }
.mgr-court-modal-item {
    padding: 0.875rem 1rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem;
    transition: all 0.15s ease; border-left: 3px solid transparent;
}
.mgr-court-modal-item:hover { background: #f8f9fa; border-left-color: #f97316; }
.mgr-court-modal-item.selected { background: #f0fdf4; border-left-color: #22c55e; }
.player-select-card {
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    border: 2px dashed #d1d5db; border-radius: 0.75rem; cursor: pointer;
    padding: 1rem; transition: all 0.2s ease; background: white; min-height: 70px;
}
.player-select-card:hover { border-color: #000; background: #fafafa; }
.player-select-card.selected { border: 2px solid #000; background: #f9fafb; }

/* ═══ OSPR Shared Patterns ═══ */

/* Data row — canonical list-item row used across all admin/management pages */
.ospr-row {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    transition: background 0.15s;
}
.ospr-row:hover { background: #f9fafb; }
.ospr-row:last-child { border-bottom: none; }

/* Pagination */
.btn-page {
    padding: 0.375rem 0.625rem; border-radius: 0.5rem; font-size: 0.8125rem;
    font-weight: 700; border: 1px solid #e5e7eb; background: #fff;
    color: #374151; transition: all 0.2s; text-decoration: none; display: inline-block;
}
.btn-page:hover { background: #f9fafb; }
.btn-page-active { background: #000; color: #fff; border-color: #000; }

/* Accordion */
.accordion-card {
    background: white; border-radius: 0.75rem; border: 1px solid #e5e7eb;
    margin-bottom: 1rem; overflow: hidden;
}
.accordion-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; cursor: pointer; user-select: none;
    background: #fafafa; border-bottom: 1px solid transparent; transition: background 0.15s;
}
.accordion-header:hover { background: #f3f4f6; }
.accordion-header.open { border-bottom-color: #e5e7eb; background: #fafafa; }
.accordion-title {
    font-size: 0.9375rem; font-weight: 700; color: #111827;
    display: flex; align-items: center; gap: 0.625rem;
}
.accordion-chevron { transition: transform 0.2s ease; color: #9ca3af; }
.accordion-chevron.open { transform: rotate(180deg); }

/* Filter chips */
.filter-row { display: flex; gap: 0.375rem; flex-wrap: wrap; padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; }
.filter-btn {
    padding: 0.3rem 0.625rem; border: 1px solid #e5e7eb; border-radius: 0.5rem;
    font-size: 0.75rem; font-weight: 600; color: #6b7280; background: white;
    text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; transition: all 0.15s;
}
.filter-btn:hover { background: #f9fafb; border-color: #d1d5db; color: #111827; }
.filter-btn.active { background: #000; color: white; border-color: #000; }

/* Badge count (notification pill) */
.badge-count {
    padding: 0.1rem 0.45rem; border-radius: 1rem; font-size: 0.625rem;
    font-weight: 700; background: #fee2e2; color: #991b1b;
}

/* Status badges for requests/reports */
.req-badge, .report-badge {
    padding: 0.125rem 0.5rem; border-radius: 1rem; font-size: 0.625rem;
    font-weight: 700; display: inline-flex; align-items: center; gap: 0.25rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.badge-pending   { background: #fef3c7; color: #d97706; }
.badge-approved  { background: #dcfce7; color: #166534; }
.badge-rejected  { background: #fee2e2; color: #991b1b; }
.badge-reviewing { background: #dbeafe; color: #1e40af; }
.badge-resolved  { background: #dcfce7; color: #166534; }

/* Action buttons (approve/reject/detail) */
.action-btn {
    padding: 0.35rem 0.625rem; border-radius: 0.375rem; font-size: 0.75rem;
    font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem;
    border: none; cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.btn-detail  { background: #f3f4f6; color: #374151; }
.btn-detail:hover  { background: #e5e7eb; }
.btn-approve { background: #dcfce7; color: #166534; }
.btn-approve:hover { background: #bbf7d0; }
.btn-reject  { background: #fee2e2; color: #991b1b; }
.btn-reject:hover  { background: #fecaca; }

/* Modal overlay (unified) */
.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 50; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.active { display: flex; }
.modal-content {
    background: white; border-radius: 0.75rem; padding: 1.5rem;
    max-width: 30rem; width: 100%; border: 1px solid #e5e7eb;
    max-height: 90vh; overflow-y: auto;
}

/* Search input */
.search-input {
    width: 100%; padding: 0.6875rem 1rem 0.6875rem 2.5rem;
    border: 1px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem;
    background: white; transition: border-color 0.2s;
}
.search-input:focus { outline: none; border-color: #000; }

/* Cleanup page action items */
.action-item {
    display: flex; align-items: center; gap: 1rem; padding: 1rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
    margin-bottom: 0.75rem; transition: all 0.2s ease; text-decoration: none;
}
.action-item:hover { background: #f8fafc; border-color: #000; }
.action-icon {
    width: 2.25rem; height: 2.25rem; background: #f1f5f9; color: #475569;
    border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 1rem;
}
.action-item:hover .action-icon { background: #000; color: #fff; }
.action-info { flex: 1; }
.action-name { font-size: 0.875rem; font-weight: 700; color: #111827; }
.action-desc { font-size: 0.75rem; color: #64748b; margin-top: 0.125rem; }
.chevron { color: #cbd5e1; font-size: 0.75rem; transition: transform 0.2s; }
.action-item:hover .chevron { color: #000; transform: translateX(2px); }

/* Stats grid for cleanup dashboard */
.stats-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem;
}
@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(5, 1fr); } }
.stat-box {
    padding: 1.25rem 0.75rem; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 0.75rem; text-align: center; transition: all 0.2s ease;
}
.stat-value { font-size: 1.25rem; font-weight: 800; color: #111827; line-height: 1; }
.stat-label {
    font-size: 0.6rem; font-weight: 800; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.375rem;
}

/* Alpine cloak */
[x-cloak] { display: none !important; }

/* Fade-in animation */
.animate-fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

:root {
        --user-highlight-color: #f97316;
    }

    /* Player Item */
    .player-item {
        padding: 1rem;
        border-bottom: 1px solid #f3f4f6;
        cursor: pointer;
        display: block;
        text-decoration: none;
        color: inherit;
        transition: all 0.2s ease;
    }

    .player-item:hover {
        background: #f8f9fa;
        border-left: 4px solid #000;
    }

    .player-item:last-child {
        border-bottom: none;
    }

    /* Destacar usuário logado */
    .player-item.current-user {
        border-left: 4px solid var(--user-highlight-color);
        border-right: 4px solid var(--user-highlight-color);
        position: relative;
        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    }

    /* Quando clube favorito está ativo, o JavaScript aplicará o background */
    .player-item.current-user[data-secondary-color] {
        background: none !important;
    }

    .player-item.current-user:hover {
        background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
        border-left: 4px solid #ea580c;
        border-right: 4px solid #ea580c;
    }

    /* Desabilitar hover padrão quando clube favorito está ativo */
    .player-item.current-user[data-secondary-color]:hover {
        background: none !important;
        border-left-color: inherit !important;
        border-right-color: inherit !important;
    }

    .player-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .player-main {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex: 1;
        min-width: 0;
    }

    /* Rank Badge */
    .rank-badge {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.875rem;
        flex-shrink: 0;
        position: relative;
    }

    .rank-1 {
        background: linear-gradient(135deg, #B9F2FF, #87CEEB);
        color: #000;
        box-shadow: 0 0 15px rgba(185, 242, 255, 0.5);
    }

    .rank-2 {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        color: #000;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    }

    .rank-3 {
        background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
        color: #000;
        box-shadow: 0 0 8px rgba(192, 192, 192, 0.4);
    }

    .rank-other {
        background: #f3f4f6;
        color: #374151;
        font-weight: 600;
    }

    .player-avatar {
        width: 2.5rem;
        height: 2.5rem;
        flex-shrink: 0;
    }

    .player-details h4 {
        font-size: 0.9375rem;
        font-weight: 700;
        margin: 0;
        color: #111827;
        line-height: 1.2;
    }

    .player-details p {
        font-size: 0.875rem;
        color: #6b7280;
        margin: 0.25rem 0 0 0;
        line-height: 1.3;
    }

    .player-badges {
        display: flex;
        gap: 0.375rem;
        flex-wrap: wrap;
        margin-top: 0.375rem;
    }

    .player-badge {
        padding: 0.125rem 0.5rem;
        border-radius: 1rem;
        font-size: 0.625rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .badge-rating {
        background: #f3f4f6;
        color: #374151;
    }

    .badge-matches {
        background: #dbeafe;
        color: #1e40af;
    }

    .badge-winrate {
        background: #dcfce7;
        color: #166534;
    }

    .badge-winrate-low {
        background: #fee2e2;
        color: #991b1b;
    }


    /* Empty States */
    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
        color: #6b7280;
    }

    .empty-icon {
        width: 4rem;
        height: 4rem;
        background: #f3f4f6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
    }

    .empty-state h4 {
        font-size: 1.125rem;
        font-weight: 600;
        color: #111827;
        margin: 0 0 0.5rem 0;
    }

    .empty-state p {
        margin: 0 0 1rem 0;
        line-height: 1.5;
    }

    /* Mobile Optimizations */
    @media (max-width: 768px) {
        .player-content {
            flex-direction: column;
            align-items: stretch;
            gap: 0.75rem;
        }


        .player-details h4 {
            font-size: 1rem;
        }

        .rank-badge {
            width: 2.25rem;
            height: 2.25rem;
            font-size: 0.8rem;
        }

        .player-badges {
            justify-content: center;
        }

        .player-item.current-user::before {
            top: 0.375rem;
            right: 0.375rem;
            font-size: 0.563rem;
            padding: 0.188rem 0.375rem;
        }
    }

    @media (max-width: 640px) {
        .player-item {
            padding: 0.875rem;
        }

        .player-main {
            gap: 0.625rem;
        }

        .player-avatar {
            width: 2.25rem;
            height: 2.25rem;
        }

        .rank-badge {
            width: 2rem;
            height: 2rem;
            font-size: 0.75rem;
        }

        .player-details h4 {
            font-size: 0.975rem;
        }

        .player-details p {
            font-size: 0.825rem;
        }

        .stat-item {
            font-size: 0.75rem;
        }
    }
    :root {
        --ospr-orange: #f97316;      /* Orange-500 do Tailwind */
        --ospr-purple: #56408b;      /* Roxo padrão OSPR */
        --ospr-dark: #1e1e1e;
        --ospr-light: #f4f5f7;
    }

    /* Cores do clube favorito (se disponível) */

    /* Função para escurecer cor (para hover) */
    .btn-primary-club {
        background-color: var(--club-primary) !important;
    }
    .btn-primary-club:hover {
        filter: brightness(0.9);
    }

    .btn-secondary-club {
        background-color: var(--club-secondary) !important;
    }
    .btn-secondary-club:hover {
        filter: brightness(0.9);
    }

    /* Responsive canvas for the chart */
    .chart-container {
        position: relative;
        width: 100%;
        height: 300px;
        margin: 1rem 0;
    }

    #ratingDistributionChart {
        width: 100% !important;
        height: 100% !important;
    }

    /* Hero gradient for non-logged users */
    .hero-gradient {
        background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%);
    }

    /* Beta ribbon styles */
    .beta-ribbon {
        position: absolute;
        top: 2rem;
        left: -3.5rem;
        padding: 0.75rem 5rem;
        background: linear-gradient(135deg, #56408b, #f97316);
        color: #ffffff;
        font-size: 1rem;
        font-weight: 900;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        transform: rotate(-45deg);
        box-shadow: 0 12px 24px rgba(86, 64, 139, 0.35);
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
    }

    @media (max-width: 768px) {
        .beta-ribbon {
            top: 1.25rem;
            left: -3.75rem;
            padding: 0.5rem 4.5rem;
            font-size: 0.8rem;
            letter-spacing: 0.2em;
        }
    }

    @media (max-width: 640px) {
        .beta-ribbon {
            top: 1rem;
            left: -3.5rem;
            padding: 0.45rem 4rem;
            font-size: 0.75rem;
            letter-spacing: 0.18em;
        }
    }

    @media (max-width: 480px) {
        .beta-ribbon {
            top: 0.75rem;
            left: -3.25rem;
            padding: 0.4rem 3.75rem;
            font-size: 0.7rem;
            letter-spacing: 0.15em;
        }
    }

    /* Smooth scroll behavior */
    html {
        scroll-behavior: smooth;
    }

    /* Barra de navegação das seções */
    .section-nav-link {
        position: relative;
    }

    /* Scrollbar hide para navegação horizontal no mobile */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    /* Cores para os níveis */
    .rank-bronze {
        color: #CD7F32;
        background-color: rgba(205, 127, 50, 0.1);
        border: 1px solid rgba(205, 127, 50, 0.3);
    }
    .rank-silver {
        color: #C0C0C0;
        background-color: rgba(192, 192, 192, 0.1);
        border: 1px solid rgba(192, 192, 192, 0.3);
    }
    .rank-gold {
        color: #FFD700;
        background-color: rgba(255, 215, 0, 0.1);
        border: 1px solid rgba(255, 215, 0, 0.3);
    }
    .rank-diamond {
        color: #B9F2FF;
        background-color: rgba(185, 242, 255, 0.1);
        border: 1px solid rgba(185, 242, 255, 0.3);
    }

    /* Animação de brilho cintilante */
    @keyframes sparkle {
        0% { filter: brightness(1); text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
        25% { filter: brightness(1.2); text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
        50% { filter: brightness(1); text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
        75% { filter: brightness(1.1); text-shadow: 0 0 3px rgba(255, 255, 255, 0.3); }
        100% { filter: brightness(1); text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    }

    .rank-diamond {
        animation: sparkle 3s infinite;
        position: relative;
    }

    .rank-diamond::after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: inherit;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        z-index: -1;
        animation: sparkle 2s infinite;
    }

    /* Classe para o primeiro colocado */
    .rank-first {
        animation: sparkle 3s infinite;
        position: relative;
    }

    .rank-first::after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: inherit;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        z-index: -1;
        animation: sparkle 2s infinite;
    }

    /* Mobile optimizations */
    @media (max-width: 768px) {
        .mobile-stack {
            grid-template-columns: 1fr;
        }

        .mobile-text-center {
            text-align: center;
        }

        .mobile-p-4 {
            padding: 1rem;
        }
    }

    /* Home deslogada mobile-first */
    .hero-mobile {
        min-height: 60vh;
    }

    @media (max-width: 640px) {
        .hero-mobile {
            min-height: 70vh;
        }

        .hero-title {
            font-size: 1.75rem;
            line-height: 2rem;
        }

        .hero-description {
            font-size: 0.875rem;
            line-height: 1.25rem;
        }

        .hero-buttons {
            padding: 0 1rem;
        }

        .hero-button {
            width: 100%;
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .hero-mobile {
            min-height: 80vh;
        }

        .hero-title {
            font-size: 1.5rem;
            line-height: 1.75rem;
        }

        .features-grid {
            gap: 1rem;
        }

        .club-card {
            padding: 1rem;
        }

        .cta-buttons {
            flex-direction: column;
            gap: 0.75rem;
        }
    }

    /* Estilos para os cards clicáveis de estatísticas */
    a.bg-white\/10:hover .text-blue-300 {
        opacity: 1 !important;
        transition: opacity 0.3s ease-in-out;
    }

    a.bg-white\/10 {
        text-decoration: none;
        display: block;
    }

    a.bg-white\/10 .text-blue-300 {
        transition: opacity 0.3s ease-in-out;
    }