/* ==========================================================================
   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;
    }
}

/* ==========================================================================
   Mobile Layout Optimization for Historical Data Forms
   Target: vpms/html/oldindex.html
   Goal: 2-column layout for date/time and filters on mobile
   ========================================================================== */

@media (max-width: 1000px) {
    /* Re-layout ONLY the date/time row to use Grid */
    .search-controls .form-row.date-time-group {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Force 2 equal columns (50% - 50%) */
        gap: 10px;                      /* Unified spacing */
        width: 100%;
        
        /* Reset flex properties potentially set by main.css */
        flex-direction: unset;
        flex-wrap: unset;
        align-items: stretch;
    }

    /* Adjust form group container ONLY within date-time-group */
    .search-controls .form-row.date-time-group .form-group {
        width: auto;         /* Let Grid cell determine width */
        margin-bottom: 0;    /* Remove margin, let gap handle it */
    }

    /* Ensure inputs fill the grid cell */
    .search-controls .form-row.date-time-group .form-group input {
        width: 100%;
    }
    
    /* Fallback for very small screens */
    @media (max-width: 350px) {
        .search-controls .form-row.date-time-group {
            grid-template-columns: 1fr; /* Stack vertically on very small screens */
        }
    }
}

/* ==========================================================================
   Collapsible Details Section (Tool ID -> Pump S/N)
   Target: vpms/html/oldindex.html
   ========================================================================== */

/* Desktop Default: Hide toggle, treat container as ghost element to preserve flex layout */
.mobile-toggle-btn {
    display: none;
}

.collapsible-details-container {
    display: contents; /* Children act as direct children of the parent flex container */
}

/* Mobile View: Enable Toggle and Collapse Logic */
@media (max-width: 1000px) {
    /* Style the toggle button */
    .mobile-toggle-btn {
        display: block;
        width: 100%;
        padding: 12px;
        background-color: #e9ecef;
        color: #495057;
        border: 1px solid #ced4da;
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
        font-weight: 600;
        margin: 10px 0;
        transition: background-color 0.2s;
        order: 0; /* Ensure button appears after Tool ID if needed, though DOM order handles it */
    }

    .mobile-toggle-btn:hover {
        background-color: #dee2e6;
    }

    /* Style the container for collapsing */
    .collapsible-details-container {
        display: block; /* Restore block display for height transition */
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
        opacity: 0;
        border-left: 3px solid #007bff; /* Visual indicator of grouping */
        padding-left: 10px; /* Indent content slightly */
        margin-left: 5px;
        box-sizing: border-box;
    }

    .collapsible-details-container.expanded {
        max-height: 1500px; /* Large enough to fit all content */
        opacity: 1;
        transition: max-height 0.5s ease-in, opacity 0.3s ease-in;
        margin-bottom: 15px; /* Space after expanded content */
    }

    /* Ensure form groups inside have proper spacing when stacked */
    .collapsible-details-container .form-group {
        width: 100%; /* Full width */
        margin-bottom: 10px;
    }
}