/* ============================================================
   BARBAROS — Dark Theme (locked, single source of truth)
   ────────────────────────────────────────────────────────────
   The whole UI is permanently dark. Page bg: #272728.
   Cards / tables / panels: #4f4a54 with visible 1px edge.
   Loaded LAST so it wins over all legacy stylesheets.
   ============================================================ */

:root,
body, body.dark, body.dark-mode, [data-theme="dark"] {
    --bp-page:    #272728;   /* page background — HSL 240, 1, 15 */
    --bp-card:    #4f4a54;   /* cards / tables / panels — signature */
    --bp-raise:   #5a5560;   /* hover */
    --bp-active:  #6a6470;   /* active / pressed */
    --bp-line:    #6e6874;   /* card border (visible edge) */
    --bp-line-2:  #837d8a;   /* stronger dividers */
    --bp-ink:     #f4f4f5;
    --bp-ink-2:   #c2bdc8;
    --bp-ink-3:   #a39ea8;
    --bp-card-border: 1px solid var(--bp-line);
    --bp-card-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.35), 0 6px 16px rgba(0,0,0,0.30);
    --bp-card-radius: 14px;
}

/* ── PAGE BACKGROUND — gated to dark theme only ────────── */
body.dark,
body.dark.dashboard-body,
body.dark .app-layout,
body.dark .main-content,
body.dark main {
    background: var(--bp-page) !important;
    color: var(--bp-ink) !important;
}

/* ── PANEL = SECTION CONTAINER — transparent (NOT a card) ─ */
.panel,
[id^="panel-"],
.panel-header,
.panel-actions,
.spy-panel,
.spy-panel-head,
.preview-panel,
.spacing-panel,
.dashboard-overview-grid,
.dashboard-overview-grid-v2,
.overview-left-col,
.overview-top-row,
.overview-bottom-row,
.geo-hero,
.geo-hero-header,
.geo-hero-grid,
.geo-hero-stage,
.geo-hero-side,
.geo-side-strip,
.dash-period-bar,
.dash-period-menu,
.stats-grid,
.stats-8 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ── Hidden stubs / aria-hidden — keep them gone ────── */
[aria-hidden="true"][style*="display:none"],
[aria-hidden="true"][style*="display: none"],
.stats-grid.stats-8 {
    display: none !important;
}

/* ── ACTUAL CARDS only — uniform signature look (dark mode only — gated by body.dark) ──────── */
body.dark [class*="card"]:not(.switcher-card):not(.user-card):not(.bp-up-credits):not([class*="link-badge"]):not(.spy-card):not(.app-card):not(.brand-card):not(.flat-card):not(.lang-card):not(.checkbox-label):not([class*="-card-header"]):not([class*="-card-title"]):not([class*="-card-value"]):not([class*="-card-icon"]):not([class*="-card-summary"]):not([class*="-card-change"]):not([class*="-card-label"]):not([class*="-card-tag"]):not([class*="-card-audience"]):not([class*="-card-head"]):not(.an-kpi-card):not(.orders-kpi-card):not(.dash-kpi-card):not(.geo-strip-cell):not(.an-kpi-card):not(.cps):not([class*="-card-body"]),
[class$="-box"]:not(.search-box):not(.checkbox-label):not(.btn-box),
[class$="-tile"]:not(.an-action-tiles),
[class$="-block"]:not(.btn-block):not(.origin-wilaya-block-row),
.an-tile,
.profit-box,
.origin-wilaya-block,
.geo-side-panel,
.cf-shipping-card, .cf-table-card, .cf-mode-card,
.dash-recent-card, .estimated-rev-card, .gross-value-card,
.profit-main-card, .attention-card, .coming-soon-card, .call-card,
.lp-card, .lp-saved-card, .lp-style-card, .dom-card, .ts-card,
.qa-mini-card, .action-card, .report-card, .project-card,
.an-card, .integ-stat-card,
.carrier-analytics-card, .carrier-choice-card, .carrier-kpi-card,
.carrier-help-box {
    background: var(--bp-card) !important;
    border: var(--bp-card-border) !important;
    border-radius: var(--bp-card-radius) !important;
    color: var(--bp-ink) !important;
    box-shadow: var(--bp-card-shadow) !important;
}

/* Card text colors — dark mode only (gated by body.dark; the --bp-* inks are dark values) */
body.dark [class*="card"] h1, body.dark [class*="card"] h2, body.dark [class*="card"] h3, body.dark [class*="card"] h4,
body.dark [class*="card"] strong, body.dark [class*="card"] .stat-card-value, body.dark [class*="card"] .kpi-value,
body.dark [class$="-panel"] h1, body.dark [class$="-panel"] h2, body.dark [class$="-panel"] h3, body.dark [class$="-panel"] h4,
body.dark .panel h1, body.dark .panel h2, body.dark .panel h3, body.dark .panel h4 {
    color: var(--bp-ink) !important;
}
body.dark [class*="card"] p, body.dark [class*="card"] small,
body.dark [class*="card"] .stat-card-label, body.dark [class*="card"] .kpi-label, body.dark [class*="card"] .metric-label,
body.dark [class*="card"] .muted, body.dark [class*="card"] .subtitle {
    color: var(--bp-ink-2) !important;
}

/* Hover */
[class*="card"]:not(.switcher-card):not(.app-card):not(.brand-card):not([class*="-card-header"]):not([class*="-card-title"]):not([class*="-card-value"]):not([class*="-card-icon"]):not([class*="-card-summary"]):not([class*="-card-change"]):not([class*="-card-label"]):not([class*="-card-tag"]):hover {
    background: var(--bp-raise) !important;
    border-color: var(--bp-line-2) !important;
}

