/**
 * Table Block Styles
 * Uses theme design tokens from attributes.php
 * Only is-style-* classes for block editor
 * 
 * @package MarketersDelight
 * @since 6.4.0
 */

/* ============================================
   BASE TABLE RESPONSIVE WRAPPER
   All styled tables get horizontal scroll on mobile
   ============================================ */
.wp-block-table[class*="is-style-"] {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.wp-block-table[class*="is-style-"]::-webkit-scrollbar {
    height: 6px;
}

.wp-block-table[class*="is-style-"]::-webkit-scrollbar-track {
    background: transparent;
}

.wp-block-table[class*="is-style-"]::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

/* Ensure table doesn't collapse below readable width */
.wp-block-table[class*="is-style-"] table {
    min-width: 100%;
    width: max-content;
}

/* Base cell sizing for readability */
.wp-block-table[class*="is-style-"] th,
.wp-block-table[class*="is-style-"] td {
    min-width: 80px;
    max-width:400px;
}

/* Allow text wrap in first column (usually labels) */
.wp-block-table[class*="is-style-"] td:first-child,
.wp-block-table[class*="is-style-"] th:first-child {
    white-space: normal;
    min-width: 120px;
}

/* ============================================
   SMALL TABLE
   Compact design with smaller font
   ============================================ */
.wp-block-table.is-style-small-table {
    font-size: var(--fs-s);
}

.wp-block-table.is-style-small-table th,
.wp-block-table.is-style-small-table td {
    padding: var(--space-third);
}

.wp-block-table.is-style-small-table th {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

@media (max-width: 600px) {
    .wp-block-table.is-style-small-table {
        font-size: calc(var(--fs-s) * 0.9);
    }
    
    .wp-block-table.is-style-small-table th,
    .wp-block-table.is-style-small-table td {
        padding: var(--space-third) var(--space-half);
    }
}

/* ============================================
   RATINGS TABLE
   Star after bold text
   ============================================ */
.wp-block-table.is-style-ratings td:first-child {
    font-weight: var(--font-weight-bold);
}

.wp-block-table.is-style-ratings strong::after,
.wp-block-table.is-style-ratings b::after {
    content: " ⭐";
}

/* ============================================
   STRIPED TABLE
   Alternating row colors with hover
   ============================================ */
.wp-block-table.is-style-striped {
    border-radius: var(--radius-m);
    border: 1px solid var(--color-border);
}

.wp-block-table.is-style-striped table {
    margin: 0;
}

.wp-block-table.is-style-striped th {
    background: var(--color-stripe-header, #f1f5f9);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.wp-block-table.is-style-striped td {
    border-bottom: none;
}

.wp-block-table.is-style-striped tbody tr:nth-child(odd) {
    background: var(--color-stripe-odd, #f8fafc);
}

.wp-block-table.is-style-striped tbody tr:nth-child(even) {
    background: var(--color-content-bg, #fff);
}

.wp-block-table.is-style-striped tbody tr {
    transition: background var(--transition-fast);
}

@media (hover: hover) {
    .wp-block-table.is-style-striped tbody tr:hover {
        background: var(--color-stripe-hover, #e2e8f0);
    }
}

/* Mobile: tighter padding */
@media (max-width: 600px) {
    .wp-block-table.is-style-striped th,
    .wp-block-table.is-style-striped td {
        padding: var(--space-third) var(--space-half);
    }
}

/* ============================================
   SERVICES TABLE
   Dark header, price columns in primary color
   ============================================ */
.wp-block-table.is-style-services {
    background: var(--color-content-bg, #fff);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-md);
}

.wp-block-table.is-style-services table {
    margin: 0;
}

.wp-block-table.is-style-services thead th {
    background: var(--color-services-header, #1e293b);
    color: #fff;
    font-size: var(--fs-s);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-half) var(--space-single);
    border: none;
    position: sticky;
    top: 0;
    z-index: 1;
}

.wp-block-table.is-style-services tbody td {
    padding: var(--space-half) var(--space-single);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.wp-block-table.is-style-services tbody tr:last-child td {
    border-bottom: none;
}

.wp-block-table.is-style-services tbody td:first-child {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.wp-block-table.is-style-services tbody tr {
    transition: background var(--transition-fast);
}

@media (hover: hover) {
    .wp-block-table.is-style-services tbody tr:hover {
        background: var(--color-stripe-odd, #f8fafc);
    }
}

/* Mobile: reduce padding, smaller header font */
@media (max-width: 600px) {
    .wp-block-table.is-style-services thead th {
        padding: var(--space-third) var(--space-half);
        font-size: calc(var(--fs-s) * 0.85);
        letter-spacing: 0.03em;
    }
    
    .wp-block-table.is-style-services tbody td {
        padding: var(--space-third) var(--space-half);
    }
}

/* ============================================
   STICKY FIRST COLUMN MODIFIER
   Add .has-sticky-column to table wrapper
   ============================================ */
.wp-block-table.has-sticky-column td:first-child,
.wp-block-table.has-sticky-column th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
}

/* Ensure sticky column has background on striped */
.wp-block-table.is-style-striped.has-sticky-column th:first-child {
    background: var(--color-stripe-header, #f1f5f9);
    z-index: 3;
}

.wp-block-table.is-style-striped.has-sticky-column tbody tr:nth-child(odd) td:first-child {
    background: var(--color-stripe-odd, #f8fafc);
}

.wp-block-table.is-style-striped.has-sticky-column tbody tr:nth-child(even) td:first-child {
    background: var(--color-content-bg, #fff);
}

/* Services sticky column */
.wp-block-table.is-style-services.has-sticky-column thead th:first-child {
    background: var(--color-services-header, #1e293b);
    z-index: 3;
}

.wp-block-table.is-style-services.has-sticky-column tbody td:first-child {
    background: var(--color-content-bg, #fff);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

/* ============================================
   SCROLL INDICATOR
   Visual hint that table scrolls on mobile
   ============================================ */
@media (max-width: 768px) {
    .wp-block-table[class*="is-style-"] {
        position: relative;
    }
    
    /* Fade gradient on right edge when scrollable */
    .wp-block-table[class*="is-style-"]::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 6px; /* Above scrollbar */
        width: 24px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9));
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.2s;
    }
    
    /* Hide indicator when scrolled to end */
    .wp-block-table[class*="is-style-"].scrolled-end::after {
        opacity: 0;
    }
}

/* ============================================
   COMPARISON TABLE
   Good for feature matrices, pricing comparisons
   ============================================ */
.wp-block-table.is-style-comparison {
    border-radius: var(--radius-m);
    border: 1px solid var(--color-border);
}

.wp-block-table.is-style-comparison table {
    margin: 0;
    table-layout: fixed;
}

.wp-block-table.is-style-comparison th {
    background: var(--color-stripe-header, #f1f5f9);
    font-weight: var(--font-weight-bold);
    text-align: center;
    padding: var(--space-half) var(--space-single);
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.wp-block-table.is-style-comparison th:first-child {
    text-align: left;
    background: var(--color-content-bg, #fff);
    border-right: 1px solid var(--color-border);
}

.wp-block-table.is-style-comparison td {
    text-align: center;
    padding: var(--space-half) var(--space-single);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.wp-block-table.is-style-comparison td:first-child {
    text-align: left;
    font-weight: var(--font-weight-medium, 500);
    background: var(--color-stripe-odd, #f8fafc);
    border-right: 1px solid var(--color-border);
}

.wp-block-table.is-style-comparison tbody tr:last-child td {
    border-bottom: none;
}

/* Checkmark and X styling for comparison cells */
.wp-block-table.is-style-comparison td:not(:first-child) {
    font-size: 1.1em;
}

@media (max-width: 600px) {
    .wp-block-table.is-style-comparison th,
    .wp-block-table.is-style-comparison td {
        padding: var(--space-third) var(--space-half);
        min-width: 100px;
    }
    
    .wp-block-table.is-style-comparison td:first-child,
    .wp-block-table.is-style-comparison th:first-child {
        min-width: 140px;
    }
}

/* Sticky first column for comparison on mobile */
@media (max-width: 768px) {
    .wp-block-table.is-style-comparison td:first-child,
    .wp-block-table.is-style-comparison th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
    }
    
    .wp-block-table.is-style-comparison th:first-child {
        z-index: 3;
    }
}