/* Streaks Section Styles */

/* Remove top padding from top-streaks-section on home page */
.top-streaks-section {
    padding-top: 0 !important;
}

/* ============================================
   MANDATORY RULES - DO NOT REMOVE OR MODIFY
   ============================================
   
   1. Row Hover Highlight: When hovering over a table row, 
      the entire row's background color must be highlighted.
   
   2. Table Borders: The border at the bottom of the table header (thead) must always remain.
   
   3. Vertical Alignment: All text content within the rows must be 
      vertically center aligned to the row.
   
   4. Row Borders: A border line must exist between all tbody rows.
   
   5. Bold Text: Team names, market names, numbers, and action words 
      within streak descriptions must always be bold. Team names within 
      next match cells must always be bold.
      
      Bold elements include:
      - Team names
      - Market names (e.g., "over", "under", "both teams to score", 
        "both teams not to score")
      - Numbers (streak counts, goal thresholds like "1.5", "0.5", "2.5")
      - Action words: "won", "lost", "drew", "scored", "not scored"
   
   6. Column Sorting: League, Streak, Next Match, and Date columns must 
      have sortable arrow buttons placed right next to their headings.
   
   7. Default State: When the page is refreshed, "Popular" and "All" 
      tabs must be selected. Streak sorting as descending must be 
      selected by default.
      
      Implementation Notes:
      - JavaScript (streaks-filters.js) checks URL parameters on page load
      - If URL parameters don't match defaults (popular/all) OR if no 
        parameters exist, triggers AJAX call to fetch correct data
      - Always sets Popular and All buttons as active visually
      - Updates URL to reflect active filters using history.replaceState
      - Default sort state: column='streak', direction='desc'
      - Sort is applied after table data is loaded (with setTimeout check)
      - Template (streaks.html) also checks for empty/None filters and 
        defaults to active state for Popular and All buttons
   
   ============================================ */

