/* Base styling for the Google Sheet Table */
/* The .gstp-table-wrapper class itself will now often be combined with an ID selector */
/* .dataTables_wrapper is also a part of the wrapper that needs the background/border styling */
.gstp-table-wrapper {
    overflow-x: auto; /* Makes table scrollable on small screens */
    margin-bottom: 20px;
    clear: both; /* Clear floats for search/dropdowns */
    
    /* Dynamic CSS Variables for Wrapper */
    border: var(--gstp-wrapper-border-thickness, 1px) solid var(--gstp-wrapper-border-color, #e0e0e0);
    border-radius: var(--gstp-wrapper-border-radius, 4px);
    background-color: var(--gstp-wrapper-bg-color, #fff);
    
    padding: 15px; /* Add some padding inside the container */

    /* Remove any potential bottom border for the wrapper that might show above scrollbar */
    border-bottom: none !important;
}

/* Ensure dataTables_wrapper itself also gets the border radius for full coverage */
/* This helps ensure the entire DataTables controlled area (search, filters, pagination) gets the styling */
.dataTables_wrapper {
    border-radius: var(--gstp-wrapper-border-radius, 4px); /* Apply radius to the whole wrapper */
    background-color: var(--gstp-wrapper-bg-color, #fff); /* Default background for the wrapper content */
}


/* Ensure the table itself and its scrolling containers do not have visible borders */
.gstp-google-sheet-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    /* Dynamic CSS Variables for Table */
    font-family: var(--gstp-table-font-family, sans-serif);
    font-size: var(--gstp-table-font-size, 14px);
    color: var(--gstp-table-text-color, #333333);
    
    border-radius: var(--gstp-table-border-radius, 0px);
    overflow: hidden; /* Ensures border-radius is visible by clipping content */

    box-shadow: none; /* Removed default box shadow */
    background-color: inherit; /* Inherit from wrapper */
}

.gstp-google-sheet-table td.gstp-align-left { text-align: left; }
.gstp-google-sheet-table td.gstp-align-center { text-align: center; }
.gstp-google-sheet-table td.gstp-align-right { text-align: right; }

/* DataTables specific scrolling container borders */
/* Targeting all borders for scrollHead, scrollBody, scrollFoot */
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollFoot {
    border: none !important; /* Remove borders from the DataTables scrolling elements */
}

/* Also specifically target tables within these scroll containers to ensure no residual borders */
.dataTables_wrapper .dataTables_scrollHead table,
.dataTables_wrapper .dataTables_scrollBody table,
.dataTables_wrapper .dataTables_scrollFoot table {
    border: none !important; /* Ensure the inner tables within these scroll containers have no borders */
    margin-top: 0 !important; /* Reset any default top margin that might push things */
    margin-bottom: 0 !important; /* Reset any default bottom margin */
    border-radius: var(--gstp-table-border-radius, 0px); /* Apply table border-radius to inner tables as well */
}

/* Explicitly targeting the THEAD within dataTables_scrollHead table */
.dataTables_wrapper .dataTables_scrollHead table thead {
    border: none !important;
}
.dataTables_wrapper .dataTables_scrollHead table thead tr {
    border: none !important;
}
.dataTables_wrapper .dataTables_scrollHead table thead th {
    border-top: none !important;
    border-bottom: none !important; /* This is often the culprit for the line below the header */
    border-left: 1px solid var(--gstp-table-line-color, #ddd) !important; /* Re-apply left border for cell separation */
    border-right: 1px solid var(--gstp-table-line-color, #ddd) !important; /* Re-apply right border for cell separation */
}
/* For the very first th in the header, remove its left border if the overall table has none */
.dataTables_wrapper .dataTables_scrollHead table thead th:first-child {
    border-left: none !important;
}
/* For the very last th in the header, remove its right border */
.dataTables_wrapper .dataTables_scrollHead table thead th:last-child {
    border-right: none !important;
}


/* General cell borders - these should define the lines *between* cells */
.gstp-google-sheet-table th,
.gstp-google-sheet-table td {
    border: 1px solid var(--gstp-table-line-color, #ddd); /* RENAMED: Use table_line_color for cell borders */
    padding: 10px 15px;
    text-align: left;
    vertical-align: top;
    line-height: 1.4;
}

/* Override for specific header cell borders to ensure consistency */
.gstp-google-sheet-table th {
    background-color: var(--gstp-header-bg-color, #f2f2f2); /* Dynamic header bg */
    font-weight: bold;
    color: var(--gstp-header-text-color, #333); /* Dynamic header text color */
    white-space: nowrap; /* Prevent headers from wrapping too much */
    border-top: none; /* No top border for actual header cells */
    border-bottom: none; /* No bottom border for actual header cells */
}

/* Remove top border from first row of data cells, as the header no longer has a bottom border */
.gstp-google-sheet-table tbody tr:first-child td {
    border-top: none;
}


.gstp-google-sheet-table tbody tr:nth-child(even) {
    background-color: var(--gstp-row-even-bg-color, #f9f9f9) !important; /* Dynamic even row bg, added !important for specificity */
}
.gstp-google-sheet-table tbody tr:nth-child(odd) {
    background-color: var(--gstp-row-odd-bg-color, #fff) !important; /* Dynamic odd row bg, added !important for specificity */
}

/* Styling for images within table cells */
.gstp-google-sheet-table img {
    display: block; /* Ensures proper spacing */
    max-width: var(--gstp-image-max-width, 100%); /* Dynamic max-width */
    max-height: var(--gstp-image-max-height, none); /* Dynamic max-height */
    height: auto;
    object-fit: contain; /* Prevents stretching */
    margin: var(--gstp-image-margin, 0); /* Dynamic margin for alignment */
}

/* DataTables specific styling adjustments */
.dataTables_wrapper .top {
    display: flex; /* Use flexbox for top elements */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: space-between; /* Push length and filter to ends */
    align-items: center; /* Vertically align items */
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_length {
    flex-grow: 0; /* Don't grow, take natural width */
    margin-right: 15px; /* Space between length and filter */
    white-space: nowrap; /* Keep "Show X entries" on one line */
    order: 1; /* Ensure length is before filter */
}

.dataTables_wrapper .dataTables_filter {
    flex-grow: 0; /* Don't grow, take natural width */
    text-align: right; /* Align search to the right */
    white-space: nowrap; /* Keep search on one line */
    order: 2; /* Ensure filter is after length */
}
/* Ensure search input itself is a reasonable size */
.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em;
    border: 1px solid var(--gstp-input-border-color, #ccc) !important; /* Use !important to override WooCommerce */
    padding: 5px 8px;
    border-radius: var(--gstp-input-border-radius, 4px) !important; /* Use !important to override WooCommerce */
    max-width: 170px; /* Changed max-width */
    display: inline-block; /* Ensure it stays inline */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    background-color: var(--gstp-input-bg-color, #fff) !important; /* Use !important to override WooCommerce */
    color: var(--gstp-table-text-color, #333);
    font-family: var(--gstp-table-font-family, inherit);
    font-size: var(--gstp-table-font-size, 1em);
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--gstp-input-border-color, #ccc) !important; /* Use !important to override WooCommerce */
    padding: 5px 8px;
    border-radius: var(--gstp-input-border-radius, 4px) !important; /* Use !important to override WooCommerce */
    background-color: var(--gstp-input-bg-color, #fff) !important; /* Use !important to override WooCommerce */
    color: var(--gstp-table-text-color, #333);
    font-family: var(--gstp-table-font-family, inherit);
    font-size: var(--gstp-table-font-size, 1em);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding: 10px 0;
    margin-top: 10px; /* Add some space above pagination/info */
    display: flex; /* For alignment */
    justify-content: space-between; /* Info on left, pagination on right */
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping */
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px;
    margin-left: 2px;
    border: 1px solid var(--gstp-paginate-button-border-color, #ddd) !important; /* Dynamic border color for pagination buttons */
    border-radius: var(--gstp-paginate-button-border-radius, 4px) !important; /* Dynamic border radius for pagination buttons */
    background-color: var(--gstp-paginate-button-bg-color, #f9f9f9) !important; /* Dynamic background color for pagination buttons */
    color: var(--gstp-table-text-color, #333) !important; /* Keep text color dynamic, ensure it doesn't change on hover if not specified */
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-family: var(--gstp-table-font-family, inherit);
    font-size: var(--gstp-table-font-size, 1em);
    box-shadow: none !important; /* Remove default DataTables box-shadow */
    background-image: none !important; /* Remove default DataTables background image/gradient */
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--gstp-paginate-button-hover-bg-color, #0073aa) !important; /* Dynamic hover background */
    border-color: var(--gstp-paginate-button-hover-border-color, #0073aa) !important; /* Dynamic hover border color */
    color: #fff !important; /* Explicitly set to white for hover/active state based on typical WP blue */
}
/* Ensure "Next" and "Previous" text color remains consistent on hover as well */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important; /* Assuming white text is desired for active/hover */
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--gstp-paginate-button-bg-color, #f9f9f9) !important; /* Keep original background for disabled */
    border-color: var(--gstp-paginate-button-border-color, #ddd) !important; /* Keep original border for disabled */
    color: var(--gstp-table-text-color, #333) !important; /* Keep original text color for disabled */
}

/* Column specific filters */
.gstp-column-filter-container {
    padding-top: 10px; /* Space from global search/length */
    padding-bottom: 10px;
    width: 100%; /* Take full width below global search */
    display: flex; /* For horizontal layout */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 15px; /* Space between dropdowns */
    align-items: flex-end; /* Align select boxes at the bottom */
    order: 3; /* Ensure filters are below length/filter */
}

/* Wrapper for the heading and clear button */
.gstp-filter-header-row {
    width: 100%; /* Take full width */
    display: flex;
    justify-content: space-between; /* Push title to left, button to right */
    align-items: center; /* Vertically align */
    margin-bottom: 5px; /* Space below this row */
}

.gstp-column-filter-container h4 {
    margin: 0; /* Reset default margin */
    font-size: 1.1em;
    font-weight: bold;
    color: var(--gstp-table-text-color, #333);
    font-family: var(--gstp-table-font-family, inherit);
}

.gstp-clear-filters-button {
    /* Style to match other DataTables buttons or a clear button style */
    padding: 6px 12px;
    border: 1px solid var(--gstp-paginate-button-border-color, #ddd) !important;
    border-radius: var(--gstp-paginate-button-border-radius, 4px) !important;
    background-color: var(--gstp-paginate-button-bg-color, #f9f9f9) !important;
    color: var(--gstp-table-text-color, #333) !important;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-family: var(--gstp-table-font-family, inherit);
    font-size: var(--gstp-table-font-size, 1em);
    box-shadow: none !important;
    background-image: none !important;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s; /* Smooth transition */
}

.gstp-clear-filters-button:hover {
    background-color: var(--gstp-paginate-button-hover-bg-color, #e0e0e0) !important; /* Lighter hover for clear */
    border-color: var(--gstp-paginate-button-hover-border-color, #ccc) !important;
    color: var(--gstp-table-text-color, #333) !important;
}


.gstp-column-filter-wrap {
    display: flex;
    flex-direction: column; /* Label above select */
    align-items: flex-start;
    min-width: 100px; /* Minimum width for each filter */
    flex: 1; /* Allow filters to grow/shrink */
    max-width: calc(33% - 10px); /* Adjust based on desired columns per row */
}
@media (max-width: 768px) {
    .gstp-column-filter-wrap {
        max-width: calc(50% - 10px);
    }
}
@media (max-width: 480px) {
    .gstp-column-filter-wrap {
        max-width: 100%; /* Stack on very small screens */
    }
}

.gstp-column-filter-wrap label {
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 0.9em;
    white-space: nowrap; /* Prevent label wrapping */
    color: var(--gstp-table-text-color, #333);
    font-family: var(--gstp-table-font-family, inherit);
}

.gstp-column-filter-wrap select.gstp-column-filter { /* Targeted specifically */
    padding: 5px;
    border: 1px solid var(--gstp-input-border-color, #ccc) !important; /* Use dynamic border color and !important */
    border-radius: var(--gstp-input-border-radius, 4px) !important; /* Use dynamic border radius and !important */
    width: 100%; /* Take full width of its container */
    background-color: var(--gstp-input-bg-color, #fff) !important; /* Use dynamic background color and !important */
    box-sizing: border-box; /* Include padding and border in element's total width */
    height: 34px; /* Ensure selects have consistent height */
    color: var(--gstp-table-text-color, #333);
    font-family: var(--gstp-table-font-family, inherit);
    font-size: var(--gstp-table-font-size, 1em);
}


/* Error Message */
.gstts-error {
    color: #dc3232;
    background-color: #ffebe8;
    border: 1px solid #dc3232;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Webkit (Chrome, Safari, Edge) scrollbar styling */
.gstp-table-wrapper::-webkit-scrollbar {
    height: 10px; /* Adjust scrollbar height */
}

.gstp-table-wrapper::-webkit-scrollbar-track {
    background: transparent; /* Make track transparent */
    border: none; /* Remove any border from the track */
}

.gstp-table-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2); /* Make thumb semi-transparent */
    border-radius: 5px; /* Rounded thumb */
    border: none; /* Ensure no border on the thumb itself */
}

/* Firefox scrollbar styling */
.gstp-table-wrapper {
    scrollbar-width: thin; /* "auto" or "none" */
    scrollbar-color: rgba(0,0,0,0.2) transparent; /* thumb and track color */
}

/* DataTables Sorting Highlight Styling */
/* Use the CSS variable to control background of the sorting column */
.gstp-google-sheet-table .sorting_1 {
    background-color: var(--gstp-sorting-highlight-color, #f0f8ff) !important;
}

/* Conditionally disable the sorting highlight based on the --gstp-enable-sorting-highlight variable */
.gstp-table-wrapper[style*="--gstp-enable-sorting-highlight: transparent"] .gstp-google-sheet-table .sorting_1 {
    background-color: transparent !important;
}


/* --- Mobile Specific Adjustments for Search and Entries (dataTables_length and dataTables_filter) --- */
@media (max-width: 768px) { 
    /* Force .dataTables_length and .dataTables_filter to stack and take full width */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100%; /* Take full available width */
        margin-right: 0; /* Remove horizontal margin */
        margin-bottom: 10px; /* Add space between them when stacked */
        text-align: left; /* Ensure text alignment for both */
        white-space: normal; /* Allow text content to wrap */
        box-sizing: border-box; /* Include padding/border in width calculation */
    }

    /* Adjustments for the "Show X entries" section */
    .dataTables_wrapper .dataTables_length label {
        display: flex; /* Use flexbox for inner elements (Show, select, entries) */
        align-items: center; /* Vertically align them */
        flex-wrap: wrap; /* Allow elements inside the label to wrap if space is tight */
        width: 100%; /* Ensure the label itself takes full width */
        justify-content: flex-start; /* Align contents to the start */
    }

    .dataTables_wrapper .dataTables_length select {
        flex-grow: 1; /* Allow the select box to grow and fill available space */
        max-width: none; /* Remove any desktop max-width constraints */
        min-width: 80px; /* Ensure a minimum width for usability */
        width: auto; /* Let flex-grow handle the width */
        margin: 0 5px; /* Add some margin around the select box to separate text */
    }
    
    /* Ensure the "Show" and "entries" text are properly spaced and don't break */
    .dataTables_wrapper .dataTables_length label > :not(select) { /* Targets the "Show" and "entries" text directly */
        white-space: nowrap; /* Keep them from breaking */
    }


    /* Adjustments for the search filter section */
    .dataTables_wrapper .dataTables_filter label {
        display: flex; /* Use flexbox to align "Search:" text and input */
        align-items: center; /* Vertically center "Search:" with input */
        width: 100%;
        flex-wrap: wrap; /* Allow elements to wrap if needed */
        justify-content: flex-start; /* Align contents to the start */
    }

    .dataTables_wrapper .dataTables_filter input {
        flex-grow: 1; /* Make the input take up remaining space */
        margin-left: 0.5em; /* Keep some space after "Search:" */
        max-width: none; /* Remove any desktop max-width constraints */
        width: auto; /* Let flex-grow handle the width */
    }

    /* Column filters are NOT affected by this media query's specific rules,
       their own responsive rules (@media (max-width: 768px) { .gstp-column-filter-wrap { max-width: calc(50% - 10px); } })
       will govern their behavior. */
}

/* --- FADE IN TRANSITION --- */
.gstp-table-wrapper .dataTables_wrapper {
    /* Subtle fade in when loading completes */
    animation: gstp-fade-in 1s ease-out;
}

@keyframes gstp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}