/**
 * Plugin Styles: Top Chef Table Maker
 * Version: 1.3
 */
.tcr-container {
    margin: 20px 0;
    font-family: "Inter", sans-serif;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
}
.tcr-filters {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    gap: 15px; /* Spacing between filter elements */
    margin-bottom: 15px;
    align-items: flex-start; /* Align items to the start of the cross axis (left) */
}
.tcr-filter-label { /* Styling for the new label */
    width: 100%; /* Make it span full width */
    font-size: 1.1em; /* Slightly larger font size */
    font-weight: 600;
    margin-bottom: 5px;
    text-align: left; /* Align left */
}
.tcr-filter-group { /* New class for wrapping label-select pairs */
    display: flex;
    flex-direction: column; /* Stack label and select vertically */
    gap: 5px;
    width: 100%; /* Take full width within the column flex container */
    min-width: 150px; /* Minimum width for filter groups */
}
.tcr-search-input {
    width: 100%; /* Take full width within the column flex container */
    padding: 8px; /* Adjusted padding for better visual */
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box; /* Ensure padding doesn\'t add to width */
}
/* Styling for the new filter dropdowns */
.tcr-filter-dropdown {
    width: 150px; /* Explicit width for desktop */
    padding: 8px; /* Consistent padding with search input */
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f8fafc;
    cursor: pointer;
    font-size: 0.9em;
    min-width: 120px; /* Adjusted min-width for dropdowns */
    height: auto; /* Allow height to adjust */
}
.tcr-filter-dropdown option {
    padding: 5px;
}

/* Custom Dropdown with Checkboxes */
.tcr-dropdown-checkbox-container {
    position: relative;
    display: inline-block; /* Allows it to sit next to other filters */
    width: 100%; /* Take full width within its filter group */
    min-width: 180px; /* Ensure a decent minimum width */
}

.tcr-dropdown-toggle {
    background-color: #f8fafc;
    color: #334155;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    width: 100%; /* Ensure button fills container */
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box; /* Include padding/border in width */
}

.tcr-dropdown-toggle:hover {
    background-color: #f1f5f9;
}

.tcr-dropdown-arrow {
    margin-left: 10px;
    transition: transform 0.2s;
}

.tcr-dropdown-arrow.tcr-arrow-up {
    transform: rotate(180deg);
}

.tcr-dropdown-content {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #fff;
    min-width: 100%; /* Match width of toggle button */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100; /* Ensure it appears above other content */
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-top: 5px; /* Space below the toggle button */
    max-height: 200px; /* Limit height for scrollability */
    overflow-y: auto; /* Enable vertical scrolling */
    box-sizing: border-box; /* Include padding/border in width */
}

.tcr-dropdown-options-wrapper {
    padding: 5px;
}

.tcr-dropdown-option {
    display: flex; /* Use flex for alignment of checkbox and label */
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.9em;
    color: #475569;
}

.tcr-dropdown-option:hover {
    background-color: #f0f4f8;
}

.tcr-dropdown-option input[type="checkbox"] {
    margin-right: 8px;
    /* Ensure checkbox is visible */
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    display: inline-block !important; /* Keep it inline with text */
    opacity: 1 !important;
    width: 16px; /* Explicit size */
    height: 16px; /* Explicit size */
    flex-shrink: 0; /* Prevent it from shrinking */
}

.tcr-loading-seasons, .tcr-error-seasons {
    padding: 10px;
    text-align: center;
    color: #64748b;
    font-style: italic;
}


