/* Résumés mobiles Canaux, Paiements et Mix produits */

.channel-mobile-summary,
.payments-mobile-summary,
.pmix-mobile-content {
    display: none;
}

@media (max-width: 767.98px) {
    .channel-mix-page,
    .payments-page,
    .pmix-summary-page {
        padding: 0 12px 28px !important;
        overflow-x: hidden;
    }

    .channel-mix-page h2,
    .payments-page h2,
    .pmix-summary-page :is(h1, h2) {
        color: var(--text);
        font-size: 1.65rem;
        line-height: 1.15;
    }

    /* Canaux */
    .channel-mix-page .channel-pie-col,
    .channel-mix-page .channel-desktop-table {
        display: none !important;
    }

    .channel-mix-page .channel-summary-col,
    .channel-mix-page .channel-trend-col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .channel-mobile-summary {
        display: block;
    }

    .channel-mix-page .card,
    .payments-page .card,
    .pmix-summary-page .card {
        overflow: hidden;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-lg) !important;
        background: var(--surface) !important;
        box-shadow: var(--shadow-card) !important;
    }

    .channel-mix-page .card-header,
    .payments-page .card-header,
    .pmix-summary-page .card-header {
        padding: 15px 16px;
        background: var(--filter-surface) !important;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        font-weight: 700;
    }

    .channel-mobile-row,
    .payment-mobile-row,
    .pmix-mobile-row {
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }

    .channel-mobile-row:last-child,
    .payment-mobile-row:last-child,
    .pmix-mobile-row:last-child {
        border-bottom: 0;
    }

    .channel-mobile-row-head,
    .payment-mobile-row-head,
    .pmix-mobile-row-head {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        color: var(--text);
        font-size: 0.9rem;
    }

    .channel-mobile-bar,
    .payment-mobile-bar,
    .pmix-mobile-bar {
        height: 8px;
        margin: 8px 0 5px;
        overflow: hidden;
        border-radius: 999px;
        background: var(--border);
    }

    .channel-mobile-bar-fill,
    .payment-mobile-bar-fill,
    .pmix-mobile-bar-fill {
        height: 100%;
        border-radius: inherit;
        background: var(--brand-accent);
    }

    .channel-mobile-row-meta,
    .payment-mobile-row-meta,
    .pmix-mobile-row-meta {
        color: var(--text-muted);
        font-size: 0.72rem;
    }

    .channel-mix-page .channel-trend-row {
        margin-top: 16px;
    }

    .channel-mix-page .channel-trend-col .card-body {
        padding: 4px !important;
    }

    .channel-mix-page #p4-channel-trend-chart,
    .channel-mix-page .channel-trend-col .js-plotly-plot,
    .channel-mix-page .channel-trend-col .plot-container,
    .channel-mix-page .channel-trend-col .svg-container {
        width: 100% !important;
        height: 300px !important;
        min-height: 300px !important;
    }

    /* Paiements */
    .payments-page .payments-ai-action,
    .payments-page .payments-desktop-charts,
    .payments-page .payments-desktop-table {
        display: none !important;
    }

    .payments-page .payments-title-col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .payments-page #p21-kpis > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .payments-page #p21-kpis .tuco-kpi-card {
        min-height: 0;
    }

    .payments-page #p21-kpis .card-body {
        padding: 18px;
    }

    .payments-mobile-summary {
        display: block;
        margin-top: 4px;
    }

    .payments-mobile-summary .card-body {
        padding: 5px 16px 8px;
    }

    /* Mix produits */
    .pmix-summary-page .nav-tabs,
    .pmix-summary-page .pmix-ai-action,
    .pmix-summary-page .pmix-desktop-content {
        display: none !important;
    }

    .pmix-summary-page .pmix-title-col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .pmix-summary-page .pmix-subtitle {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .pmix-summary-page .pmix-filter-card .card-body {
        padding: 16px;
    }

    .pmix-mobile-content {
        display: block;
    }

    .pmix-mobile-content
    .pmix-kpi-grid > [class*="col-"] {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }

    .pmix-mobile-content .tuco-kpi-card {
        min-height: 145px;
    }

    .pmix-mobile-content
    .tuco-kpi-card .card-body {
        padding: 14px 12px;
    }

    .pmix-mobile-content .tuco-kpi-label {
        font-size: 0.68rem;
        line-height: 1.2;
    }

    .pmix-mobile-content
    .tuco-pmix-kpi-value {
        font-size: 1.3rem;
        overflow-wrap: anywhere;
    }

    .pmix-mobile-list-card .card-body {
        padding: 5px 16px 8px;
    }

    .pmix-mobile-product {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }

    .pmix-mobile-product:last-child {
        border-bottom: 0;
    }

    .pmix-mobile-rank {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--brand-accent-soft);
        color: var(--brand-accent);
        font-size: 0.75rem;
        font-weight: 700;
    }

    .pmix-mobile-product-name {
        min-width: 0;
    }

    .pmix-mobile-product-name strong,
    .pmix-mobile-product-name small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pmix-mobile-product-name strong {
        color: var(--text);
        font-size: 0.86rem;
    }

    .pmix-mobile-product-name small {
        margin-top: 2px;
        color: var(--text-muted);
        font-size: 0.7rem;
    }

    .pmix-mobile-product-value {
        color: var(--text);
        font-size: 0.82rem;
        font-weight: 700;
        white-space: nowrap;
    }
}


/* Mobile : masquer la tendance des canaux */
@media (max-width: 767.98px) {
    .channel-mix-page .channel-trend-row {
        display: none !important;
    }
}