/* ==========================================================================
   PIMS Mobile Responsive Styles
   ========================================================================== */

/* Page headers use RadzenRow > RadzenColumn Size="x" SizeMD="y" for a
   left/right split. Radzen only switches from Size to SizeMD at >=1024px,
   so below that the Size percentages (e.g. 5/7, 3/9) stay in effect and the
   left/right columns get squeezed and overlap. Force both columns full-width
   and stacked below that same breakpoint, and let any action row (search box
   + buttons) wrap instead of overflowing. */
@media (max-width: 1023.98px) {
    .page-header {
        flex-direction: column;
        align-items: stretch !important;
    }

    .page-header > .rz-col,
    .page-header > [class*="rz-col-"] {
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    .page-header-left,
    .page-header-right {
        width: 100%;
    }

    .page-header .rz-stack {
        flex-wrap: wrap;
    }

    .page-header input,
    .page-header .rz-textbox {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    /* Hide the PIMS / FAMILY SECURE text — just show logo + sidebar toggle */
    .pims-brand-text {
        display: none !important;
    }

    /* Tighten header padding */
    .rz-header {
        padding: 0.25rem 0.5rem !important;
    }

    /* Smaller sidebar toggle area */
    .rz-sidebar-toggle {
        padding: 0.5rem !important;
    }

    /* Stack data grids — allow horizontal scroll */
    .rz-datatable-scrollable-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards full-width */
    .pims-cards {
        flex-direction: column;
    }

    .pims-cards .pims-card {
        width: 100%;
    }

    /* Footer — stack items */
    .rz-footer .rz-stack {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Maintenance card — fit mobile */
    .maintenance-card {
        width: 90vw !important;
        max-width: 400px;
    }

    /* Page headers — shrink icon/title (stacking is handled at the 1024px breakpoint above) */
    .page-header-icon {
        font-size: 2rem;
        max-width: 36px;
        max-height: 36px;
    }

    .page-title {
        font-size: 1.3rem;
    }
}

/* -- Touch-friendly tap targets ------------------------------------------- */
@media (pointer: coarse) {
    .rz-button {
        min-height: 44px;
        min-width: 44px;
    }

    .rz-panel-menu-item-link {
        min-height: 48px;
        padding: 0.75rem 1rem !important;
    }
}