.tcr-table-wrapper {
    overflow-x: auto; /* Makes the table scrollable on small screens */
    border-radius: 8px;
}
.tcr-table {
    width: 100%;
    border-collapse: collapse; /* Ensures borders are collapsed */
    min-width: 600px; /* Ensures table doesn't get too cramped */
    border: 0 !important; /* Explicitly remove table border */
    border-spacing: 0 !important; /* Ensure no spacing between cells */
    outline: 0 !important; /* Remove outlines from table */
    box-shadow: none !important; /* Remove box shadows from table */
}
.tcr-table th, .tcr-table td {
    padding: 1px; /* Reduced padding */
    text-align: center; /* Centered all td contents */
    border: 0 !important; /* Explicitly remove cell borders */
    border-style: none !important; /* Explicitly set border-style to none */
    outline: 0 !important; /* Remove outlines */
    box-shadow: none; /* Removed !important */
}
.tcr-table th {
    background-color: #f8fafc;
    color: #334155;
    font-weight: 600;
}
/* Apply sortable styles only to the Chef column header */
.tcr-table th[data-column-name="Chef"] {
    cursor: pointer; /* Indicates sortability */
    position: relative;
    user-select: none; /* Prevent text selection on click */
}
.tcr-table th:hover {
    background-color: #f1f5f9;
}
.tcr-table th[data-column-name="Chef"].asc::after { /* Applied to specific column */
    content: " ▲";
    font-size: 0.8em;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.tcr-table th[data-column-name="Chef"].desc::after { /* Applied to specific column */
    content: " ▼";
    font-size: 0.8em;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.tcr-table tbody tr {
    background-color: #ffffff; /* Default white background */
    border: 0 !important; /* Explicitly remove row borders */
    border-style: none !important; /* Explicitly set border-style to none */
    outline: 0 !important; /* Remove outlines from rows */
    box-shadow: none; /* Removed !important */
}
.tcr-table tbody tr:nth-child(even) {
    background-color: #f9fafb; /* Alternating light gray background */
}
.tcr-table tbody tr:hover {
    /* Conic gradient directly on hover with 0.5 transparency */
    background-image: conic-gradient(from 90deg at 25% -25%, rgba(255, 215, 0, 0.65), rgba(247, 157, 3, 0.65), rgba(238, 105, 7, 0.65), rgba(230, 57, 10, 0.65), rgba(222, 13, 13, 0.65), rgba(214, 16, 57, 0.65), rgba(229, 8, 41, 0.65), rgba(255, 0, 0, 0.65), rgba(229, 8, 41, 0.65), rgba(214, 16, 57, 0.65), rgba(222, 13, 13, 0.65), rgba(238, 105, 7, 0.65), rgba(247, 157, 3, 0.65), rgba(255, 215, 0, 0.65), rgba(255, 215, 0, 0.65), rgba(255, 215, 0, 0.65));
    box-shadow: inset 5px 10px 10px 40px white; /* Corrected box-shadow to version 1.0 */
    color: #475569; /* Keep text color consistent with non-hover state */
}

.tcr-table td {
    color: #475569;
}
.tcr-profile-pic {
    width: 50px; /* Smaller image size */
    height: 50px;
    border-radius: 50%; /* Make it round */
    object-fit: cover; /* Ensure image covers the area without distortion */
    display: block;
    margin: 0 auto; /* Center the image in its cell */
}
.tcr-chef-name {
    white-space: nowrap; /* Prevent text wrapping for names */
    min-width: 150px; /* Ensure enough space for names */
}
/* Styles for the nested table within the chef column */
.tcr-nested-table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent !important; /* Ensure background is transparent */
}
/* Increased specificity for nested table cells to override potential site-wide rules */
.tcr-container .tcr-table .tcr-nested-table td {
    border: 0 !important; /* Ensured 0px border with !important */
    border-style: none !important; /* Explicitly set border-style to none */
    box-shadow: none !important; /* Remove any potential box-shadows simulating borders */
    outline: 0 !important; /* Remove outlines */
    padding: 1px 0 !important; /* Reduced padding to 1px with !important */
    text-align: center; /* Changed to center align content */
    background-color: transparent !important; /* Ensure background is transparent */
}

/* Ensure nested table rows and their content do not get hover effects */
.tcr-nested-table tr,
.tcr-nested-table tr:hover {
    background-color: transparent !important; /* Keep background transparent */
    background-image: none !important; /* Remove any inherited background image */
    box-shadow: none !important; /* Remove any inherited box shadow */
    color: #475569 !important; /* Ensure text color remains consistent */
}
/* Ensure links within nested table also keep their color */
.tcr-nested-table tr:hover a {
    color: #475569 !important; /* Keep link color consistent */
}


.tcr-pagination-controls {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center items on the main axis */
    align-items: center; /* Center items on the cross axis */
    margin-top: 15px;
    gap: 10px; /* Space between the two pagination rows */
}
.tcr-pagination-buttons-row { /* New class for the buttons and info span */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Take full width within parent column flex */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
.tcr-pagination-controls button,
.tcr-pagination-controls select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f8fafc;
    cursor: pointer;
    font-size: 0.9em;
    margin: 5px; /* Keep some margin for spacing */
    color: #333; /* Darker text color for buttons */
}
.tcr-pagination-controls button:hover:not(:disabled),
.tcr-pagination-controls select:hover {
    background-color: #f1f5f9;
}
.tcr-pagination-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.tcr-pagination-row-select { /* New class for wrapping pagination label and select */
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%; /* Take full width within parent column flex */
    justify-content: center; /* Center content within this row */
}
.tcr-pagination-row-select label {
    white-space: nowrap; /* Prevent label from wrapping */
    font-size: 0.9em;
    color: #64748b;
}
.tcr-pagination-row-select select {
    flex-grow: 0;
    flex-shrink: 0;
    width: auto; /* Allow natural width for select */
    min-width: 60px; /* Give it a reasonable minimum width */
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f8fafc;
    cursor: pointer;
    font-size: 0.9em;
}
.tcr-pagination-info {
    margin: 0 10px;
    font-size: 0.9em;
    color: #64748b;
}
/* Basic responsiveness for smaller screens */
@media (max-width: 768px) {
    .tcr-container {
        padding: 10px;
    }
    .tcr-table th, .tcr-table td {
        padding: 1px; /* Reduced padding */
        font-size: 0.9em;
    }
    .tcr-search-input {
        width: 100%; /* Full width on mobile */
        min-width: unset;
        padding: 8px; /* Ensure padding is consistent */
    }
    .tcr-profile-pic {
        width: 40px;
        height: 40px;
    }
    .tcr-chef-name {
        min-width: 100px; /* Adjust for smaller screens */
    }
    .tcr-filters {
        flex-direction: column; /* Stack filters vertically on small screens */
        align-items: stretch;
    }
    .tcr-filter-group {
        width: 100%; /* Full width on mobile */
        min-width: unset;
    }
    .tcr-filter-dropdown {
        width: 100%; /* Full width on mobile */
        min-width: unset;
    }
    .tcr-dropdown-checkbox-container {
        min-width: unset; /* Remove min-width on mobile */
    }
    .tcr-dropdown-toggle {
        width: 100%; /* Full width on mobile */
    }
    .tcr-dropdown-content {
        min-width: 100%; /* Full width on mobile */
    }
    .tcr-pagination-buttons-row {
        flex-direction: column; /* Stack buttons vertically on small screens */
        align-items: center; /* Center buttons */
    }
    .tcr-pagination-controls button,
    .tcr-pagination-controls select {
        width: 100%; /* Full width for buttons/select on mobile */
        margin: 5px 0; /* Adjust margin for stacking */
    }
    .tcr-pagination-row-select {
        flex-direction: column; /* Stack label and select vertically on mobile */
        width: 100%; /* Full width on mobile */
        justify-content: center; /* Center content on mobile */
    }
}