/* ── TABLES — dark mode only (gated by body.dark) ──────── */
body.dark .table-card, body.dark .data-table-wrap, body.dark .orders-table-wrap, body.dark table {
    background: var(--bp-card) !important;
    color: var(--bp-ink) !important;
    border-collapse: separate;
    border-spacing: 0;
}
body.dark thead, body.dark thead tr, body.dark thead th, body.dark .table-header {
    background: var(--bp-page) !important;
    color: var(--bp-ink-2) !important;
    border-color: var(--bp-line) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
}
body.dark tbody tr { background: transparent !important; }
body.dark tbody tr:hover, body.dark tbody tr.row-hover, body.dark .table-row:hover {
    background: var(--bp-raise) !important;
}
body.dark tbody tr:nth-child(even) { background: transparent !important; }
body.dark td, body.dark th { border-color: var(--bp-line) !important; color: var(--bp-ink) !important; }
body.dark td { color: var(--bp-ink-2) !important; }

/* ── INPUTS ──────────────────────────────────────────── */
input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="number"], input[type="url"],
input[type="password"], input[type="date"],
textarea, select,
.sidebar-search, .search-input, input.form-control, .field-input {
    background: var(--bp-page) !important;
    border: 1px solid var(--bp-line) !important;
    color: var(--bp-ink) !important;
    border-radius: 8px;
}
input::placeholder, textarea::placeholder { color: var(--bp-ink-3) !important; }
input:focus, textarea:focus, select:focus {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 3px rgba(167,139,250,0.25) !important;
    outline: none;
}

/* ── BUTTONS (secondary / ghost / icon) ──────────────── */
.btn-secondary, .btn-ghost, .icon-btn, .filter-btn, .pill-btn,
button.secondary, .topbar-btn {
    background: var(--bp-card) !important;
    border: 1px solid var(--bp-line) !important;
    color: var(--bp-ink-2) !important;
}
.btn-secondary:hover, .btn-ghost:hover, .icon-btn:hover, .topbar-btn:hover {
    background: var(--bp-raise) !important;
    color: var(--bp-ink) !important;
    border-color: var(--bp-line-2) !important;
}

/* ── MODALS / DRAWERS / POPOVERS ─────────────────────── */
.modal, .modal-content, .drawer, .popover, .dropdown-menu,
.user-dropdown, .filter-modal, .order-modal, .edit-modal,
[class*="-modal"]:not(.modal-overlay):not([class*="-overlay"]) {
    background: var(--bp-card) !important;
    border: var(--bp-card-border) !important;
    border-radius: var(--bp-card-radius) !important;
    color: var(--bp-ink) !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.55) !important;
}
.modal-overlay, [class*="-overlay"] {
    background: rgba(15, 13, 18, 0.65) !important;
    backdrop-filter: blur(4px);
}

/* ── TOPBAR / SIDEBAR ────────────────────────────────── */
.topbar-global, .topbar {
    background: var(--bp-card) !important;
    border-bottom: 1px solid var(--bp-line) !important;
}
.sidebar, .ds-sidebar {
    background: var(--bp-card) !important;
    border-color: var(--bp-line) !important;
}
.sidebar-link, .ds-sidebar a { color: var(--bp-ink-2) !important; }
.sidebar-link:hover { background: var(--bp-raise) !important; color: var(--bp-ink) !important; }
.sidebar-link.active { background: var(--bp-active) !important; color: var(--bp-ink) !important; }

/* ── DIVIDERS ────────────────────────────────────────── */
hr, .divider, .dropdown-divider, .sidebar-divider {
    border-color: var(--bp-line) !important;
    background: var(--bp-line) !important;
}

/* ── SCROLLBARS ──────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bp-page); }
::-webkit-scrollbar-thumb {
    background: var(--bp-raise);
    border-radius: 5px;
    border: 2px solid var(--bp-page);
}
::-webkit-scrollbar-thumb:hover { background: var(--bp-active); }

/* ── NESTED CARDS — only when both are real card containers
   Excludes inner labels/values/headers/badges that aren't real cards ─ */
.table-card .stat-card,
.form-card .info-card {
    background: var(--bp-raise) !important;
    border-color: var(--bp-line-2) !important;
}

/* ── KILL accidental backgrounds on text/value/label spans inside cards
   (sidebar.css has a broad [class*="-card"] rule that paints these) ─ */
