/* /administration : thèmes, densités, menu replié, page Mon affichage et tableau de bord personnalisable.
   Le thème Osbaze (par défaut) est dans admin.css; chaque autre thème redéfinit ses variables sous .admin-app[data-theme].
   Tailles en pixels entiers seulement (pas de décimaux générés en C#). */

/* Hors du thème Osbaze, les liens prennent l'accent du thème. */
.admin-app[data-theme]:not([data-theme="osbaze"]) {
    --os-link: var(--os-blue);
}

/* ---------- Nuit : sombre ---------- */

.admin-app[data-theme="nuit"] {
    color-scheme: dark;
    --os-navy: #0a101d;
    --os-navy-2: #111a2e;
    --os-blue: #4c9df0;
    --os-blue-rgb: 76, 157, 240;
    --os-blue-hover: #6aaef3;
    --os-blue-active: #3a8be0;
    --os-blue-soft: #13243d;
    --os-blue-border: #24456e;
    --os-sky: #67d0f7;
    --os-green: #4cc35a;
    --os-green-dark: #3aa548;
    --os-success: #3fb257;
    --os-success-rgb: 63, 178, 87;
    --os-danger: #f87171;
    --os-bg: #0d1424;
    --os-surface: #141d30;
    --os-surface-2: #18233a;
    --os-surface-3: #1f2b45;
    --os-border: #26324a;
    --os-border-strong: #34425e;
    --os-ink: #eef2f8;
    --os-text: #cfd8e6;
    --os-muted: #8e9bb3;
    --os-subtle: #67748c;
    --os-hover: #1a2640;
    --os-info-text: #9cc7f5;
    --os-focus: rgba(76, 157, 240, .35);
    --os-side-bg: #0a101d;
    --os-side-line: rgba(255, 255, 255, .06);
    --os-side-edge: #1c2740;
    --os-side-active-bg: rgba(76, 157, 240, .16);
    --os-topbar-bg: rgba(13, 20, 36, .88);
    --os-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .25);
    --os-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .65);
}

    .admin-app[data-theme="nuit"] img:not(.admin-brand img) {
        filter: brightness(.92);
    }

    /* Pastilles d'étape des commandes : teintes translucides plutôt que pastel sur fond sombre. */
    .admin-app[data-bs-theme="dark"] .order-status.status-confirmed { background: rgba(139, 92, 246, .2); color: #c4b5fd; }
    .admin-app[data-bs-theme="dark"] .order-status.status-preparing { background: rgba(245, 158, 11, .18); color: #fcd34d; }
    .admin-app[data-bs-theme="dark"] .order-status.status-completed { background: rgba(34, 197, 94, .18); color: #86efac; }
    .admin-app[data-bs-theme="dark"] .badge.text-bg-light { background-color: var(--os-surface-3) !important; color: var(--os-text) !important; }

/* ---------- Épuré : clair, menu blanc ---------- */

.admin-app[data-theme="epure"] {
    --os-navy: #111113;
    --os-blue: #2563eb;
    --os-blue-rgb: 37, 99, 235;
    --os-blue-hover: #1d4ed8;
    --os-blue-active: #1e40af;
    --os-blue-soft: #eff4ff;
    --os-blue-border: #c7d7fb;
    --os-sky: #2563eb;
    --os-green: #16a34a;
    --os-green-dark: #15803d;
    --os-success: #16a34a;
    --os-success-rgb: 22, 163, 74;
    --os-bg: #fafafa;
    --os-surface: #fff;
    --os-surface-2: #f7f7f8;
    --os-surface-3: #f0f0f2;
    --os-border: #ececef;
    --os-border-strong: #d9d9de;
    --os-ink: #111113;
    --os-text: #2e2e33;
    --os-muted: #6b6b76;
    --os-subtle: #9a9aa5;
    --os-hover: #f6f7f9;
    --os-info-text: #1e40af;
    --os-focus: rgba(37, 99, 235, .2);
    --os-side-bg: #fff;
    --os-side-text: #3f3f46;
    --os-side-icon: #8b8b95;
    --os-side-title: #a1a1aa;
    --os-side-strong: #111113;
    --os-side-hover: #f4f4f5;
    --os-side-active-bg: var(--os-blue-soft);
    --os-side-active-text: var(--os-blue);
    --os-side-active-icon: var(--os-blue);
    --os-side-marker: var(--os-blue);
    --os-side-line: #ececef;
    --os-side-edge: #ececef;
    --os-topbar-bg: rgba(250, 250, 250, .9);
    --os-radius: 12px;
    --os-radius-sm: 8px;
    --os-shadow: 0 1px 2px rgba(17, 17, 19, .04);
    --os-shadow-lg: 0 12px 32px -14px rgba(17, 17, 19, .18);
}

    .admin-app[data-theme="epure"] .admin-nav-toggle {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath stroke='%233f3f46' stroke-linecap='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'/%3e%3c/svg%3e");
    }

    .admin-app[data-theme="epure"] .admin-topbar {
        border-bottom-color: transparent;
    }

    .admin-app[data-theme="epure"] .admin-nav .nav-link.active::before {
        display: none;
    }

/* ---------- Contraste élevé ---------- */

.admin-app[data-theme="contraste"] {
    --os-navy: #000;
    --os-blue: #0040c1;
    --os-blue-rgb: 0, 64, 193;
    --os-blue-hover: #00308f;
    --os-blue-active: #002470;
    --os-blue-soft: #e6edff;
    --os-blue-border: #0040c1;
    --os-sky: #ffd400;
    --os-green: #007a1f;
    --os-green-dark: #005c17;
    --os-success: #007a1f;
    --os-success-rgb: 0, 122, 31;
    --os-danger: #b00020;
    --os-bg: #fff;
    --os-surface: #fff;
    --os-surface-2: #f2f2f2;
    --os-surface-3: #e6e6e6;
    --os-border: #6b6b6b;
    --os-border-strong: #1a1a1a;
    --os-ink: #000;
    --os-text: #000;
    --os-muted: #333;
    --os-subtle: #555;
    --os-hover: #e8eefc;
    --os-info-text: #002b80;
    --os-focus: rgba(0, 64, 193, .5);
    --os-side-bg: #000;
    --os-side-text: #fff;
    --os-side-icon: #fff;
    --os-side-title: #ffd400;
    --os-side-strong: #fff;
    --os-side-hover: #262626;
    --os-side-active-bg: #ffd400;
    --os-side-active-text: #000;
    --os-side-active-icon: #000;
    --os-side-marker: #ffd400;
    --os-side-line: #444;
    --os-topbar-bg: #fff;
    --os-shadow: none;
    --os-shadow-lg: 0 0 0 2px #000;
}

    .admin-app[data-theme="contraste"] .admin-topbar {
        border-bottom: 2px solid #000;
    }

    .admin-app[data-theme="contraste"] .admin-content a:not(.btn, .admin-tile, .dash-kpi, .nav-link, .shop *) {
        text-decoration: underline;
    }

    .admin-app[data-theme="contraste"] :focus-visible {
        outline: 3px solid #ffd400 !important;
        outline-offset: 1px;
        box-shadow: 0 0 0 5px #000 !important;
    }

    .admin-app[data-theme="contraste"] .admin-nav .nav-section {
        font-size: 12px;
    }

    .admin-app[data-theme="contraste"] .admin-nav .nav-badge {
        color: #000;
    }

/* ---------- Terre : tons chauds ---------- */

.admin-app[data-theme="terre"] {
    --os-navy: #2a211b;
    --os-navy-2: #3a2e25;
    --os-blue: #c2581f;
    --os-blue-rgb: 194, 88, 31;
    --os-blue-hover: #a5481a;
    --os-blue-active: #8a3c15;
    --os-blue-soft: #fbefe6;
    --os-blue-border: #f0c9ad;
    --os-sky: #f0a46c;
    --os-green: #5f8f4a;
    --os-green-dark: #4a7339;
    --os-success: #4f8a3c;
    --os-success-rgb: 79, 138, 60;
    --os-danger: #b42318;
    --os-bg: #f7f3ee;
    --os-surface: #fffdfa;
    --os-surface-2: #faf6f1;
    --os-surface-3: #f1ebe3;
    --os-border: #e9e1d6;
    --os-border-strong: #d6cabb;
    --os-ink: #2a211b;
    --os-text: #43372e;
    --os-muted: #7a6a5c;
    --os-subtle: #a3927f;
    --os-hover: #f8f1e9;
    --os-info-text: #8a3c15;
    --os-focus: rgba(194, 88, 31, .22);
    --os-side-bg: #2a211b;
    --os-side-text: #e8dccf;
    --os-side-icon: #b9a493;
    --os-side-title: rgba(232, 220, 207, .55);
    --os-side-active-bg: rgba(240, 164, 108, .16);
    --os-side-active-icon: #f0a46c;
    --os-side-marker: #e07a3f;
    --os-topbar-bg: rgba(247, 243, 238, .92);
    --os-shadow: 0 1px 2px rgba(42, 33, 27, .06), 0 1px 3px rgba(42, 33, 27, .04);
    --os-shadow-lg: 0 12px 32px -12px rgba(42, 33, 27, .24);
}

/* ---------- Vif : coloré ---------- */

.admin-app[data-theme="vif"] {
    --os-navy: #3b1f8f;
    --os-navy-2: #4c2aa6;
    --os-blue: #7c3aed;
    --os-blue-rgb: 124, 58, 237;
    --os-blue-hover: #6d28d9;
    --os-blue-active: #5b21b6;
    --os-blue-soft: #f3edff;
    --os-blue-border: #d8c7fb;
    --os-sky: #22d3ee;
    --os-green: #10b981;
    --os-green-dark: #059669;
    --os-success: #10b981;
    --os-success-rgb: 16, 185, 129;
    --os-danger: #e11d48;
    --os-bg: #f6f5fc;
    --os-surface: #fff;
    --os-surface-2: #faf9ff;
    --os-surface-3: #efecfa;
    --os-border: #e7e3f5;
    --os-border-strong: #d2cbea;
    --os-ink: #1e1537;
    --os-text: #352b52;
    --os-muted: #6e6590;
    --os-subtle: #9d95ba;
    --os-hover: #f7f3ff;
    --os-info-text: #5b21b6;
    --os-focus: rgba(124, 58, 237, .22);
    --os-side-bg: linear-gradient(180deg, #4c1d95 0%, #312e81 55%, #1e3a8a 100%);
    --os-side-text: #e4dcff;
    --os-side-icon: #b7a8f0;
    --os-side-title: rgba(228, 220, 255, .6);
    --os-side-hover: rgba(255, 255, 255, .1);
    --os-side-active-bg: rgba(255, 255, 255, .16);
    --os-side-active-icon: #fbbf24;
    --os-side-marker: #22d3ee;
    --os-side-line: rgba(255, 255, 255, .1);
    --os-topbar-bg: rgba(246, 245, 252, .9);
    --os-radius: 14px;
    --os-radius-sm: 10px;
    --os-shadow: 0 1px 2px rgba(76, 29, 149, .06), 0 2px 6px rgba(76, 29, 149, .05);
    --os-shadow-lg: 0 16px 36px -14px rgba(76, 29, 149, .3);
}

    .admin-app[data-theme="vif"] .dash-kpi::before {
        width: 4px;
        background: linear-gradient(180deg, var(--os-blue), var(--os-sky));
    }

    .admin-app[data-theme="vif"] .admin-tile .icon {
        background: linear-gradient(135deg, var(--os-blue-soft), #e0f7fb);
    }

    .admin-app[data-theme="vif"] .btn-primary:not(.shop *) {
        background-image: linear-gradient(135deg, var(--os-blue), color-mix(in srgb, var(--os-blue) 70%, #2563eb));
    }

/* ---------- Densité ---------- */

.admin-app[data-density="compacte"] {
    --os-cell-y: 5px;
    --os-cell-x: 10px;
    --os-control-y: 4px;
    --os-nav-h: 30px;
    --os-gap: 10px;
    --os-pad: 14px;
    --os-content-y: 20px;
    --os-content-x: 24px;
    --os-topbar: 52px;
}

.admin-app[data-density="aeree"] {
    --os-cell-y: 13px;
    --os-cell-x: 14px;
    --os-control-y: 9px;
    --os-nav-h: 40px;
    --os-gap: 18px;
    --os-pad: 22px;
    --os-content-y: 36px;
    --os-content-x: 40px;
    --os-topbar: 64px;
}

/* ---------- Bouton du menu replié, dans l'en-tête ---------- */

.admin-collapse {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 4px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--os-radius-sm);
    background: transparent;
    color: var(--os-muted);
    cursor: pointer;
    transition: background-color .12s, color .12s;
}

    .admin-collapse:hover {
        background: var(--os-surface-2);
        border-color: var(--os-border);
        color: var(--os-blue);
    }

/* ---------- Menu replié (grands écrans) : les icônes seulement, le nom en info-bulle ---------- */

@media (min-width: 992px) {
    .admin-app.is-collapsed {
        --os-sidebar: 68px;
    }

    .admin-sidebar {
        transition: width .18s ease;
    }

    .admin-app.is-collapsed .admin-brand {
        justify-content: center;
        padding: 0;
    }

        .admin-app.is-collapsed .admin-brand img {
            width: 34px;
            height: 34px;
            object-fit: cover;
            object-position: left center;
        }

    .admin-app.is-collapsed .admin-nav-scroll {
        overflow: visible;
        padding: 12px 10px 24px;
    }

    .admin-app.is-collapsed .admin-sidebar {
        overflow: visible;
    }

    /* Toutes les sections déployées, séparées par une ligne au lieu de leur titre. */
    .admin-app.is-collapsed .admin-nav .nav-section {
        min-height: 0;
        height: 1px;
        margin: 6px 8px;
        padding: 0;
        background: var(--os-side-line);
        pointer-events: none;
    }

        .admin-app.is-collapsed .admin-nav .nav-section > * {
            display: none;
        }

    .admin-app.is-collapsed .admin-nav .nav-group:not(.open) .nav-group-items {
        display: flex;
    }

    .admin-app.is-collapsed .admin-nav .nav-link {
        justify-content: center;
        padding: 6px 0;
    }

        .admin-app.is-collapsed .admin-nav .nav-link.active::before {
            left: -10px;
        }

        .admin-app.is-collapsed .admin-nav .nav-link .nav-text {
            position: absolute;
            left: calc(100% + 12px);
            top: 50%;
            z-index: 40;
            padding: 6px 10px;
            border-radius: var(--os-radius-sm);
            background: #111827;
            color: #fff;
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .4);
            opacity: 0;
            pointer-events: none;
            transform: translate(-4px, -50%);
            transition: opacity .12s, transform .12s;
        }

        .admin-app.is-collapsed .admin-nav .nav-link:hover .nav-text,
        .admin-app.is-collapsed .admin-nav .nav-link:focus-visible .nav-text {
            opacity: 1;
            transform: translate(0, -50%);
        }

        .admin-app.is-collapsed .admin-nav .nav-link .nav-badge {
            position: absolute;
            top: 2px;
            right: 4px;
            min-width: 16px;
            padding: 1px 4px;
            font-size: 10px;
        }
}

@media (max-width: 991px) {
    .admin-collapse {
        display: none;
    }
}

/* ---------- Mon affichage ---------- */

.appearance-section {
    margin-bottom: 24px;
}

    .appearance-section > h2 {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
    }

    .appearance-section > p {
        margin-bottom: 14px;
        color: var(--os-muted);
    }

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--os-gap);
}

.theme-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 10px 14px;
    border: 2px solid var(--os-border);
    border-radius: var(--os-radius);
    background: var(--os-surface);
    color: var(--os-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}

    .theme-card:hover {
        transform: translateY(-1px);
        border-color: var(--os-blue-border);
        box-shadow: var(--os-shadow-lg);
    }

    .theme-card.is-selected {
        border-color: var(--os-blue);
        box-shadow: 0 0 0 3px var(--os-focus);
    }

    .theme-card strong {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
        font-size: var(--os-fs-lg);
    }

        .theme-card strong .icon {
            color: var(--os-blue);
        }

    .theme-card span {
        padding: 0 4px;
        color: var(--os-muted);
        font-size: var(--os-fs-sm);
        line-height: 1.4;
    }

/* Petite maquette du thème : menu, en-tête, cartes et bouton. */
.theme-mock {
    display: grid;
    grid-template-columns: 26% 1fr;
    height: 108px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .08);
}

    .theme-mock .mock-side {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px 8px;
    }

        .theme-mock .mock-side i {
            display: block;
            height: 5px;
            border-radius: 3px;
            opacity: .45;
        }

            .theme-mock .mock-side i:nth-child(2) {
                opacity: 1;
            }

    .theme-mock .mock-main {
        display: flex;
        flex-direction: column;
        gap: 7px;
        padding: 10px;
    }

    .theme-mock .mock-cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

        .theme-mock .mock-cards b {
            height: 30px;
            border-radius: 5px;
            border-left: 3px solid;
        }

    .theme-mock .mock-row {
        height: 22px;
        border-radius: 5px;
    }

    .theme-mock .mock-btn {
        width: 44%;
        height: 12px;
        border-radius: 4px;
    }

.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--os-border);
    border-radius: calc(var(--os-radius-sm) + 4px);
    background: var(--os-surface-2);
}

    .segmented button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border: 0;
        border-radius: var(--os-radius-sm);
        background: transparent;
        color: var(--os-muted);
        font-weight: 500;
        cursor: pointer;
    }

        .segmented button:hover {
            color: var(--os-ink);
        }

        .segmented button.is-selected {
            background: var(--os-surface);
            color: var(--os-blue);
            box-shadow: var(--os-shadow);
        }

