/* Container Panel */
.wmb-panel {
    background-color: rgba(25, 27, 29, 0.7); /* Match that deep charcoal/translucent look */
    border: 1px solid #333;
    border-radius: 4px;
}

/* Header Styling */
.wmb-panel-header {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .wmb-panel-header:hover {
        background-color: rgba(255, 255, 255, 0.03);
    }

/* Typography matching f9f20b.png */
.header-text-group {
    letter-spacing: 0.5px;
    font-size: 1.1rem;
}

.action-link {
    font-size: 0.75rem; /* Smaller "View Details" text */
    vertical-align: middle;
}

/* Icon Rotation */
.transition-icon {
    transition: transform 0.3s ease;
}

.wmb-panel-header:not(.collapsed) .transition-icon {
    transform: rotate(180deg);
}

/* Responsive Mobile Tweaks */
@media (max-width: 768px) {
    .header-text-group {
        font-size: 0.9rem;
        display: flex;
        flex-direction: column; /* Stack title and blue link on small screens */
    }

    .action-link {
        margin-left: 0 !important;
        margin-top: 2px;
    }
}

/* Container that handles the horizontal overflow */
. /* Container must allow the wrapper to breathe */
.season-nav-container {
    position: relative;
    width: 100%;
    padding: 0 10px;
}

/* Updated Scroll Wrapper */
.season-scroll-wrapper {
    display: flex;
    overflow-x: auto; /* Required for desktop scroll */
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 12px; /* Space for the scrollbar */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

    /* Style the scrollbar so it fits the WMB Dark Theme */
    .season-scroll-wrapper::-webkit-scrollbar {
        height: 4px; /* Thin and subtle */
    }

    .season-scroll-wrapper::-webkit-scrollbar-track {
        background: #1a1c1e;
    }

    .season-scroll-wrapper::-webkit-scrollbar-thumb {
        background: #333; /* Subtle grey */
        border-radius: 10px;
    }

    .season-scroll-wrapper::-webkit-scrollbar-thumb:hover {
        background: #007bff; /* Turns blue when interacting */
    }
    

/* Button Styling matching your theme */
.btn-season {
    background-color: transparent;
    border: 1px solid #333639;
    color: #888;
    padding: 8px 24px;
    margin-right: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex: 0 0 auto; /* Prevents buttons from shrinking */
}

    .btn-season:hover {
        border-color: #007bff;
        color: #fff;
    }

    .btn-season.active {
        background-color: #007bff;
        border-color: #007bff;
        color: #fff;
        font-weight: bold;
    }
.season-nav-container #scrollNext:last-child {
    margin-left: auto !important;
}

/* Optional: Subtle right-side fade hint */
.season-nav-container::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.5));
    pointer-events: none;
}

/* Vertical Divider for Desktop */
@media (min-width: 992px) {
    .border-end-lg {
        border-right: 1px solid #333 !important;
    }
}

/* Style for the "Next Event" alert box */
.alert-primary {
    background-color: rgba(0, 123, 255, 0.2) !important;
    border-left: 4px solid #007bff !important;
    border-radius: 2px;
}

/* Small adjustments to additional details links */
.text-white-50 a {
    color: #007bff;
    text-decoration: none;
    border-bottom: 1px dashed #007bff;
}

    .text-white-50 a:hover {
        color: #fff;
        border-bottom-style: solid;
    }

/* Table Reset & Dark Theme */
/* Base Table Styling */
.wmb-responsive-table {
    color: #fff;
    border-collapse: collapse;
}

.highlight-blue {
    color: #007bff !important;
    font-weight: bold;
}
.wmb-responsive-table td, .wmb-responsive-table th {
    text-align: end !important;
}


