/* =========================================================================
   Prime Habitat — mobile-first helpers layered on top of the Adminto theme.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Responsive tables: turn rows into stacked cards on small screens.

   Usage:
     <table class="table table-cards">
       <thead> ... </thead>
       <tbody>
         <tr>
           <td data-label="Client">Acme Ltd</td>
           <td data-label="Status">Active</td>
           <td data-label="Action"> ... </td>
         </tr>
       </tbody>
     </table>

   On >= 768px it looks like a normal table. Below that, each <tr> becomes a
   card and each <td> shows its `data-label` as a heading beside the value.
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .table-cards thead {
        display: none;
    }

    .table-cards,
    .table-cards tbody,
    .table-cards tr,
    .table-cards td {
        display: block;
        width: 100%;
    }

    .table-cards tr {
        margin-bottom: 1rem;
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius-lg, 0.5rem);
        padding: 0.25rem 0.5rem;
        background-color: var(--bs-card-bg, var(--bs-body-bg));
        box-shadow: var(--bs-box-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .06));
    }

    .table-cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        text-align: right;
        padding: 0.5rem 0.25rem;
        border: 0;
        border-bottom: 1px dashed var(--bs-border-color);
        white-space: normal !important;
    }

    .table-cards td:last-child {
        border-bottom: 0;
    }

    /* The label pulled from the data-label attribute. */
    .table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--bs-secondary-color, #6c757d);
        margin-right: auto;
    }

    /* Cells explicitly marked have no label (e.g. a full-width action row). */
    .table-cards td[data-label=""]::before,
    .table-cards td:not([data-label])::before {
        content: "";
    }

    /* Let the row-level "Showing X of Y" footers breathe on mobile. */
    .table-cards td.table-cards-full {
        justify-content: center;
        text-align: center;
    }
    .table-cards td.table-cards-full::before {
        content: "";
    }
}

/* -------------------------------------------------------------------------
   General small-screen niceties.
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    /* Keep page titles/breadcrumbs from crowding on phones. */
    .page-title-head {
        flex-wrap: wrap;
    }

    /* Nav pill tab strips that we mark scrollable shouldn't wrap awkwardly. */
    .nav.flex-nowrap.overflow-auto .nav-link {
        white-space: nowrap;
    }
}

/* Make horizontal-scroll tab strips hide their scrollbar visually but stay usable. */
.nav.flex-nowrap.overflow-auto {
    scrollbar-width: thin;
}
.nav.flex-nowrap.overflow-auto::-webkit-scrollbar {
    height: 4px;
}