/* =====================================================================
   DASH ALTA – composants du Design System « Nuit & Lavande »
   Chargé en dernier (après Syncfusion). Couleurs : tokens.css uniquement.
   Sections : composants partagés (ds-*, panel, kpi-board) → tableau de bord
   → classes historiques des pages → pages spécifiques.
   ===================================================================== */

html body { font-feature-settings: "cv11", "ss01"; }
html body .tabular, html body [class^="ds-"], html body .kpi-board { font-variant-numeric: tabular-nums; }

/* ---------- En-tête de page ---------- */
.ds-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; margin: 0 0 20px; }
.ds-page-head > :first-child { min-width: 0; }
.ds-eyebrow { display: block; margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-tertiary); }
.ds-page-title { margin: 0; font-size: clamp(22px, 5.5vw, 30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; color: var(--text-primary); }
.ds-page-sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.ds-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-page-actions > .e-control-wrapper, .ds-page-actions > .e-input-group { width: 160px !important; }
@media (max-width: 575.98px) { .ds-page-actions { width: 100%; } .ds-page-actions > .e-control-wrapper, .ds-page-actions > .e-input-group { flex: 1 1 140px; width: auto !important; } }

/* ---------- Panneau : en-tête séparé par un filet, corps aéré ---------- */
.panel { min-width: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.panel-heading { min-width: 0; }
.panel-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); }
.panel-sub { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-tertiary); }
.panel-body { flex: 1 1 auto; min-width: 0; padding: 14px 16px 16px; }
@media (min-width: 768px) { .panel-head { padding: 16px 20px; } .panel-body { padding: 16px 20px 20px; } }

/* ---------- Grille utilitaire ---------- */
.ds-stack { display: grid; gap: var(--gap); min-width: 0; }

/* ---------- Bande d'indicateurs (KPI) ---------- */
.kpi-board {
    display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.kpi-lead { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px 0; background: var(--highlight); }
.kpi-lead-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-label > i { font-size: 13px; color: var(--text-tertiary); }
.kpi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-gradient); box-shadow: 0 0 0 3px var(--accent-2-soft); }
.kpi-status { font-size: var(--fs-xs); color: var(--text-tertiary); white-space: nowrap; }
.kpi-lead-value { font-size: clamp(32px, 9vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--text-primary); }
.kpi-lead-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-xs); color: var(--text-secondary); }
.kpi-lead-spark { height: 56px; margin: 4px -18px 0; }
.kpi-lead.is-na .kpi-lead-value { color: var(--text-tertiary); }
.kpi-lead.is-na { padding-bottom: 16px; }
.kpi-skel-lead { height: 40px; width: 60%; margin: 4px 0; }
.kpi-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.kpi-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; }
.kpi-cell:nth-child(odd) { border-right: 1px solid var(--border); }
.kpi-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
.kpi-value { font-size: clamp(19px, 5vw, 22px); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-foot { margin-top: auto; font-size: var(--fs-xs); color: var(--text-tertiary); }
.kpi-cell.is-na .kpi-value { color: var(--text-tertiary); font-weight: 500; }
.kpi-trend { font-weight: 650; }
.kpi-trend.is-up { color: var(--success-text); }
.kpi-trend.is-down { color: var(--danger-text); }
@media (min-width: 768px) {
    .kpi-board { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .kpi-lead { padding: 20px 22px 0; border-right: 1px solid var(--border); }
    .kpi-lead-spark { margin: 6px -22px 0; }
    .kpi-cells { border-top: 0; }
    .kpi-cell { padding: 18px 20px; justify-content: center; }
}
@media (min-width: 1280px) {
    .kpi-board { grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); }
    .kpi-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .kpi-cell { border-top: 0 !important; border-right: 1px solid var(--border); }
    .kpi-cell:last-child { border-right: 0; }
}

/* Écart (hausse / baisse) */
.ds-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; }
.ds-delta > i { font-size: 11px; }
.ds-delta.is-up { background: var(--success-bg); color: var(--success-text); }
.ds-delta.is-down { background: var(--danger-bg); color: var(--danger-text); }
.ds-delta.is-flat { background: var(--surface-sunken); color: var(--text-secondary); }

/* ---------- Squelettes aux dimensions des vrais éléments ---------- */
.ds-skel { position: relative; overflow: hidden; display: block; background: var(--surface-sunken); border-radius: 6px; }
.ds-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: ui-shimmer 1.4s infinite; }
html body.dark .ds-skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent); }
.ds-skel-line { height: 12px; width: 60%; }
.ds-skel-value { height: 22px; width: 70%; margin: 4px 0; }
.ds-skel-chart { height: 240px; width: 100%; border-radius: var(--radius-sm); }

/* ---------- Contrôle segmenté ---------- */
.ds-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-sunken); }
.ds-seg button {
    min-height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent;
    font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); cursor: pointer;
    transition: background-color var(--fast) ease, color var(--fast) ease;
}
.ds-seg button:hover { color: var(--text-primary); }
.ds-seg button.is-active { background: var(--surface); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow); }
@media (pointer: coarse) { .ds-seg button { min-height: 34px; padding: 0 12px; } }

/* ---------- Badges de statut ---------- */
.ds-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; line-height: 1.5; white-space: nowrap; background: var(--surface-sunken); color: var(--text-secondary); }
.ds-badge.is-ok { background: var(--success-bg); color: var(--success-text); }
.ds-badge.is-warn { background: var(--warning-bg); color: var(--warning-text); }
.ds-badge.is-err { background: var(--danger-bg); color: var(--danger-text); }
.ds-badge.is-info { background: var(--info-bg); color: var(--info-text); }
.ds-count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 11px; font-weight: 600; }

