/**
 * Table Presets CSS
 * Estilos utilitários para presets de tabela: sticky header, sticky first column, compact, cards-on-mobile
 */

/* Base mp-table */
.mp-table {
    position: relative;
}

/* Sticky Header */
.mp-table.sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-white, #ffffff);
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
}

.mp-table.sticky-header tbody tr:first-child td {
    border-top: none;
}

/* Sticky First Column */
.mp-table.sticky-first-col td:first-child,
.mp-table.sticky-first-col th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: inherit;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.mp-table.sticky-header.sticky-first-col thead th:first-child {
    z-index: 3;
}

.mp-table.sticky-first-col tbody td:first-child {
    background-color: var(--bs-white, #ffffff);
}

.mp-table.sticky-first-col table.table-striped tbody tr:nth-of-type(odd) td:first-child {
    background-color: var(--bs-table-striped-bg, rgba(0, 0, 0, 0.05));
}

/* Cards on Mobile */
@media (max-width: 768px) {
    .mp-table.cards-mobile table thead {
        display: none;
    }

    .mp-table.cards-mobile table tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 0.5rem;
        background-color: var(--bs-white, #ffffff);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .mp-table.cards-mobile table tbody td {
        display: grid;
        grid-template-columns: 40% auto;
        padding: 0.5rem 0.75rem;
        border: none;
        border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.05));
    }

    .mp-table.cards-mobile table tbody td:last-child {
        border-bottom: none;
    }

    .mp-table.cards-mobile table tbody td::before {
        content: attr(data-th);
        font-weight: 600;
        padding-right: 0.5rem;
        color: var(--bs-secondary, #6c757d);
    }

    /* Evitar que sticky interfira em mobile */
    .mp-table.cards-mobile.sticky-first-col td:first-child,
    .mp-table.cards-mobile.sticky-first-col th:first-child {
        position: relative;
        left: auto;
        box-shadow: none;
    }

    .mp-table.cards-mobile.sticky-header thead {
        display: none;
    }
}

/* Scroll horizontal para tabelas com sticky-first-col */
.mp-table.sticky-first-col table {
    overflow-x: auto;
}

/* Ajustes de scroll container */
.mp-table {
    overflow-x: auto;
}

/* Aplicar background quando scroll */
.mp-table.sticky-header thead th {
    backdrop-filter: blur(4px);
}