/**
 * ASHA Table Builder – Frontend Styles
 * Version: 1.1
 */

/* ── Screen reader only utility ─────────────────────────────────────────── */
.asha-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.asha-table-wrapper {
    width: 100%;
}

/* ── Scroll container (horizontal scroll mode default) ───────────────────── */
.asha-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Base table ──────────────────────────────────────────────────────────── */
.asha-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
}

/* ── Captions ────────────────────────────────────────────────────────────── */
.asha-table caption {
    text-align: left;
    font-size: 0.9em;
    margin-bottom: 0.5em;
    color: inherit;
}

.asha-caption-bottom {
    caption-side: bottom;
    margin-top: 0.5em;
    margin-bottom: 0;
}

/* ── Cells – row border driven by CSS var ────────────────────────────────── */
.asha-table tbody tr {
    border-bottom: var(--asha-row-border, 1px solid #D7D2CB);
    height: var(--asha-row-height, auto);
}

.asha-table thead tr {
    height: var(--asha-row-height, auto);
}

/* ── Sticky header ───────────────────────────────────────────────────────── */
.asha-table-sticky-header thead th {
    position: sticky;
    top: var(--asha-sticky-top, 0px);
    z-index: var(--asha-sticky-z, 2);
}

/* ── First column styling ────────────────────────────────────────────────── */
.asha-table tbody td.asha-first-col {
    /* Styles driven by Elementor selectors; class is a hook */
}

/* ── Zebra striping ──────────────────────────────────────────────────────── */
.asha-table-zebra tbody tr:nth-child(even) td {
    background-color: var(--asha-table-zebra, #F1F0ED);
}

/* ── Mobile: Horizontal Scroll (default, no extra CSS needed beyond wrapper) */

/* ── Mobile: Stacked Rows ────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .asha-table-mobile-stack .asha-table-scroll {
        overflow-x: visible;
    }

    .asha-table-mobile-stack .asha-table,
    .asha-table-mobile-stack .asha-table thead,
    .asha-table-mobile-stack .asha-table tbody,
    .asha-table-mobile-stack .asha-table th,
    .asha-table-mobile-stack .asha-table td,
    .asha-table-mobile-stack .asha-table tr {
        display: block;
        width: 100% !important;
        /* Reset any fixed heights set by the widget on desktop */
        height: auto !important;
    }

    .asha-table-mobile-stack .asha-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .asha-table-mobile-stack .asha-table tbody tr {
        margin-bottom: 1em;
        border: 1px solid #D7D2CB;
    }

    /*
     * Two-column label + value layout per cell.
     * Using display:flex instead of position:absolute so the row height
     * always grows to fit both label and value content, preventing overlap.
     */
    .asha-table-mobile-stack .asha-table tbody td {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
        border: none;
        border-bottom: 1px solid #D7D2CB;
        padding: 10px 12px;
        text-align: left;
        /* Remove per-column right border that applies on desktop */
        border-right: none !important;
    }

    .asha-table-mobile-stack .asha-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        font-weight: bold;
        word-break: break-word;
        min-width: 0;
    }
}

/* ── Mobile: Card Layout ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .asha-table-mobile-cards .asha-table-scroll {
        overflow-x: visible;
    }

    .asha-table-mobile-cards .asha-table {
        display: grid;
        grid-template-columns: 1fr;
        border: none;
    }

    .asha-table-mobile-cards .asha-table thead {
        display: none;
    }

    .asha-table-mobile-cards .asha-table tbody {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .asha-table-mobile-cards .asha-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        border: 1px solid #D7D2CB;
        border-radius: 4px;
        overflow: hidden;
        height: auto !important;
    }

    .asha-table-mobile-cards .asha-table tbody td {
        display: block;
        border: none;
        border-bottom: 1px solid #D7D2CB;
        padding: 8px 12px;
        font-size: 0.9em;
        border-right: none !important;
    }

    .asha-table-mobile-cards .asha-table tbody td::before {
        content: attr(data-label) ": ";
        display: block;
        font-weight: bold;
        font-size: 0.8em;
        margin-bottom: 4px;
        opacity: 0.7;
    }
}