/* Page Ventes — présentation mobile simplifiée */
@media (max-width: 767.98px) {
    .sales-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 28px;
        overflow-x: hidden;
    }

    .sales-page .sales-mobile-header {
        align-items: stretch !important;
        gap: 14px !important;
        margin-bottom: 18px !important;
    }

    .sales-page .sales-mobile-header h2 {
        width: 100%;
        color: var(--text);
        font-size: 1.65rem;
        line-height: 1.15;
    }

    .sales-page .sales-granularity {
        display: flex;
        width: 100%;
    }

    .sales-page .sales-granularity .btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 6px;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .sales-page .sales-kpi-grid {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
        margin-bottom: 18px !important;
    }

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

    .sales-page .sales-kpi-grid .card {
        min-height: 142px;
        height: 100%;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--surface);
        box-shadow: 0 7px 20px rgba(23, 50, 77, 0.06) !important;
    }

    .sales-page .sales-kpi-grid .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 16px 14px;
    }

    .sales-page .sales-kpi-label {
        min-height: 2.3em;
        margin-bottom: 7px;
        color: #77746f;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .sales-page .sales-kpi-value {
        margin-bottom: 7px;
        color: var(--text);
        font-size: clamp(1.25rem, 5.5vw, 1.65rem);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    .sales-page .sales-kpi-delta {
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .sales-page .sales-traffic-col,
    .sales-page .sales-restaurant-card,
    .sales-page .sales-detail-card {
        display: none !important;
    }

    .sales-page .sales-trend-col {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .sales-page .sales-chart-card {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: 0 7px 20px rgba(23, 50, 77, 0.06) !important;
    }

    .sales-page .sales-chart-card .card-header {
        padding: 15px 16px;
        background: var(--filter-surface);
        border-bottom: 1px solid var(--border);
        font-size: 1rem;
        font-weight: 700;
    }

    .sales-page .sales-chart-card .card-body {
        min-height: 286px;
        padding: 4px !important;
    }

    .sales-page .sales-trend-col .dash-graph,
    .sales-page .sales-trend-col .js-plotly-plot,
    .sales-page .sales-trend-col .plot-container,
    .sales-page .sales-trend-col .svg-container {
        width: 100% !important;
        height: 280px !important;
    }
}


.sales-mobile-restaurant-table {
    display: none;
}

/* Mobile Ventes : tableau par restaurant */
@media (max-width: 767.98px) {
    /* Aucun graphique sur la vue mobile Ventes. */
    .sales-page .sales-trend-col,
    .sales-page .sales-traffic-col,
    .sales-page
    [class*="col-"]:has(#sales-restaurant-chart) {
        display: none !important;
    }

    .sales-page .sales-restaurant-card {
        display: block !important;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--surface);
        box-shadow:
            0 7px 20px rgba(23, 50, 77, .06)
            !important;
    }

    .sales-page .sales-restaurant-card .card-header {
        padding: 15px 16px;
        background: var(--filter-surface);
        border-bottom: 1px solid var(--border);
        color: var(--text);
        font-size: 1rem;
        font-weight: 700;
    }

    .sales-page .sales-restaurant-card .card-body {
        padding: 0 !important;
    }

    .sales-page
    [class*="col-"]:has(#sales-restaurant-table) {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0;
    }

    .sales-desktop-restaurant-table {
        display: none !important;
    }

    .sales-mobile-restaurant-table {
        display: block;
        width: 100%;
    }

    .sales-mobile-restaurant-header,
    .sales-mobile-restaurant-row {
        display: grid;
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(80px, .9fr)
            minmax(80px, .9fr);
        align-items: center;
        gap: 8px;
    }

    .sales-mobile-restaurant-header {
        padding: 11px 13px;
        background: #f5efe6;
        border-bottom: 1px solid var(--border);
        color: #66717d;
        font-size: .68rem;
        font-weight: 800;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .sales-mobilele-restaurant-header > div:not(:first-child),
    .sales-mobile-restaurant-header > div:not(:first-child) {
        text-align: right;
    }

    .sales-mobile-restaurant-row {
        min-height: 52px;
        padding: 10px 13px;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        font-size: .8rem;
    }

    .sales-mobile-restaurant-row:last-child {
        border-bottom: 0;
    }

    .sales-mobile-restaurant-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
    }

    .sales-mobile-restaurant-value {
        text-align: right;
        white-space: nowrap;
        font-weight: 700;
    }

    .sales-page .sales-kpi-helper {
        margin-top: 8px;
        color: var(--text-muted);
        font-size: .66rem;
        font-weight: 600;
        line-height: 1.3;
    }

    .sales-page .sales-kpi-grid .card {
        min-height: 166px;
    }
}


/* Mobile : période globale uniquement */
@media (max-width: 767.98px) {
    .sales-page .sales-granularity {
        display: none !important;
    }

    .sales-page .sales-mobile-header {
        margin-bottom: 18px !important;
    }
}