/* ─────────────────────────────────────────
   Easy Table Manager v2 — Frontend Styles
───────────────────────────────────────── */

.etm-table-wrapper {
    overflow-x: auto;
    margin: 1.5em 0;
    -webkit-overflow-scrolling: touch;
}

.etm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.55;
    /* Fallback colors if CSS vars not set */
    color: var(--etm-tbody-txt, #334155);
    background: var(--etm-tbody-odd, #ffffff);
}

.etm-table caption {
    caption-side: bottom;
    text-align: center;
    padding: 8px;
    font-size: 13px;
    color: #64748b;
    font-style: italic;
}

/* ── Header ── */
.etm-table thead th {
    background: var(--etm-thead-bg, #1e3a8a);
    color: var(--etm-thead-txt, #ffffff);
    font-weight: 700;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 13px 16px;
    text-align: left;
    white-space: nowrap;
    border-color: var(--etm-border, #e2e8f0);
}

/* ── Body ── */
.etm-table td {
    padding: 11px 16px;
    text-align: left;
    vertical-align: top;
    color: var(--etm-tbody-txt, #334155);
}

/* Odd rows */
.etm-table tbody tr:nth-child(odd) td {
    background: var(--etm-tbody-odd, #ffffff);
}

/* ── Bordered ── */
.etm-table.etm-bordered,
.etm-table.etm-bordered th,
.etm-table.etm-bordered td {
    border: 1px solid var(--etm-border, #e2e8f0);
}

/* ── Striped ── */
.etm-table.etm-striped tbody tr:nth-child(even) td {
    background: var(--etm-tbody-even, #f8fafc);
}

/* ── Hover ── */
.etm-table.etm-hover tbody tr:hover td {
    background: var(--etm-hover-bg, #eff6ff);
    transition: background 0.15s ease;
}

/* ── Links inside cells ── */
.etm-table td a,
.etm-table th a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.etm-table td a:hover,
.etm-table th a:hover {
    opacity: 0.8;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .etm-table thead { display: none; }
    .etm-table tr { display: block; margin-bottom: 14px; border: 1px solid var(--etm-border, #e2e8f0); border-radius: 8px; overflow: hidden; }
    .etm-table td {
        display: flex; justify-content: space-between; align-items: flex-start;
        gap: 12px; padding: 9px 13px;
        border-bottom: 1px solid var(--etm-border, #e2e8f0);
        text-align: right;
    }
    .etm-table td:last-child { border-bottom: none; }
}

/* ── Admin live preview overrides ── */
#etm-preview .etm-table { font-size: 13px; }
#etm-preview .etm-table thead th { padding: 8px 12px; font-size: 11.5px; }
#etm-preview .etm-table td       { padding: 7px 12px; }