/**
 * WP Responsive Scrollable Table - Frontend Styles
 * Version: 1.0.0
 */

/* CRITICAL: Force text wrapping globally - override any theme/plugin styles */
/* Maximum specificity to override everything */
.wp-block-table .wrst-wrapper table td,
.wp-block-table .wrst-wrapper table th,
figure.wp-block-table .wrst-wrapper table td,
figure.wp-block-table .wrst-wrapper table th,
figure.wp-block-table div.wrst-wrapper table td,
figure.wp-block-table div.wrst-wrapper table th,
.wrst-wrapper table td,
.wrst-wrapper table th,
.wrst-wrapper table thead th,
.wrst-wrapper table tbody td,
.wrst-wrapper table tfoot td,
.wrst-wrapper table.has-fixed-layout td,
.wrst-wrapper table.has-fixed-layout th,
.wrst-wrapper td,
.wrst-wrapper th,
table.has-fixed-layout td,
table.has-fixed-layout th,
.wp-block-table td,
.wp-block-table th {
    white-space: normal !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    padding: 4px 4px !important;
}

/* Wrapper for scrollable tables */
.wrst-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    position: relative;
    margin: 1em 0;
    box-sizing: border-box;
}

/* Ensure WordPress block table figure doesn't interfere */
.wp-block-table,
figure.wp-block-table {
    overflow-x: unset !important;
    overflow: unset !important;
    width: 100% !important;
    margin: 0 !important;
}

figure.wp-block-table .wrst-wrapper {
    margin: 0 !important;
}

/* Table inside wrapper */
.wrst-wrapper table,
.wrst-wrapper table.has-fixed-layout,
.wrst-wrapper .has-fixed-layout,
table.has-fixed-layout,
.wp-block-table .wrst-wrapper table.has-fixed-layout,
.wp-block-table table.has-fixed-layout,
figure.wp-block-table .wrst-wrapper table.has-fixed-layout,
figure.wp-block-table table.has-fixed-layout {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    display: table;
    margin: 0;
    table-layout: auto !important; /* Override fixed layout on mobile */
}

/* Ensure table cells maintain background across scroll */
.wrst-wrapper table td,
.wrst-wrapper table th,
.wrst-wrapper table.has-fixed-layout td,
.wrst-wrapper table.has-fixed-layout th,
.wp-block-table .wrst-wrapper table td,
.wp-block-table .wrst-wrapper table th,
.wp-block-table .wrst-wrapper table.has-fixed-layout td,
.wp-block-table .wrst-wrapper table.has-fixed-layout th,
figure.wp-block-table .wrst-wrapper table td,
figure.wp-block-table .wrst-wrapper table th,
figure.wp-block-table .wrst-wrapper table.has-fixed-layout td,
figure.wp-block-table .wrst-wrapper table.has-fixed-layout th {
    background-clip: padding-box;
    position: relative;
    vertical-align: middle;
    overflow: visible; /* Ensure content is visible */
    white-space: normal !important; /* Force text wrapping */
    word-wrap: break-word !important; /* Break long words */
    overflow-wrap: break-word !important; /* Modern alternative to word-wrap */
}

/* Handle table with borders - ensure last column border shows */
.wrst-wrapper table {
    /* Add a small buffer to ensure borders render completely */
    padding: 0;
    box-sizing: border-box;
}

/* Default scrollbar style */
.wrst-wrapper.wrst-scrollbar-default {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.wrst-wrapper.wrst-scrollbar-default::-webkit-scrollbar {
    height: 8px;
}

.wrst-wrapper.wrst-scrollbar-default::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.wrst-wrapper.wrst-scrollbar-default::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.wrst-wrapper.wrst-scrollbar-default::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Minimal scrollbar style */
.wrst-wrapper.wrst-scrollbar-minimal {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.wrst-wrapper.wrst-scrollbar-minimal::-webkit-scrollbar {
    height: 6px;
}

.wrst-wrapper.wrst-scrollbar-minimal::-webkit-scrollbar-track {
    background: transparent;
}

.wrst-wrapper.wrst-scrollbar-minimal::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.wrst-wrapper.wrst-scrollbar-minimal::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Hidden scrollbar style */
.wrst-wrapper.wrst-scrollbar-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wrst-wrapper.wrst-scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

/* Scroll indicator shadow effect */
.wrst-wrapper::before,
.wrst-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wrst-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9), transparent);
}

.wrst-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
}

.wrst-wrapper.wrst-scroll-left::before {
    opacity: 1;
}

.wrst-wrapper.wrst-scroll-right::after {
    opacity: 1;
}

/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    
    .wrst-wrapper table {
        font-size: 14px; /* Slightly smaller font on mobile */
        table-layout: auto !important; /* Force auto layout to prevent overflow */
        width: auto !important; /* Override any fixed width */
    }
    
    /* Override WordPress Gutenberg fixed layout on mobile */
    .wp-block-table .has-fixed-layout {
        table-layout: auto !important;
    }
    
    .wrst-wrapper .has-fixed-layout {
        table-layout: auto !important;
    }
    
    table.has-fixed-layout {
        table-layout: auto !important;
    }
    
    .has-fixed-layout {
        table-layout: auto !important;
    }

    /* Better touch targets for table cells */
    .wrst-wrapper table td,
    .wrst-wrapper table th {
        padding: 10px 12px;
        min-height: 44px; /* iOS recommendation for touch targets */
        box-sizing: border-box; /* Include padding in width calculations */
    }
    
    /* Ensure last column has full background and border */
    .wrst-wrapper table td:last-child,
    .wrst-wrapper table th:last-child {
        padding-right: 12px; /* Maintain consistent padding */
        background-clip: padding-box;
    }
    
    /* Ensure alternating row backgrounds work correctly */
    .wrst-wrapper table tbody tr:nth-child(odd) td {
        background-color: inherit; /* Inherit from tr if set */
    }
    
    .wrst-wrapper table tbody tr:nth-child(even) td {
        background-color: inherit; /* Inherit from tr if set */
    }
}

/* Tablet-specific adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .wrst-wrapper {
        margin: 1.2em 0;
    }
}

/* Desktop - ensure tables don't overflow unnecessarily */
@media screen and (min-width: 1025px) {
    .wrst-wrapper {
        overflow-x: visible;
    }
    
    /* Only enable scroll if table is actually wider than container */
    .wrst-wrapper.wrst-force-scroll {
        overflow-x: auto;
    }
}

/* Loading state */
.wrst-wrapper.wrst-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Accessibility improvements */
.wrst-wrapper:focus-within {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* Print styles - remove scroll containers */
@media print {
    .wrst-wrapper {
        overflow: visible !important;
        width: 100% !important;
        margin: 1em 0 !important;
    }
    
    .wrst-wrapper::before,
    .wrst-wrapper::after {
        display: none !important;
    }
    
    .wrst-wrapper table {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* RTL (Right-to-Left) support */
[dir="rtl"] .wrst-wrapper::before {
    left: auto;
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
}

[dir="rtl"] .wrst-wrapper::after {
    right: auto;
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9), transparent);
}