/* ==========================================================
   Elementor Simple Table Widget – Frontend Styles
   
   Border values are driven entirely by CSS custom properties
   set by Elementor controls on {{WRAPPER}}. This avoids all
   specificity conflicts between our stylesheet and Elementor's
   inline styles.
   ========================================================== */

.etw-scroll-hint { display: none !important; }

/* ── Neutralise Elementor widget-container padding ────────── */
.elementor-widget-etw_simple_table > .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

.etw-widget {
    position: relative;
    width: 100%;
    /* CSS variable defaults — overridden by Elementor controls */
    --etw-border-color:        #e2e8f0;
    --etw-border-style:        solid;
    --etw-border-width:        1px;
    --etw-header-border-color: #e2e8f0;
    --etw-header-border-width: 1px;
}

/* ── Table Wrapper ──────────────────────────────────────── */
.etw-table-wrapper {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
    cursor: grab;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.etw-table-wrapper.etw-is-dragging {
    cursor: grabbing;
    user-select: none;
}

.etw-table-wrapper::-webkit-scrollbar { height: 4px; }
.etw-table-wrapper::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 2px; }
.etw-table-wrapper::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 2px; }
.etw-table-wrapper::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ── Base Table ─────────────────────────────────────────── */
.etw-table {
    margin: 0 !important;
    padding: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.6;
    width: 100%;
    min-width: 100%;
    border: none !important;
    display: table;
    table-layout: fixed; /* equal column widths */
}

/* ── Header Cells ───────────────────────────────────────── */
.etw-table thead th {
    background-color: #f1f5f9;
    color: #1e293b;
    font-weight: 600;
    padding: 14px 18px;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
    box-sizing: border-box;
    /* Consume CSS variables — updated live by Elementor controls */
    border-top: none;
    border-left: none;
    border-right: var(--etw-border-width) var(--etw-border-style) var(--etw-border-color);
    border-bottom: var(--etw-header-border-width) var(--etw-border-style) var(--etw-header-border-color);
}

/* Last header cell — no right border */
.etw-table thead th:last-child {
    border-right: none;
}

/* ── Body Cells ─────────────────────────────────────────── */
.etw-table tbody td {
    color: #334155;
    background-color: #ffffff;
    padding: 14px 18px;
    vertical-align: middle;
    white-space: normal;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
    /* Consume CSS variables */
    border-top: none;
    border-left: none;
    border-right: var(--etw-border-width) var(--etw-border-style) var(--etw-border-color);
    border-bottom: var(--etw-border-width) var(--etw-border-style) var(--etw-border-color);
}

/* Last column — no right border */
.etw-table tbody td:last-child {
    border-right: none;
}

/* Last row — no bottom border */
.etw-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Striped / Hover ────────────────────────────────────── */
.etw-table.etw-striped tbody tr:nth-child(even) td { background-color: #f8fafc; }
.etw-table.etw-hover tbody tr:hover td { background-color: #eff6ff; cursor: default; }
.etw-table tbody tr[style*="background"] td { background-color: inherit; }
.etw-table tbody tr[style*="color"] td { color: inherit; }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .etw-table thead th,
    .etw-table tbody td {
        white-space: nowrap; /* force overflow so scroll activates */
    }

    .etw-table-wrapper {
        overflow: hidden;       /* keep border-radius clipping */
        overflow-x: auto !important; /* enable horizontal scroll on mobile only */
        -webkit-overflow-scrolling: touch !important;
        transform: translateZ(0);
        cursor: default;        /* no grab cursor on mobile */
    }
    .etw-table thead th,
    .etw-table tbody td {
        padding: 10px 14px;
        font-size: 14px;
    }
}