/* ---------- États (vide / erreur) ---------- */
.ds-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 160px; padding: 20px; text-align: center; border-radius: var(--radius); border: 1px dashed var(--border-strong); background: var(--surface-2); color: var(--text-secondary); font-size: var(--fs-sm); }
.ds-state > i { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); font-size: 17px; color: var(--text-tertiary); }
.ds-state strong { color: var(--text-primary); font-size: var(--fs); font-weight: 600; }
.ds-state.is-error { border: 1px solid transparent; background: var(--danger-bg); color: var(--danger-text); }
.ds-state.is-error > i { color: var(--danger); }
.ds-state.is-error strong { color: var(--danger-text); }
.ds-state .ui-btn { margin-top: 8px; }

/* ---------- Détails techniques repliés (erreurs) ---------- */
.ds-details { margin-top: 4px; font-size: var(--fs-xs); }
.ds-details summary { cursor: pointer; opacity: .8; }
.ds-details p { margin: 4px 0 0; overflow-wrap: anywhere; opacity: .85; }

/* ---------- Graphiques Syncfusion : police, grilles, axes ---------- */
html body .e-chart text, html body .e-accumulationchart text, html body .e-sparkline text, html body .e-bullet-chart text { font-family: var(--font) !important; }
html body .e-chart [id*="AxisLabel"] { fill: var(--chart-text) !important; font-size: 11px !important; }
html body .e-chart [id*="MajorGridLine"] { stroke: var(--chart-grid) !important; }
html body .e-chart [id*="AxisLine"], html body .e-chart [id*="MajorTickLine"] { stroke: var(--border) !important; }
html body .e-chart [id$="_ChartBorder"], html body .e-chart [id$="_ChartAreaBorder"], html body .e-accumulationchart [id$="_border"] { stroke: transparent !important; fill: transparent !important; }
html body .e-chart [id*="_legend_text"], html body .e-accumulationchart [id*="_legend_text"] { fill: var(--text-secondary) !important; font-size: 12px !important; }
html body .e-chart [id*="_AxisTitle"] { fill: var(--text-tertiary) !important; font-size: 11px !important; font-weight: 500 !important; }
html body .e-chart [id*="_navigation"], html body .e-accumulationchart [id*="_navigation"], html body [id*="_legend_pageup"], html body [id*="_legend_pagedown"] { fill: var(--text-secondary) !important; }
html body [id*="_legend_pagenumber"] { fill: var(--text-secondary) !important; }
html body .e-chart-tooltip, html body div[id$="_tooltip"] .e-tooltip-text { font-family: var(--font) !important; }

/* Infobulles (SfChart, SfAccumulationChart) : fond bleu nuit opaque et lisible dans les deux thèmes
   (Syncfusion dessinait un noir à 75 % d'opacité, grisâtre sur fond clair), texte blanc, ombre douce. */
html body :is(.e-chart, .e-accumulationchart) div[id$="_tooltip"] [id$="_tooltip_path"] { fill: var(--tooltip-bg) !important; opacity: 1 !important; stroke: var(--tooltip-border) !important; stroke-width: 1px !important; }
html body :is(.e-chart, .e-accumulationchart) div[id$="_tooltip"] :is(text, tspan) { fill: var(--tooltip-text) !important; font-family: var(--font) !important; }
html body :is(.e-chart, .e-accumulationchart) div[id$="_tooltip"] [id$="_tooltip_header_path"] { stroke: rgba(255, 255, 255, .16) !important; }
html body :is(.e-chart, .e-accumulationchart) div[id$="_tooltip"] ellipse { stroke: #ffffff !important; stroke-width: 1.5px !important; }
html body :is(.e-chart, .e-accumulationchart) div[id$="_tooltip"] > svg { overflow: visible; filter: drop-shadow(0 10px 22px rgba(8, 12, 32, .30)); }

/* Valeurs au-dessus des barres (ChartTheme.BarLabel) : texte principal du thème, lisible en clair comme en sombre */
html body .e-chart [id*="_Series_"][id*="_Text_"], html body.dark .e-chart [id*="_Series_"][id*="_Text_"] { fill: var(--text-primary) !important; font-weight: 600 !important; }

/* Total en tête d'un panneau de graphique (Shared/ChartTotal.razor) */
.chart-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 8px; min-width: 0; }
.chart-total-label { flex-basis: 100%; font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); }
.chart-total-value { font-size: clamp(20px, 5.2vw, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; animation: ds-value-in 420ms var(--ease) both; }
.chart-total-hint { font-size: var(--fs-xs); color: var(--text-tertiary); }

/* Valeurs qui changent (KPI, totaux) : courte entrée à chaque nouvelle valeur (élément recréé via @key) */
@keyframes ds-value-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.kpi-lead-value, .kpi-cell .kpi-value { animation: ds-value-in 420ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
    .chart-total-value, .kpi-lead-value, .kpi-cell .kpi-value { animation: none !important; }
}

/* =====================================================================
   PAGE : Tableau de bord
   ===================================================================== */
.dash-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) {
    .dash-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-activity, .dash-month { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
    /* Tablette : top articles + insights côte à côte, puis le mois, puis vendeurs + postes */
    .dash-month, .dash-vendeur, .dash-poste { order: 1; }
}
@media (min-width: 1280px) {
    .dash-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
    .dash-activity { grid-column: span 8; }
    .dash-top { grid-column: span 4; }
    .dash-month { grid-column: 1 / -1; }
    .dash-insights, .dash-vendeur, .dash-poste { grid-column: span 4; }
}
.dash-chart-box { min-height: 240px; }
.dash-pie { min-height: 300px; }
.dash-pie .e-accumulationchart { overflow: visible; }
.dash.is-refreshing .kpi-lead-value, .dash.is-refreshing .kpi-value, .dash.is-refreshing .dash-pie, .dash.is-refreshing .dash-chart-box { opacity: .55; transition: opacity var(--med) ease; }

.insight-list { display: grid; gap: 4px; }
.insight { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.insight:last-child { border-bottom: 0; padding-bottom: 0; }
.insight:first-child { padding-top: 0; }
.insight-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 14px; }
.insight-icon.is-accent { background: var(--accent-2-soft); color: var(--accent-2); }
.insight-icon.is-warn { background: var(--warning-bg); color: var(--warning-text); }
.insight-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.insight-label { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); }
.insight-value { font-size: var(--fs-md); font-weight: 650; color: var(--text-primary); overflow-wrap: anywhere; }
.insight-empty { font-size: var(--fs-sm); color: var(--text-tertiary); }
.dash-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-chips .ds-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Sélecteur de date Syncfusion dans l'en-tête de page */
.ds-page-actions .e-input-group.e-control-wrapper.e-date-wrapper { min-height: var(--ctl) !important; border-radius: var(--radius-sm) !important; }
.ds-page-actions .e-input-group.e-control-wrapper.e-date-wrapper input.e-input { min-height: calc(var(--ctl) - 2px); font-size: var(--fs) !important; padding-left: 10px !important; }

