/**
 * Elementor Toolkit - Table Widget Styles
 *
 * @package Elementor_Toolkit
 */

/* Table Wrapper */
.etk-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Base Table Styles */
.etk-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.etk-table th,
.etk-table td {
    vertical-align: middle;
}

.etk-cell-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.etk-cell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.etk-cell-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.etk-cell-icon i {
    font-size: inherit;
}

/* Empty/Error States */
.etk-table-empty,
.etk-table-error {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 4px;
}

/* Preset: Minimal */
.etk-table.etk-preset-minimal {
    border: 1px solid #e9ecef;
}

.etk-table.etk-preset-minimal thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    padding: 12px 16px;
    font-weight: 600;
    color: #212529;
}

.etk-table.etk-preset-minimal tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
}

.etk-table.etk-preset-minimal tbody tr:last-child td {
    border-bottom: none;
}

.etk-table.etk-preset-minimal tfoot td {
    background-color: #f8f9fa;
    border-top: 2px solid #dee2e6;
    padding: 12px 16px;
    font-weight: 600;
}

/* Preset: Bold */
.etk-table.etk-preset-bold {
    border: 3px solid #212529;
}

.etk-table.etk-preset-bold thead th {
    background-color: #212529;
    color: #ffffff;
    padding: 16px 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9em;
}

.etk-table.etk-preset-bold tbody td {
    padding: 14px 20px;
    border-bottom: 2px solid #212529;
}

.etk-table.etk-preset-bold tbody tr:last-child td {
    border-bottom: none;
}

.etk-table.etk-preset-bold tfoot td {
    background-color: #212529;
    color: #ffffff;
    padding: 14px 20px;
    font-weight: 700;
}

/* Preset: Card Style */
.etk-table.etk-preset-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid #e9ecef;
}

.etk-table.etk-preset-card thead th {
    background-color: #f8f9fa;
    padding: 16px 20px;
    font-weight: 600;
    color: #212529;
    border-bottom: 1px solid #e9ecef;
}

.etk-table.etk-preset-card tbody td {
    padding: 16px 20px;
    background-color: #ffffff;
}

.etk-table.etk-preset-card tbody tr:not(:last-child) td {
    border-bottom: 1px solid #f1f3f5;
}

.etk-table.etk-preset-card tfoot td {
    background-color: #f8f9fa;
    padding: 16px 20px;
    font-weight: 600;
    border-top: 1px solid #e9ecef;
}

/* Preset: Striped */
.etk-table.etk-preset-striped thead th {
    background-color: #495057;
    color: #ffffff;
    padding: 14px 16px;
    font-weight: 600;
}

.etk-table.etk-preset-striped tbody td {
    padding: 12px 16px;
}

.etk-table.etk-preset-striped tbody tr:nth-child(odd) td {
    background-color: #ffffff;
}

.etk-table.etk-preset-striped tbody tr:nth-child(even) td {
    background-color: #f8f9fa;
}

.etk-table.etk-preset-striped tfoot td {
    background-color: #495057;
    color: #ffffff;
    padding: 14px 16px;
    font-weight: 600;
}

/* Preset: Borderless */
.etk-table.etk-preset-borderless {
    border: none;
}

.etk-table.etk-preset-borderless thead th {
    background-color: transparent;
    padding: 12px 20px;
    font-weight: 600;
    color: #6c757d;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e9ecef;
}

.etk-table.etk-preset-borderless tbody td {
    padding: 14px 20px;
}

.etk-table.etk-preset-borderless tfoot td {
    background-color: transparent;
    padding: 12px 20px;
    font-weight: 600;
    border-top: 1px solid #e9ecef;
}

/* Alternating Rows (when explicitly enabled) */
.etk-table.etk-alternating tbody tr:nth-child(even) td {
    background-color: #f8f9fa;
}

/* Hover Effects */
.etk-table.etk-hover-rows tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.etk-table.etk-hover-rows tbody tr td {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.etk-table.etk-hover-rows tbody tr:hover td {
    background-color: #e9ecef;
}

/* Responsive: Horizontal Scroll */
.etk-responsive-scroll .etk-table-wrapper {
    overflow-x: auto;
}

/* Responsive: Stack on Mobile */
@media (max-width: 767px) {
    .etk-table.etk-responsive-stack.etk-breakpoint-mobile {
        display: block;
    }

    .etk-table.etk-responsive-stack.etk-breakpoint-mobile thead {
        display: none;
    }

    .etk-table.etk-responsive-stack.etk-breakpoint-mobile tbody,
    .etk-table.etk-responsive-stack.etk-breakpoint-mobile tfoot {
        display: block;
    }

    .etk-table.etk-responsive-stack.etk-breakpoint-mobile tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        overflow: hidden;
    }

    .etk-table.etk-responsive-stack.etk-breakpoint-mobile td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px;
        text-align: right;
        border-bottom: 1px solid #f1f3f5;
    }

    .etk-table.etk-responsive-stack.etk-breakpoint-mobile td:last-child {
        border-bottom: none;
    }

    .etk-table.etk-responsive-stack.etk-breakpoint-mobile td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        flex: 1;
        margin-right: 16px;
    }
}

@media (max-width: 1023px) {
    .etk-table.etk-responsive-stack.etk-breakpoint-tablet {
        display: block;
    }

    .etk-table.etk-responsive-stack.etk-breakpoint-tablet thead {
        display: none;
    }

    .etk-table.etk-responsive-stack.etk-breakpoint-tablet tbody,
    .etk-table.etk-responsive-stack.etk-breakpoint-tablet tfoot {
        display: block;
    }

    .etk-table.etk-responsive-stack.etk-breakpoint-tablet tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        overflow: hidden;
    }

    .etk-table.etk-responsive-stack.etk-breakpoint-tablet td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px;
        text-align: right;
        border-bottom: 1px solid #f1f3f5;
    }

    .etk-table.etk-responsive-stack.etk-breakpoint-tablet td:last-child {
        border-bottom: none;
    }

    .etk-table.etk-responsive-stack.etk-breakpoint-tablet td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        flex: 1;
        margin-right: 16px;
    }
}

/* Link Styles */
.etk-table a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s ease;
}

.etk-table a:hover {
    color: #004499;
}

/* Print Styles */
@media print {
    .etk-table-wrapper {
        overflow: visible;
    }

    .etk-table {
        page-break-inside: auto;
    }

    .etk-table tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    .etk-table thead {
        display: table-header-group;
    }

    .etk-table tfoot {
        display: table-footer-group;
    }
}

/* RTL Support */
[dir="rtl"] .etk-cell-content {
    flex-direction: row-reverse;
}

[dir="rtl"] .etk-cell-icon.before {
    margin-right: 0;
    margin-left: 8px;
}

[dir="rtl"] .etk-cell-icon.after {
    margin-left: 0;
    margin-right: 8px;
}

/* Accessibility - Focus States */
.etk-table a:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.etk-table a:focus:not(:focus-visible) {
    outline: none;
}

.etk-table a:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .etk-table {
        border: 2px solid currentColor;
    }

    .etk-table th,
    .etk-table td {
        border: 1px solid currentColor;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .etk-table.etk-hover-rows tbody tr td,
    .etk-table a {
        transition: none;
    }
}