html body[class] [class*="-card-value"],
html body[class] [class*="-card-label"],
html body[class] [class*="-card-icon"]:not(.stat-card-icon),
html body[class] [class*="-card-summary"],
html body[class] [class*="-card-change"],
html body[class] [class*="-card-tag"],
html body[class] [class*="-card-meta"],
html body[class] .an-card-value,
html body[class] .an-card-label,
html body[class] .an-bk-label,
html body[class] .an-bk-value {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ── EXCEPTIONS — keep colored brand cards intact ────── */
.app-card, .brand-card, .flat-card, .spy-card, .switcher-card,
.bp-up-credits, .bp-up-avatar, .bp-up-notif {
    /* unaffected */
}

/* ── KPI / GEO STRIP — outer row IS the card, inner cells are cells ─ */
body.dark .orders-kpi-row,
body.dark .dash-kpi-row,
body.dark .geo-side-strip,
body.dark .an-kpi-row {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Cells inside the strip — NO individual card chrome, just separators
   Higher specificity (html body[class]) to beat sidebar.css broad rule */
html body[class] .orders-kpi-row > .orders-kpi-card,
html body[class] .dash-kpi-row > .orders-kpi-card,
html body[class] .geo-side-strip > .geo-strip-cell,
html body[class] .an-kpi-row > .an-kpi-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* #panel-all-orders cells get their separator from premium.css (pseudo-element); only the overview and
   analytics strips keep the border separator here. */
body.dark .dash-kpi-row > .orders-kpi-card:not(:last-child),
body.dark .an-kpi-row > .an-kpi-card:not(:last-child) {
    border-inline-end: 1px solid var(--buld-hairline) !important;
}
/* Geo strip uses a 2x2 grid — borders right + bottom */
.geo-side-strip > .geo-strip-cell:nth-child(odd) {
    border-inline-end: 1px solid var(--bp-line) !important;
}
.geo-side-strip > .geo-strip-cell:nth-child(-n+2) {
    border-bottom: 1px solid var(--bp-line) !important;
}
.geo-strip-cell strong { color: var(--bp-ink) !important; }
.geo-strip-label { color: var(--bp-ink-2) !important; border-bottom-color: var(--bp-line) !important; }

/* Cell text inside KPI strip — dark only */
body.dark .orders-kpi-row .orders-kpi-value,
body.dark .dash-kpi-row .orders-kpi-value { color: var(--bp-ink) !important; }
body.dark .orders-kpi-row .orders-kpi-label,
body.dark .dash-kpi-row .orders-kpi-label {
    color: var(--bp-ink-2) !important;
    border-bottom-color: var(--bp-line) !important;
}

/* Hide the dark-mode toggle button — locked dark always */
#darkModeToggle { display: none !important; }

/* ============================================================
   KILL BOX-IN-BOX — remove all card-header inner borders
   The visual "rectangle inside a rectangle" artifact comes from
   headers with border-bottom. We remove all of them globally.
   ============================================================ */
body.dark .table-card-header,
body.dark .orders-table-card-header,
body.dark .attention-header,
body.dark .an-card-header,
body.dark .revenue-header,
body.dark .team-modal-header,
body.dark .apps-drawer-header,
body.dark .funnel-header,
body.dark [class*="-card-header"]:not(.modal-header):not(.panel-header):not(.geo-hero-header):not(.spy-panel-head),
body.dark [class$="-header"]:not(.modal-header):not(.panel-header):not(.geo-hero-header):not(.spy-panel-head):not(.topbar-header):not(.sidebar-header):not(.app-header) {
    border-bottom: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Kill the dotted h3 underline used inside card headers */
body.dark .table-card-header h3,
body.dark .orders-table-card-header h3,
body.dark .attention-header h3,
body.dark .an-card-header h3,
body.dark .revenue-header h3,
body.dark .funnel-header h3,
body.dark [class*="-card-header"] h3,
body.dark [class$="-header"] h3 {
    border-bottom: none !important;
    text-decoration: none !important;
    padding-bottom: 0 !important;
    color: var(--bp-ink) !important;
}

/* Inputs / search box inside cards — neutralize white "rectangle" look */
body.dark input[type="text"]:not(.row-check-input),
body.dark input[type="search"],
body.dark .orders-search-box input,
body.dark .search-box input {
    background: var(--bp-page) !important;
    border: 1px solid var(--bp-line) !important;
    color: var(--bp-ink) !important;
}

/* Filter pills row in panel headers — buttons sometimes inherit white bg  */
/* (.filter-pill removed from these lists — the orders chips are the .p-chip primitive in premium.css) */
body.dark .filter-bar-pill,
body.dark .pill-btn,
body.dark button.btn-outline,
body.dark .btn-outline {
    background: transparent !important;
    border: 1px solid var(--bp-line) !important;
    color: var(--bp-ink-2) !important;
}
body.dark .filter-bar-pill:hover,
body.dark .pill-btn:hover,
body.dark button.btn-outline:hover,
body.dark .btn-outline:hover {
    background: var(--bp-raise) !important;
    color: var(--bp-ink) !important;
}
body.dark .filter-bar-pill.active,
body.dark .pill-btn.active {
    background: var(--bp-active) !important;
    color: var(--bp-ink) !important;
    border-color: var(--bp-line-2) !important;
}

/* ============================================================
   KILL DECORATIVE GRADIENT BORDERS — control-section ::before
   The purple-blue-green stripe at top of LP builder cards
   ============================================================ */
body.dark .action-card::before,
body.dark .project-card::before,
body.dark .preview-panel::before,
body.dark .creator-controls::before,
body.dark .control-section::before,
body.dark [class*="-card"]::before {
    display: none !important;
    content: none !important;
}

/* Apply signature card to control-section + creator-controls + LP cards */
body.dark .control-section,
body.dark .creator-controls,
body.dark .preview-panel,
body.dark .lp-card,
body.dark .action-card,
body.dark .project-card {
    background: var(--bp-card) !important;
    background-image: none !important;
    border: var(--bp-card-border) !important;
    border-radius: var(--bp-card-radius) !important;
    box-shadow: var(--bp-card-shadow) !important;
    color: var(--bp-ink) !important;
}
body.dark .control-section h3,
body.dark .lp-card h3,
body.dark .action-card h3,
body.dark .project-card h3 {
    color: var(--bp-ink) !important;
}

/* ============================================================
   FORM INPUTS — DARKER than card surface for clear distinction
   Cards = #4f4a54, inputs = #2e2d31 (deeper) → clear depth hierarchy
   ============================================================ */
body.dark input[type="text"]:not(.row-check-input),
body.dark input[type="search"],
body.dark input[type="email"],
body.dark input[type="tel"],
body.dark input[type="number"],
body.dark input[type="url"],
body.dark input[type="password"],
body.dark input[type="date"],
body.dark textarea,
body.dark select,
body.dark .form-input,
body.dark .form-textarea,
body.dark .form-control {
    background: #2e2d31 !important;
    border: 1px solid #5a5560 !important;
    color: var(--bp-ink) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.20) !important;
}
body.dark input:hover:not(:disabled),
body.dark textarea:hover:not(:disabled),
body.dark select:hover:not(:disabled) {
    border-color: #756f7c !important;
}
body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus,
body.dark .form-input:focus,
body.dark .form-textarea:focus {
    background: #322f35 !important;
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 3px rgba(167,139,250,0.20), inset 0 1px 0 rgba(0,0,0,0.25) !important;
    outline: none;
}
body.dark input::placeholder,
body.dark textarea::placeholder { color: var(--bp-ink-3) !important; }

/* ============================================================
   OUTLINE / SECONDARY BUTTONS — kill white backgrounds
   ============================================================ */
body.dark .btn-outline:not(:hover),
body.dark button.btn-outline:not(:hover),
body.dark .lp-btn-secondary,
body.dark .lp-action-secondary,
body.dark .add-offer-btn,
body.dark button[class*="ajouter"],
body.dark button[class*="add-"]:not(.add-order-btn) {
    background: transparent !important;
    border: 1px solid var(--bp-line) !important;
    color: var(--bp-ink-2) !important;
}

/* Primary big CTA buttons (Générer, Publier, Enregistrer in modals) */
body.dark .lp-generate-btn,
body.dark .modal-footer .btn-primary,
body.dark .modal-footer button[type="submit"] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.30) !important;
}
body.dark .lp-generate-btn:hover,
body.dark .modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.40) !important;
}