/* =====================================================================
   CLASSES HISTORIQUES DES PAGES — définies une seule fois ici.
   Les blocs <style> propres à chaque page sont supprimés : ces règles
   donnent la même identité à toutes les pages sans changer leur balisage
   fonctionnel (grilles, graphiques, événements).
   ===================================================================== */

/* Rythme vertical commun */
html body .app-main .mb-4 { margin-bottom: 14px !important; }
html body .app-main .row.g-4 { --bs-gutter-x: 14px; --bs-gutter-y: 14px; margin-bottom: 14px; }
html body .app-main .row.g-4 > [class*="col-"] > .card { margin-bottom: 0; }

/* Cartes historiques = panneaux : titre en en-tête séparé par un filet */
html body .card, html body .card-grid { border-radius: var(--radius-lg); border-color: var(--border); box-shadow: var(--shadow-sm); }
html body .card > .card-title:first-child, html body .card-grid > .card-title:first-child,
html body .card > .chart-head:first-child, html body .card > .d-flex.justify-content-between:first-child, html body .card > h2.card-title:first-child {
    margin: -16px -16px 14px !important; padding: 13px 16px; border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) {
    html body .card > .card-title:first-child, html body .card-grid > .card-title:first-child,
    html body .card > .chart-head:first-child, html body .card > .d-flex.justify-content-between:first-child, html body .card > h2.card-title:first-child {
        margin: -18px -20px 16px !important; padding: 15px 20px;
    }
}
html body .card-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
html body .card-title-icon { width: auto; height: auto; background: none; color: var(--text-tertiary); font-size: 15px; border-radius: 0; }
html body .card.card-filters { padding: 12px 16px; }

/* Rangées d'indicateurs = bande unique à filets (même langage que la bande du tableau de bord) */
html body .kpi-row, html body .kpi-grid, html body .alta-stats-row {
    gap: 0 !important; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
html body .kpi-row > [class*="col-"], html body .kpi-grid > .kpi-tile, html body .alta-stats-row > .alta-mini-card { box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border); }
html body .kpi-row .card.kpi-card, html body .kpi-grid > .kpi-tile, html body .alta-stats-row > .alta-mini-card { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border); padding: 14px 16px; min-height: 0; }
html body .kpi-row .card.kpi-card { box-shadow: none; }
html body .kpi-row .e-skeleton { border-radius: 0 !important; height: 84px !important; }
html body .kpi-tile-icon { width: auto; height: auto; background: none !important; font-size: 14px; color: var(--text-tertiary) !important; }
html body .kpi-grid > .kpi-tile { flex-direction: column !important; align-items: stretch !important; gap: 4px; }
@media (min-width: 768px) { html body .kpi-row .card.kpi-card, html body .kpi-grid > .kpi-tile, html body .alta-stats-row > .alta-mini-card { padding: 16px 18px; } }

/* En-tête de page « Section → Vue » */