/* Mobile Transformation (768px and below) */
@media (max-width: 768px) {
    /* ... Keep your Rank and Team Name CSS as is ... */
    thead { display:none; visibility:hidden;}
    /* Change the container of the stats to act like a grid row */
    .wmb-responsive-table tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns for stats */
        grid-template-areas:
            "header header header"
            "stat1 stat2 stat3";
    }

    /* Assign Rank/Team to span the full top row */
    .wmb-responsive-table td[data-label="Rank"] {
        grid-area: header;
        width: 45px !important;
    }

    .wmb-responsive-table td[data-label="Team"] {
        grid-area: header;
        width: calc(100% - 45px) !important;
        margin-left: 45px;
    }

    /* Redefine stat-cols to stack Label over Value */
    .wmb-responsive-table td.stat-col {
        display: flex !important;
        flex-direction: column; /* Stacks label on top of value */
        align-items: center; /* Centers text in the "column" */
        justify-content: center;
        padding: 12px 5px !important;
        border: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
        background: transparent;
    }

        /* Remove border from the last stat to keep it clean */
        .wmb-responsive-table td.stat-col:last-child {
            border-right: none !important;
        }

        /* Style the labels as "Headers" above the value */
        .wmb-responsive-table td.stat-col::before {
            content: attr(data-label);
            display: block;
            color: #888;
            font-size: 0.65rem;
            letter-spacing: 0.5px;
            margin-bottom: 4px; /* Space between label and value */
            text-align: center;
        }

    /* Force the value to align under the label */
    .wmb-responsive-table td.stat-col {
        text-align: center !important;
        font-size: 0.9rem;
    }

    td[data-day-label] {
        position: relative !important;
        /* Increase padding to ensure the vertical label doesn't overlap data */
        padding-left: 45px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        /* This handles your EXISTING "# Fish" label (Top Label) */
        td[data-day-label]::before {
            content: attr(data-label);
            display: block;
            font-size: 0.65rem;
            color: #888;
            margin-bottom: 4px;
            text-transform: uppercase;
        }

        /* This handles the NEW vertical "Day X" label (Side Label) */
        td[data-day-label]::after {
            content: attr(data-day-label);
            /* Positioning logic to pin it to the left */
            position: absolute;
            left: 8px;
            top: 50%;
            /* The 90-degree rotation */
            transform: translateY(-50%) rotate(-90deg);
            transform-origin: center;
            /* Styling to match your rugged theme */
            font-family: 'Oswald', sans-serif;
            font-size: 0.6rem;
            color: #555; /* Slightly darker to distinguish from the top label */
            letter-spacing: 1px;
            white-space: nowrap;
            text-transform: uppercase;
            pointer-events: none;
        }
    /* 1. Ensure the row can accommodate the spanning columns */
    .wmb-responsive-table tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* We don't strictly need grid-template-areas if we use grid-column */
    }

    /* 2. Points takes the first column */
    .wmb-responsive-table td[data-label="Points"] {
        grid-column: 1 / 2;
        
    }

    /* 3. Earnings takes all remaining space (Columns 2 and 3) */
    .wmb-responsive-table td[data-label="Earnings"] {
        grid-column: 2 / 4; /* Starts at line 2, ends at line 4 */
        width: 100% !important;
        /* Re-enforce the standard stacked layout */
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        padding: 12px 5px !important;        
        border-right: none !important;
    }
    .wmb-responsive-table td.final-stat {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

        /* 4. Ensure the Earnings badges wrap or stack neatly if there are many */
        .wmb-responsive-table td[data-label="Earnings"] .badge {
            margin: 2px 0;
            display: inline-block;
        }

    .earnings-wrapper {
        display: flex;
        flex-direction: row; /* Forces horizontal layout */
        gap: 5px; /* Adds space between the $1000 and $250 badges */
        justify-content: center;
        width: 100%;
    }

        /* Optional: Ensure badges don't shrink */
        .earnings-wrapper .badge {
            flex: 0 0 auto;
        }

        
}


/* Container for the sponsor tiles */
.wmb-sponsor-container {
    padding: 0 15px;
}

/* Individual Tile Styling */
.sponsor-tile {
    flex: 0 0 calc(33.333% - 1rem); /* Default 3 per row for small/medium screens */
    max-width: 80px; /* Limits size on large desktops */
    aspect-ratio: 1 / 1; /* Forces square ratio */
    background-color: #fff; /* High contrast background for logos */
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

    .sponsor-tile:hover {
        transform: translateY(-3px);
        border-color: #007bff; /* Branded blue highlight on hover */
    }

    .sponsor-tile img {
        max-height: 100%;
        width: auto;
        object-fit: contain; /* Ensures logo isn't distorted within the square */
    }

/* Responsive Adjustments */
@media (min-width: 992px) {
    .sponsor-tile {
        flex: 0 0 calc(16.666% - 1rem); /* Tiles all 6 across on large screens */
    }
}

@media (max-width: 576px) {
    .sponsor-tile {
        flex: 0 0 calc(50% - 1rem); /* 2 per row on very small mobile devices */
    }
}