.streaks-section {
    background-color: var(--color-background, #f8f9fa);
    min-height: 80vh;
}

.streaks-filters {
    background: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    margin-bottom: 32px;
}

.streak-type-filters,
.streak-date-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.streak-type-btn,
.streak-date-btn {
    padding: 8px 16px;
    border: 1px solid #dee2e6;
    background: white;
    color: var(--color-primary, #2c3e50);
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
    cursor: pointer;
}

.streak-type-btn:hover,
.streak-date-btn:hover {
    background: var(--color-primary, #2c3e50);
    color: white;
    border-color: var(--color-primary, #2c3e50);
}

.streak-type-btn.active,
.streak-date-btn.active {
    background: var(--color-primary, #2c3e50);
    color: white;
    border-color: var(--color-primary, #2c3e50);
}

.streaks-table-container {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    overflow-x: auto;
}

.streaks-table-container .card-body {
    padding: 0;
}

.streaks-table {
    margin-bottom: 0 !important;
    /* Fixed table layout prevents column width recalculation during content changes */
    table-layout: fixed !important;
    width: 100% !important;
    /* Prevent any layout shifts */
    border-collapse: separate;
    border-spacing: 0;
}

.streaks-table thead {
    background-color: #f8f9fa;
    color: #374151;
}

.streaks-table thead th {
    background-color: #f8f9fa !important;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb !important; /* MANDATORY RULE #2: Header border must always remain */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 4px !important; /* 4px - same as tbody cells */
    padding-right: 4px !important; /* 4px - same as tbody cells */
    text-align: left;
    font-family: var(--font-family-heading, 'Montserrat', sans-serif);
    /* Fixed column widths to prevent header shifting - using !important to override Bootstrap */
    box-sizing: border-box !important;
}

.streaks-table thead th:nth-child(1) {
    width: 18% !important; /* League - responsive percentage */
    min-width: 15% !important;
    max-width: 25% !important;
    padding-left: 8px !important; /* Additional left padding for League heading */
}

.streaks-table thead th:nth-child(2) {
    width: 45% !important; /* Streak - responsive percentage */
    min-width: 35% !important;
    max-width: 50% !important;
}

.streaks-table thead th:nth-child(3) {
    width: 22% !important; /* Next Match - responsive percentage */
    min-width: 18% !important;
    max-width: 28% !important;
}

.streaks-table thead th:nth-child(4) {
    width: 15% !important; /* Date - responsive percentage */
    min-width: 12% !important;
    max-width: 20% !important;
}

/* MANDATORY RULE #6: Sortable columns with arrow buttons */
.streaks-table thead th.sortable {
    cursor: pointer;
    user-select: none;
}

/* Header row hover is excluded - only sortable functionality, no background change */
/* No CSS needed - header hover is intentionally disabled */

.streaks-table thead th .sort-arrow {
    display: inline-block;
    margin-left: 4px;
}

.streaks-table thead th .sort-icon {
    font-size: 12px;
    color: #9ca3af;
    transition: color 0.2s;
}

.streaks-table thead th.sortable:hover .sort-icon {
    color: #374151;
}

.streaks-table thead th.sortable.sort-asc .sort-icon::before {
    content: "\f0de"; /* fa-sort-up */
    color: #374151;
}

.streaks-table thead th.sortable.sort-desc .sort-icon::before {
    content: "\f0dd"; /* fa-sort-down */
    color: #374151;
}

/* MANDATORY RULE #3: All text content vertically center aligned */
/* MANDATORY RULE #4: Border line between all tbody rows */
.streaks-table tbody td {
    box-sizing: border-box !important;
    padding: 16px;
    vertical-align: middle !important; /* MANDATORY RULE #3: Vertically center aligned */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e5e7eb !important; /* MANDATORY RULE #4: Border line between rows */
    background-color: transparent !important; /* MANDATORY RULE #1: Ensure cells don't block row hover */
    /* Ensure cells match header widths */
    display: table-cell !important; /* MANDATORY RULE #3: Use table-cell for proper vertical alignment */
}

/* MANDATORY RULE #4: Ensure rows don't override cell borders */
.streaks-table tbody tr {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* MANDATORY: Ensure cells remain transparent on hover so row background shows */
.table.streaks-table tbody tr:hover td,
.streaks-table tbody tr:hover td {
    background-color: transparent !important;
}

/* MANDATORY RULE #3: Ensure first cell (league) matches row height and centers content */
/* Desktop responsive widths - only for full streaks page, not home page top-streaks-section */
.streaks-section .streaks-table tbody td:nth-child(1),
.streaks-section .streaks-table tbody td.league-cell {
    width: 18% !important; /* League - responsive percentage */
    min-width: 15% !important;
    max-width: 25% !important;
    padding-left: 8px !important; /* Additional left padding for League cells */
    /* Allow league names to wrap if needed */
    white-space: normal;
    overflow: visible;
    /* MANDATORY RULE #3: Match row height - use table-cell display for proper height matching */
    display: table-cell !important;
    vertical-align: middle !important;
}

.streaks-section .streaks-table tbody td:nth-child(2) {
    width: 45% !important; /* Streak - responsive percentage */
    min-width: 35% !important;
    max-width: 50% !important;
    white-space: normal; /* Allow text wrapping for streak description */
    overflow: visible;
}

.streaks-section .streaks-table tbody td:nth-child(3) {
    width: 22% !important; /* Next Match - responsive percentage */
    min-width: 18% !important;
    max-width: 28% !important;
    white-space: normal;
    overflow: visible;
}

.streaks-section .streaks-table tbody td:nth-child(4) {
    width: 15% !important; /* Date - responsive percentage */
    min-width: 12% !important;
    max-width: 20% !important;
    white-space: normal;
    overflow: visible;
}

/* Desktop responsive widths for top-streaks-section (home page) */
.top-streaks-section .streaks-table thead th:nth-child(1),
.top-streaks-section .streaks-table tbody td:nth-child(1),
.top-streaks-section .streaks-table tbody td.league-cell {
    width: 18% !important;
    min-width: 15% !important;
    max-width: 25% !important;
}

.top-streaks-section .streaks-table thead th:nth-child(2),
.top-streaks-section .streaks-table tbody td:nth-child(2),
.top-streaks-section .streaks-table tbody td.streak-description {
    width: 45% !important;
    min-width: 35% !important;
    max-width: 50% !important;
}

.top-streaks-section .streaks-table thead th:nth-child(3),
.top-streaks-section .streaks-table tbody td:nth-child(3),
.top-streaks-section .streaks-table tbody td.next-match-cell {
    width: 22% !important;
    min-width: 18% !important;
    max-width: 28% !important;
}

.top-streaks-section .streaks-table thead th:nth-child(4),
.top-streaks-section .streaks-table tbody td:nth-child(4),
.top-streaks-section .streaks-table tbody td.date-cell {
    width: 15% !important;
    min-width: 12% !important;
    max-width: 20% !important;
}

/* MANDATORY RULE #1: When hovering over a table row, the entire row's background color must be highlighted */
.table.streaks-table tbody tr:hover,
.streaks-table tbody tr:hover {
    background-color: #e9ecef !important; /* Darker tone for better visibility */
}

/* MANDATORY RULE #3: Ensure league cell content is vertically centered */
/* The TD itself must be table-cell to match row height when other cells wrap */
/* Only for full streaks page, not home page top-streaks-section */
.streaks-section .streaks-table tbody td.league-cell {
    font-weight: 500;
    font-size: 13.6px;
    /* MANDATORY RULE #3: Use table-cell for proper vertical alignment with row height */
    display: table-cell !important;
    vertical-align: middle !important;
    /* Reduced padding */
    padding-top: 0.5rem !important; /* 8px */
    padding-bottom: 0.5rem !important; /* 8px */
    padding-left: 8px !important; /* 8px - specific padding for League cells */
    padding-right: 0.25rem !important; /* 4px */
    /* Allow league names to wrap and be fully visible */
    white-space: normal !important;
    overflow: visible !important;
    word-wrap: break-word;
}

/* Ensure flag icon and text are inline and vertically aligned */
.streaks-table tbody td.league-cell .flag-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.streaks-table tbody td.league-cell {
    line-height: 1.5;
}

/* Hide date-below-next-match on desktop; shown only on mobile */
.top-streaks-section .streaks-table tbody td.next-match-cell .next-match-date-mobile {
    display: none;
}

.league-cell .flag-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    flex-shrink: 0;
}

.streak-description {
    color: var(--color-secondary, #34495e);
    font-size: 13.6px;
    /* Reduced padding */
    padding-top: 8px !important; /* 8px */
    padding-bottom: 8px !important; /* 8px */
    padding-left: 4px !important; /* 4px */
    padding-right: 4px !important; /* 4px */
}

.next-match-cell {
    color: var(--color-secondary, #34495e);
    font-size: 13.6px;
    /* Reduced padding */
    padding-top: 8px !important; /* 8px */
    padding-bottom: 8px !important; /* 8px */
    padding-left: 4px !important; /* 4px */
    padding-right: 4px !important; /* 4px */
}

.next-match-cell .text-muted {
    font-size: 12px;
    font-weight: 500;
}

.date-cell {
    color: var(--color-muted, #6c757d);
    font-size: 12.8px;
    /* Reduced padding */
    padding-top: 8px !important; /* 8px */
    padding-bottom: 8px !important; /* 8px */
    padding-left: 4px !important; /* 4px */
    padding-right: 4px !important; /* 4px */
}

/* Responsive Design */
@media (max-width: 768px) {
    .streaks-filters {
        padding: 16px;
    }
    
    .streak-type-btn,
    .streak-date-btn {
        padding: 0.4rem 0.8rem;
        font-size: 13.6px;
    }
    
    /* Mobile: Responsive percentage-based widths */
    .top-streaks-section .streaks-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Mobile: Use percentage-based widths that scale with screen */
    .top-streaks-section .streaks-table {
        table-layout: fixed !important;
        width: 100% !important;
    }
    
    /* Mobile: Responsive percentage widths for all cells */
    .top-streaks-section .streaks-table thead th:nth-child(1),
    .top-streaks-section .streaks-table tbody td.league-cell,
    .top-streaks-section .streaks-table tbody tr td.league-cell,
    .top-streaks-section .streaks-table tbody tr td:nth-child(1),
    .top-streaks-section .streaks-table tbody td:nth-child(1) {
        width: 22% !important; /* League - responsive percentage for mobile */
        min-width: 18% !important;
        max-width: 28% !important;
        font-size: 12px;
    }
    
    .top-streaks-section .streaks-table thead th:nth-child(2),
    .top-streaks-section .streaks-table tbody td.streak-description,
    .top-streaks-section .streaks-table tbody tr td.streak-description,
    .top-streaks-section .streaks-table tbody tr td:nth-child(2),
    .top-streaks-section .streaks-table tbody td:nth-child(2) {
        width: 38% !important; /* Streak - responsive percentage for mobile */
        min-width: 30% !important;
        max-width: 45% !important;
        font-size: 11.2px;
    }
    
    .top-streaks-section .streaks-table thead th:nth-child(3),
    .top-streaks-section .streaks-table tbody td.next-match-cell,
    .top-streaks-section .streaks-table tbody tr td.next-match-cell,
    .top-streaks-section .streaks-table tbody tr td:nth-child(3),
    .top-streaks-section .streaks-table tbody td:nth-child(3) {
        width: 25% !important; /* Next Match - responsive percentage for mobile */
        min-width: 20% !important;
        max-width: 30% !important;
        font-size: 11.2px;
    }
    
    .top-streaks-section .streaks-table thead th:nth-child(4),
    .top-streaks-section .streaks-table tbody td.date-cell,
    .top-streaks-section .streaks-table tbody tr td.date-cell,
    .top-streaks-section .streaks-table tbody tr td:nth-child(4),
    .top-streaks-section .streaks-table tbody td:nth-child(4) {
        width: 15% !important; /* Date - responsive percentage for mobile */
        min-width: 12% !important;
        max-width: 20% !important;
        font-size: 0.65rem;
    }
    
    /* Mobile: compact padding; min-height 0 so rows size to content */
    .top-streaks-section .streaks-table thead th,
    .top-streaks-section .streaks-table tbody td {
        padding: 0.5rem 0.4rem !important;
        font-size: 12px;
        min-height: 0 !important;
    }
    
    .top-streaks-section .streaks-table tbody tr {
        min-height: 0 !important;
    }
    
    .top-streaks-section .streaks-table tbody td.league-cell .flag-icon {
        width: 16px;
        height: 16px;
    }
}

/* Below 576px: shrink League column to flags-only, redistribute space equally – MUST come after 768px to override */
@media (max-width: 575.98px) {
    .top-streaks-section .streaks-table thead th:nth-child(1),
    .top-streaks-section .streaks-table tbody td.league-cell,
    .top-streaks-section .streaks-table tbody tr td.league-cell,
    .top-streaks-section .streaks-table tbody tr td:nth-child(1),
    .top-streaks-section .streaks-table tbody td:nth-child(1) {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
    }
    
    .top-streaks-section .streaks-table thead th:nth-child(1) {
        overflow: hidden !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px !important;
    }
    
    .top-streaks-section .streaks-table tbody td.league-cell .league-name-text {
        display: none !important;
    }
    
    .top-streaks-section .streaks-table tbody td.league-cell .flag-icon {
        margin-right: 0 !important;
    }
    
    /* Date column: hide on mobile, content moved below Next Match.
       Zero the date cell content so it cannot add to row height (collapsed cell
       with content can still drive row height in some browsers). */
    .top-streaks-section .streaks-table thead th:nth-child(4),
    .top-streaks-section .streaks-table tbody td.date-cell,
    .top-streaks-section .streaks-table tbody tr td.date-cell,
    .top-streaks-section .streaks-table tbody tr td:nth-child(4),
    .top-streaks-section .streaks-table tbody td:nth-child(4) {
        visibility: collapse !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    
    /* Next Match: gets Date column's space; date content shown below via .next-match-date-mobile */
    .top-streaks-section .streaks-table thead th:nth-child(3),
    .top-streaks-section .streaks-table tbody td.next-match-cell,
    .top-streaks-section .streaks-table tbody tr td.next-match-cell,
    .top-streaks-section .streaks-table tbody tr td:nth-child(3),
    .top-streaks-section .streaks-table tbody td:nth-child(3) {
        width: 36.25% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    
    /* Next Match cell: stack date below content on mobile */
    .top-streaks-section .streaks-table tbody td.next-match-cell {
        display: table-cell !important;
        vertical-align: middle !important;
    }
    
    .top-streaks-section .streaks-table tbody td.next-match-cell .next-match-content {
        display: block;
        height: auto !important;
        min-height: 0 !important;
    }
    
    .top-streaks-section .streaks-table tbody td.next-match-cell .next-match-date-mobile {
        display: block !important;
        margin-top: 2px;
        font-size: 0.7em;
        color: var(--color-muted, #6c757d);
        height: auto !important;
        min-height: 0 !important;
    }
    
    /* Inner elements: no fixed/min height or margin – content drives row height */
    .top-streaks-section .streaks-table tbody td.streak-description div,
    .top-streaks-section .streaks-table tbody td.streak-description p,
    .top-streaks-section .streaks-table tbody td.next-match-cell div,
    .top-streaks-section .streaks-table tbody td.next-match-cell p {
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }
    
    /*
     * CSS-only: rows size to content. Same padding as 768px so height behaves consistently.
     * No clamp – fixed moderate padding. min-height: 0 so nothing forces extra height.
     */
    .top-streaks-section .streaks-table thead th,
    .top-streaks-section .streaks-table tbody td,
    .top-streaks-section .streaks-table tbody td.league-cell,
    .top-streaks-section .streaks-table tbody td.streak-description,
    .top-streaks-section .streaks-table tbody td.next-match-cell {
        padding: 0.5rem 0.4rem !important;
        line-height: 1.25 !important;
        font-size: 12px !important;
        min-height: 0 !important;
    }
    
    .top-streaks-section .streaks-table tbody tr {
        min-height: 0 !important;
    }
    
    /* Streak: unchanged */
    .top-streaks-section .streaks-table thead th:nth-child(2),
    .top-streaks-section .streaks-table tbody td.streak-description,
    .top-streaks-section .streaks-table tbody tr td.streak-description,
    .top-streaks-section .streaks-table tbody tr td:nth-child(2),
    .top-streaks-section .streaks-table tbody td:nth-child(2) {
        width: calc(63.75% - 36px) !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Round flag icons */
.flag-icon {
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-block;
    vertical-align: middle;
    object-fit: cover;
}

/* Skeleton Loader Styles */
.skeleton-loader {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
}

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

.skeleton-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.skeleton-text {
    height: 0.85rem;
    border-radius: 4px;
    margin: 0.15rem 0;
    display: inline-block;
    vertical-align: middle;
}

.skeleton-text-short {
    width: 60%;
}

.skeleton-text-medium {
    width: 80%;
}

.skeleton-text-long {
    width: 100%;
}

.skeleton-row td {
    padding: 0.5rem 0.25rem !important;
    vertical-align: middle !important;
}

.skeleton-row .league-cell {
    padding-left: 8px !important;
}

.skeleton-row .league-cell .skeleton-text {
    display: inline-block;
}

.skeleton-row .streak-description .skeleton-text {
    display: block;
    width: 100%;
}

.skeleton-row .streak-description .skeleton-text-short {
    width: 70%;
    margin-top: 0.25rem;
}

/* Scroll to Top Button */
.scroll-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--color-primary, #2c3e50);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    transform: translateY(20px);
}

/* Temporary: Uncomment this to test if button appears (for debugging) */
/* .scroll-to-top-btn {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
} */

.scroll-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top-btn:hover {
    background-color: var(--color-primary, #1a2639);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transform: translateY(-3px);
}

.scroll-to-top-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.scroll-to-top-btn i {
    display: block;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .scroll-to-top-btn {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
}