/* =========================================================================
   BX ORDERS POLISH — production-grade refinement of the Orders workspace.
   ------------------------------------------------------------------------
   Fixes concrete inconsistencies found in live review (Render), keeping the
   established identity. Token-driven, loaded LAST, theme-consistent in BOTH
   light and dark via html[data-buld-theme]. No redesign — refinement only.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) MODALS (stats / filter / select-all / client-history).
   Legacy dark rules only recolored borders, leaving white header/footer
   around a dark body (the "half-white/half-dark" modal). Re-express the
   whole modal in BX tokens so it is perfectly consistent in both themes.
   Specificity html[data-buld-theme] .x (0,2,1) ties legacy body.dark and
   wins by load order.
   ------------------------------------------------------------------------- */
/* The app runs TWO theme signals — html[data-buld-theme] AND legacy body.dark
   — which can disagree and produce half-light/half-dark modals. We therefore
   drive the dark modal from BOTH signals, using the app's warm-dark identity
   (#5a5560 surface / #4f4a54 fields), so header, body, footer and inputs are
   always the same shade. Light stays the base white. */
body.dark .stats-modal,
html[data-buld-theme="dark"] .stats-modal {
    background: #5a5560 !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.5), 0 0 0 1px #635e69 !important;
}
body.dark .stats-modal-header,
body.dark .stats-modal-body,
body.dark .stats-modal-footer,
html[data-buld-theme="dark"] .stats-modal-header,
html[data-buld-theme="dark"] .stats-modal-body,
html[data-buld-theme="dark"] .stats-modal-footer {
    background: #5a5560 !important;
    border-color: #635e69 !important;
}
body.dark .stats-modal-header h3,
html[data-buld-theme="dark"] .stats-modal-header h3 { color: #f4f4f5; }
body.dark .stats-modal-close,
html[data-buld-theme="dark"] .stats-modal-close { background: #4f4a54; color: #c2bdc8; border: 0; }
body.dark .stats-modal-close:hover,
html[data-buld-theme="dark"] .stats-modal-close:hover { background: rgba(224,106,94,.18); color: #e06a5e; }
body.dark .filter-field label,
body.dark .stats-modal-body label,
html[data-buld-theme="dark"] .filter-field label,
html[data-buld-theme="dark"] .stats-modal-body label { color: #c2bdc8; }
body.dark .filter-select, body.dark input.filter-select, body.dark select.filter-select,
html[data-buld-theme="dark"] .filter-select,
html[data-buld-theme="dark"] input.filter-select,
html[data-buld-theme="dark"] select.filter-select {
    background: #4f4a54; color: #f4f4f5; border-color: #635e69;
}
body.dark .filter-select:focus, body.dark input.filter-select:focus,
html[data-buld-theme="dark"] .filter-select:focus,
html[data-buld-theme="dark"] input.filter-select:focus {
    border-color: #2997FF; box-shadow: 0 0 0 3px rgba(41,151,255,.16);
}
body.dark .select-scope-btn,
html[data-buld-theme="dark"] .select-scope-btn {
    background: #4f4a54; color: #f4f4f5; border-color: #635e69;
}

/* -------------------------------------------------------------------------
   2) TABLE ACTION BUTTONS — premium, flat, consistent icon controls.
   Drop the heavy grey "cluster" box and the off-identity purple dark hover;
   unify confirm/cancel + icon actions to one 30px control language.
   ------------------------------------------------------------------------- */
#panel-all-orders .yaya-scope .action-cluster {
    background: transparent; border: 0; box-shadow: none; padding: 0; gap: var(--bx-s-1);
}
#panel-all-orders .yaya-scope .ac-btn {
    width: 30px; height: 30px; border-radius: var(--bx-r-control);
    background: transparent; border: 1px solid transparent;
    color: var(--bx-ink-3);
}
#panel-all-orders .yaya-scope .ac-btn:hover {
    background: var(--bx-surface-2); color: var(--bx-ink-1);
    border-color: var(--bx-border); box-shadow: none;
}
#panel-all-orders .yaya-scope .ac-btn:focus-visible {
    outline: 2px solid var(--bx-accent); outline-offset: -2px;
}
/* Dark (both theme signals) — warm-neutral hover, never the legacy purple. */
body.dark #panel-all-orders .yaya-scope .ac-btn,
html[data-buld-theme="dark"] #panel-all-orders .yaya-scope .ac-btn { color: #c2bdc8; }
body.dark #panel-all-orders .yaya-scope .ac-btn:hover,
html[data-buld-theme="dark"] #panel-all-orders .yaya-scope .ac-btn:hover {
    background: #635e69; color: #f4f4f5; border-color: #6e6874;
}
#panel-all-orders .yaya-scope .btn-action {
    width: 30px; height: 30px; border-radius: var(--bx-r-control);
    box-shadow: var(--bx-shadow-1);
}
#panel-all-orders .yaya-scope .btn-action [data-lucide] { width: 16px; height: 16px; }
#panel-all-orders .yaya-scope .btn-confirm:hover,
#panel-all-orders .yaya-scope .btn-cancel:hover {
    filter: brightness(1.06); transform: none; box-shadow: var(--bx-shadow-2);
}
/* tooltip: match BX ink surface in both themes */
#panel-all-orders .yaya-scope .ac-btn::after,
#panel-all-orders .yaya-scope .btn-action::after {
    background: var(--bx-ink-1); color: var(--bx-bg);
    border-radius: var(--bx-r-control);
}

