/**
 * Legacy Tables Styling
 * Styles for plain HTML tables pasted into post/page content
 * Matches the visual design of BookmakerComparisonTable shortcode
 *
 * Targets: .table-responsive .table (legacy tables only)
 * Does NOT affect: .bookmakerComparisonTable (shortcode tables)
 *
 * @package Bonusovekody
 * @since 2.0.0
 */

/* ============================================
 * TABLE WRAPPER
 * ============================================ */

.table-responsive {
    width: 100%;
    overflow: visible;
    margin: 24px 0;
    container-name: legacy-table;
    container-type: inline-size;
}

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

.table-responsive .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 16px;
    line-height: 24px;
    font-size: 16px;
}

/* ============================================
 * TABLE HEADER
 * ============================================ */

.table-responsive .table thead {
    background-color: #2D7AE9;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.table-responsive .table thead th {
    position: relative;
    line-height: 24px !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-align: left !important;
    border: none !important;
    min-width: 230px;
    padding: 12px 16px !important;
}

.table-responsive .table thead th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.table-responsive .table thead th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* ============================================
 * TABLE BODY
 * ============================================ */

.table-responsive .table tbody tr {
    border-radius: 12px;
}

.table-responsive .table tbody td {
    background-color: white;
    color: #666;
    padding: 16px;
    vertical-align: middle;
    border: none;
}

.table-responsive .table tbody td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.table-responsive .table tbody td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Hover effect on rows */
.table-responsive .table tbody tr:hover td {
    background-color: #EAF2FD;
}

/* ============================================
 * BUTTONS IN TABLES
 * ============================================ */

.table-responsive .table .btn {
    background: var(--color-primary) !important;
    color: var(--white) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-body) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: var(--line-height-base) !important;
    cursor: pointer !important;
    box-shadow: var(--button-shadow) 0 2px 4px rgba(0, 0, 0, 0.14) !important;
    gap: var(--space-3) !important;
    padding: var(--button-padding-y) var(--button-padding-x) !important;
    text-decoration: none !important;
    border-width: initial !important;
    border-style: none !important;
    border-color: initial !important;
    border-image: initial !important;
    border-radius: var(--button-radius) !important;
    transition: all var(--transition-base) var(--ease-out) !important;
}

.table-responsive .table .btn:hover {
    color: var(--white) !important;
    background: var(--color-primary-hover) !important;
    box-shadow: 0 var(--space-2) var(--space-3) rgba(0, 0, 0, 0.16) !important;
}

/* ============================================
 * RESPONSIVE - MOBILE
 * ============================================ */

@media (max-width: 767px) {
    /* Enable horizontal scroll on mobile */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Scrollbar styling */
    .table-responsive::-webkit-scrollbar {
        height: 8px;
    }

    .table-responsive::-webkit-scrollbar-track {
        background: transparent;
    }

    .table-responsive::-webkit-scrollbar-thumb {
        background-color: #EAF2FD;
        border-radius: 4px;
    }

    /* Ensure table has minimum width for scrolling */
    .table-responsive .table {
        min-width: 600px;
    }

    /* Adjust header font size on mobile */
    .table-responsive .table thead th {
        font-size: 14px;
        line-height: 20px;
    }

    /* Adjust body font size on mobile */
    .table-responsive .table tbody td {
        font-size: 14px;
        padding: 12px;
    }

    /* Make buttons full width on mobile */
    .table-responsive .table .btn {
        font-size: 14px !important;
    }
}

/* ============================================
 * CONTAINER QUERY RESPONSIVE
 * ============================================ */

@container legacy-table (min-width: 800px) {
    /* Remove min-width on desktop */
    .table-responsive .table thead th {
        min-width: auto;
    }
}

@container legacy-table (max-width: 800px) {
    /* Enable horizontal scroll on smaller containers */
    .table-responsive {
        overflow: auto;
    }
}