/* ==========================================================================
   SRG UNIFIED PREMIUM TABLES SYSTEM (v4.0.0)
   - Globally unified, borderless, dynamic, and context-aware styling.
   - Seamless gradient headers, context-aware hovers, and touch-responsive overflow.
   - Clean English comments only.
   ========================================================================== */

/* ── 1. Table Outer Wrapper & Responsive Touch Scroll ── */
.srg-table-wrap,
figure.wp-block-table {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    
    /* Responsive Touch Horizontal Scroll */
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* Hide default scrollbars for clean styling */
    scrollbar-width: none !important; 
    -ms-overflow-style: none !important;  
}

/* Hide scrollbars on WebKit browsers while maintaining swipe functionality */
.srg-table-wrap::-webkit-scrollbar,
figure.wp-block-table::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ── 2. Unified Table Layout ── */
table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    background: transparent !important;
    letter-spacing: -0.012em;
    margin: 0 !important;
}

/* ── 3. Unified Gradient Table Header (Seamless Single-Piece) ── */
table thead,
table thead tr {
    background: linear-gradient(135deg, var(--srg-context-accent, #7C3AED) 0%, var(--srg-context-accent-hover, #6d28d9) 100%) !important;
    border: none !important;
}

table thead th,
table thead tr th {
    background: transparent !important;
    color: #ffffff !important;
    border-bottom: none !important;
    font-weight: 700 !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
    text-align: left !important;
    border: none !important;
    min-width: 140px !important;
}

/* Header rounded corners for continuous look */
table thead tr th:first-child {
    border-top-left-radius: 12px !important;
}

table thead tr th:last-child {
    border-top-right-radius: 12px !important;
}

/* ── 4. Dynamic Section-Aware Row Hovers ── */
table tbody tr:hover td {
    background: color-mix(in srgb, var(--srg-context-accent, #7C3AED) 4%, transparent) !important;
}

html.srg-dark table tbody tr:hover td {
    background: color-mix(in srgb, var(--srg-context-accent, #7C3AED) 6%, transparent) !important;
}

/* ── 5. First-Column Shrink-Wrap & Styling ── */
table td:first-child,
table th:first-child {
    width: 1% !important;
    white-space: nowrap !important;
}

table tbody td:first-child {
    font-weight: 600 !important;
    color: var(--srg-text-primary, #0f172a) !important;
}

html.srg-dark table tbody td:first-child {
    color: var(--srg-neutral-50, #f8fafc) !important;
}

/* ── 6. Base Data Cells & Separators ── */
table tbody td {
    padding: 14px 20px !important;
    font-size: 14px !important;
    color: var(--srg-text-secondary, #475569) !important;
    border: none !important;
    border-bottom: 1px solid var(--srg-border-secondary, #E2E8F0) !important;
    min-width: 140px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Zebra striping for subtle row distinction */
table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.005) !important;
}

/* ── 7. Dark Mode Compatibility ── */
html.srg-dark .srg-table-wrap,
html.srg-dark figure.wp-block-table {
    background: transparent !important;
    border-color: var(--srg-neutral-800, #1E293B) !important;
}

html.srg-dark table tbody td {
    color: var(--srg-neutral-300, #cbd5e1) !important;
    border-color: var(--srg-neutral-800, #1E293B) !important;
}

html.srg-dark table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.005) !important;
}