.accent-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.accent-swatch {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid var(--os-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--os-border-strong);
    cursor: pointer;
    transition: transform .12s;
}

    .accent-swatch:hover {
        transform: scale(1.08);
    }

    .accent-swatch.is-selected {
        box-shadow: 0 0 0 2px var(--os-ink);
    }

        .accent-swatch.is-selected::after {
            content: "";
            position: absolute;
            left: 9px;
            top: 9px;
            width: 12px;
            height: 7px;
            border: solid #fff;
            border-width: 0 0 2px 2px;
            transform: rotate(-45deg);
        }

    .accent-swatch.is-theme {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        padding: 0 12px;
        border-radius: 17px;
        background: var(--os-surface);
        color: var(--os-text);
        font-size: var(--os-fs-sm);
        font-weight: 500;
    }

        .accent-swatch.is-theme.is-selected::after {
            display: none;
        }

.accent-custom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--os-muted);
    font-size: var(--os-fs-sm);
}

    .accent-custom input[type=color] {
        width: 38px;
        height: 34px;
        padding: 2px;
        border: 1px solid var(--os-border-strong);
        border-radius: var(--os-radius-sm);
        background: var(--os-surface);
        cursor: pointer;
    }

.font-size-row {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 460px;
}

    .font-size-row input[type=range] {
        flex: 1 1 auto;
        accent-color: var(--os-blue);
    }

    .font-size-row output {
        min-width: 48px;
        color: var(--os-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.appearance-saved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--os-success);
    font-size: var(--os-fs-sm);
    font-weight: 500;
}

