/*
 * Framework layout guard.
 * Rendering only: keeps shared shells, module grids, dashboards, and wizard pages
 * from collapsing into min-content columns on desktop.
 */

html,
body,
.app-body,
.app-main {
    width: 100%;
    min-width: 0;
}

.app-main {
    display: block;
    overflow-x: clip;
}

.app-content {
    min-width: 0;
}

.app-content--full {
    inline-size: 100%;
}

@media (min-width: 1024px) {
    .app-content,
    .app-content--full {
        min-inline-size: min(100%, 1000px);
    }

    /* The launcher and the Settings home were pinned to 1200px here. That cap
       outlived the rule it qualified: it is written against `.app-content`, so
       it beats `.app-content--full` on specificity and would have been the one
       pair of screens still boxed after every page went full width
       (Hassan, 2026-10-11: "خلى جميع الصفحات فول ويدث"). Both are tile grids
       with auto-fill tracks, so removing the cap gives them more columns rather
       than wider tiles -- the tile width is set by the grid, not by this. */
}

.app-launcher-grid,
.app-module-tile-grid,
.settings-home__grid,
.apps-launcher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: 0.875rem;
    align-items: stretch;
    inline-size: 100%;
    min-inline-size: 0;
}

.app-module-tile {
    inline-size: 100%;
    min-inline-size: 0;
    overflow: hidden;
}

.app-module-tile__body,
.app-module-tile__head,
.app-module-tile__name,
.app-module-tile__description {
    min-inline-size: 0;
}

.app-module-tile__name,
.app-module-tile__description,
.app-module-tile__badge {
    overflow-wrap: anywhere;
}

.ar-dashboard-page,
.financial-dashboard,
.legacy-aging-imports,
.legacy-aging-runs,
.reconciliation-report-page,
.reconciliation-line-list-shell-page,
.portal-receipts-page {
    inline-size: 100%;
    min-inline-size: 0;
}

.ar-dashboard-kpi-grid,
.financial-dashboard__kpi-grid,
.financial-dashboard__sales-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    inline-size: 100%;
}

@media (min-width: 1180px) {
    .ar-dashboard-kpi-grid--4,
    .financial-dashboard__kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.legacy-aging-imports__workflow,
.legacy-aging-runs__form,
.legacy-aging-runs__actions {
    inline-size: 100%;
    min-inline-size: 0;
}

.legacy-aging-imports__toolbar,
.legacy-aging-imports__upload,
.legacy-aging-imports__actions,
.legacy-aging-runs__form,
.legacy-aging-runs__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
}

.legacy-aging-imports__field,
.legacy-aging-runs__form label:not(.legacy-aging-runs__checkbox) {
    min-inline-size: min(16rem, 100%);
}

.legacy-aging-imports__field--grow {
    flex: 1 1 24rem;
}

.legacy-aging-imports__step,
.legacy-aging-imports__section,
.legacy-aging-runs__panel,
.reconciliation-report-preview,
.report-preview {
    min-inline-size: 0;
}

.app-table-wrap,
.ar-data-grid,
.odoo-list-shell,
.reconciliation-list-shell,
.legacy-aging-imports__table-wrap,
.portal-receipts__table-wrap {
    max-inline-size: 100%;
    min-inline-size: 0;
}

.app-table-wrap,
.legacy-aging-imports__table-wrap,
.portal-receipts__table-wrap {
    overflow-x: auto;
}

[dir="rtl"] .app-content,
[dir="rtl"] .app-content--full {
    min-inline-size: 0;
}

@media (max-width: 760px) {
    .app-content,
    .app-content--full {
        min-inline-size: 0;
        padding-inline: 0.75rem;
    }

    .app-launcher-grid,
    .app-module-tile-grid,
    .settings-home__grid,
    .apps-launcher-grid,
    .ar-dashboard-kpi-grid,
    .financial-dashboard__kpi-grid,
    .financial-dashboard__sales-kpis {
        grid-template-columns: 1fr;
    }
}