/* Modal cancel button — quiet ghost style */
body.dark .modal-footer .btn-secondary,
body.dark .modal-footer button[type="button"]:not([type="submit"]):not(.btn-primary) {
    background: transparent !important;
    border: 1px solid var(--bp-line) !important;
    color: var(--bp-ink-2) !important;
}

/* ============================================================
   ANALYTICS PANEL (Analyses de données)
   ============================================================ */
body.dark .an-kpi-row,
body.dark .an-card {
    background: var(--bp-card) !important;
    border: var(--bp-card-border) !important;
    border-radius: var(--bp-card-radius) !important;
    color: var(--bp-ink) !important;
}
body.dark .an-kpi-card {
    background: transparent !important;
    border-inline-end-color: var(--bp-line) !important;
}
body.dark .an-kpi-card:hover,
body.dark .an-card:hover { background: var(--bp-raise) !important; }
body.dark .an-kpi-card:last-child { border-inline-end: none !important; }
body.dark .an-breakdown-list li { border-bottom-color: var(--bp-line) !important; }
body.dark .an-breakdown-list li:last-child { border-bottom: none !important; }
body.dark .an-bk-label { color: var(--bp-ink-2) !important; }
body.dark .an-bk-value { color: var(--bp-ink) !important; }
body.dark .an-bk-total { border-top-color: var(--bp-line) !important; padding-top: 12px !important; }
body.dark .an-bk-total .an-bk-label,
body.dark .an-bk-total .an-bk-value { color: var(--bp-ink) !important; font-weight: 700; }

/* ============================================================
   ALL ORDERS — toolbar pills + spacing toggle
   ============================================================ */
body.dark #panel-all-orders .toolbar-btn,
body.dark #panel-all-orders .tb-total,
body.dark #panel-all-orders .tb-stats,
body.dark #panel-all-orders .tb-filter {
    background: var(--bp-card) !important;
    background-image: none !important;
    border: 1px solid var(--bp-line) !important;
    color: var(--bp-ink-2) !important;
}
body.dark #panel-all-orders .toolbar-btn:hover {
    background: var(--bp-raise) !important;
    color: var(--bp-ink) !important;
}
body.dark .spacing-toggle-btn {
    background: transparent !important;
    border: 1px solid var(--bp-line) !important;
    color: var(--bp-ink-2) !important;
}
body.dark .spacing-toggle-btn:hover {
    background: var(--bp-raise) !important;
    color: var(--bp-ink) !important;
}

/* ============================================================
   ORDER DETAILS MODAL — refined elegant badges + total
   ============================================================ */
body.dark .om-tag.red {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
}
body.dark .om-tag.green {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
}
body.dark .om-total-bar {
    background: var(--bp-page) !important;
    border: 1px solid var(--bp-line) !important;
    border-left: 3px solid #a78bfa !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    box-shadow: none !important;
}
body.dark .om-total-bar span:first-child {
    color: var(--bp-ink-2) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
}
body.dark .om-total-val {
    color: var(--bp-ink) !important;
    font-weight: 800 !important;
    font-size: 18px !important;
}

/* ============================================================
   SUIVI DES COLIS — vibrant status colors per state
   ============================================================ */
body.dark .tracking-stats { background: transparent !important; }
body.dark .track-stat {
    background: var(--bp-card) !important;
    border: var(--bp-card-border) !important;
    border-radius: var(--bp-card-radius) !important;
}
body.dark .track-stat:hover { background: var(--bp-raise) !important; }
body.dark .track-stat-value { color: var(--bp-ink) !important; }
body.dark .track-stat-label { color: var(--bp-ink-2) !important; }