/* -------------------------------------------------------------------------
   2b) EDIT MODAL (.emo-*) — theme consistency.
   Legacy edit modal keyed its dark styling off body.dark with a COLD slate
   palette (#1f2937/#111827/indigo). When body.dark lingered on a light page
   it rendered a dark island; in real dark it clashed with the warm identity.
   Force LIGHT when the page theme is light (beats stray body.dark), and use
   the WARM dark identity (#5a5560/#4f4a54, blue accent) when dark.
   ------------------------------------------------------------------------- */
/* LIGHT — force, overriding any stray body.dark */
html[data-buld-theme="light"] .emo-card { background: #fff; color: #0f172a; }
html[data-buld-theme="light"] .emo-head { border-bottom-color: #eef1f5; }
html[data-buld-theme="light"] .emo-head-title { color: #0f172a; }
html[data-buld-theme="light"] .emo-id { background: #f1f5f9; color: #475569; }
html[data-buld-theme="light"] .emo-close { background: #f1f5f9; color: #64748b; }
html[data-buld-theme="light"] .emo-tabs { background: #fafbfc; border-bottom-color: #eef1f5; }
html[data-buld-theme="light"] .emo-tab { color: #64748b; }
html[data-buld-theme="light"] .emo-tab.active { background: #0f172a; color: #fff; }
html[data-buld-theme="light"] .emo-field input,
html[data-buld-theme="light"] .emo-field select,
html[data-buld-theme="light"] .emo-field textarea { background: #fff; color: #0f172a; border-color: #e2e8f0; }
html[data-buld-theme="light"] .emo-field label { color: #475569; }
html[data-buld-theme="light"] .emo-foot { background: #fafbfc; border-top-color: #eef1f5; }

/* DARK — warm identity, both signals; replace cold slate + indigo */
body.dark .emo-card,
html[data-buld-theme="dark"] .emo-card { background: #5a5560; color: #f4f4f5; }
body.dark .emo-head,
html[data-buld-theme="dark"] .emo-head { border-bottom-color: #635e69; }
body.dark .emo-head-title,
html[data-buld-theme="dark"] .emo-head-title { color: #f4f4f5; }
body.dark .emo-id,
html[data-buld-theme="dark"] .emo-id { background: #4f4a54; color: #c2bdc8; }
body.dark .emo-close,
html[data-buld-theme="dark"] .emo-close { background: #4f4a54; color: #c2bdc8; }
body.dark .emo-close:hover,
html[data-buld-theme="dark"] .emo-close:hover { background: #635e69; color: #f4f4f5; }
body.dark .emo-tabs,
html[data-buld-theme="dark"] .emo-tabs { background: #4f4a54; border-bottom-color: #635e69; }
body.dark .emo-tab,
html[data-buld-theme="dark"] .emo-tab { color: #c2bdc8; }
body.dark .emo-tab:hover,
html[data-buld-theme="dark"] .emo-tab:hover { background: #635e69; color: #f4f4f5; }
body.dark .emo-tab.active,
html[data-buld-theme="dark"] .emo-tab.active { background: #2997FF; color: #fff; }
body.dark .emo-field input, body.dark .emo-field select, body.dark .emo-field textarea,
html[data-buld-theme="dark"] .emo-field input,
html[data-buld-theme="dark"] .emo-field select,
html[data-buld-theme="dark"] .emo-field textarea { background: #4f4a54; color: #f4f4f5; border-color: #635e69; }
body.dark .emo-foot,
html[data-buld-theme="dark"] .emo-foot { background: #4f4a54; border-top-color: #635e69; }
body.dark .emo-total-mini strong,
html[data-buld-theme="dark"] .emo-total-mini strong { color: #f4f4f5; }
/* Focus ring → identity blue (was indigo) in both themes */
.emo-field input:focus, .emo-field select:focus, .emo-field textarea:focus {
    border-color: #0071E3; box-shadow: 0 0 0 3px rgba(0,113,227,.14);
}

/* Delivery segmented control (À domicile / Stop-Desk) — clear, obvious BX
   selected state in the blue identity (was a subtle indigo ring), warm dark. */
.emo-segment input:checked + label {
    background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.10), 0 0 0 1.5px #0071E3;
}
.emo-segment input:checked + label > i { color: #0071E3; }
.emo-segment input:checked + label strong { color: #0071E3; }
body.dark .emo-segment,
html[data-buld-theme="dark"] .emo-segment { background: #4f4a54; border-color: #635e69; }
body.dark .emo-segment label strong,
html[data-buld-theme="dark"] .emo-segment label strong { color: #f4f4f5; }
body.dark .emo-segment input:checked + label,
html[data-buld-theme="dark"] .emo-segment input:checked + label {
    background: #5a5560; box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1.5px #2997FF;
}
body.dark .emo-segment input:checked + label > i,
html[data-buld-theme="dark"] .emo-segment input:checked + label > i { color: #2997FF; }
body.dark .emo-segment input:checked + label strong,
html[data-buld-theme="dark"] .emo-segment input:checked + label strong { color: #2997FF; }
/* native date input renders dark chrome in dark mode (was a white block) */
body.dark .emo-field input[type="date"],
html[data-buld-theme="dark"] .emo-field input[type="date"] { color-scheme: dark; }
/* alerts (Aucun transporteur connecté) — consistent in dark */
body.dark .emo-alert,
html[data-buld-theme="dark"] .emo-alert { background: rgba(212,162,87,.14); color: #e5c07b; border-color: rgba(212,162,87,.3); }

/* -------------------------------------------------------------------------
   2c) DETAILS MODAL (.order-modal / .om-*) — was white-on-dark (no dark
   override on the container). Theme it consistently with the warm identity.
   ------------------------------------------------------------------------- */
body.dark .order-modal,
html[data-buld-theme="dark"] .order-modal { background: #5a5560; color: #f4f4f5; }
body.dark .om-header,
html[data-buld-theme="dark"] .om-header { border-bottom-color: #635e69; }
body.dark .om-body,
html[data-buld-theme="dark"] .om-body { background: #5a5560; }
body.dark .om-label,
html[data-buld-theme="dark"] .om-label { color: #a39ea8; }
body.dark .om-val,
html[data-buld-theme="dark"] .om-val { color: #f4f4f5; }
html[data-buld-theme="light"] .order-modal { background: #fff; color: #0f172a; }

/* -------------------------------------------------------------------------
   2d) PRODUCT IMAGE placeholder — clean, consistent tile + package icon for
   orders with no image or a broken URL (was a harsh grey box / 📦 emoji / a
   vanished img causing layout shift). Theme-aware.
   ------------------------------------------------------------------------- */
.yaya-scope .product-img--ph {
    display: grid; place-items: center;
    background: #f1f5f9; border: 1px solid #e6e9ef; color: #94a3b8;
}
.yaya-scope .product-img--ph svg { width: 22px; height: 22px; }
body.dark .yaya-scope .product-img--ph,
html[data-buld-theme="dark"] .yaya-scope .product-img--ph {
    background: #4f4a54; border-color: #635e69; color: #a39ea8;
}

/* =========================================================================
   GLOBAL FLOATING SURFACES — dark consistency (design-system level).
   The app carries THREE theme signals: html[data-buld-theme], legacy body.dark,
   and older .dark-mode. Any dialog keyed to only one drifts (white-on-dark,
   half-light). This themes EVERY modal / popup / menu from ALL signals with one
   warm identity (#5a5560 surface · #4f4a54 field · #635e69 border · cream ink),
   so no floating surface is ever inconsistent again. Fix once, applies globally.
   ========================================================================= */
/* Containers — explicit per signal, !important to win over the 3-signal legacy. */
html[data-buld-theme="dark"] .note-modal, body.dark .note-modal, .dark-mode .note-modal,
html[data-buld-theme="dark"] .color-picker-pop, body.dark .color-picker-pop, .dark-mode .color-picker-pop,
html[data-buld-theme="dark"] .mini-modal, body.dark .mini-modal, .dark-mode .mini-modal,
html[data-buld-theme="dark"] .spacing-panel, body.dark .spacing-panel, .dark-mode .spacing-panel,
html[data-buld-theme="dark"] .user-dropdown, body.dark .user-dropdown, .dark-mode .user-dropdown {
    background: #5a5560 !important;
    border-color: #635e69 !important;
    color: #f4f4f5 !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1px #635e69 !important;
}
/* Titles / labels */
html[data-buld-theme="dark"] .note-modal h3, body.dark .note-modal h3, .dark-mode .note-modal h3,
html[data-buld-theme="dark"] .color-picker-pop .cpp-title, body.dark .color-picker-pop .cpp-title, .dark-mode .color-picker-pop .cpp-title,
html[data-buld-theme="dark"] .spacing-panel-title, body.dark .spacing-panel-title, .dark-mode .spacing-panel-title {
    color: #f4f4f5 !important;
}
/* Inputs / textareas */
html[data-buld-theme="dark"] .note-modal textarea, body.dark .note-modal textarea, .dark-mode .note-modal textarea,
html[data-buld-theme="dark"] .mini-modal-input, body.dark .mini-modal-input, .dark-mode .mini-modal-input {
    background: #4f4a54 !important; color: #f4f4f5 !important; border-color: #635e69 !important;
}
html[data-buld-theme="dark"] .note-modal textarea::placeholder,
body.dark .note-modal textarea::placeholder,
.dark-mode .note-modal textarea::placeholder { color: #a39ea8; }
/* Colour-picker swatch rings on the warm surface */
html[data-buld-theme="dark"] .color-picker-pop .cpp-swatch, body.dark .color-picker-pop .cpp-swatch, .dark-mode .color-picker-pop .cpp-swatch {
    border-color: #5a5560 !important; box-shadow: 0 0 0 1px #6e6874 !important;
}
html[data-buld-theme="dark"] .color-picker-pop .cpp-swatch.is-active, body.dark .color-picker-pop .cpp-swatch.is-active, .dark-mode .color-picker-pop .cpp-swatch.is-active {
    box-shadow: 0 0 0 2px #2997FF, 0 0 0 4px rgba(41,151,255,.25) !important;
}

/* -------------------------------------------------------------------------
   3) KPI SPARKLINE visibility in DARK — the dark stroke override was scoped
   only to #panel-overview; the all-orders KPI kept a light-blue stroke that
   vanished on the dark card. Give it a visible blue in dark. (Color/visibility
   fix only — KPI structure untouched.)
   ------------------------------------------------------------------------- */
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-spark .trend-current-path {
    stroke: #2997FF;
}
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-spark .trend-compare-path {
    stroke: #8a8790; opacity: .7;
}
/* The KPI sparkline container was resolving to display:none (invisible chart).
   Force it visible with explicit geometry so the trend line always renders. */
#panel-all-orders .orders-kpi-spark {
    display: block !important;
    position: absolute; inset-inline-end: 12px; bottom: 10px;
    width: 66px; height: 24px; pointer-events: none;
}
#panel-all-orders .orders-kpi-spark svg,
#panel-all-orders .orders-kpi-spark .sparkline-svg {
    display: block; width: 100%; height: 100%; overflow: visible;
}
/* Smooth, crisp rendering + kill the distracting shadow behind the KPI chart. */
#panel-all-orders .orders-kpi-spark,
#panel-all-orders .orders-kpi-spark svg,
#panel-all-orders .orders-kpi-spark .sparkline-svg,
#panel-all-orders .orders-kpi-spark .trend-current-path,
#panel-all-orders .orders-kpi-spark .trend-compare-path {
    filter: none !important;
    box-shadow: none !important;
}
#panel-all-orders .orders-kpi-spark .trend-current-path,
#panel-all-orders .orders-kpi-spark .trend-compare-path {
    vector-effect: non-scaling-stroke;   /* uniform stroke despite preserveAspectRatio=none */
}
/* Light: crisper current stroke in the platform blue. */
#panel-all-orders .orders-kpi-spark .trend-current-path { stroke: #0071E3; }
/* Dark: a stray sidebar.css rule forces a dull grey-blue (#C8D4DC) via
   !important on ALL .trend-current-path — override it with the identity blue
   so the KPI line is clearly visible in dark. */
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-spark .trend-current-path,
body.dark #panel-all-orders .orders-kpi-spark .trend-current-path { stroke: #2997FF !important; }
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-spark .trend-compare-path,
body.dark #panel-all-orders .orders-kpi-spark .trend-compare-path { stroke: #8a8790 !important; opacity: .6; }

/* =========================================================================
   SPRINT 14 — KPI PREMIUM POLISH (Stripe / Linear / Vercel quality)
   Layout, classes and behavior are preserved. This block only elevates the
   visual quality: typography hierarchy, semantic deltas, premium spacing,
   refined Lucide icons, elegant dividers, subtle hover, gradient sparkline,
   and perfect light/dark consistency.
   ========================================================================= */

/* --- Row: crisper card seam + premium radius ------------------------------ */
#panel-all-orders .orders-kpi-row {
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .10);
}

/* --- Card: generous internal spacing + subtle hover lift ------------------ */
#panel-all-orders .orders-kpi-card {
    min-height: 104px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: background-color .18s ease, box-shadow .18s ease;
}
#panel-all-orders .orders-kpi-card:hover {
    background: #fbfcfe;
}
/* Elegant hairline divider between cards (replaces the flat 1px seam). */
#panel-all-orders .orders-kpi-card:not(:last-child) {
    border-inline-end: 1px solid rgba(15, 23, 42, .07);
}

/* --- Icon: light, elegant, Lucide-style, NO heavy background -------------- */
#panel-all-orders .orders-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    margin-bottom: 10px;
    color: #94a3b8;
    background: none;
    opacity: .9;
}
#panel-all-orders .orders-kpi-icon i,
#panel-all-orders .orders-kpi-icon svg {
    width: 17px; height: 17px;
    stroke-width: 1.75;
}

/* --- Info column: enforce hierarchy order label → value → change ---------- */
#panel-all-orders .orders-kpi-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#panel-all-orders .orders-kpi-info .orders-kpi-label { order: 1; }
#panel-all-orders .orders-kpi-info .orders-kpi-value { order: 2; }
#panel-all-orders .orders-kpi-info .orders-kpi-delta { order: 3; }

/* --- Label: smaller, quiet, uppercase tracking (secondary) ---------------- */
#panel-all-orders .orders-kpi-label {
    margin: 0;
    padding: 0;
    border-bottom: none;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #64748b;
    text-transform: none;
}

/* --- Value: large, bold, tight — the visual anchor ------------------------ */
#panel-all-orders .orders-kpi-value {
    margin-top: 2px;
    font-size: clamp(1.5rem, 1.7vw, 1.9rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
#panel-all-orders #ordersStatRevenue {
    font-size: clamp(1.05rem, 1.15vw, 1.25rem);
}

/* --- Delta: financial-dashboard trend pill (semantic green / red) --------- */
#panel-all-orders .orders-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
#panel-all-orders .orders-kpi-delta .okd-arrow {
    font-size: 0.62rem;
    line-height: 1;
}
#panel-all-orders .orders-kpi-delta.is-up   { color: #16a34a; }
#panel-all-orders .orders-kpi-delta.is-down { color: #dc2626; }

/* --- Gradient sparkline area fill + stroke stops (light) ------------------ */
#panel-all-orders .orders-kpi-spark { width: 72px; height: 26px; bottom: 12px; }
#panel-all-orders .orders-kpi-spark .spark-stop-a { stop-color: #0071E3; stop-opacity: .55; }
#panel-all-orders .orders-kpi-spark .spark-stop-b { stop-color: #0071E3; stop-opacity: 1; }
#panel-all-orders .orders-kpi-spark .spark-fill-a { stop-color: #0071E3; stop-opacity: .16; }
#panel-all-orders .orders-kpi-spark .spark-fill-b { stop-color: #0071E3; stop-opacity: 0; }
#panel-all-orders .orders-kpi-spark .trend-area-path { stroke: none; }
#panel-all-orders .orders-kpi-spark .trend-current-path { stroke-width: 2; }
/* Soft glow only on the active (hovered) card's sparkline. */
#panel-all-orders .orders-kpi-card:hover .orders-kpi-spark .trend-current-path {
    filter: drop-shadow(0 1px 3px rgba(0, 113, 227, .35)) !important;
}

/* =========================== DARK THEME ================================== */
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-row,
body.dark #panel-all-orders .orders-kpi-row {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px -14px rgba(0, 0, 0, .55);
}
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-card:hover,
body.dark #panel-all-orders .orders-kpi-card:hover {
    background: #57525d;
}
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-card:not(:last-child),
body.dark #panel-all-orders .orders-kpi-card:not(:last-child) {
    border-inline-end: 1px solid rgba(255, 255, 255, .08);
}
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-icon,
body.dark #panel-all-orders .orders-kpi-icon { color: #a39ea8; }
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-label,
body.dark #panel-all-orders .orders-kpi-label { color: #a39ea8 !important; }
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-value,
body.dark #panel-all-orders .orders-kpi-value { color: #f4f4f5 !important; }
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-delta.is-up,
body.dark #panel-all-orders .orders-kpi-delta.is-up { color: #4ade80; }
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-delta.is-down,
body.dark #panel-all-orders .orders-kpi-delta.is-down { color: #f87171; }
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-spark .spark-stop-a,
body.dark #panel-all-orders .orders-kpi-spark .spark-stop-a { stop-color: #2997FF; stop-opacity: .55; }
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-spark .spark-stop-b,
body.dark #panel-all-orders .orders-kpi-spark .spark-stop-b { stop-color: #2997FF; stop-opacity: 1; }
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-spark .spark-fill-a,
body.dark #panel-all-orders .orders-kpi-spark .spark-fill-a { stop-color: #2997FF; stop-opacity: .20; }
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-spark .spark-fill-b,
body.dark #panel-all-orders .orders-kpi-spark .spark-fill-b { stop-color: #2997FF; stop-opacity: 0; }
html[data-buld-theme="dark"] #panel-all-orders .orders-kpi-card:hover .orders-kpi-spark .trend-current-path,
body.dark #panel-all-orders .orders-kpi-card:hover .orders-kpi-spark .trend-current-path {
    filter: drop-shadow(0 1px 4px rgba(41, 151, 255, .45)) !important;
}

/* =========================================================================
   PLATFORM-WIDE SEMANTIC COLOR SYSTEM + SHARED KPI DELTA
   One consistent rule for every KPI card, table cell, chart legend and
   analytics figure: positive = green, negative = red — in BOTH themes.
   The premium KPI delta component (.orders-kpi-delta) is reused across
   Dashboard, Orders, Analytics, Logistics, so its styling is global here.
   ========================================================================= */

/* --- The reusable delta pill (financial style), un-scoped ----------------- */
.orders-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.orders-kpi-delta .okd-arrow { font-size: 0.62rem; line-height: 1; }

/* --- Semantic color tokens: positive → green, negative → red -------------- */
.orders-kpi-delta.is-up,
.kpi-delta.is-up,
.trend-up, .delta-up, .metric-up,
.an-delta-up,
.orders-kpi-trend.pos, .an-trend.up, .stat-trend.up,
[data-trend="up"], [data-delta="positive"] {
    color: #16a34a !important;
}
.orders-kpi-delta.is-down,
.kpi-delta.is-down,
.trend-down, .delta-down, .metric-down,
.an-delta-down,
.orders-kpi-trend.neg, .an-trend.down, .stat-trend.down,
[data-trend="down"], [data-delta="negative"] {
    color: #dc2626 !important;
}

/* Dark theme — brighter green/red for legibility on warm dark surfaces. */
html[data-buld-theme="dark"] .orders-kpi-delta.is-up,
html[data-buld-theme="dark"] .kpi-delta.is-up,
html[data-buld-theme="dark"] .trend-up, html[data-buld-theme="dark"] .delta-up,
html[data-buld-theme="dark"] .metric-up, html[data-buld-theme="dark"] .orders-kpi-trend.pos,
html[data-buld-theme="dark"] .an-trend.up, html[data-buld-theme="dark"] .stat-trend.up,
html[data-buld-theme="dark"] [data-trend="up"], html[data-buld-theme="dark"] [data-delta="positive"],
body.dark .orders-kpi-delta.is-up, body.dark .kpi-delta.is-up,
body.dark .trend-up, body.dark .delta-up, body.dark .metric-up,
body.dark .orders-kpi-trend.pos, body.dark .an-trend.up, body.dark .stat-trend.up,
body.dark [data-trend="up"], body.dark [data-delta="positive"] {
    color: #4ade80 !important;
}
html[data-buld-theme="dark"] .orders-kpi-delta.is-down,
html[data-buld-theme="dark"] .kpi-delta.is-down,
html[data-buld-theme="dark"] .trend-down, html[data-buld-theme="dark"] .delta-down,
html[data-buld-theme="dark"] .metric-down, html[data-buld-theme="dark"] .orders-kpi-trend.neg,
html[data-buld-theme="dark"] .an-trend.down, html[data-buld-theme="dark"] .stat-trend.down,
html[data-buld-theme="dark"] [data-trend="down"], html[data-buld-theme="dark"] [data-delta="negative"],
body.dark .orders-kpi-delta.is-down, body.dark .kpi-delta.is-down,
body.dark .trend-down, body.dark .delta-down, body.dark .metric-down,
body.dark .orders-kpi-trend.neg, body.dark .an-trend.down, body.dark .stat-trend.down,
body.dark [data-trend="down"], body.dark [data-delta="negative"] {
    color: #f87171 !important;
}
html[data-buld-theme="dark"] .an-delta-up, body.dark .an-delta-up { color: #4ade80 !important; }
html[data-buld-theme="dark"] .an-delta-down, body.dark .an-delta-down { color: #f87171 !important; }

/* Analytics mini-sparkline: same identity blue as the rest of the platform. */
.an-spark-svg .an-spark-path { stroke: #0071E3; stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
html[data-buld-theme="dark"] .an-spark-svg .an-spark-path,
body.dark .an-spark-svg .an-spark-path { stroke: #2997FF; }

/* --- Dashboard KPI strip: adopt the same premium component ---------------- */
/* Retire the legacy static trend pills in favour of the unified delta. */
#panel-overview .dash-kpi-row .orders-kpi-trend { display: none !important; }
#panel-overview .dash-kpi-row .orders-kpi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 16px;
    min-height: 104px;
    transition: background-color .18s ease;
}
#panel-overview .dash-kpi-row .orders-kpi-card:hover { background: #fbfcfe; }
html[data-buld-theme="dark"] #panel-overview .dash-kpi-row .orders-kpi-card:hover,
body.dark #panel-overview .dash-kpi-row .orders-kpi-card:hover { background: #57525d; }
#panel-overview .dash-kpi-row .orders-kpi-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-bottom: 10px; color: #94a3b8; background: none; opacity: .9;
}
#panel-overview .dash-kpi-row .orders-kpi-icon i { width: 17px; height: 17px; stroke-width: 1.75; }
html[data-buld-theme="dark"] #panel-overview .dash-kpi-row .orders-kpi-icon,
body.dark #panel-overview .dash-kpi-row .orders-kpi-icon { color: #a39ea8; }
#panel-overview .dash-kpi-row .orders-kpi-info { display: flex; flex-direction: column; gap: 4px; }
#panel-overview .dash-kpi-row .orders-kpi-delta { margin-top: 2px; }
#panel-overview .dash-kpi-row .orders-kpi-spark {
    display: block; position: absolute; inset-inline-end: 12px; bottom: 12px;
    width: 72px; height: 26px; pointer-events: none;
}
#panel-overview .dash-kpi-row .orders-kpi-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
#panel-overview .dash-kpi-row .orders-kpi-spark .trend-current-path { stroke: #0071E3; stroke-width: 2; vector-effect: non-scaling-stroke; }
#panel-overview .dash-kpi-row .orders-kpi-spark .spark-stop-a { stop-color: #0071E3; stop-opacity: .55; }
#panel-overview .dash-kpi-row .orders-kpi-spark .spark-stop-b { stop-color: #0071E3; stop-opacity: 1; }
#panel-overview .dash-kpi-row .orders-kpi-spark .spark-fill-a { stop-color: #0071E3; stop-opacity: .16; }
#panel-overview .dash-kpi-row .orders-kpi-spark .spark-fill-b { stop-color: #0071E3; stop-opacity: 0; }
html[data-buld-theme="dark"] #panel-overview .dash-kpi-row .orders-kpi-spark .trend-current-path,
body.dark #panel-overview .dash-kpi-row .orders-kpi-spark .trend-current-path { stroke: #2997FF !important; }
html[data-buld-theme="dark"] #panel-overview .dash-kpi-row .orders-kpi-spark .spark-stop-a,
body.dark #panel-overview .dash-kpi-row .orders-kpi-spark .spark-stop-a { stop-color: #2997FF; stop-opacity: .55; }
html[data-buld-theme="dark"] #panel-overview .dash-kpi-row .orders-kpi-spark .spark-stop-b,
body.dark #panel-overview .dash-kpi-row .orders-kpi-spark .spark-stop-b { stop-color: #2997FF; stop-opacity: 1; }
html[data-buld-theme="dark"] #panel-overview .dash-kpi-row .orders-kpi-spark .spark-fill-a,
body.dark #panel-overview .dash-kpi-row .orders-kpi-spark .spark-fill-a { stop-color: #2997FF; stop-opacity: .20; }
html[data-buld-theme="dark"] #panel-overview .dash-kpi-row .orders-kpi-spark .spark-fill-b,
body.dark #panel-overview .dash-kpi-row .orders-kpi-spark .spark-fill-b { stop-color: #2997FF; stop-opacity: 0; }

/* --- Shared premium sparkline for the Dashboard stat-cards ----------------- */
#panel-overview .stat-card { position: relative; }
#panel-overview .stat-card .orders-kpi-delta { margin-top: 4px; }
#panel-overview .stat-card-spark .spark-stop-a { stop-color: #0071E3; stop-opacity: .55; }
#panel-overview .stat-card-spark .spark-stop-b { stop-color: #0071E3; stop-opacity: 1; }
#panel-overview .stat-card-spark .spark-fill-a { stop-color: #0071E3; stop-opacity: .16; }
#panel-overview .stat-card-spark .spark-fill-b { stop-color: #0071E3; stop-opacity: 0; }
#panel-overview .stat-card-spark .trend-current-path { stroke-width: 2; }
html[data-buld-theme="dark"] #panel-overview .stat-card-spark .spark-stop-a,
body.dark #panel-overview .stat-card-spark .spark-stop-a { stop-color: #2997FF; stop-opacity: .55; }
html[data-buld-theme="dark"] #panel-overview .stat-card-spark .spark-stop-b,
body.dark #panel-overview .stat-card-spark .spark-stop-b { stop-color: #2997FF; stop-opacity: 1; }
html[data-buld-theme="dark"] #panel-overview .stat-card-spark .spark-fill-a,
body.dark #panel-overview .stat-card-spark .spark-fill-a { stop-color: #2997FF; stop-opacity: .20; }
html[data-buld-theme="dark"] #panel-overview .stat-card-spark .spark-fill-b,
body.dark #panel-overview .stat-card-spark .spark-fill-b { stop-color: #2997FF; stop-opacity: 0; }

/* --- Logistique top KPI row: adopt the premium component ------------------ */
#panel-carriers #carrierStatsRow .orders-kpi-card {
    position: relative; display: flex; flex-direction: column;
    padding: 18px 18px 16px; min-height: 104px; transition: background-color .18s ease;
}
#panel-carriers #carrierStatsRow .orders-kpi-card:hover { background: #fbfcfe; }
html[data-buld-theme="dark"] #panel-carriers #carrierStatsRow .orders-kpi-card:hover,
body.dark #panel-carriers #carrierStatsRow .orders-kpi-card:hover { background: #57525d; }
#panel-carriers #carrierStatsRow .orders-kpi-card:not(:last-child) { border-inline-end: 1px solid rgba(15,23,42,.07); }
html[data-buld-theme="dark"] #panel-carriers #carrierStatsRow .orders-kpi-card:not(:last-child),
body.dark #panel-carriers #carrierStatsRow .orders-kpi-card:not(:last-child) { border-inline-end: 1px solid rgba(255,255,255,.08); }
#panel-carriers #carrierStatsRow .orders-kpi-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-bottom: 10px; color: #94a3b8; background: none; opacity: .9;
}
#panel-carriers #carrierStatsRow .orders-kpi-icon i { width: 17px; height: 17px; stroke-width: 1.75; }
html[data-buld-theme="dark"] #panel-carriers #carrierStatsRow .orders-kpi-icon,
body.dark #panel-carriers #carrierStatsRow .orders-kpi-icon { color: #a39ea8; }
#panel-carriers #carrierStatsRow .orders-kpi-info { display: flex; flex-direction: column; gap: 4px; }
#panel-carriers #carrierStatsRow .orders-kpi-value {
    font-size: clamp(1.5rem, 1.7vw, 1.9rem); line-height: 1.05; letter-spacing: -.035em;
    font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums;
}
html[data-buld-theme="dark"] #panel-carriers #carrierStatsRow .orders-kpi-value,
body.dark #panel-carriers #carrierStatsRow .orders-kpi-value { color: #f4f4f5; }
#panel-carriers #carrierStatsRow .orders-kpi-label { font-size: .72rem; font-weight: 600; color: #64748b; }
html[data-buld-theme="dark"] #panel-carriers #carrierStatsRow .orders-kpi-label,
body.dark #panel-carriers #carrierStatsRow .orders-kpi-label { color: #a39ea8; }
#panel-carriers #carrierStatsRow .orders-kpi-delta { margin-top: 2px; }
#panel-carriers #carrierStatsRow .orders-kpi-spark {
    display: block; position: absolute; inset-inline-end: 12px; bottom: 12px;
    width: 72px; height: 26px; pointer-events: none;
}
#panel-carriers #carrierStatsRow .orders-kpi-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
#panel-carriers #carrierStatsRow .orders-kpi-spark .trend-current-path { stroke: #0071E3; stroke-width: 2; vector-effect: non-scaling-stroke; }
#panel-carriers #carrierStatsRow .orders-kpi-spark .spark-stop-a { stop-color: #0071E3; stop-opacity: .55; }
#panel-carriers #carrierStatsRow .orders-kpi-spark .spark-stop-b { stop-color: #0071E3; stop-opacity: 1; }
#panel-carriers #carrierStatsRow .orders-kpi-spark .spark-fill-a { stop-color: #0071E3; stop-opacity: .16; }
#panel-carriers #carrierStatsRow .orders-kpi-spark .spark-fill-b { stop-color: #0071E3; stop-opacity: 0; }
html[data-buld-theme="dark"] #panel-carriers #carrierStatsRow .orders-kpi-spark .trend-current-path,
body.dark #panel-carriers #carrierStatsRow .orders-kpi-spark .trend-current-path { stroke: #2997FF !important; }
html[data-buld-theme="dark"] #panel-carriers #carrierStatsRow .orders-kpi-spark .spark-stop-a,
body.dark #panel-carriers #carrierStatsRow .orders-kpi-spark .spark-stop-a { stop-color: #2997FF; stop-opacity: .55; }
html[data-buld-theme="dark"] #panel-carriers #carrierStatsRow .orders-kpi-spark .spark-stop-b,
body.dark #panel-carriers #carrierStatsRow .orders-kpi-spark .spark-stop-b { stop-color: #2997FF; stop-opacity: 1; }
html[data-buld-theme="dark"] #panel-carriers #carrierStatsRow .orders-kpi-spark .spark-fill-a,
body.dark #panel-carriers #carrierStatsRow .orders-kpi-spark .spark-fill-a { stop-color: #2997FF; stop-opacity: .20; }
html[data-buld-theme="dark"] #panel-carriers #carrierStatsRow .orders-kpi-spark .spark-fill-b,
body.dark #panel-carriers #carrierStatsRow .orders-kpi-spark .spark-fill-b { stop-color: #2997FF; stop-opacity: 0; }

/* --- Carriers KPI: same gradient + delta language ------------------------- */
#panel-carriers .carrier-kpi-spark .spark-stop-a { stop-color: #0071E3; stop-opacity: .55; }
#panel-carriers .carrier-kpi-spark .spark-stop-b { stop-color: #0071E3; stop-opacity: 1; }
#panel-carriers .carrier-kpi-spark .spark-fill-a { stop-color: #0071E3; stop-opacity: .16; }
#panel-carriers .carrier-kpi-spark .spark-fill-b { stop-color: #0071E3; stop-opacity: 0; }
html[data-buld-theme="dark"] #panel-carriers .carrier-kpi-spark .spark-stop-a,
body.dark #panel-carriers .carrier-kpi-spark .spark-stop-a { stop-color: #2997FF; stop-opacity: .55; }
html[data-buld-theme="dark"] #panel-carriers .carrier-kpi-spark .spark-stop-b,
body.dark #panel-carriers .carrier-kpi-spark .spark-stop-b { stop-color: #2997FF; stop-opacity: 1; }
html[data-buld-theme="dark"] #panel-carriers .carrier-kpi-spark .spark-fill-a,
body.dark #panel-carriers .carrier-kpi-spark .spark-fill-a { stop-color: #2997FF; stop-opacity: .20; }
html[data-buld-theme="dark"] #panel-carriers .carrier-kpi-spark .spark-fill-b,
body.dark #panel-carriers .carrier-kpi-spark .spark-fill-b { stop-color: #2997FF; stop-opacity: 0; }