/* FPL Tracker Custom Styles */

:root {
    --fpl-purple: #37003c;
    --fpl-green: #00ff87;
    --fpl-pink: #ff2882;
}

body {
    background-color: #f8f9fa;
}

.navbar {
    background: linear-gradient(135deg, var(--fpl-purple) 0%, #5a1e5c 100%) !important;
}

.sidebar {
    min-height: calc(100vh - 56px);
    border-right: 1px solid #dee2e6;
}

.nav-pills .nav-link {
    color: #495057;
    border-radius: 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid transparent;
}

.nav-pills .nav-link:hover {
    background-color: #e9ecef;
}

.nav-pills .nav-link.active {
    background-color: #e7f1ff;
    color: #0d6efd;
    border-left-color: #0d6efd;
}

.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: none;
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
}

.table th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
}

.table td {
    vertical-align: middle;
}

/* Position badges */
.badge-gkp { background-color: #f4a83c; }
.badge-def { background-color: #2ecc71; }
.badge-mid { background-color: #3498db; }
.badge-fwd { background-color: #e74c3c; }

/* FDR colors */
.fdr-1 { background-color: #257d5a; color: white; }
.fdr-2 { background-color: #00ff87; color: black; }
.fdr-3 { background-color: #ebebe4; color: black; }
.fdr-4 { background-color: #ff1751; color: white; }
.fdr-5 { background-color: #80072d; color: white; }

/* Rank movement */
.rank-up { color: #28a745; }
.rank-down { color: #dc3545; }
.rank-same { color: #6c757d; }

/* Captain badge */
.captain-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--fpl-purple);
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
}

.vice-captain-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #6c757d;
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
}

/* Bench row */
.bench-row {
    background-color: #f8f9fa;
    opacity: 0.8;
}

/* Chip badges */
.chip-badge {
    padding: 0.4rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.chip-wildcard { background-color: #8e44ad; color: white; }
.chip-freehit { background-color: #3498db; color: white; }
.chip-bboost { background-color: #27ae60; color: white; }
.chip-3xc { background-color: #e74c3c; color: white; }

/* Comparison cards */
.comparison-card {
    border: 2px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}

.comparison-card .player-name {
    font-weight: 600;
    font-size: 1rem;
}

.comparison-stat {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f1f1f1;
}

.comparison-stat:last-child {
    border-bottom: none;
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Sticky table header */
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa;
}

/* Player row highlight */
.player-row:hover {
    background-color: #f0f7ff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sidebar {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }

    .nav-pills {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .nav-pills .nav-link {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .nav-pills .nav-link.active {
        border-left: none;
        border-bottom-color: #0d6efd;
    }
}