/* Custom Styles for Deportix Landing Page */

:root {
    /* Default colors - these will be overridden by config.js */
    --color-primary: #1e3a8a; /* blue-900 */
    --color-secondary: #1e40af; /* blue-800 */
    --color-accent: #f59e0b; /* amber-500 */
}

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

/* Table styling enhancements */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

/* Goleadores: alto de unas 10 filas; el resto se ve con scroll interno */
.scorers-scroll {
    max-height: 36rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.scorers-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f9fafb;
    box-shadow: 0 1px 0 #e5e7eb;
}

tbody tr:hover {
    background-color: #f9fafb;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1; 
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; 
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Highlight row (e.g. for user's team if needed later) */
.highlight-row {
    background-color: rgba(245, 158, 11, 0.1) !important;
    font-weight: 600;
}

/* Modern Football Themed Loading Overlay */
#loading-overlay {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#loading-overlay.overlay-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spinSlow 4s linear infinite;
}

@keyframes loadingBar {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(50%); }
    100% { transform: translateX(200%); }
}

.animate-loading-bar {
    width: 60%;
    animation: loadingBar 1.6s ease-in-out infinite;
}

.loading-dots::after {
    content: '.';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}