body.dark .yaya-scope .y-status {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid currentColor !important;
    font-weight: 600 !important;
}
body.dark .yaya-scope .y-status.s-pending,
body.dark .yaya-scope .y-status.s-en-attente { color: #fbbf24 !important; }
body.dark .yaya-scope .y-status.s-transit,
body.dark .yaya-scope .y-status.s-en-transit { color: #60a5fa !important; }
body.dark .yaya-scope .y-status.s-out,
body.dark .yaya-scope .y-status.s-en-livraison { color: #c4b5fd !important; }
body.dark .yaya-scope .y-status.s-delivered,
body.dark .yaya-scope .y-status.s-livre,
body.dark .yaya-scope .y-status.s-active { color: #34d399 !important; }
body.dark .yaya-scope .y-status.s-returned,
body.dark .yaya-scope .y-status.s-retourne { color: #f87171 !important; }
body.dark .yaya-scope .y-status.s-failed,
body.dark .yaya-scope .y-status.s-echec,
body.dark .yaya-scope .y-status.s-annule { color: #fb7185 !important; }

/* ============================================================
   CENTRE D'APPEL — premium gradient action buttons
   (semantic colors preserved, polished gradients applied)
   ============================================================ */
body.dark .call-btn {
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    transition: transform .15s ease, filter .15s ease !important;
}
body.dark .call-btn:hover { transform: translateY(-1px); filter: brightness(1.10); }
body.dark .call-btn.confirmed { background: linear-gradient(135deg, #10b981, #059669) !important; }
body.dark .call-btn.no-answer { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }
body.dark .call-btn.cancelled { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; }
body.dark .call-btn.postponed { background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; }
body.dark .call-btn.wrong-num { background: linear-gradient(135deg, #64748b, #334155) !important; }

/* ============================================================
   LP APPARENCE — Sombre/Clair tiles + color presets
   ============================================================ */
body.dark .lp-style-card {
    background: var(--bp-card) !important;
    border: 1px solid var(--bp-line) !important;
    color: var(--bp-ink-2) !important;
}
body.dark .lp-style-card:hover { border-color: var(--bp-line-2) !important; }
body.dark .lp-style-card.is-active {
    border-color: #a78bfa !important;
    color: var(--bp-ink) !important;
    box-shadow: 0 0 0 4px rgba(167,139,250,0.20) !important;
}
body.dark .lp-disabled-overlay {
    background: rgba(251,191,36,0.12) !important;
    color: #fbbf24 !important;
    border-color: rgba(251,191,36,0.30) !important;
}
body.dark .lp-color-row input[type="color"] {
    border-color: var(--bp-line) !important;
    background: var(--bp-page) !important;
}
body.dark .lp-color-presets button { box-shadow: 0 0 0 1px var(--bp-line) !important; }
body.dark .lp-color-presets button:hover { box-shadow: 0 0 0 2px #a78bfa !important; }

/* ============================================================
   FORM-CARD — kill the gradient stripe (same as control-section)
   ============================================================ */
body.dark .form-card::before { display: none !important; content: none !important; }

/* ============================================================
   ORDERS TABLE — Refined ship button + delivery pill
   ============================================================ */
/* Ship/Send button (✈) — was bright green, now Barbaros indigo */
body.dark .yaya-scope .btn-action.btn-confirm {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.30) !important;
}
body.dark .yaya-scope .btn-action.btn-confirm:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45) !important;
    transform: translateY(-1px);
}
body.dark .yaya-scope .btn-action.btn-cancel {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.30) !important;
    box-shadow: none !important;
}
body.dark .yaya-scope .btn-action.btn-cancel:hover {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}
/* Small icon-buttons in action cluster (printer / eye / pencil) */
body.dark .yaya-scope .ac-btn {
    background: var(--bp-raise) !important;
    color: var(--bp-ink-2) !important;
    border: 1px solid var(--bp-line) !important;
    border-radius: 8px !important;
    transition: all .15s ease !important;
}
body.dark .yaya-scope .ac-btn:hover {
    background: var(--bp-active) !important;
    color: var(--bp-ink) !important;
    border-color: var(--bp-line-2) !important;
    transform: translateY(-1px);
}

/* ============================================================
   LP BUILDER (Pages de destination) — polished forms + buttons
   ============================================================ */
/* Inputs / textareas (Nom du produit / Prix / Description)
   Use page-bg (#272728) so they're CLEARLY darker than the card */
body.dark .lp-input,
body.dark .lp-textarea,
body.dark .lp-card .form-input,
body.dark .lp-card .form-textarea {
    background: #2e2d31 !important;   /* slightly elevated page bg — deeper than card */
    border: 1px solid #5a5560 !important;
    color: var(--bp-ink) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    transition: border-color .15s, box-shadow .15s, background .15s !important;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.20) !important;   /* subtle depth */
}
body.dark .lp-input:hover,
body.dark .lp-textarea:hover {
    border-color: #756f7c !important;
}
body.dark .lp-input:focus,
body.dark .lp-textarea:focus {
    background: #322f35 !important;
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 3px rgba(167,139,250,0.20), inset 0 1px 0 rgba(0,0,0,0.25) !important;
    outline: none;
}
body.dark .lp-input::placeholder,
body.dark .lp-textarea::placeholder { color: var(--bp-ink-3) !important; }

/* Segmented toggle (Auto/Manuel + Sous le héro/Milieu/Bas de page) */
body.dark .lp-segmented {
    background: var(--bp-page) !important;
    border: 1px solid var(--bp-line) !important;
    border-radius: 10px !important;
    padding: 4px !important;
    display: flex; gap: 2px;
}
body.dark .lp-segmented button {
    background: transparent !important;
    border: none !important;
    color: var(--bp-ink-2) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    transition: all .15s ease !important;
    cursor: pointer;
}
body.dark .lp-segmented button:hover {
    color: var(--bp-ink) !important;
    background: var(--bp-raise) !important;
}
body.dark .lp-segmented button.is-active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.30) !important;
}

/* "+ Ajouter une offre" button */
body.dark .lp-add-btn {
    background: rgba(167,139,250,0.08) !important;
    color: #a78bfa !important;
    border: 1px dashed rgba(167,139,250,0.40) !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
body.dark .lp-add-btn:hover {
    background: rgba(167,139,250,0.15) !important;
    border-color: #a78bfa !important;
    color: #c4b5fd !important;
    border-style: solid !important;
}

/* "Générer la page" big CTA */
body.dark #generateLPBtn,
body.dark .control-actions .btn-primary.btn-block {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 6px 20px rgba(99,102,241,0.35) !important;
    width: 100%;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: filter .15s, transform .15s !important;
}
body.dark #generateLPBtn:hover,
body.dark .control-actions .btn-primary.btn-block:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Upload zone (Images du produit + Photo du modèle) */
body.dark .lp-card .upload-zone,
body.dark .control-section .upload-zone {
    border: 2px dashed var(--bp-line) !important;
    background: rgba(255,255,255,0.02) !important;
    border-radius: 12px !important;
    padding: 36px 24px !important;
    color: var(--bp-ink-2) !important;
    transition: all .2s ease !important;
}
body.dark .lp-card .upload-zone:hover,
body.dark .control-section .upload-zone:hover {
    border-color: #a78bfa !important;
    background: rgba(167,139,250,0.05) !important;
}
body.dark .upload-zone p { color: var(--bp-ink) !important; font-weight: 600; margin-top: 10px; }
body.dark .upload-zone span { color: var(--bp-ink-3) !important; font-size: 11.5px; }
body.dark .upload-zone i, html body .upload-zone svg { color: #a78bfa !important; }

/* Counter (0/700) */
body.dark .lp-counter { color: var(--bp-ink-3) !important; }

/* Color picker row (hex input + native color + preset dots) */
body.dark .lp-color-row input[type="color"] {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid var(--bp-line) !important;
    border-radius: 10px !important;
    background: var(--bp-page) !important;
    cursor: pointer;
}
body.dark .lp-hex {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--bp-line) !important;
    color: var(--bp-ink) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-family: ui-monospace, monospace !important;
    flex: 1;
}
body.dark .lp-color-presets button {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    box-shadow: 0 0 0 1px var(--bp-line) !important;
    cursor: pointer;
    transition: all .15s ease;
}
body.dark .lp-color-presets button:hover {
    transform: scale(1.10);
    box-shadow: 0 0 0 2px #a78bfa, 0 4px 12px rgba(167,139,250,0.30) !important;
}

/* lp-switch toggle (Prix produit / Marque / Formulaire) */
body.dark .lp-switch input:checked + .lp-switch-slider {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
}
body.dark .lp-switch-slider {
    background: var(--bp-page) !important;
    border: 1px solid var(--bp-line) !important;
}

/* Field labels & hints */
body.dark .lp-field-label { color: var(--bp-ink-2) !important; font-weight: 600 !important; }
body.dark .lp-field-hint { color: var(--bp-ink-3) !important; }
body.dark .lp-field-opt { color: var(--bp-ink-3) !important; }

/* "OPTIONS PROFESSIONNELLES" divider header */
body.dark .lp-section-tag {
    color: var(--bp-ink-3) !important;
    border-color: var(--bp-line) !important;
}

/* ============================================================
   PRODUCT VIEW MODAL (.pv-modal) — full-bleed image + refined stats
   ============================================================ */
body.dark .pv-modal {
    background: var(--bp-card) !important;
    border: var(--bp-card-border) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.55) !important;
}
body.dark .pv-grid { grid-template-columns: 1.05fr 1fr !important; }
body.dark .pv-image {
    background: var(--bp-page) !important;
    padding: 0 !important;
    min-height: 420px !important;
    border-right: 1px solid var(--bp-line) !important;
    overflow: hidden !important;
}
body.dark .pv-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}
body.dark .pv-info {
    padding: 30px 28px !important;
    color: var(--bp-ink) !important;
}
body.dark .pv-source { color: var(--bp-ink-3) !important; }
body.dark .pv-name { color: var(--bp-ink) !important; }
body.dark .pv-sku { color: var(--bp-ink-2) !important; }
body.dark .pv-price-main { color: var(--bp-ink) !important; }
body.dark .pv-price-main small { color: var(--bp-ink-2) !important; }
body.dark .pv-cost { color: var(--bp-ink-2) !important; }
body.dark .pv-stats {
    background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(99,102,241,0.05)) !important;
    border: 1px solid rgba(167,139,250,0.25) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
}
body.dark .pv-stat-lbl { color: var(--bp-ink-2) !important; }
body.dark .pv-stat-val { color: var(--bp-ink) !important; }
body.dark .pv-close {
    background: var(--bp-page) !important;
    border: 1px solid var(--bp-line) !important;
    color: var(--bp-ink-2) !important;
}
body.dark .pv-close:hover {
    background: rgba(239,68,68,0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239,68,68,0.30) !important;
}

/* Delivery pill (Domicile/Stop-Desk) — minimal status indicator (Stripe-style) */
body.dark .delivery-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border: 1px solid !important;
    background: transparent !important;
    transition: all .15s ease !important;
}
body.dark .delivery-pill i {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
}
body.dark .delivery-pill .dp-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
}
body.dark .delivery-pill-home {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #a78bfa !important;
    border-color: rgba(99, 102, 241, 0.30) !important;
}
body.dark .delivery-pill-home:hover {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #c4b5fd !important;
}
body.dark .delivery-pill-desk {
    background: rgba(6, 182, 212, 0.12) !important;
    color: #67e8f9 !important;
    border-color: rgba(6, 182, 212, 0.30) !important;
}
body.dark .delivery-pill-desk:hover {
    background: rgba(6, 182, 212, 0.18) !important;
    color: #a5f3fc !important;
}

