/* Compact summaries on phones. Forms, document sheets and data tables keep their own layout. */
@media screen and (max-width: 767.98px) {
    /* Match only Bootstrap columns that contain a summary card directly. */
    .app-main .row:has(> [class*="col-"] > :is(.metric-card, .dashboard-card-link)) {
        --bs-gutter-x: 0.625rem;
        --bs-gutter-y: 0.625rem;
    }

    .app-main .row > [class*="col-"]:has(> :is(.metric-card, .dashboard-card-link)) {
        flex: 0 0 50%;
        width: 50%;
        min-width: 0;
    }

    .app-main .row > [class*="col-"] > .metric-card,
    .app-main .dashboard-card-link > :is(.metric-card, .kpi-card),
    .app-main .ideas-stat-grid > .metric-card {
        height: 100%;
        min-height: 106px;
        min-width: 0;
        padding: 0.75rem;
        border-radius: 15px;
        justify-content: flex-start;
        overflow-wrap: anywhere;
    }

    .app-main .metric-card .metric-label {
        font-size: 0.8rem;
        line-height: 1.3;
        letter-spacing: 0;
        margin-bottom: 0.4rem;
    }

    .app-main .metric-card .metric-value {
        font-size: 1.2rem;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .app-main .metric-card .small {
        margin-top: 0.25rem;
        font-size: 0.74rem;
        line-height: 1.35;
    }

    .app-main .dashboard-page .kpi-card {
        grid-template-columns: 28px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 0.45rem;
        row-gap: 0.5rem;
    }

    .app-main .dashboard-page .kpi-card .kpi-icon {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    .app-main .dashboard-page .kpi-card .kpi-label {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .app-main .dashboard-page .kpi-card .kpi-value {
        min-height: 28px;
        font-size: 1.4rem;
        justify-content: flex-start;
        text-align: left;
    }

    /* Known summary grids in modules and their dialogs; no DOM rearrangement. */
    body :is(.ideas-stat-grid, .billing-kpis, .billing-command-strip,
        .billing-notice-summary, .billing-payment-summary, .billing-global-notice-summary,
        .labels-preview-meta, .op-loss-summary-grid,
        .op-pigmentation-metrics, .op-hero-metrics, .op-tech-strip, .op-cost-grid,
        .op-kpi-grid, .production-monitor-kpis, .production-monitor-daily-stats,
        .production-monitor-day-hero) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem;
    }

    body .op-kpi-grid.op-kpi-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body :is(.billing-kpi, .billing-command-card, .billing-notice-summary-item,
        .billing-payment-summary-item, .op-loss-summary-card, .op-pigmentation-metric,
        .op-metric-card, .op-tech-card, .op-cost-tile, .op-kpi-item,
        .production-monitor-kpi, .production-monitor-daily-stat, .production-monitor-day-stat,
        .labels-preview-meta-card, .billing-global-notice-summary > div) {
        min-width: 0;
        padding: 0.75rem;
        border-radius: 15px;
        overflow-wrap: anywhere;
    }

    body :is(.billing-kpi, .billing-command-card, .production-monitor-kpi) {
        min-height: 106px;
    }

    body :is(.billing-kpi-top, .production-monitor-kpi-head) {
        align-items: flex-start;
        gap: 0.4rem;
    }

    body :is(.billing-kpi-icon, .production-monitor-kpi-icon) {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        border-radius: 8px;
        font-size: 0.8rem;
    }

    body :is(.billing-kpi small, .billing-command-card > span,
        .production-monitor-kpi-label, .production-monitor-daily-stat > span,
        .production-monitor-day-stat > span, .labels-preview-meta-card .labels-mini-title,
        .op-loss-summary-label) {
        font-size: 0.76rem;
        line-height: 1.3;
        letter-spacing: 0;
        text-transform: none;
    }

    body :is(.billing-kpi > strong, .billing-command-card > strong,
        .production-monitor-kpi-value, .production-monitor-daily-stat > strong,
        .production-monitor-day-stat > strong,
        .op-loss-summary-value) {
        font-size: 1.15rem;
        line-height: 1.25;
        font-variant-numeric: tabular-nums;
        white-space: normal;
    }

    body :is(.production-monitor-kpi-note, .op-loss-summary-note) {
        font-size: 0.74rem;
        line-height: 1.35;
    }

    body .ideas-stat-grid > .ideas-stat-card {
        align-items: flex-start;
    }

    /* Keep the final summary balanced when its group contains an odd number. */
    body :is(.billing-kpis, .billing-command-strip, .billing-notice-summary,
        .billing-payment-summary, .op-pigmentation-metrics, .op-kpi-grid)
        > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    body .op-hero-metrics > .op-metric-card.is-wide {
        grid-column: 1 / -1;
    }

    body .op-metric-card .op-metric-subline {
        flex-wrap: wrap;
        gap: 0.15rem 0.4rem;
    }

    body .op-metric-card .op-metric-subline b {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body :is(.op-metric-card, .op-tech-card, .op-cost-tile, .op-kpi-item) strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}