/* ---------- Tableau de bord personnalisable ---------- */

.dash-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: calc(var(--os-gap) + 4px);
    align-items: start;
}

.dash-card {
    grid-column: span 12;
    min-width: 0;
}

    .dash-card.w-4 { grid-column: span 4; }
    .dash-card.w-6 { grid-column: span 6; }
    .dash-card.w-8 { grid-column: span 8; }

    .dash-card > .dash-kpis,
    .dash-card > .dash-stores,
    .dash-card > .admin-tiles {
        margin-bottom: 0;
    }

@media (max-width: 1199px) {
    .dash-card.w-4, .dash-card.w-6, .dash-card.w-8 { grid-column: span 6; }
}

@media (max-width: 767px) {
    .dash-card.w-4, .dash-card.w-6, .dash-card.w-8 { grid-column: span 12; }
}

/* Mode « Modifier l'accueil » : chaque carte a sa barre (glisser, largeur, masquer). */
.dash-grid.is-editing .dash-card {
    position: relative;
    padding: 40px 8px 8px;
    border: 2px dashed var(--os-blue-border);
    border-radius: calc(var(--os-radius) + 4px);
    background: color-mix(in srgb, var(--os-blue-soft) 45%, transparent);
}

    .dash-grid.is-editing .dash-card.is-dragging {
        opacity: .45;
    }

    .dash-grid.is-editing .dash-card.is-drop-target {
        border-color: var(--os-blue);
        background: var(--os-blue-soft);
    }

    .dash-grid.is-editing .dash-card.is-hidden > :not(.dash-card-bar) {
        opacity: .35;
        filter: grayscale(1);
    }

