/* public/assets/css/z-mobile-audit-fixes.css
   KHMER HRMS — PATCH: Mobile Responsiveness Audit
   -------------------------------------------------------------------
   Deliberately loaded LAST (see app/Views/layouts/main.php) so these
   fixes always win, regardless of specificity fights between the many
   earlier per-season/per-patch CSS files (filter-responsive.css,
   s29-standard-ui.css, s30-ui-polish.css, s31-professional-responsive.css,
   ...) that have each, over time, added their own narrow-viewport
   overrides for the same shared components. Rather than trying to
   trace every historical conflict across a dozen files, this file is
   a small, easy-to-audit final safety net for the specific components
   real device screenshots showed still breaking on a phone:

     1. .filter-panel-actions (Apply/Reset button pair) — on some
        pages one button (usually Reset, an <a>) was left to shrink
        down to a sliver while its sibling kept its full content
        width, instead of both sharing the row evenly or stacking.
     2. .date-range-inline (paired "From"/"To" date filters) — fixed
        per-field pixel widths (set by several different files across
        several different breakpoints) could still add up to more
        than a phone's viewport width, producing a squeezed field with
        an internal horizontal scrollbar rather than a clean stack.

   Both are given one unambiguous, final answer here: stack to full
   width below 480px, where there is realistically never enough room
   for two side-by-side controls of this kind. */

@media (max-width: 480px) {
    .filter-panel-actions {
        width: 100% !important;
        margin-left: 0 !important;
        flex-wrap: wrap !important;
    }
    .filter-panel-actions .btn {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .date-range-inline {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
    }
    .date-range-field,
    .date-range-field .s11-picker-field,
    .date-range-field .hrms-date-input-wrap,
    .date-range-field input.hrms-date-text,
    .date-range-field .s11-picker-display {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .date-range-separator {
        flex-basis: 100%;
        text-align: center;
        padding-bottom: 0 !important;
    }
}