/* ==========================================================================
   Mobile Responsiveness Overrides for VPMS
   ========================================================================== */

/* 
 * Breakpoint: 992px
 * Targets tablets and mobile devices in landscape and portrait mode.
 */
@media (max-width: 992px) {

    /* --- Dashboard Layout (`dashboard.css`) --- */
    .dashboard-container {
        /* Switch from a two-column grid to a single-column stack */
        grid-template-columns: 1fr;
        gap: 15px; /* Reduce the gap for a more compact view */
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pump-selector-container {
        width: 100%;
        margin-top: 15px;
    }

    /* --- Alarms & Pumps Layout (`alarms.css`, `pumps.css`) --- */
    .table-container {
        /* Allow tables to scroll horizontally on small screens */
        overflow-x: auto;
    }

    .search-controls-container, .filter-section {
        /* Stack filter controls vertically */
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .search-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .search-row input[type="text"],
    .search-row input[type="date"],
    .search-row select {
        width: 100%;
    }

    /* --- General Form Elements (`main.css`) --- */
    .form-group, .form-group-flex, .form-group-combined {
        padding: 10px;
    }

    .input-pair {
        flex-direction: column;
    }
}