.dash-card-bar {
    position: absolute;
    top: 6px;
    left: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
}

    .dash-card-bar .grip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--os-muted);
        font-size: var(--os-fs-sm);
        font-weight: 600;
        cursor: grab;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dash-card-bar .spacer {
        flex: 1 1 auto;
    }

    .dash-card-bar button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 26px;
        padding: 0 6px;
        border: 1px solid var(--os-border);
        border-radius: 6px;
        background: var(--os-surface);
        color: var(--os-text);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

        .dash-card-bar button:hover {
            border-color: var(--os-blue);
            color: var(--os-blue);
        }

        .dash-card-bar button.is-selected {
            border-color: var(--os-blue);
            background: var(--os-blue);
            color: #fff;
        }

.dash-edit-bar {
    position: sticky;
    top: calc(var(--os-topbar) + 8px);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid var(--os-blue-border);
    border-radius: var(--os-radius);
    background: var(--os-surface);
    box-shadow: var(--os-shadow-lg);
}

    .dash-edit-bar .hint {
        flex: 1 1 260px;
        color: var(--os-muted);
        font-size: var(--os-fs-sm);
    }

.dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .dash-head h1 {
        margin-bottom: 0;
    }

.dash-date {
    margin-top: 4px;
    color: var(--os-muted);
    font-size: var(--os-fs-sm);
}

