/* Shared data-table styles — imported in global.css */

.data-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.data-table th {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-raised);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    background-color: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: start;
    border-block-end: 2px solid var(--color-border-strong);
    white-space: nowrap;
}

.data-table td {
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background-color: var(--color-bg-subtle);
}

/* Zebra striping (optional — add .data-table--zebra) */
.data-table--zebra tbody tr:nth-child(even) {
    background-color: var(--color-bg-subtle);
}

/* Numeric / amount columns */
.data-table .col-num,
.data-table [data-col="num"] {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* Action column: flex gap for action links */
.data-table .col-actions {
    white-space: nowrap;
}

.data-table__actions {
    display: inline-flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;
}

.data-table__action-link {
    color: var(--color-text-link);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.data-table__action-link:hover {
    text-decoration: underline;
}

.data-table__action-link:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
}

/* Primary action link — visually leads the row's actions */
.data-table__action-link--primary {
    font-weight: var(--font-weight-semibold);
}

/* Overflow row menu (<details>-based popover) — DV.e.
   Keeps a row's secondary actions out of the way behind a "⋯" toggle. Native
   <details> supplies keyboard focus + toggle for free; RTL handled via logical props. */
.row-menu {
    position: relative;
    display: inline-flex;
}

.row-menu > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.row-menu > summary::-webkit-details-marker {
    display: none;
}

.row-menu__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2xs));
    inset-inline-end: 0;
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-inline-size: 11rem;
    padding: var(--space-xs);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.row-menu__panel a {
    color: var(--color-text-link);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    padding-block: var(--space-2xs);
    padding-inline: var(--space-xs);
    border-radius: var(--radius-sm);
}

.row-menu__panel a:hover {
    background-color: var(--color-bg-subtle);
    text-decoration: underline;
}

.row-menu__panel a:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Table scroll wrapper */
.data-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* ── DV.f — stacked-card tables on narrow viewports ──
   Below 48rem a wide row is unreadable and forces horizontal scrolling. Each row becomes a
   label:value card: the header is visually hidden (kept for AT), and every labelled <td> prints
   its column name via content: attr(data-label). Cells with no data-label (e.g. the actions cell)
   render label-less at the card foot. The .data-table-wrap fallback (overflow-x:auto) stays intact
   for any table whose <td>s are not annotated. */
@media (max-width: 48rem) {
    /* The wrap no longer needs its own frame — each card carries the border. */
    .data-table-wrap {
        border: none;
        border-radius: 0;
        overflow-x: visible;
    }

    .data-table {
        display: block;
        font-size: var(--text-base);
    }

    /* Keep the header for assistive tech, remove it visually (no sticky band on cards). */
    .data-table thead {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .data-table tbody {
        display: block;
    }

    /* Each row is a self-contained card. */
    .data-table tbody tr {
        display: block;
        padding: var(--space-sm);
        margin-block-end: var(--space-xs);
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
    }

    /* On cards the zebra fill is dropped in favour of a per-card border. */
    .data-table--zebra tbody tr:nth-child(even) {
        background-color: var(--color-bg-surface);
    }

    .data-table tbody tr:hover {
        background-color: var(--color-bg-surface);
    }

    /* Every cell is a label:value line. */
    .data-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-sm);
        padding-inline: 0;
        padding-block: var(--space-2xs);
        border-block-end: none;
        text-align: end;
    }

    /* Numeric columns keep their tabular alignment but no longer force text-align:end globally. */
    .data-table .col-num,
    .data-table [data-col="num"] {
        text-align: end;
    }

    /* The column label, drawn from the matching <th>'s text via data-label. */
    .data-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: start;
        color: var(--color-text-secondary);
        font-weight: var(--font-weight-medium);
    }

    /* Cells with no label (actions) sit at the card foot, full width, buttons inline. */
    .data-table td.col-actions,
    .data-table td:not([data-label]) {
        justify-content: flex-start;
        padding-block-start: var(--space-xs);
    }

    .data-table__actions {
        inline-size: 100%;
    }
}