/*
 * Final responsive safety layer for the shared JSF template.
 * Keep rules scoped to narrow screens and named components so the established
 * desktop and print layouts remain unchanged.
 */

.aeo-mobile-table-summary {
    display: none;
}

@media (max-width: 640px) {
    /* PrimeFaces reflow creates a sort selector outside the table. Its stock
       labels are inline and its selected option can be wider than the phone. */
    body .ui-datatable-reflow .ui-reflow-label,
    body .ui-datatable-reflow .ui-reflow-dropdown {
        display: block !important;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 0.55rem !important;
    }

    body .ui-datatable-reflow .ui-reflow-label {
        color: #385064;
        font-size: 0.78rem;
        font-weight: 800;
        text-align: right;
    }

    body .ui-datatable-reflow .ui-reflow-dropdown {
        min-height: 2.75rem;
        padding-inline: 0.65rem 2rem;
        border: 1px solid #cbd8e3;
        border-radius: 0.65rem;
        background-color: #ffffff;
        color: #17324d;
        direction: rtl;
        text-overflow: ellipsis;
    }

    /* Column filters normally disappear with the reflow table header. Tables
       opting into this class expose their existing filters as a mobile panel. */
    body .aeo-mobile-filter-table.ui-datatable-reflow thead,
    body .aeo-mobile-filter-table.ui-datatable-reflow .ui-datatable-thead {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.75rem;
    }

    body .aeo-mobile-filter-table.ui-datatable-reflow thead > tr,
    body .aeo-mobile-filter-table.ui-datatable-reflow .ui-datatable-thead > tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
        width: 100% !important;
        padding: 0.7rem;
        border: 1px solid #dce6ed;
        border-radius: 0.8rem;
        background: #f5f9fb;
    }

    body .aeo-mobile-filter-table.ui-datatable-reflow thead > tr > th,
    body .aeo-mobile-filter-table.ui-datatable-reflow .ui-datatable-thead > tr > th {
        display: none !important;
    }

    body .aeo-mobile-filter-table.ui-datatable-reflow thead > tr > th.ui-filter-column,
    body .aeo-mobile-filter-table.ui-datatable-reflow .ui-datatable-thead > tr > th.ui-filter-column {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.4rem 0.65rem;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0.7rem !important;
        border: 1px solid #dbe5ec !important;
        border-radius: 0.7rem;
        background: #ffffff !important;
        color: #26485f !important;
        text-align: right !important;
    }

    body .aeo-mobile-filter-table.ui-datatable-reflow th.ui-filter-column .ui-column-title {
        display: block !important;
        grid-column: 1;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.78rem;
        white-space: normal;
    }

    body .aeo-mobile-filter-table.ui-datatable-reflow th.ui-filter-column .ui-sortable-column-icon {
        grid-column: 2;
        margin: 0 !important;
    }

    body .aeo-mobile-filter-table.ui-datatable-reflow th.ui-filter-column .ui-column-filter,
    body .aeo-mobile-filter-table.ui-datatable-reflow th.ui-filter-column .ui-column-customfilter {
        grid-column: 1 / -1;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body .aeo-mobile-filter-table.ui-datatable-reflow th.ui-filter-column .ui-selectonemenu {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* These page families previously combined reflow cards with a persistent
       desktop min-width (60rem-104rem). Reset every layer of the table only on
       phones, including inline tableStyle declarations. */
    body .employee-page-outlet .operator-documents-table.ui-datatable-reflow,
    body .transaction-report-table.ui-datatable-reflow,
    body .employee-applications-page .apps-table.ui-datatable-reflow,
    body .employee-page-outlet .inquiry-table.ui-datatable-reflow,
    body .employee-inquiry-page .inquiry-table.ui-datatable-reflow,
    body .employee-page-outlet .cardops-table.ui-datatable-reflow {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body .employee-page-outlet .operator-documents-table.ui-datatable-reflow .ui-datatable-tablewrapper,
    body .employee-page-outlet .operator-documents-table.ui-datatable-reflow table,
    body .employee-page-outlet .operator-documents-table.ui-datatable-reflow tbody,
    body .transaction-report-table.ui-datatable-reflow .ui-datatable-tablewrapper,
    body .transaction-report-table.ui-datatable-reflow table,
    body .transaction-report-table.ui-datatable-reflow tbody,
    body .employee-applications-page .apps-table.ui-datatable-reflow .ui-datatable-tablewrapper,
    body .employee-applications-page .apps-table.ui-datatable-reflow table,
    body .employee-applications-page .apps-table.ui-datatable-reflow tbody,
    body .employee-page-outlet .inquiry-table.ui-datatable-reflow .ui-datatable-tablewrapper,
    body .employee-page-outlet .inquiry-table.ui-datatable-reflow table,
    body .employee-page-outlet .inquiry-table.ui-datatable-reflow tbody,
    body .employee-inquiry-page .inquiry-table.ui-datatable-reflow .ui-datatable-tablewrapper,
    body .employee-inquiry-page .inquiry-table.ui-datatable-reflow table,
    body .employee-inquiry-page .inquiry-table.ui-datatable-reflow tbody,
    body .employee-page-outlet .cardops-table.ui-datatable-reflow .ui-datatable-tablewrapper,
    body .employee-page-outlet .cardops-table.ui-datatable-reflow table,
    body .employee-page-outlet .cardops-table.ui-datatable-reflow tbody {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    body .employee-page-outlet .operator-documents-table.ui-datatable-reflow td[role="gridcell"],
    body .transaction-report-table.ui-datatable-reflow td[role="gridcell"],
    body .employee-applications-page .apps-table.ui-datatable-reflow td[role="gridcell"],
    body .employee-page-outlet .inquiry-table.ui-datatable-reflow td[role="gridcell"],
    body .employee-inquiry-page .inquiry-table.ui-datatable-reflow td[role="gridcell"],
    body .employee-page-outlet .cardops-table.ui-datatable-reflow td[role="gridcell"] {
        float: none !important;
        clear: both !important;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    body .employee-page-outlet .operator-documents-table.ui-datatable-reflow td[role="gridcell"] > *,
    body .transaction-report-table.ui-datatable-reflow td[role="gridcell"] > *,
    body .employee-applications-page .apps-table.ui-datatable-reflow td[role="gridcell"] > *,
    body .employee-page-outlet .inquiry-table.ui-datatable-reflow td[role="gridcell"] > *,
    body .employee-inquiry-page .inquiry-table.ui-datatable-reflow td[role="gridcell"] > *,
    body .employee-page-outlet .cardops-table.ui-datatable-reflow td[role="gridcell"] > * {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: anywhere;
    }

    /* The PrimeFaces mobile stylesheet hides table footers. A semantic summary
       placed beside each report remains visible and readable on phones. */
    .aeo-mobile-table-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.55rem 1rem;
        box-sizing: border-box;
        width: 100%;
        margin-top: 0.75rem;
        padding: 0.85rem 1rem;
        border: 1px solid #c7dce4;
        border-radius: 0.8rem;
        background: linear-gradient(135deg, #eef7f8, #f8fbfc);
        color: #173f59;
        box-shadow: 0 4px 12px rgba(15, 61, 82, 0.06);
        direction: rtl;
    }

    .aeo-mobile-table-summary-label,
    .aeo-mobile-table-summary-value,
    .aeo-mobile-table-summary-metrics {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.4rem;
        min-width: 0;
    }

    .aeo-mobile-table-summary-label {
        font-size: 0.82rem;
        font-weight: 800;
    }

    .aeo-mobile-table-summary-label .pi {
        color: #047857;
    }

    .aeo-mobile-table-summary-value,
    .aeo-mobile-table-summary-metrics {
        color: #075985;
        font-size: 0.94rem;
        font-weight: 800;
    }

    .aeo-mobile-table-summary-metrics > span + span::before {
        content: "\2022";
        margin-inline-end: 0.4rem;
        color: #7d94a4;
    }
}

@media (max-width: 420px) {
    .aeo-mobile-table-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .aeo-mobile-table-summary-value,
    .aeo-mobile-table-summary-metrics {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aeo-mobile-table-summary,
    body .ui-datatable-reflow .ui-reflow-dropdown {
        transition: none !important;
    }
}