/* Barre de filtres : une ligne compacte (libellé à gauche, contrôles à droite) */
html body .card.card-filters { padding: 12px 14px; }
html body .card-filters .filters-header { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
html body .card-filters .filters-header h2, html body .card-filters .filters-title { margin: 0; font-size: var(--ui-fs); font-weight: 600; color: var(--ui-text); }
html body .card-filters .filters-actions { width: auto; flex: 1 1 220px; justify-content: flex-end; }
html body .card-filters .filters-actions > .e-control-wrapper, html body .card-filters .filters-actions > .e-input-group { max-width: 240px; }
@media (max-width: 575.98px) { html body .card-filters .filters-actions { flex-basis: 100%; } html body .card-filters .filters-actions > * { max-width: none !important; flex: 1 1 auto; } }

/* Indicateurs (KPI) : même gabarit que .ds-kpi */
html body .kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
html body .kpi-row > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; margin: 0; min-width: 0; }
@media (min-width: 992px) { html body .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
html body .kpi-row .e-skeleton { height: 92px !important; border-radius: var(--ui-radius) !important; }
html body .card.kpi-card { height: 100%; min-height: 92px; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
html body .kpi-card .kpi-label { display: flex; align-items: center; gap: 6px !important; font-size: var(--ui-fs-xs); font-weight: 500; color: var(--ui-muted); text-transform: none; letter-spacing: 0; }
html body .kpi-card .kpi-label > i { font-size: 13px; color: var(--ui-muted); }
html body .kpi-card .kpi-value { font-size: clamp(18px, 5vw, 22px); font-weight: 650; letter-spacing: -.015em; line-height: 1.2; color: var(--ui-text); overflow-wrap: anywhere; }
html body .kpi-card small, html body .kpi-card .kpi-sub { margin-top: auto; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body .kpi-card .kpi-delta { font-size: var(--ui-fs-xs); font-weight: 600; }

/* En-tête de panneau avec actions (graphiques) */
html body .chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
html body .chart-subtitle, html body .card .subtitle { margin: 2px 0 0; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body .card > .card-title { margin-bottom: 12px; }
html body .chart-content { min-height: 0; flex: 0 0 auto; } /* jamais compressé par la carte flex (sinon la grille recouvre le graphique) */
/* Camemberts / donuts : Syncfusion pose height:100% sur l'hôte ; dans un conteneur plus court
   que la hauteur demandée (Height="300px"), le SVG débordait et la grille suivante recouvrait
   le bas du cercle et sa légende. L'hôte suit désormais la hauteur réelle de son SVG. */
html body .e-accumulationchart { height: auto !important; min-height: 0; overflow: visible; }
html body .e-accumulationchart > svg { display: block; }
html body .chart-content + .e-grid { margin-top: 12px !important; }
html body .chart-surface, html body .chart-box { min-width: 0; }

/* Sélecteurs de période (1h / 30 min / 15 min) : contrôle segmenté */
html body .granularity{ display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--ui-radius-sm); background: var(--ui-seg); }
html body .granularity-btn {
    min-height: 28px; padding: 0 10px; border: 0 !important; border-radius: 6px; background: transparent !important;
    font: inherit; font-size: var(--ui-fs-sm); font-weight: 500; color: var(--ui-muted) !important; box-shadow: none !important; cursor: pointer;
}
html body .granularity-btn:hover { color: var(--ui-text) !important; }
html body .granularity-btn.is-active, html body .granularity-btn.active { background: var(--ui-card) !important; color: var(--ui-text) !important; font-weight: 600; box-shadow: 0 0 0 1px var(--ui-border), var(--ui-shadow-sm) !important; }
@media (pointer: coarse) { html body .granularity-btn { min-height: 34px; padding: 0 12px; } }

/* États vides historiques */
html body .chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 160px; padding: 16px; text-align: center; border-radius: var(--ui-radius-sm); background: var(--ui-card-2); color: var(--ui-muted); font-size: var(--ui-fs-sm); }
html body .chart-empty-title { color: var(--ui-text); font-weight: 600; font-size: var(--ui-fs); }
html body .empty-state::after { content: none; }

/* Grilles Syncfusion dans les panneaux : bord fin, pas de double ombre */
html body .card .e-grid { border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-sm); box-shadow: none; }
html body .e-grid .e-gridfooter, html body .e-grid .e-summaryrow, html body .e-grid .e-summarycell { background: var(--ui-card-2) !important; font-weight: 600; }
html body .e-grid .e-summarycell p, html body .e-grid .e-summarycell div > p { margin: 0; }
html body .e-grid .e-toolbar { border-bottom: 1px solid var(--ui-border) !important; }
html body .e-grid .e-toolbar .e-tbar-btn { border-radius: var(--ui-radius-sm) !important; }

/* Graphiques dans les panneaux : fond transparent, jamais de débordement */
html body .card .e-chart, html body .card .e-accumulationchart { background: transparent !important; max-width: 100%; }
html body .e-accumulationchart [id$="_border"], html body .e-chart [id$="_ChartBorder"] { fill: transparent !important; }

/* =====================================================================
   PAGE : Statistiques KDS / Collect — tableau des tickets par statut
   ===================================================================== */
.kds-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .kds-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kds-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kds-column { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-card-2); }
.kds-column-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-text); border-bottom: 1px solid var(--ui-border); }
.kds-column-header::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kds-tone, var(--ui-muted)); margin-right: 2px; }
.kds-column-header > span:first-child { flex: 1; }
.kds-column.to-prepare { --kds-tone: #f59e0b; }
.kds-column.preparing { --kds-tone: #3b74f5; }
.kds-column.prepared { --kds-tone: #16a34a; }
.kds-column.finished { --kds-tone: #64748b; }
.kds-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--ui-seg); color: var(--ui-muted); font-size: var(--ui-fs-xs); font-weight: 600; }
.kds-column-body { display: grid; gap: 6px; padding: 8px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.kds-ticket { padding: 8px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-card); border: 1px solid var(--ui-border); font-size: var(--ui-fs-sm); }
.kds-ticket.late { border-color: transparent; background: var(--ui-err-bg); box-shadow: inset 3px 0 0 var(--ui-danger); }
.kds-ticket-top { display: flex; justify-content: space-between; gap: 8px; color: var(--ui-text); }
.kds-ticket-top span { font-variant-numeric: tabular-nums; color: var(--ui-muted); }
.kds-ticket-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
.kds-ticket.late .kds-ticket-meta { color: var(--ui-err-text); }
.kds-empty { padding: 14px 8px; text-align: center; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
html body .card > .d-flex.justify-content-between { margin-bottom: 12px !important; }
html body .card h2.card-title { font-size: 15px; }

/* =====================================================================
   PAGES : Analyses (période, articles)
   ===================================================================== */
.ana-mode { margin: 0 0 12px; }
html body .card-filters .filters-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html body .card-filters .filters-title h2 { margin: 0; font-size: var(--ui-fs); font-weight: 600; }
html body .card-filters .filters-title .subtitle { font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body .card-filters .filters-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quick-periods { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--ui-radius-sm); background: var(--ui-seg); }
html body .quick-periods .e-btn { min-height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ui-muted); font-size: var(--ui-fs-sm); font-weight: 500; box-shadow: none; text-transform: none; }
html body .quick-periods .e-btn:hover { background: var(--ui-card); color: var(--ui-text); }
.date-separator { color: var(--ui-muted); font-size: var(--ui-fs-sm); }
html body .e-btn.btn-primary { min-height: var(--ui-ctl); padding: 0 16px; border-radius: var(--ui-radius-sm); font-weight: 600; text-transform: none; box-shadow: none; }
html body .e-btn.btn-light { min-height: var(--ui-ctl); border-radius: var(--ui-radius-sm); background: var(--ui-card); border: 1px solid var(--ui-border); color: var(--ui-text); text-transform: none; box-shadow: none; }
html body .kpi-card .kpi-delta.text-success { color: var(--ui-ok-text) !important; }
html body .kpi-card .kpi-delta.text-danger { color: var(--ui-err-text) !important; }
@media (max-width: 575.98px) {
    html body .card-filters .filters-actions .e-date-wrapper { flex: 1 1 130px; width: auto !important; }
    html body .card-filters .filters-actions > .e-btn.btn-primary { flex: 1 1 100%; }
}

/* =====================================================================
   PAGES : Clôtures (journalière, mensuelle, annuelle)
   ===================================================================== */
html body .card > .card-body { padding: 0; }
html body .card-grid > .card-body, html body .card-grid > .e-grid { margin-top: 0; }
html body .card .e-skeleton { border-radius: var(--ui-radius-sm) !important; }

/* =====================================================================
   PAGES : Opérations (Commandes, Paiements, Livreurs) — vocabulaire alta-*
   Auparavant recopié dans 3 blocs <style> (avec un violet propre à chaque page).
   ===================================================================== */
html body .alta-page { padding: 0; background: transparent; color: var(--ui-text); min-height: 0; }

/* En-tête de page */
html body .alta-topbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin: 0 0 16px; }
html body .alta-title-section { flex: 1 1 260px; min-width: 0; text-align: left; }
html body .alta-title-section h1 { margin: 0; font-size: clamp(20px, 5vw, 26px); font-weight: 700; letter-spacing: -.02em; color: var(--ui-text); }
html body .alta-title-section p { margin: 2px 0 0; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
html body .alta-topbar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html body .alta-topbar-actions > * { flex: 0 0 auto; }
@media (max-width: 575.98px) { html body .alta-topbar-actions { width: 100%; } html body .alta-topbar-actions > * { flex: 1 1 auto; justify-content: center; } }

/* Boutons */
html body .btn-alta, html body .btn-alta-primary, html body .btn-alta-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ui-ctl); padding: 0 14px;
    border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border); background: var(--ui-card); color: var(--ui-text);
    font: inherit; font-size: var(--ui-fs); font-weight: 600; cursor: pointer; box-shadow: none;
}
html body .btn-alta.btn-primary, html body .btn-alta-primary { background: var(--ui-solid); border-color: var(--ui-solid); color: #fff; }
html body .btn-alta.btn-primary:hover, html body .btn-alta-primary:hover { background: var(--ui-primary-hover); }
html body .btn-alta.btn-secondary, html body .alta-page .btn-secondary { background: var(--ui-card); border-color: var(--ui-border); color: var(--ui-text); }
html body .btn-alta.btn-secondary:hover, html body .btn-alta-secondary:hover { border-color: var(--ui-border-strong); background: var(--ui-card-2); }
@media (pointer: coarse) { html body .btn-alta, html body .btn-alta-primary, html body .btn-alta-secondary { min-height: var(--ui-tap); } }

/* Champs */
html body .alta-date-input, html body .alta-select-compact, html body .alta-input-search, html body .input-search, html body .search-input {
    min-height: var(--ui-ctl); background: var(--ui-input); border: 1px solid var(--ui-border); color: var(--ui-text);
    border-radius: var(--ui-radius-sm); font: inherit; font-size: var(--ui-fs);
}
html body .alta-date-input { padding: 0 10px; min-width: 150px; }
html body .alta-select-compact { min-height: 32px; padding: 0 8px; font-size: var(--ui-fs-sm); }
html body .alta-input-search, html body .input-search, html body .search-input { padding: 0 12px 0 34px; width: 100%; }
html body .alta-search-wrapper, html body .search-wrapper { position: relative; flex: 1 1 240px; min-width: 0; max-width: 360px; }
html body .alta-search-wrapper i, html body .search-wrapper i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ui-muted); pointer-events: none; }

