/* ==========================================
   TABLE RESPONSIVENESS (Legacy Data Tables)
   ==========================================
   Usage: <div class="table-responsive-legacy"><table>...</table></div>
   Wraps any data table in a horizontally-scrollable container at ALL viewport
   sizes (not just mobile). Cells use nowrap so every column is readable by
   scrolling — no zoom-out needed on desktop >= 1024px.
   ========================================== */

.table-responsive-legacy {
    display: block;
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.table-responsive-legacy>.table th,
.table-responsive-legacy>.table td {
    white-space: nowrap;
}

/* Override Bootstrap's default responsive wrapper to also prevent wrapping */
.table-responsive>.table th,
.table-responsive>.table td {
    white-space: nowrap;
}


/* ==========================================
   FILTER FORM — WRAPPING GRID LAYOUT
   ==========================================
   Filters wrap naturally on desktop.
   A scrollbar appears only when content
   genuinely overflows (e.g. tiny screens).
   ========================================== */

.filter-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.filter-scroll-container .row {
    flex-wrap: wrap !important;
    min-width: unset !important;
}

.filter-scroll-container .col-filter {
    flex: 0 0 160px;
    max-width: 200px;
    min-width: 130px;
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-bottom: 6px;
}

.filter-scroll-container .col-filter .form-control {
    width: 100%;
}

@media (max-width: 576px) {
    .filter-scroll-container .col-filter {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: unset;
    }
}


/* ==========================================
   FILTER ACTION ROW (Submit / Reset buttons)
   ==========================================
   Standardised bottom-aligned button row below filter controls.
   ========================================== */

.filter-actions {
    margin-top: 0.5rem;
}

.filter-actions .col-12 {
    text-align: right;
}

.filter-actions .btn+.btn {
    margin-left: 0.5rem;
}



/*  */