/* ============================================================
   CARRIERS PANEL — 2-column shell with KPI sidebar
   ============================================================ */
/* Layout is theme-neutral (it was dark-only, so light mode rendered an unstyled list);
   colours use the --buld-* tokens, which carry both themes. */
html body .carriers-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: start;
    margin-top: 16px;
}
html body .carriers-main { min-width: 0; }
html body .carriers-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 16px;
}
html body .carriers-kpi-card {
    background: var(--p-card-bg, var(--buld-elevated));
    border: 1px solid var(--buld-hairline);
    border-radius: 12px;
    box-shadow: none;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
html body .carriers-kpi-card .ck-label {
    font-size: 11px;
    color: var(--buld-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
html body .carriers-kpi-card .ck-value {
    font-size: 18px;
    color: var(--buld-ink-1);
    font-weight: 700;
    margin-top: 2px;
    word-break: break-word;
}
html body .carriers-kpi-card .ck-meta {
    font-size: 11px;
    color: var(--buld-ink-2);
}
@media (max-width: 1100px) {
    html body .carriers-shell { grid-template-columns: 1fr; }
    html body .carriers-sidebar { flex-direction: row; flex-wrap: wrap; position: static; }
    html body .carriers-kpi-card { flex: 1 1 calc(50% - 6px); }
}

/* ============================================================
   ADD PRODUCT — Modern redesign (tabs + sticky CTA + sidebar)
   ============================================================ */
/* Layout is theme-neutral (`html body` instead of `body.dark`): it used to exist only in dark mode, so the
   light form rendered as raw inline inputs. Colours come from --buld-* tokens (both themes), the accent is
   the single Apple-blue CTA (no purple gradients). */
html body .ap-shell { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; }

html body .ap-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px;
    background: var(--p-card-bg, var(--buld-elevated));
    border: 1px solid var(--buld-hairline);
    border-radius: 12px;
    box-shadow: none;
    position: sticky; top: 12px; z-index: 5;
}
html body .ap-header h1 { color: var(--buld-ink-1); margin: 0; font-size: 18px; font-weight: 700; }
html body .ap-header p { color: var(--buld-ink-2); margin: 2px 0 0; font-size: 12px; }
html body .ap-header-actions { display: flex; gap: 8px; }

html body .ap-btn-primary, html body .ap-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 14px; border-radius: 999px; font-weight: 500; font-size: 13px;
    cursor: pointer; transition: background .15s ease, border-color .15s ease;
    border: 1px solid transparent; font-family: inherit;
}
html body .ap-btn-primary {
    background: var(--buld-cta);
    color: #fff; border: none;
    box-shadow: none;
}
html body .ap-btn-primary:hover { background: var(--buld-cta-hover); }
html body .ap-btn-ghost {
    background: transparent;
    border: 1px solid var(--buld-divider);
    color: var(--buld-ink-1);
}
html body .ap-btn-ghost:hover { background: var(--buld-hover); }

html body .ap-tabs {
    display: flex; gap: 4px; padding: 4px;
    background: var(--buld-elevated);
    border: 1px solid var(--buld-hairline);
    border-radius: 12px;
}
html body .ap-tab {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 14px;
    background: transparent; border: none; font-family: inherit;
    color: var(--buld-ink-2); font-weight: 500; font-size: 13px;
    border-radius: 9px; cursor: pointer; transition: background .15s ease, color .15s ease;
}
html body .ap-tab:hover { background: var(--buld-hover); color: var(--buld-ink-1); }
html body .ap-tab.is-active { background: var(--p-card-bg, var(--buld-elevated-2)); color: var(--buld-ink-1); font-weight: 600; box-shadow: var(--bx-shadow-1); }

html body .ap-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
html body .ap-content, html body .ap-sidebar {
    background: var(--p-card-bg, var(--buld-elevated));
    border: 1px solid var(--buld-hairline);
    border-radius: 12px;
    box-shadow: none;
    padding: 22px 24px;
    min-width: 0;
}
html body .ap-tab-panel { display: none; }
html body .ap-tab-panel.is-active { display: block; }

html body .ap-field { margin-bottom: 16px; }
html body .ap-field:last-child { margin-bottom: 0; }
html body .ap-field label {
    display: block; font-size: 13px; color: var(--buld-ink-2);
    font-weight: 600; margin-bottom: 6px;
}
html body .ap-field input, html body .ap-field textarea, html body .ap-field select {
    width: 100%; padding: 10px 12px;
    background: var(--buld-elevated-2) !important;
    border: 1px solid var(--buld-divider) !important;
    border-radius: 10px; color: var(--buld-ink-1);
    font-size: 14px; font-family: inherit;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html body .ap-field input:hover, html body .ap-field textarea:hover, html body .ap-field select:hover {
    border-color: var(--buld-ink-4) !important;
}
html body .ap-field textarea { resize: vertical; min-height: 80px; }
html body .ap-field input:focus, html body .ap-field textarea:focus, html body .ap-field select:focus {
    background: var(--buld-elevated-2) !important;
    border-color: var(--buld-cta) !important;
    box-shadow: 0 0 0 3px var(--buld-cta-soft) !important;
    outline: none;
}
html body .ap-field input::placeholder, html body .ap-field textarea::placeholder { color: var(--buld-ink-4); }
html body .ap-hint { display: block; font-size: 11px; color: var(--buld-ink-3); margin-top: 4px; }
html body .ap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
html body .ap-row > .ap-field { margin-bottom: 0; }

html body .ap-sidebar-title { color: var(--buld-ink-1); margin: 0 0 12px; font-size: 14px; font-weight: 700; }
html body .ap-image-zone {
    border: 2px dashed var(--buld-divider);
    border-radius: 12px; padding: 32px 18px; text-align: center;
    background: transparent;
    color: var(--buld-ink-2);
    cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease;
}
html body .ap-image-zone:hover { border-color: var(--buld-cta); background: var(--buld-cta-soft); color: var(--buld-ink-1); }
html body .ap-image-zone p { margin: 8px 0 4px; font-weight: 600; color: var(--buld-ink-1); font-size: 14px; }
html body .ap-image-zone span { font-size: 11px; color: var(--buld-ink-3); }
html body .ap-image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }

html body .ap-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px;
    background: var(--p-card-bg, var(--buld-elevated));
    border: 1px solid var(--buld-hairline);
    border-radius: 12px;
    box-shadow: var(--bx-shadow-2);
    position: sticky; bottom: 12px; z-index: 5;
}
html body .ap-footer-hint { color: var(--buld-ink-3); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
html body .ap-save-large { height: 36px; padding: 0 22px; font-size: 14px; }

@media (max-width: 1024px) {
    html body .ap-grid { grid-template-columns: 1fr; }
    html body .ap-row { grid-template-columns: 1fr; }
    html body .ap-tabs { overflow-x: auto; }
}

/* Filter tabs inside Applications panel (Toutes / Boutiques / etc.) */
body.dark .apps-tab,
body.dark .apps-filter-tab,
body.dark .integ-filter-tab,
body.dark .app-filter-pill {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--bp-ink-2) !important;
}
body.dark .apps-tab:hover,
body.dark .apps-filter-tab:hover {
    background: var(--bp-raise) !important;
    color: var(--bp-ink) !important;
}
body.dark .apps-tab.active,
body.dark .apps-filter-tab.active,
body.dark .integ-filter-tab.active,
body.dark .app-filter-pill.active {
    background: var(--bp-raise) !important;
    border-color: var(--bp-line) !important;
    color: var(--bp-ink) !important;
}

