/* ══════════════════════════════════════════════════════════════
   pd-table.css — PageBuilder table widget (CmsTable) frontend skin.

   Loaded on every storefront page from App.razor AND mirrored in the
   editor canvas styles list (pagebuilder-editor.js) — parity rule.

   Design notes:
   - Everything is opt-in through classes the editor toggles; a bare
     imported <table> (no .pd-table) is untouched so imported designs
     keep their own look.
   - Colors run through CSS custom properties with neutral rgba
     fallbacks that read correctly on light AND dark themes. Sites can
     re-skin globally via the tokens below (theme CSS or page CSS).
   - Sticky (pinned) cells need an OPAQUE background: the fallback is
     the `Canvas` system color, which follows the page color-scheme.
   - No `transition: all` (poisons style assertions in tests).
   ══════════════════════════════════════════════════════════════ */

.pd-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.pd-table-wrap--pin-head {
    overflow-y: auto;
    max-height: var(--pd-table-max-h, 60vh);
}

/* ── base skin ─────────────────────────────────────────────── */

.pd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: inherit;
}

.pd-table--auto {
    width: auto;
    margin-inline: auto;
}

.pd-table caption {
    caption-side: top;
    text-align: inherit;
    font-weight: 600;
    padding: 0.5rem 0.25rem;
    color: inherit;
}

.pd-table--caption-bottom caption { caption-side: bottom; }

.pd-table th,
.pd-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--pd-table-border, rgba(128, 144, 160, 0.28));
    text-align: left;
    vertical-align: middle;
}

.pd-table thead th {
    font-weight: 600;
    background: var(--pd-table-head-bg, rgba(128, 144, 160, 0.12));
    border-bottom: 2px solid var(--pd-table-border-strong, rgba(128, 144, 160, 0.45));
}

.pd-table tfoot td,
.pd-table tfoot th {
    font-weight: 600;
    border-top: 2px solid var(--pd-table-border-strong, rgba(128, 144, 160, 0.45));
}

/* ── presets ───────────────────────────────────────────────── */

.pd-table--striped > tbody > tr:nth-child(odd) > td,
.pd-table--striped > tbody > tr:nth-child(odd) > th {
    background: var(--pd-table-stripe, rgba(128, 144, 160, 0.07));
}

/* JS re-stripes after sort/filter (nth-child ignores hidden rows) */
.pd-table--js-striped > tbody > tr > td,
.pd-table--js-striped > tbody > tr > th { background: transparent; }
.pd-table--js-striped > tbody > tr.pd-row-alt > td,
.pd-table--js-striped > tbody > tr.pd-row-alt > th {
    background: var(--pd-table-stripe, rgba(128, 144, 160, 0.07));
}

.pd-table--bordered th,
.pd-table--bordered td {
    border: 1px solid var(--pd-table-border, rgba(128, 144, 160, 0.28));
}

.pd-table--clean th,
.pd-table--clean td { border: 0; }
.pd-table--clean thead th {
    background: transparent;
    border-bottom: 2px solid var(--pd-table-border-strong, rgba(128, 144, 160, 0.45));
}

.pd-table--hover > tbody > tr:hover > td,
.pd-table--hover > tbody > tr:hover > th {
    background: var(--pd-table-hover, rgba(128, 144, 160, 0.14));
}

.pd-table--compact th,
.pd-table--compact td { padding: 0.3rem 0.5rem; }

/* header COLUMN (first cell of each row styled as a header) */
.pd-table--head-col > tbody > tr > :first-child,
.pd-table--head-col > tfoot > tr > :first-child {
    font-weight: 600;
    background: var(--pd-table-head-bg, rgba(128, 144, 160, 0.12));
}

/* ── pinning (sticky) ──────────────────────────────────────────
   Opaque backgrounds are mandatory or scrolled content bleeds
   through. `Canvas` tracks the page's color-scheme. */

.pd-table--pin-head thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--pd-table-sticky-bg, Canvas);
    background-clip: padding-box;
}

.pd-table--pin-col tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--pd-table-sticky-bg, Canvas);
    background-clip: padding-box;
}

.pd-table--pin-head.pd-table--pin-col thead th:first-child { z-index: 4; }

/* ── per-column alignment (set from the cell trait) ─────────── */

.pd-al-l { text-align: left !important; }
.pd-al-c { text-align: center !important; }
.pd-al-r { text-align: right !important; }

/* ── frontend behaviors (pd-table.js) ──────────────────────── */

table[data-pd-sort] thead th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

table[data-pd-sort] thead th::after {
    content: "";
    display: inline-block;
    width: 0.85em;
    opacity: 0.45;
}

table[data-pd-sort] thead th.pd-sort-asc::after { content: " ▲"; opacity: 1; }
table[data-pd-sort] thead th.pd-sort-desc::after { content: " ▼"; opacity: 1; }

table[data-pd-sort] thead th:focus-visible {
    outline: 2px solid var(--pd-table-border-strong, rgba(128, 144, 160, 0.6));
    outline-offset: -2px;
}

tr.pd-row-hide { display: none; }

.pd-table-search {
    display: block;
    width: min(320px, 100%);
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.7rem;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid var(--pd-table-border, rgba(128, 144, 160, 0.35));
    border-radius: 6px;
    outline: none;
}

.pd-table-search:focus {
    border-color: var(--pd-table-border-strong, rgba(128, 144, 160, 0.6));
}

/* pagination (pd-table.js builds this on static pages) */
.pd-table-pager {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: flex-end;
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

.pd-table-pager-btn {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid var(--pd-table-border, rgba(128, 144, 160, 0.35));
    border-radius: 6px;
    padding: 0.15rem 0.65rem;
    cursor: pointer;
    line-height: 1.4;
}

.pd-table-pager-btn:disabled { opacity: 0.35; cursor: default; }

.pd-table-pager-btn:not(:disabled):hover {
    background: var(--pd-table-hover, rgba(128, 144, 160, 0.14));
}

/* CSV export button (pd-table.js builds this on static pages) */
.pd-table-export {
    font: inherit;
    font-size: 0.85rem;
    color: inherit;
    background: transparent;
    border: 1px solid var(--pd-table-border, rgba(128, 144, 160, 0.35));
    border-radius: 6px;
    padding: 0.3rem 0.8rem;
    margin: 0.5rem 0 0;
    cursor: pointer;
}

.pd-table-export:hover {
    background: var(--pd-table-hover, rgba(128, 144, 160, 0.14));
}