/* ============================================================
   Livewire Tables — consistent layout on ALL screen sizes
   No stacking. Headers always visible. Horizontal scroll.
   ============================================================ */

/* Scroll wrapper */
.table-responsive-stack {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table base */
.responsive-data-table,
.laravel-livewire-table,
.rappasoft-striped-table {
    width: 100%;
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    color: #334155;
    font-size: 0.75rem;
    table-layout: auto;
}

/* ---- THEAD — always visible, never hidden or clipped ---- */
.responsive-data-table thead,
.laravel-livewire-table thead,
.rappasoft-striped-table thead {
    display: table-header-group !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    border: 0 !important;
    margin: 0 !important;
}

.responsive-data-table thead th,
.laravel-livewire-table thead th,
.rappasoft-striped-table thead th {
    display: table-cell !important;
    padding: 0.5rem 0.625rem !important;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

/* ---- TBODY — always table layout ---- */
.responsive-data-table tbody,
.laravel-livewire-table tbody,
.rappasoft-striped-table tbody {
    display: table-row-group !important;
}

.responsive-data-table tr,
.laravel-livewire-table tr,
.rappasoft-striped-table tr {
    display: table-row !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.responsive-data-table tbody tr,
.laravel-livewire-table tbody tr,
.rappasoft-striped-table tbody tr {
    transition: background-color 0.15s ease;
}

.responsive-data-table tbody tr:hover,
.laravel-livewire-table tbody tr:hover,
.rappasoft-striped-table tbody tr:hover {
    background: #f8fafc !important;
}

.responsive-data-table tbody td,
.responsive-data-table tbody th,
.laravel-livewire-table tbody td,
.laravel-livewire-table tbody th,
.rappasoft-striped-table tbody td,
.rappasoft-striped-table tbody th {
    display: table-cell !important;
    width: auto !important;
    padding: 0.5rem 0.625rem !important;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #334155;
    vertical-align: middle;
    white-space: nowrap;
    text-align: left !important;
    /* Kill any stacking grid layout */
    grid-template-columns: unset !important;
    gap: unset !important;
}

/* Remove stacking pseudo-labels */
.responsive-data-table tbody td::before,
.responsive-data-table tbody th::before,
.laravel-livewire-table tbody td::before,
.laravel-livewire-table tbody th::before,
.rappasoft-striped-table tbody td::before,
.rappasoft-striped-table tbody th::before {
    content: none !important;
    display: none !important;
}

.laravel-livewire-table tbody td *,
.rappasoft-striped-table tbody td * {
    font-weight: 400 !important;
}

/* ---- Pagination nav ---- */
.laravel-livewire-table nav,
.rappasoft-striped-table nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 0 0;
}

.laravel-livewire-table nav > div,
.rappasoft-striped-table nav > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.laravel-livewire-table nav .pagination,
.rappasoft-striped-table nav .pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}

.laravel-livewire-table nav .pagination li,
.rappasoft-striped-table nav .pagination li {
    display: inline-flex;
    align-items: center;
}

.laravel-livewire-table nav .pagination a,
.laravel-livewire-table nav .pagination span,
.rappasoft-striped-table nav .pagination a,
.rappasoft-striped-table nav .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.625rem;
    background: #fff;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 400 !important;
    text-decoration: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.laravel-livewire-table nav .pagination a:hover,
.rappasoft-striped-table nav .pagination a:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.laravel-livewire-table nav .pagination .active span,
.rappasoft-striped-table nav .pagination .active span {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #0f172a;
}

.laravel-livewire-table nav p,
.rappasoft-striped-table nav p,
.laravel-livewire-table input,
.laravel-livewire-table select,
.laravel-livewire-table button,
.rappasoft-striped-table input,
.rappasoft-striped-table select,
.rappasoft-striped-table button {
    font-weight: 400 !important;
}

/* ---- Mobile: enforce scroll, never stack ---- */
@media (max-width: 767px) {
    .table-responsive-stack {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .responsive-data-table,
    .laravel-livewire-table,
    .rappasoft-striped-table {
        min-width: 600px !important;
    }

    /* Force table display on all elements — override any framework that tries to stack */
    .responsive-data-table,
    .laravel-livewire-table,
    .rappasoft-striped-table {
        display: table !important;
    }

    .responsive-data-table thead,
    .laravel-livewire-table thead,
    .rappasoft-striped-table thead {
        display: table-header-group !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        margin: 0 !important;
    }

    .responsive-data-table thead th,
    .laravel-livewire-table thead th,
    .rappasoft-striped-table thead th {
        display: table-cell !important;
    }

    .responsive-data-table tbody,
    .laravel-livewire-table tbody,
    .rappasoft-striped-table tbody {
        display: table-row-group !important;
    }

    .responsive-data-table tr,
    .laravel-livewire-table tr,
    .rappasoft-striped-table tr {
        display: table-row !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .responsive-data-table td,
    .responsive-data-table th,
    .laravel-livewire-table td,
    .laravel-livewire-table th,
    .rappasoft-striped-table td,
    .rappasoft-striped-table th {
        display: table-cell !important;
        width: auto !important;
        grid-template-columns: unset !important;
    }

    .laravel-livewire-table nav,
    .rappasoft-striped-table nav {
        flex-wrap: wrap;
    }
}