/* Indicateurs */
html body .alta-stats-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
@media (min-width: 768px) { html body .alta-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1200px) { html body .alta-stats-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
html body .alta-mini-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 92px; padding: 12px 14px; background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
html body .alta-mcard-header { display: flex; align-items: center; gap: 8px; margin: 0; }
html body .alta-mcard-icon { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; font-size: 13px; }
html body .alta-mcard-title, html body .alta-mcard-label { font-size: var(--ui-fs-xs); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .alta-mcard-value { font-size: clamp(18px, 5vw, 22px); font-weight: 650; letter-spacing: -.015em; line-height: 1.2; color: var(--ui-text); }
html body .alta-mcard-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
/* Mini-courbes : tracés décoratifs fixes (ne reflètent pas les données) -> neutres et discrètes */
html body .sparkline-svg, html body .alta-mini-card .sparkline { width: 48px; height: 18px; fill: none; stroke-width: 1.5; opacity: .35; }
html body .sparkline-svg path, html body .alta-mini-card .sparkline path { stroke: var(--ui-muted) !important; }
html body .bg-purple-light { background: var(--ui-primary-soft); color: var(--ui-primary); }
html body .bg-green-light { background: var(--ui-ok-bg); color: var(--ui-ok-text); }
html body .bg-blue-light { background: var(--ui-info-bg); color: var(--ui-info-text); }
html body .bg-orange-light { background: var(--ui-warn-bg); color: var(--ui-warn-text); }
html body .bg-red-light { background: var(--ui-err-bg); color: var(--ui-err-text); }

/* Onglets + filtres */
html body .alta-filter-container, html body .alta-filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; border-bottom: 1px solid var(--ui-border); }
html body .alta-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
html body .alta-tab { position: relative; min-height: 40px; padding: 0 10px; border: 0; background: none; color: var(--ui-muted); font: inherit; font-size: var(--ui-fs); font-weight: 500; white-space: nowrap; cursor: pointer; }
html body .alta-tab:hover { color: var(--ui-text); }
html body .alta-tab.active { color: var(--ui-text); font-weight: 600; }
html body .alta-tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ui-primary); }
html body .alta-search-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
html body .btn-icon-toggle { width: var(--ui-ctl); height: var(--ui-ctl); display: inline-grid; place-items: center; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-card); color: var(--ui-muted); cursor: pointer; }
html body .btn-icon-toggle.active { background: var(--ui-primary-soft); border-color: transparent; color: var(--ui-primary); }