/* (The launch stepper block was deleted in premium batch 1 — the compact .launch-card lives in premium.css.) */

/* ============================================================
   ATTENTION ROWS (Dernières commandes / Boutique presque prête)
   Remove the distorted divider lines — keep clean spacing only
   ============================================================ */
body.dark #panel-overview .attention-row,
body.dark .attention-row,
body.dark .attention-row-simple {
    background: transparent !important;
    border-bottom: none !important;
    color: var(--bp-ink) !important;
}
body.dark #panel-overview .attention-row + .attention-row,
body.dark .attention-row + .attention-row {
    margin-top: 2px;   /* tiny breathing room, no visible line */
}
body.dark #panel-overview .attention-row:hover,
body.dark .attention-row:hover {
    background: var(--bp-raise) !important;
    border-radius: 8px !important;
}
body.dark #panel-overview .attention-row strong,
body.dark .attention-row strong { color: var(--bp-ink) !important; }
body.dark #panel-overview .attention-row .attention-body span,
body.dark .attention-row .attention-body span { color: var(--bp-ink-2) !important; }
body.dark .attention-view { color: #a78bfa !important; }
body.dark .attention-count {
    background: var(--bp-page) !important;
    color: var(--bp-ink) !important;
    border: 1px solid var(--bp-line) !important;
}

/* ============================================================
   FUNNEL PILLS — vibrant gradients (no more flat black)
   ============================================================ */
body.dark .funnel-pill {
    border-radius: 10px !important;
    color: #fff !important;
    transition: transform .15s ease, filter .15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.20) !important;
}
body.dark .funnel-pill:hover { filter: brightness(1.1); }
body.dark .funnel-pill-impressions {
    background: linear-gradient(90deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
}
body.dark .funnel-pill-new {
    background: linear-gradient(90deg, #f59e0b, #d97706) !important;
    color: #fff !important;
}
body.dark .funnel-pill-confirmed {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8) !important;
    color: #fff !important;
}
body.dark .funnel-pill-shipped {
    background: linear-gradient(90deg, #06b6d4, #0891b2) !important;
    color: #fff !important;
}
body.dark .funnel-pill-delivered {
    background: linear-gradient(90deg, #10b981, #059669) !important;
    color: #fff !important;
}
body.dark .funnel-pill .fp-label,
body.dark .funnel-pill .fp-count { color: #fff !important; }
/* Funnel period toggle (Aujourd'hui / 7 jours / 30 jours) */
body.dark .funnel-period-toggle {
    background: var(--bp-page) !important;
    border: 1px solid var(--bp-line) !important;
}
body.dark .funnel-period-toggle button {
    background: transparent !important;
    color: var(--bp-ink-2) !important;
    border: none !important;
}
body.dark .funnel-period-toggle button.active {
    background: var(--bp-raise) !important;
    color: var(--bp-ink) !important;
}