/* Ventes des 14 derniers jours : barres. */
.dash-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 140px;
    padding-top: 8px;
}

    .dash-chart .bar {
        position: relative;
        flex: 1 1 0;
        min-height: 2px;
        border-radius: 4px 4px 0 0;
        background: linear-gradient(180deg, var(--os-blue), color-mix(in srgb, var(--os-blue) 55%, var(--os-surface)));
        transition: opacity .12s;
    }

        .dash-chart .bar:hover {
            opacity: .8;
        }

        .dash-chart .bar.is-empty {
            background: var(--os-surface-3);
        }

.dash-chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: var(--os-subtle);
    font-size: var(--os-fs-xs);
}

.dash-figure {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

    .dash-figure strong {
        color: var(--os-ink);
        font-size: calc(var(--os-fs) + 12px);
        font-weight: 700;
        letter-spacing: -.02em;
        font-variant-numeric: tabular-nums;
    }

.dash-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--os-success-rgb), .12);
    color: var(--os-success);
    font-size: var(--os-fs-xs);
    font-weight: 600;
}

    .dash-trend.is-down {
        background: color-mix(in srgb, var(--os-danger) 12%, transparent);
        color: var(--os-danger);
    }

/* Commandes par étape : barres horizontales. */
.dash-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .dash-steps li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
        font-size: var(--os-fs-sm);
    }

    .dash-steps .track {
        grid-column: 1 / -1;
        height: 6px;
        border-radius: 3px;
        background: var(--os-surface-3);
        overflow: hidden;
    }

        .dash-steps .track span {
            display: block;
            height: 100%;
            border-radius: 3px;
            background: var(--os-blue);
        }

    .dash-steps li.is-new .track span {
        background: var(--os-green);
    }

.dash-empty {
    padding: 18px 0;
    color: var(--os-muted);
    text-align: center;
}