/* Tableau principal */
html body .alta-main-card-table { background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 4px; overflow-x: auto; }
html body .alta-data-table { width: 100%; border-collapse: collapse; text-align: left; }
html body .alta-data-table th { padding: 10px 12px; font-size: var(--ui-fs-xs); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ui-muted); border-bottom: 1px solid var(--ui-border); background: var(--ui-card-2); }
html body .alta-data-table td { padding: 10px 12px; font-size: var(--ui-fs-sm); color: var(--ui-text); border-bottom: 1px solid var(--ui-border); vertical-align: middle; }
html body .alta-data-table tr:last-child td { border-bottom: 0; }
html body .cell-id { color: var(--ui-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
html body .cell-bold { font-weight: 650; color: var(--ui-text); }
html body .cell-subtext { margin-top: 2px; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body .addr-box, html body .pmt-box { display: flex; align-items: center; gap: 6px; }
html body .addr-box i { color: var(--ui-muted); }
html body .alta-table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 8px 6px; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
html body .alta-pagination { display: flex; flex-wrap: wrap; gap: 4px; }
html body .page-btn { min-width: 32px; height: 32px; padding: 0 6px; display: inline-grid; place-items: center; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-card); color: var(--ui-muted); font-size: var(--ui-fs-sm); font-weight: 600; cursor: pointer; }
html body .page-btn.active { background: var(--ui-solid); border-color: var(--ui-solid); color: #fff; }
html body .page-btn:disabled { opacity: .45; }
@media (pointer: coarse) { html body .page-btn { min-width: 40px; height: 40px; } }

/* Badges de statut (livraison, paiement, livreur) */
html body .badge-status-fill, html body .badge-status-outline, html body .badge-payment, html body .badge-status {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 0; border-radius: 999px;
    font-size: var(--ui-fs-xs); font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap; background: var(--ui-seg); color: var(--ui-muted);
}
html body .badge-status-fill.delivery-livre, html body .badge-status-outline.pay-confirme, html body .badge-payment.status-confirm { background: var(--ui-ok-bg); color: var(--ui-ok-text); }
html body .badge-status-fill.delivery-cours, html body .badge-status-outline.pay-attente, html body .badge-payment.status-attente, html body .badge-payment.status-nondeclared { background: var(--ui-warn-bg); color: var(--ui-warn-text); }
html body .badge-status-fill.delivery-attente, html body .badge-status-fill.delivery-assign, html body .badge-status-outline.pay-declare, html body .badge-payment.status-declared { background: var(--ui-info-bg); color: var(--ui-info-text); }
html body .badge-status-fill.delivery-annule, html body .badge-status-outline.pay-rejete, html body .badge-payment.status-reject { background: var(--ui-err-bg); color: var(--ui-err-text); }

/* Paiements : anneaux et courbe d'évolution (SVG maison) */
html body .alta-charts-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 16px; }
@media (min-width: 992px) { html body .alta-charts-row { grid-template-columns: 1fr 1.2fr 1fr; } }
html body .alta-chart-card { min-width: 0; padding: 14px 16px; background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
html body .chart-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--ui-text); }
html body .donut-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
html body .donut-graphic { position: relative; flex: 0 0 auto; width: 110px; height: 110px; }
html body .donut-center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
html body .donut-center-text .val { font-size: var(--ui-fs); font-weight: 700; color: var(--ui-text); }
html body .donut-center-text .lbl { font-size: 11px; color: var(--ui-muted); }
html body .chart-legend-list { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
html body .legend-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--ui-fs-sm); }
html body .legend-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
html body .legend-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
html body .legend-pct { margin-left: 4px; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body .legend-val { font-weight: 600; color: var(--ui-text); }
html body .line-chart-svg-container { position: relative; width: 100%; height: 110px; }
html body .axis-label-x { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 4px; font-size: 11px; color: var(--ui-muted); }

/* Livreurs : cartes et fenêtre de détail */
html body .livreurs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
html body .livreur-card { position: relative; padding: 14px 16px; background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-text); }
html body .livreur-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
html body .avatar-wrapper { position: relative; }
html body .livreur-card .avatar { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--ui-seg); color: var(--ui-muted); }
html body .status-dot-avatar { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ui-card); }
html body .info-name { font-size: 15px; font-weight: 650; }
html body .info-phone { font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body .livreur-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: var(--ui-fs-sm); }
html body .meta-item { display: flex; align-items: center; gap: 8px; }
html body .meta-item i { width: 14px; color: var(--ui-muted); }
html body .run-id { font-size: var(--ui-fs-xs); font-weight: 600; color: var(--ui-primary); }
html body .livreur-stats { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 6px; margin-bottom: 10px; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-card-2); }
html body .stat-box-mini { display: flex; flex-direction: column; }
html body .stat-val { font-size: var(--ui-fs-md); font-weight: 650; }
html body .stat-lbl { font-size: 11px; text-transform: none; color: var(--ui-muted); }
html body .prog-circle-wrapper { position: relative; width: 40px; height: 40px; }
html body .prog-circle-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: 700; }
html body .livreur-ca { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 10px; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
html body .livreur-ca strong { font-size: var(--ui-fs); color: var(--ui-ok-text); }
html body .btn-detail { width: 100%; min-height: var(--ui-ctl); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-card); color: var(--ui-text); font: inherit; font-weight: 600; cursor: pointer; }
html body .btn-detail:hover { border-color: var(--ui-border-strong); background: var(--ui-card-2); }
html body .dot-online { background: var(--ui-success); }
html body .dot-offline { background: var(--ui-danger); }
html body .dot-pause { background: var(--ui-warning); }
html body .alta-modal-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(2, 6, 23, .55); }
html body .alta-modal { width: 100%; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: var(--ui-card); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; box-shadow: var(--ui-shadow-lg); }
@media (min-width: 768px) { html body .alta-modal-overlay { align-items: center; padding: 20px; } html body .alta-modal { max-width: 860px; max-height: 88vh; padding: 20px 22px; border-radius: var(--ui-radius-lg); } }
html body .alta-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
html body .alta-modal-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
html body .alta-modal-close { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); font-size: 18px; cursor: pointer; }
html body .alta-modal-close:hover { background: var(--ui-seg); color: var(--ui-text); }
html body .detail-section-title { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: var(--ui-fs-sm); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ui-text); }
html body .detail-count-pill { padding: 0 8px; border-radius: 999px; background: var(--ui-seg); color: var(--ui-muted); font-size: var(--ui-fs-xs); }
html body .detail-table { width: 100%; border-collapse: collapse; font-size: var(--ui-fs-sm); }
html body .detail-table th { padding: 6px 8px; text-align: left; font-size: var(--ui-fs-xs); font-weight: 600; text-transform: none; color: var(--ui-muted); border-bottom: 1px solid var(--ui-border); }
html body .detail-table td { padding: 8px; border-bottom: 1px solid var(--ui-border); }
html body .detail-empty { padding: 6px 2px; font-size: var(--ui-fs-sm); color: var(--ui-muted); }

