/**
 * Table Component Styles
 *
 * Data table styling with accessibility and responsive design.
 * Integrates with WordPress admin table styling.
 *
 * @package HubTerapeutico
 * @since 1.0.0
 */

/* ============================================
   TABLE BASE STYLES
   ============================================ */

.hub-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background-color: var(--color-white);
}

.hub-table thead {
    background-color: var(--color-white);
}

.hub-table th {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    border-bottom: 2px solid var(--color-gray-200);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.hub-table td {
    padding: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    vertical-align: middle;
    border-bottom: 1px solid var(--color-gray-200);
}

/* ============================================
   TABLE VARIANTS
   ============================================ */

/* Default variant - already applied above */

/* Striped variant - alternating row colors */
.hub-table.striped tbody tr:nth-child(odd) {
    background-color: var(--color-gray-50);
}

/* Bordered variant - visible cell borders */
.hub-table--bordered td,
.hub-table--bordered th {
    border: 1px solid var(--color-gray-200);
}

/* ============================================
   TABLE INTERACTIONS
   ============================================ */

.hub-table--hoverable tbody tr {
    transition: background-color var(--transition-fast);
}

.hub-table--hoverable tbody tr:hover {
    background-color: var(--color-gray-100);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Scroll mode - horizontal scroll wrapper */
.hub-table--responsive-scroll {
    min-width: 100%;
}

/* Default responsive behavior for smaller screens */
@media (max-width: 1024px) {
    .hub-table th,
    .hub-table td {
        padding: var(--spacing-3);
        font-size: var(--font-size-xs);
    }

    .hub-table th {
        font-size: var(--font-size-xs);
        text-transform: capitalize;
        letter-spacing: 0;
    }
}

/* Tablet and smaller - horizontal scroll */
@media (max-width: 768px) {
    .hub-packs-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }

    .hub-packs-table-wrapper::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(to right, transparent, var(--color-white));
        pointer-events: none;
        opacity: 0.6;
    }

    .hub-table {
        min-width: 700px;
    }

    .hub-table th,
    .hub-table td {
        padding: var(--spacing-2) var(--spacing-3);
    }
}

/* Card mode - mobile card transformation */
@media (max-width: 640px) {
    .hub-table--responsive-card thead {
        display: none;
    }

    .hub-table--responsive-card tr {
        display: block;
        background-color: var(--color-white);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-base);
        padding: var(--spacing-4);
        margin-bottom: var(--spacing-4);
        box-shadow: var(--shadow-sm);
    }

    .hub-table--responsive-card td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: var(--spacing-3) 0;
        border: none;
        border-bottom: 1px solid var(--color-gray-100);
        text-align: right;
    }

    .hub-table--responsive-card td::before {
        content: attr(data-label);
        font-weight: var(--font-weight-semibold);
        color: var(--color-gray-600);
        text-align: left;
        flex: 0 0 45%;
        word-break: break-word;
    }

    .hub-table--responsive-card td:last-child {
        border-bottom: none;
    }
}

/* ============================================
   EMPTY STATE
   ============================================ */

.hub-table-empty {
    text-align: center;
    color: var(--color-gray-500);
    padding: var(--spacing-8) var(--spacing-4);
    margin: 0;
    font-size: var(--font-size-base);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.hub-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus styles for keyboard navigation */
.hub-table th:focus-visible,
.hub-table td:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}