/* tables.css - Styles specific to table pages */

/* ========================================
   FULL WIDTH LAYOUT - Consistent with other pages
   ======================================== */

/* Override base template container constraints for full width */
#main-content:has(#weekly-points-container),
#main-content:has(#league-tables-container),
#main-content:has(#waivers-container),
#main-content:has(#position-stats-container),
#main-content:has(#team-stats-container),
#main-content:has(#position-chart-container) {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Make navbar full width when on tables page */
body:has(#weekly-points-container) .navbar .container,
body:has(#league-tables-container) .navbar .container,
body:has(#waivers-container) .navbar .container,
body:has(#position-stats-container) .navbar .container,
body:has(#team-stats-container) .navbar .container,
body:has(#position-chart-container) .navbar .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Fallback for browsers that don't support :has() */
#main-content.tables-page,
#main-content.league-tables-page,
#main-content.waivers-page,
#main-content.position-stats-page,
#main-content.team-stats-page,
#main-content.position-chart-page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fallback navbar styling for browsers that don't support :has() */
body.tables-page .navbar .container,
body.league-tables-page .navbar .container,
body.waivers-page .navbar .container,
body.position-stats-page .navbar .container,
body.team-stats-page .navbar .container,
body.position-chart-page .navbar .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Make the container use full width */
#weekly-points-container.container-fluid,
#league-tables-container.container-fluid,
#waivers-container.container-fluid,
#position-stats-container.container-fluid,
#team-stats-container.container-fluid,
#position-chart-container.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: none !important;
    width: 100% !important;
}

/* Direct container targeting for more specificity */
#position-stats-container,
#team-stats-container, 
#position-chart-container {
    max-width: none !important;
    width: 100% !important;
}

/* Force main content container to full width for these specific pages */
body:has(#position-stats-container) #main-content,
body:has(#team-stats-container) #main-content,
body:has(#position-chart-container) #main-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force navbar to full width for these specific pages */
body:has(#position-stats-container) .navbar,
body:has(#team-stats-container) .navbar,
body:has(#position-chart-container) .navbar {
    width: 100% !important;
}

body:has(#position-stats-container) .navbar .container,
body:has(#team-stats-container) .navbar .container,
body:has(#position-chart-container) .navbar .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Enhanced fallback targeting for specific pages */
body.position-stats-page #main-content,
body.team-stats-page #main-content,
body.position-chart-page #main-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Override Bootstrap container class specifically */
body.position-stats-page #main-content.container,
body.team-stats-page #main-content.container,
body.position-chart-page #main-content.container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.position-stats-page .navbar .container,
body.team-stats-page .navbar .container,
body.position-chart-page .navbar .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Very specific targeting for position stats page */
body.position-stats-page {
    overflow-x: hidden;
}

body.position-stats-page * {
    box-sizing: border-box;
}

body.position-stats-page #main-content {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.position-stats-page #position-stats-container {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* ========================================
   POSITION STATS PAGE SPECIFIC STYLES
   ======================================== */

/* Position stats table improvements */
#position-stats-table {
    font-size: 0.95rem;
}

/* Column widths for better proportions */
.position-team-col {
    width: 20%;
    min-width: 150px;
}

.position-stat-col {
    width: 12%;
    min-width: 100px;
}

.position-total-col {
    width: 15%;
    min-width: 120px;
}

/* Enhanced header styling */
.position-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.position-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Team cell styling */
.position-team-cell {
    padding: 1rem 0.75rem;
}

.team-link {
    color: inherit;
    text-decoration: none;
    display: block;
    padding: 0.25rem 0;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.team-link:hover {
    color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.1);
    padding-left: 0.5rem;
    text-decoration: none;
}

/* Stat cell enhancements */
.position-stat-cell,
.position-total-cell {
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
}

.stat-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-points {
    font-weight: 600;
    font-size: 1rem;
}

.stat-percentage {
    font-size: 0.8rem;
    transition: opacity 0.2s ease;
}

.total-points {
    font-size: 1.1rem;
    font-weight: 700;
    color: #198754;
}

/* Hide percentages when toggle is off */
.hide-percentages .stat-percentage {
    display: none;
}

/* Row hover effects */
.position-row:hover {
    background-color: rgba(13, 110, 253, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Sort indicators */
.position-header .sort-arrow {
    margin-left: 0.5rem;
    opacity: 0.5;
    font-size: 0.8rem;
}

.position-header.sorted .sort-arrow {
    opacity: 1;
    color: #ffc107;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .position-team-col {
        width: 25%;
        min-width: 120px;
    }
    
    .position-stat-col {
        width: 12.5%;
        min-width: 80px;
    }
    
    .position-header i {
        display: none;
    }
    
    .stat-display {
        gap: 1px;
    }
    
    .stat-points {
        font-size: 0.9rem;
    }
    
    .stat-percentage {
        font-size: 0.7rem;
    }
    
    .total-points {
        font-size: 1rem;
    }
}


/* ========================================
   TABLE IMPROVEMENTS
   ======================================== */

/* Table Titles */
.table-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Table Row Styling */
.top-four-row {
    background-color: rgba(0, 123, 255, 0.1) !important;
}

.bottom-two-rows {
    background-color: rgba(255, 0, 0, 0.1) !important;
}

/* Border styling */
.border-bottom-dotted {
    border-bottom: 2px dotted #6c757d !important;
}

.border-top-dotted {
    border-top: 2px dotted #6c757d !important;
}

.border-bottom-bold {
    border-bottom: 3px solid #6c757d !important;
}

.border-top-bold {
    border-top: 3px solid #6c757d !important;
}

/* Team name column */
.team-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Current week highlighting */
.current-week {
    background-color: #e3f2fd !important;
    font-weight: 600;
    border: 2px solid #2196f3 !important;
}

/* Highest and Lowest Score Highlighting */
.highest-score {
    background-color: #28a745 !important;
    color: white !important;
    font-weight: bold;
}

.lowest-score {
    background-color: #dc3545 !important;
    color: white !important;
    font-weight: bold;
}

/* Sticky column improvements */
.sticky-col {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background-color: white !important;
    border-right: 2px solid #dee2e6 !important;
    min-width: 140px;
    max-width: 140px;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Narrow position column - just wide enough for rank numbers */
.position-col {
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    max-width: 2.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Narrow stat columns for compact tables (P, W, D, L) */
.narrow-col {
    width: 1.75rem !important;
    min-width: 1.75rem !important;
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
}

/* Match Details Modal */
.week-details-modal .modal-body {
    padding: 1rem;
}

/* Ensure hover effects work with highlighting */
.top-four-row:hover > *,
.bottom-two-rows:hover > * {
    background-color: rgba(0,0,0,.075) !important;
}

/* Make the sticky column background match the row */
.table-striped > tbody > tr:nth-of-type(odd) > .sticky-col {
    background-color: rgba(0,0,0,.05);
}

.table-striped > tbody > tr:nth-of-type(even) > .sticky-col {
    background-color: white;
}

.table-hover > tbody > tr:hover > .sticky-col {
    background-color: rgba(0,0,0,.075);
}

/* ========================================
   ENHANCED MOBILE RESPONSIVENESS
   ======================================== */

/* Tablet and up - better table spacing */
@media (min-width: 768px) {
    .table th, .table td {
        padding: 0.75rem 0.5rem;
    }
    
    .table-responsive {
        border-radius: 0.5rem;
        border: 1px solid #dee2e6;
    }
}

/* Mobile portrait optimizations */
@media (max-width: 768px) {
    #weekly-points-container.container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .table-title {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    /* Make sticky column smaller on mobile */
    .sticky-col {
        min-width: 100px !important;
        max-width: 100px !important;
        font-size: 0.75rem !important;
        padding: 0.375rem 0.25rem !important;
    }

    /* Smaller week columns on mobile - but keep team names left-aligned */
    .table th:not(.sticky-col):not(.team-name),
    .table td:not(.sticky-col):not(.team-name) {
        padding: 0.375rem 0.25rem;
        font-size: 0.75rem;
        min-width: 35px;
        text-align: center;
    }

    /* Team name stays left-aligned on mobile */
    .table .team-name {
        text-align: left !important;
        padding-left: 0.5rem !important;
    }

    /* Position column compact on mobile */
    .position-col {
        width: 1.75rem !important;
        min-width: 1.75rem !important;
        max-width: 1.75rem !important;
        padding: 0.25rem !important;
        font-size: 0.75rem !important;
    }

    /* League tables - show more columns on mobile */
    #league-tables-container .table th,
    #league-tables-container .table td {
        padding: 0.35rem 0.25rem;
        font-size: 0.8rem;
    }

    /* Better current week visibility on mobile */
    .current-week {
        border: 1px solid #2196f3 !important;
        font-weight: 700;
    }

    /* Adjust badge sizes for mobile */
    .badge {
        font-size: 0.7rem;
        padding: 0.3em 0.5em;
    }

    /* Very small screens - rely on horizontal scroll for all weeks */
    @media (max-width: 576px) {
        .sticky-col {
            min-width: 80px !important;
            max-width: 80px !important;
            font-size: 0.7rem !important;
        }

        /* Even smaller position column on very small screens */
        .position-col {
            width: 1.5rem !important;
            min-width: 1.5rem !important;
            max-width: 1.5rem !important;
            font-size: 0.7rem !important;
        }
    }
}

/* Horizontal scroll improvements - minimal styling */
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #6c757d #e9ecef;
}

.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #e9ecef;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #6c757d;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #495057;
}

/* ========================================
   DISABLE ALL ANIMATIONS FOR PERFORMANCE
   ======================================== */

/* Override HTMX indicators on tables page */
#weekly-points-container .htmx-indicator {
    transition: none !important;
    opacity: 1 !important;
}

/* Disable all CSS transitions and animations */
#weekly-points-container *,
#weekly-points-container *::before,
#weekly-points-container *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

/* Remove all transforms */
#weekly-points-container * {
    transform: none !important;
}

/* ========================================
   INTERACTIVE IMPROVEMENTS
   ======================================== */

/* Better hover effects - no animations */
.table-hover tbody tr:hover {
    background-color: rgba(0,123,255,0.075) !important;
    cursor: pointer;
}

/* Enhanced week column hover */
.table th:hover {
    background-color: rgba(0,123,255,0.1);
    cursor: pointer;
}

/* Click feedback for cells */
.table td:hover {
    box-shadow: inset 0 0 0 1px rgba(0,123,255,0.25);
}

/* Loading states - no animations */
.table-loading {
    opacity: 0.6;
    pointer-events: none;
}