/* =====================================================================
   PAGES : Catalogue (articles, ingrédients) + panneaux de demandes
   ===================================================================== */
html body .cat-create-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
html body .cat-fam-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ui-border); }
html body .cat-fam-name { min-width: 140px; font-weight: 600; color: var(--ui-text); }
html body .filters-actions span { font-size: var(--ui-fs-sm); font-weight: 500; color: var(--ui-muted); }
html body .filters-actions .e-textbox { width: 100% !important; }
/* Liste d'articles (mobile) : cartes compactes, prix sur une ligne, action discrète */
html body .art-card { padding: 12px 14px; background: var(--ui-card); }
html body .art-prices { gap: 6px; margin-top: 10px; }
html body .art-price { padding: 6px 8px; background: var(--ui-card-2); border-color: transparent; border-radius: var(--ui-radius-sm); }
html body .art-price-value { font-size: 15px; font-weight: 650; }
html body .art-card-actions { margin-top: 10px; }
html body .art-card-actions .ui-btn { min-height: 36px; background: transparent; border-color: var(--ui-border); }
html body .art-card-actions .ui-btn:hover { background: var(--ui-card-2); }
@media (pointer: coarse) { html body .art-card-actions .ui-btn { min-height: var(--ui-tap); } }
html body .art-hint { display: flex; align-items: center; gap: 6px; }
html body .alert { border-radius: var(--ui-radius-sm); border: 0; font-size: var(--ui-fs-sm); }
html body .alert-info { background: var(--ui-info-bg); color: var(--ui-info-text); }
html body .alert-warning { background: var(--ui-warn-bg); color: var(--ui-warn-text); }

