/* ============================================
   RSL Tables Component
   Version: 1.0.0
   Description: Base table styles, sortable tables,
   scrollable tables, and responsive table variants.
   ============================================ */

/* ──────────────────────────────────────────────
   Base Table Styles
   ────────────────────────────────────────────── */

.slot-layout table {
    width: 100%;
    border-collapse: collapse;
}

.slot-layout th,
.slot-layout td {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: left;
}

.slot-layout th {
    background-color: #f2f2f2;
}

/* Sortable table styles */
.slot-layout .sortable th {
    cursor: pointer;
}

.slot-layout .sortable th::after {
    content: ' ▼';
    font-size: .75em;
    visibility: hidden;
}

.slot-layout .sortable th:hover::after {
    visibility: visible;
}

/* =====================================================================
   SCROLLABLE TABLE
   ===================================================================== */

/* Wrapper: handles the horizontal scroll */
.slot-layout .table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Actual scrollable table */
.slot-layout .table-scroll-wrapper table.scrollable {
    table-layout: auto;   /* let columns size naturally */
    min-width: 720px;     /* prevents columns from collapsing on small viewports */
}

/* Prevent text overlap / weird wrapping in scrollable table */
.slot-layout .table-scroll-wrapper table.scrollable th,
.slot-layout .table-scroll-wrapper table.scrollable td {
    white-space: nowrap;  /* keep each cell on a single line */
}

/* =====================================================================
   RESPONSIVE TABLE (stacked)
   ===================================================================== */

.slot-layout .responsive {
    border: 0;
}

.slot-layout .responsive thead {
    display: none;
}

.slot-layout .responsive td {
    display: block;
    border: none;
}

.slot-layout .responsive td::before {
    content: attr(data-label);
    font-weight: bold;
    display: inline-block;
    width: 100px;
}

@media (min-width: 768px) {
    .slot-layout .responsive {
        display: table;
    }

    .slot-layout .responsive thead {
        display: table-header-group;
    }

    .slot-layout .responsive td {
        display: table-cell;
        border: 1px solid #ccc;
    }

    .slot-layout .responsive td::before {
        display: none;
    }
}

/* =====================================================================
   RESPONSIVE CARD TABLE
   ===================================================================== */

.slot-layout .responsive-card {
    border: 0;
}

.slot-layout .responsive-card thead {
    display: none;
}

.slot-layout .responsive-card tbody {
    display: block;
}

.slot-layout .responsive-card tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slot-layout .responsive-card td {
    display: block;
    border: none;
    padding: 0.5rem 0;
    text-align: left;
    position: relative;
    padding-left: 50%;
    min-height: 2rem;
}

.slot-layout .responsive-card td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-right: 0.5rem;
    font-weight: bold;
    color: #333;
}

.slot-layout .responsive-card td:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

/* Desktop view for responsive-card */
@media (min-width: 768px) {
    .slot-layout .responsive-card {
        display: table;
        border: 1px solid #ccc;
    }

    .slot-layout .responsive-card thead {
        display: table-header-group;
    }

    .slot-layout .responsive-card tbody {
        display: table-row-group;
    }

    .slot-layout .responsive-card tr {
        display: table-row;
        margin-bottom: 0;
        border: none;
        border-radius: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .slot-layout .responsive-card td {
        display: table-cell;
        border: 1px solid #ccc;
        padding: 8px;
        position: static;
        padding-left: 8px;
        min-height: auto;
    }

    .slot-layout .responsive-card td::before {
        display: none;
    }

    .slot-layout .responsive-card td:not(:last-child) {
        border-bottom: 1px solid #ccc;
    }
}