/* ============================================================
 * .sui-table — opt-in shared MudTable baseline.
 *
 * Apply with Class="sui-table" on a MudTable. Provides:
 *   - Row height ~46px (12px vertical cell padding) on desktop
 *   - Column header 40px, muted uppercase 11px with letter-spacing
 *   - Striped + hover surfaces from the palette
 *   - Card framing (border + radius) on desktop, flush on mobile
 *   - Mobile (<960px): tighter rows + flush edges, no wasted side padding
 *
 * Colours bind to `--mud-palette-*` CSS variables emitted by
 * MudThemeProvider, so palette/theme changes propagate without
 * editing this file.
 *
 * Scoping: gated by .sui-table to keep blast radius small. The
 * selectors target Mud internals, so this class is opt-in per table.
 * ============================================================ */

.sui-table.mud-table {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    overflow: hidden;
}

.sui-table .mud-table-container {
    background-color: var(--mud-palette-surface);
}

/* Header row */
.sui-table .mud-table-head .mud-table-row .mud-table-cell {
    height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background-color: var(--mud-palette-surface);
}

/* Body rows */
.sui-table .mud-table-body .mud-table-row .mud-table-cell {
    padding-top: 12px;
    padding-bottom: 12px;
    color: var(--mud-palette-text-primary);
}

/* Selected row - higher specificity to override striped and hover */
.sui-table .mud-table-body .mud-table-row.selected .mud-table-cell {
    background-color: var(--mud-palette-gray-default) !important;
    color: var(--mud-palette-dark) !important;
}

/* Pager: separate it from the data, muted text. */
.sui-table .mud-table-pagination {
    border-top: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-surface);
}

.sui-table .mud-table-pagination .mud-typography,
.sui-table .mud-table-pagination .mud-table-pagination-caption {
    color: var(--mud-palette-text-secondary);
}

/* ------------------------------------------------------------
 * Mobile (<960px): drop side padding/border, denser rows.
 * Goal: no wasted margins on small viewports.
 * ------------------------------------------------------------ */
@media (max-width: 959.98px) {
    .sui-table.mud-table {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .sui-table .mud-table-head .mud-table-row .mud-table-cell {
        height: 36px;
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: 10px;
        letter-spacing: 0.4px;
    }

    .sui-table .mud-table-body .mud-table-row .mud-table-cell {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Reduce horizontal cell padding so columns aren't squeezed by gutters. */
    .sui-table .mud-table-cell {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ============================================================
 * Fade-in animation for smooth transitions
 * ============================================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}