/* Panneaux « demandes de prix / catalogue » (temps réel) */
html body .pr-panel, html body .cr-panel { margin-top: 16px; }
html body .pr-banner { margin: 0 0 12px; padding: 10px 14px; border: 0; border-radius: var(--ui-radius-sm); font-size: var(--ui-fs-sm); }
html body .pr-banner.offline { background: var(--ui-warn-bg); color: var(--ui-warn-text); }
html body .pr-banner.restored { background: var(--ui-ok-bg); color: var(--ui-ok-text); }
html body .pr-conn { margin-bottom: 8px; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body .pr-table { width: 100%; border-collapse: collapse; font-size: var(--ui-fs-sm); }
html body .pr-table th, html body .pr-table td { padding: 8px; border-bottom: 1px solid var(--ui-border); text-align: left; vertical-align: top; color: var(--ui-text); }
html body .pr-table th { font-size: var(--ui-fs-xs); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ui-muted); }
html body .pr-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: var(--ui-fs-xs); font-weight: 600; background: var(--ui-seg); color: var(--ui-muted); }
html body .pr-badge.pr-wait { background: var(--ui-warn-bg); color: var(--ui-warn-text); }
html body .pr-badge.pr-progress { background: var(--ui-info-bg); color: var(--ui-info-text); }
html body .pr-badge.pr-ok { background: var(--ui-ok-bg); color: var(--ui-ok-text); }
html body .pr-badge.pr-error { background: var(--ui-err-bg); color: var(--ui-err-text); }
html body .pr-msg { margin-top: 2px; font-size: var(--ui-fs-xs); color: var(--ui-err-text); }
html body .pr-sub { font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body .rt-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: middle; }
html body .rt-dot.rt-on { background: var(--ui-success); }
html body .rt-dot.rt-off { background: var(--ui-warning); }
html body .cr-conflict { max-width: 100%; min-width: 0; margin-top: 4px; padding: 6px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-warn-bg); color: var(--ui-warn-text); font-size: var(--ui-fs-xs); overflow-wrap: anywhere; }
html body .cr-changes { margin: 0; padding-left: 16px; font-size: var(--ui-fs-sm); }

/* Fenêtre « modifier une famille / sous-famille » : même habillage que .ui-modal */
html body .cat-modal-backdrop { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center; background: rgba(2, 6, 23, .6); }
html body .cat-modal { width: 100%; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: 18px; background: var(--ui-card); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; box-shadow: var(--ui-shadow-lg); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { html body .cat-modal-backdrop { align-items: center; padding: 20px; } html body .cat-modal { width: min(480px, 100%); border-radius: var(--ui-radius-lg); } }
html body .cat-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
html body .cat-field label { font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-text); }
html body .cat-field input[type=text], html body .cat-field input[type=number] { min-height: var(--ui-ctl); padding: 0 12px; font: inherit; font-size: 16px; color: var(--ui-text); background: var(--ui-input); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
html body .cat-field input:focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-soft); }
html body .cat-check { display: flex; align-items: center; gap: 8px; min-height: var(--ui-ctl); }
html body .cat-note { margin-top: 10px; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body .cat-error { color: var(--ui-err-text); font-weight: 600; }
html body .cat-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
html body .cat-orig { font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body .cat-modal .btn, html body .pr-panel .btn, html body .cr-panel .btn { min-height: var(--ui-ctl); border-radius: var(--ui-radius-sm); font-weight: 600; }
html body .cat-modal .btn-outline-secondary, html body .pr-panel .btn-outline-secondary, html body .cr-panel .btn-outline-secondary { background: var(--ui-card); border-color: var(--ui-border); color: var(--ui-text); }

/* =====================================================================
   PAGE : Profil
   ===================================================================== */
html body .profile-wrapper { display: flex; justify-content: center; width: 100%; }
html body .profile-wrapper > .card { max-width: 720px; width: 100%; }
html body .form-label { display: block; margin: 0 0 6px; font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-text); }
html body .form-control { min-height: var(--ui-ctl); padding: 0 12px; font-size: 16px; color: var(--ui-text); background: var(--ui-input); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
@media (pointer: fine) { html body .form-control { font-size: var(--ui-fs); } }
html body .form-control:focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-soft); }
html body .form-control:disabled { background: var(--ui-card-2); color: var(--ui-muted); }
html body .password-wrapper { position: relative; }
html body .password-wrapper .form-control { padding-right: 46px; }
html body .toggle-password { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: var(--ui-radius-sm); background: none; color: var(--ui-muted); cursor: pointer; }
html body .toggle-password:hover { color: var(--ui-primary); background: var(--ui-primary-soft); }
html body .success-box, html body .error-box { padding: 12px 14px; border: 0; border-radius: var(--ui-radius-sm); }
html body .success-box { background: var(--ui-ok-bg); }
html body .error-box { background: var(--ui-err-bg); }
html body .success-text { color: var(--ui-ok-text); font-weight: 600; font-size: var(--ui-fs-sm); }
html body .error-text { color: var(--ui-err-text); font-weight: 600; font-size: var(--ui-fs-sm); }
html body .btn-export { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ui-ctl); padding: 0 16px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-solid); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
html body .btn-export:hover { background: var(--ui-primary-hover); }

/* Mise en page sans menu (connexion, inscription) */
.contenu { height: 100%; }

/* Profil : champs côte à côte empilés sur mobile -> même espacement que les autres champs */
@media (max-width: 767.98px) { html body .profile-wrapper .row > [class*="col-"] + [class*="col-"] { margin-top: 12px; } }
html body .profile-wrapper .card-title { margin-bottom: 16px; }

/* Tableaux Syncfusion : aucun libellé tronqué, le texte passe à la ligne (TOTAL SANS AVOIR, noms d’articles longs) */
html body .e-grid td.e-rowcell, html body .e-grid td.e-summarycell, html body .e-grid .e-summarycell, html body .e-grid .e-headercell .e-headertext { white-space: normal !important; text-overflow: clip !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: manual; }
/* Petits écrans : marges internes réduites (la place réservée à l'icône de tri coupait les mots) */
@media (max-width: 575.98px) {
    html body .e-grid .e-headercell, html body .e-grid td.e-rowcell, html body .e-grid td.e-summarycell { padding: 8px 6px !important; }
    html body .e-grid .e-headercell .e-headercelldiv { padding: 0 !important; margin: 0 !important; }
    html body .e-grid .e-headercell .e-sortfilterdiv { margin: 0 !important; }
}
html body .e-grid .e-gridheader { border-bottom: 1px solid var(--border) !important; }
html body .e-grid .e-headercell { background: var(--surface-2) !important; }