/* ============================================================
   Buld Theme — Apple-grade design system for ORDER MANAGER
   ────────────────────────────────────────────────────────────
   Single source of truth. Loaded LAST so it wins over all
   legacy stylesheets. Activated by html[data-buld-theme="..."].
   ============================================================ */

@import url("buld-tokens.css?v=1");

/* ============================================================
   PAGE — body + main-content
   ============================================================ */
html[data-buld-theme] body,
html[data-buld-theme] body.dashboard-body,
html[data-buld-theme] body.dark {
    background: var(--buld-page) !important;
    color: var(--buld-ink-1) !important;
    font-family: var(--buld-font-text) !important;
    letter-spacing: var(--buld-tracking) !important;
    -webkit-font-smoothing: antialiased !important;
}
html[data-buld-theme] body .main-content,
html[data-buld-theme] body.dark .main-content {
    background: var(--buld-page) !important;
    background-image: none !important;
    color: var(--buld-ink-1) !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
html[data-buld-theme] body .main-content::before { display: none !important; }
html[data-buld-theme] body .app-layout { background: var(--buld-page) !important; }

/* Typography */
html[data-buld-theme] body h1,
html[data-buld-theme] body h2,
html[data-buld-theme] body h3,
html[data-buld-theme] body h4,
html[data-buld-theme] body.dark h1,
html[data-buld-theme] body.dark h2,
html[data-buld-theme] body.dark h3,
html[data-buld-theme] body.dark h4 {
    font-family: var(--buld-font-display) !important;
    color: var(--buld-ink-1) !important;
    letter-spacing: -0.022em !important;
}

/* ============================================================
   TOPBAR — translucent + backdrop blur
   ============================================================ */
html[data-buld-theme] body .topbar-global,
html[data-buld-theme] body.dark .topbar-global {
    background: var(--buld-topbar-bg) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 1px solid var(--buld-hairline) !important;
    box-shadow: none !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .topbar-global *:not(.lang-option):not(.buld-cta) {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .topbar-btn,
html[data-buld-theme] body.dark .topbar-btn {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--buld-ink-2) !important;
    border-radius: 50% !important;
    width: 36px !important; height: 36px !important;
}
html[data-buld-theme] body .topbar-btn:hover { background: var(--buld-hover) !important; color: var(--buld-ink-1) !important; }
html[data-buld-theme] body .topbar-btn svg,
html[data-buld-theme] body .topbar-btn i { color: inherit !important; stroke: currentColor !important; }
html[data-buld-theme] body .sidebar-toggle-btn,
html[data-buld-theme] body.dark .sidebar-toggle-btn {
    background: transparent !important;
    color: var(--buld-ink-1) !important;
    width: 36px !important; height: 36px !important;
    border-radius: var(--buld-radius-btn) !important;
}
html[data-buld-theme] body .sidebar-toggle-btn:hover { background: var(--buld-hover) !important; }
html[data-buld-theme] body .sidebar-toggle-btn svg { width: 20px !important; height: 20px !important; color: var(--buld-ink-1) !important; }

/* Lang toggle */
html[data-buld-theme] body .lang-toggle,
html[data-buld-theme] body.dark .lang-toggle {
    background: var(--buld-hover) !important;
    border-radius: var(--buld-radius-pill) !important;
}
html[data-buld-theme] body .lang-option { color: var(--buld-ink-3) !important; }
html[data-buld-theme] body .lang-option.active {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10) !important;
}

/* ============================================================
   SIDEBAR — Apple Finder/iCloud aesthetic
   ============================================================ */
html[data-buld-theme] body .sidebar,
html[data-buld-theme] body.dark .sidebar {
    background: var(--buld-elevated) !important;
    border-inline-end: 1px solid var(--buld-hairline) !important;
    box-shadow: none !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .sidebar *:not(.link-badge):not([class*="badge"]) {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .sidebar-link,
html[data-buld-theme] body.dark .sidebar-link {
    color: var(--buld-ink-1) !important;
    background: transparent !important;
    border-radius: var(--buld-radius-btn) !important;
    font-weight: 400 !important;
    font-family: var(--buld-font-text) !important;
    letter-spacing: -0.005em !important;
    font-size: 13px !important;
    margin: 1px 8px !important;
    padding: 7px 10px !important;
    border-right: none !important;
}
html[data-buld-theme] body .sidebar-link:hover {
    background: var(--buld-hover) !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .sidebar-link.active {
    background: var(--buld-page) !important;
    color: var(--buld-ink-1) !important;
    font-weight: 500 !important;
}
html[data-buld-theme] body .sidebar-link i { color: var(--buld-ink-2) !important; width: 16px !important; height: 16px !important; }
html[data-buld-theme] body .sidebar-link.active i { color: var(--buld-cta) !important; }
html[data-buld-theme] body .sidebar-divider { background: var(--buld-hairline) !important; border-color: var(--buld-hairline) !important; }
html[data-buld-theme] body .sidebar-search input {
    background: var(--buld-page) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-divider) !important;
    border-radius: var(--buld-radius-input) !important;
}
html[data-buld-theme] body .sidebar-search kbd {
    background: var(--buld-hover) !important;
    color: var(--buld-ink-3) !important;
    border: 1px solid var(--buld-divider) !important;
}
html[data-buld-theme] body .nav-section-title,
html[data-buld-theme] body .sidebar-section-title {
    color: var(--buld-ink-3) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
}

/* ============================================================
   CARDS — universal coverage (every card-shaped surface)
   ============================================================ */
html[data-buld-theme] body .orders-kpi-card,
html[data-buld-theme] body .an-kpi-card,
html[data-buld-theme] body .ac-kpi,
html[data-buld-theme] body .ac-table-card,
html[data-buld-theme] body .carrier-kpi-card,
html[data-buld-theme] body .carrier-choice-card,
html[data-buld-theme] body .dash-kpi-card,
html[data-buld-theme] body .dash-recent-card,
html[data-buld-theme] body .an-card,
html[data-buld-theme] body .an-tile,
html[data-buld-theme] body .an-chart-card,
html[data-buld-theme] body .dom-card,
html[data-buld-theme] body .cf-shipping-card,
html[data-buld-theme] body .cf-table-card,
html[data-buld-theme] body .cf-mode-card,
html[data-buld-theme] body .cf-wilayas-section,
html[data-buld-theme] body .estimated-rev-card,
html[data-buld-theme] body .gross-value-card,
html[data-buld-theme] body .profit-main-card,
html[data-buld-theme] body .profit-breakdown,
html[data-buld-theme] body .profit-per-unit,
html[data-buld-theme] body .attention-card,
html[data-buld-theme] body .coming-soon-card,
html[data-buld-theme] body .call-card,
html[data-buld-theme] body .geo-side-panel,
html[data-buld-theme] body .credits-card,
html[data-buld-theme] body .form-card,
html[data-buld-theme] body .funnel-section,
html[data-buld-theme] body .plan-usage-banner,
html[data-buld-theme] body .origin-wilaya-block,
html[data-buld-theme] body .geo-hero-stage,
html[data-buld-theme] body .integ-stat-card,
html[data-buld-theme] body .track-stat,
html[data-buld-theme] body .stat-card,
html[data-buld-theme] body .revenue-card,
html[data-buld-theme] body .action-card,
html[data-buld-theme] body .table-card,
html[data-buld-theme] body .product-card,
html[data-buld-theme] body .report-card,
html[data-buld-theme] body .profit-box,
html[data-buld-theme] body .dz-rank-item,
html[data-buld-theme] body .dz-map-focus,
html[data-buld-theme] body .dz-map-kpi,
html[data-buld-theme] body .geo-strip-cell,
html[data-buld-theme] body.dark .orders-kpi-card,
html[data-buld-theme] body.dark .an-kpi-card,
html[data-buld-theme] body.dark .funnel-section,
html[data-buld-theme] body.dark .dz-rank-item,
html[data-buld-theme] body.dark .stat-card,
html[data-buld-theme] body.dark #panel-overview .dz-rank-item,
html[data-buld-theme] body.dark #panel-overview .dz-map-focus,
html[data-buld-theme] body.dark #panel-overview .dz-map-kpi {
    background: var(--buld-elevated) !important;
    background-image: none !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
    box-shadow: none !important;
    color: var(--buld-ink-1) !important;
}
/* MAP TRANSPARENCY — maximum specificity + every layer + ID-based selectors */
html body #panel-overview .geo-hero,
html body #panel-overview .geo-hero-header,
html body #panel-overview .geo-hero-grid,
html body #panel-overview .geo-hero-stage,
html body #panel-overview .geo-hero .geo-hero-stage,
html body #panel-overview .geo-hero-stage .dz-map-stage,
html body #panel-overview .geo-hero-stage .dz-map-stage .dz-map-surface,
html body #panel-overview .dz-map-visual,
html body #panel-overview .dz-map-stage,
html body #panel-overview .dz-map-surface,
html body #panel-overview #dzOrdersMap,
html body #panel-overview #dzOrdersMap > svg,
html body #panel-overview .dz-map-svg,
html body #panel-overview .dz-map-svg-real,
html body.dark #panel-overview .geo-hero-stage,
html body.dark #panel-overview .dz-map-visual,
html body.dark #panel-overview #dzOrdersMap,
html body.dark #panel-overview .dz-map-stage,
html body.dark #panel-overview .dz-map-surface {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* Defensive: any rect inside the SVG with white fill */
html body #panel-overview svg rect[fill="#fff"],
html body #panel-overview svg rect[fill="#ffffff"],
html body #panel-overview svg rect[fill="white"],
html body #panel-overview svg rect[fill="#FFFFFF"] {
    fill: transparent !important;
    fill-opacity: 0 !important;
}

/* Card text inheritance (the .orders-kpi-card wildcard was replaced by explicit value/label rules below) */
html[data-buld-theme] body .orders-kpi-value,
html[data-buld-theme] body .an-kpi-card *,
html[data-buld-theme] body .ac-kpi *,
html[data-buld-theme] body .funnel-section *,
html[data-buld-theme] body .dash-recent-card *,
html[data-buld-theme] body .geo-side-panel *,
html[data-buld-theme] body .dz-rank-item *,
html[data-buld-theme] body .geo-strip-cell *,
html[data-buld-theme] body .dom-card *,
html[data-buld-theme] body .call-card *,
html[data-buld-theme] body .ac-table-card *,
html[data-buld-theme] body .an-card *,
html[data-buld-theme] body .an-chart-card *,
html[data-buld-theme] body .cf-shipping-card *,
html[data-buld-theme] body .cf-table-card * {
    color: var(--buld-ink-1) !important;
}

/* Card labels / muted text */
html[data-buld-theme] body .orders-kpi-label,
html[data-buld-theme] body .an-kpi-label,
html[data-buld-theme] body .ac-kpi-label,
html[data-buld-theme] body .ac-kpi-sub,
html[data-buld-theme] body .ac-kpi-meta,
html[data-buld-theme] body .geo-strip-label,
html[data-buld-theme] body .gross-value-label,
html[data-buld-theme] body .gross-value-sublabel,
html[data-buld-theme] body .funnel-step-label,
html[data-buld-theme] body .plan-usage-title,
html[data-buld-theme] body .origin-wilaya-hint,
html[data-buld-theme] body .text-secondary,
html[data-buld-theme] body .text-muted,
html[data-buld-theme] body small {
    color: var(--buld-ink-3) !important;
}

/* KPI / stat values — SF Pro Display, large */
html[data-buld-theme] body .orders-kpi-value,
html[data-buld-theme] body .an-kpi-value,
html[data-buld-theme] body .ac-kpi-value,
html[data-buld-theme] body .stat-card-value,
html[data-buld-theme] body [class*="-kpi-value"],
html[data-buld-theme] body [class*="stat-value"],
html[data-buld-theme] body .funnel-step-count {
    font-family: var(--buld-font-display) !important;
    color: var(--buld-ink-1) !important;
    font-weight: 600 !important;
    letter-spacing: -0.022em !important;
}

/* Welcome / panel headers */
html[data-buld-theme] body .panel-header,
html[data-buld-theme] body .panel-header h1,
html[data-buld-theme] body .panel-header h1 *,
html[data-buld-theme] body.dark .panel-header h1 {
    color: var(--buld-ink-1) !important;
    background: transparent !important;
}
html[data-buld-theme] body .panel-header p { color: var(--buld-ink-3) !important; }

/* Panels and containers stay transparent */
html[data-buld-theme] body .panel,
html[data-buld-theme] body [id^="panel-"],
html[data-buld-theme] body .stats-grid,
html[data-buld-theme] body .dashboard-overview-grid,
html[data-buld-theme] body .geo-hero,
html[data-buld-theme] body .geo-hero-header,
html[data-buld-theme] body .geo-hero-grid,
html[data-buld-theme] body .geo-hero-side {
    background: transparent !important;
}

/* CRITICAL FIX: only ONE panel shows at a time — never stacked */
html[data-buld-theme] body .panel { display: none; }
html[data-buld-theme] body .panel.active { display: block; }
html[data-buld-theme] body .panel[style*="display: block"] { display: block !important; }
html[data-buld-theme] body .panel[style*="display: none"] { display: none !important; }

/* (Launch stepper rules deleted in premium batch 1 — see premium.css .launch-card) */

/* ============================================================
   FILTER CHIPS / TABS / BADGES / PILLS
   ============================================================ */
html[data-buld-theme] body .an-filter-btn,
html[data-buld-theme] body .an-period-btn,
html[data-buld-theme] body .an-currency-btn,
html[data-buld-theme] body .an-channel-btn,
html[data-buld-theme] body .an-compare-btn {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
    border-radius: var(--buld-radius-pill) !important;
    font-weight: 500 !important;
}
html[data-buld-theme] body .an-filter-btn:hover { background: var(--buld-page) !important; border-color: var(--buld-divider) !important; }

/* Status badges */
html[data-buld-theme] body .status-active,
html[data-buld-theme] body [class*="badge-confirmed"],
html[data-buld-theme] body [class*="badge-success"],
html[data-buld-theme] body [class*="badge-delivered"] {
    background: var(--buld-success-soft) !important;
    color: var(--buld-success) !important;
    border-radius: var(--buld-radius-pill) !important;
    border-color: transparent !important;
}
html[data-buld-theme] body .status-pending,
html[data-buld-theme] body [class*="badge-pending"],
html[data-buld-theme] body [class*="badge-warning"],
html[data-buld-theme] body [class*="badge-shipped"] {
    background: var(--buld-warning-soft) !important;
    color: var(--buld-warning) !important;
    border-radius: var(--buld-radius-pill) !important;
    border-color: transparent !important;
}
html[data-buld-theme] body .status-cancelled,
html[data-buld-theme] body [class*="badge-cancelled"],
html[data-buld-theme] body [class*="badge-danger"],
html[data-buld-theme] body [class*="badge-returned"] {
    background: var(--buld-danger-soft) !important;
    color: var(--buld-danger) !important;
    border-radius: var(--buld-radius-pill) !important;
    border-color: transparent !important;
}
html[data-buld-theme] body [class*="badge-new"],
html[data-buld-theme] body [class*="badge-info"],
html[data-buld-theme] body [class*="badge-contacted"] {
    background: var(--buld-cta-soft) !important;
    color: var(--buld-cta) !important;
    border-radius: var(--buld-radius-pill) !important;
    border-color: transparent !important;
}

/* Plan badge */
html[data-buld-theme] body .plan-badge {
    background: var(--buld-cta-soft) !important;
    color: var(--buld-cta) !important;
    border-radius: var(--buld-radius-pill) !important;
    border: none !important;
    font-weight: 500 !important;
}

/* ============================================================
   BUTTONS — Apple pill blue
   ============================================================ */
html[data-buld-theme] body .btn-primary,
html[data-buld-theme] body button[class*="primary"]:not(.bx-btn),
html[data-buld-theme] body .plan-upgrade-btn {
    background: var(--buld-cta) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--buld-radius-pill) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    font-family: var(--buld-font-text) !important;
    box-shadow: none !important;
}
html[data-buld-theme] body .btn-primary:hover { background: var(--buld-cta-hover) !important; }

/* Action icons (table actions) */
html[data-buld-theme] body .ord-action-btn {
    background: transparent !important;
    color: var(--buld-ink-2) !important;
    border: 1px solid transparent !important;
    border-radius: 50% !important;
    transition: background var(--buld-dur-hover) ease, color var(--buld-dur-hover) ease !important;
}
html[data-buld-theme] body .ord-action-btn:hover { background: var(--buld-hover) !important; color: var(--buld-ink-1) !important; }

/* ============================================================
   INPUTS
   ============================================================ */
html[data-buld-theme] body input[type="text"],
html[data-buld-theme] body input[type="email"],
html[data-buld-theme] body input[type="tel"],
html[data-buld-theme] body input[type="search"],
html[data-buld-theme] body input[type="number"],
html[data-buld-theme] body textarea,
html[data-buld-theme] body select,
html[data-buld-theme] body .form-input {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-divider) !important;
    color: var(--buld-ink-1) !important;
    border-radius: var(--buld-radius-input) !important;
    font-family: var(--buld-font-text) !important;
}
html[data-buld-theme] body input:focus,
html[data-buld-theme] body textarea:focus,
html[data-buld-theme] body select:focus {
    border-color: var(--buld-cta) !important;
    box-shadow: 0 0 0 4px var(--buld-cta-soft) !important;
    outline: none !important;
}
html[data-buld-theme] body input::placeholder,
html[data-buld-theme] body textarea::placeholder { color: var(--buld-ink-4) !important; }

/* Search box wrapper */
html[data-buld-theme] body .search-box {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-divider) !important;
    color: var(--buld-ink-1) !important;
    border-radius: var(--buld-radius-input) !important;
}
html[data-buld-theme] body .search-box input { background: transparent !important; color: var(--buld-ink-1) !important; }

/* Checkboxes / radios */
html[data-buld-theme] body input[type="checkbox"],
html[data-buld-theme] body input[type="radio"] { accent-color: var(--buld-cta) !important; }

/* ============================================================
   TABLES
   ============================================================ */
html[data-buld-theme] body table {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border-radius: var(--buld-radius-input) !important;
    overflow: hidden;
}
html[data-buld-theme] body table th {
    background: var(--buld-page) !important;
    color: var(--buld-ink-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-bottom: 1px solid var(--buld-hairline) !important;
}
html[data-buld-theme] body table td {
    color: var(--buld-ink-1) !important;
    border-bottom: 1px solid var(--buld-hairline) !important;
    background: transparent !important;
}
html[data-buld-theme] body table tr:hover td { background: var(--buld-page) !important; }

/* Explicit row classes (no wildcard substring matching) */
html[data-buld-theme] body .order-row,
html[data-buld-theme] body .ac-row,
html[data-buld-theme] body .table-row,
html[data-buld-theme] body .dz-rank-row,
html[data-buld-theme] body .ord-row,
html[data-buld-theme] body .origin-wilaya-block-row {
    border-bottom: 1px solid var(--buld-hairline) !important;
    background: transparent !important;
}
html[data-buld-theme] body .order-row:hover,
html[data-buld-theme] body .ac-row:hover,
html[data-buld-theme] body .table-row:hover,
html[data-buld-theme] body .ord-row:hover { background: var(--buld-page) !important; }

/* Explicit table containers (no wildcard) */
html[data-buld-theme] body table thead,
html[data-buld-theme] body .table-head,
html[data-buld-theme] body .order-table-header {
    background: var(--buld-page) !important;
    color: var(--buld-ink-3) !important;
}
html[data-buld-theme] body table tr { border-bottom: 1px solid var(--buld-hairline) !important; }
html[data-buld-theme] body table td { color: var(--buld-ink-1) !important; background: transparent !important; }

/* Avatars */
html[data-buld-theme] body .avatar {
    background: var(--buld-hover) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    font-weight: 600 !important;
}

/* ============================================================
   MAP
   ============================================================ */
html[data-buld-theme] body #panel-overview .dz-map-visual,
html[data-buld-theme] body .geo-hero-stage,
html[data-buld-theme] body.dark #panel-overview .dz-map-visual,
html[data-buld-theme] body.dark .geo-hero-stage {
    background: var(--buld-elevated) !important;
    background-image: none !important;
    border: 1px solid var(--buld-hairline) !important;
}
html[data-buld-theme] body .dz-map-visual::before,
html[data-buld-theme] body .geo-hero-stage::before,
html[data-buld-theme] body .geo-hero-stage::after { background: transparent !important; background-image: none !important; }

/* ============================================================
   DROPDOWNS / MENUS / POPOVERS
   ============================================================ */
html[data-buld-theme] body .dropdown,
html[data-buld-theme] body .dropdown-menu,
html[data-buld-theme] body .menu,
html[data-buld-theme] body .popover {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-input) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .dropdown-item,
html[data-buld-theme] body .menu-item { color: var(--buld-ink-1) !important; }
html[data-buld-theme] body .dropdown-item:hover,
html[data-buld-theme] body .menu-item:hover { background: var(--buld-page) !important; }

/* ============================================================
   MODALS
   ============================================================ */
html[data-buld-theme] body .modal,
html[data-buld-theme] body .modal-content,
html[data-buld-theme] body .modal-dialog,
html[data-buld-theme] body .modal-body {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border-radius: var(--buld-radius-card) !important;
    border: 1px solid var(--buld-hairline) !important;
}
html[data-buld-theme] body .modal-overlay,
html[data-buld-theme] body .modal-backdrop {
    background: rgba(0,0,0,0.45) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
}

/* ============================================================
   PROGRESS / BARS
   ============================================================ */
html[data-buld-theme] body .funnel-bar-wrap,
html[data-buld-theme] body .plan-usage-bar {
    background: var(--buld-hover) !important;
}

/* ============================================================
   TOOLTIP
   ============================================================ */
html[data-buld-theme] body .tooltip {
    background: var(--buld-ink-1) !important;
    color: var(--buld-page) !important;
    border-radius: var(--buld-radius-btn) !important;
}

/* ============================================================
   USER POD / SWITCHER
   ============================================================ */
/* (.store-switcher removed from this block — it is styled with tokens in premium.css) */
html[data-buld-theme] body .userpod,
html[data-buld-theme] body .user-pod {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .userpod *,
html[data-buld-theme] body .user-pod * { color: var(--buld-ink-1) !important; }

/* ============================================================
   SCROLLBARS
   ============================================================ */
html[data-buld-theme] body ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-buld-theme] body ::-webkit-scrollbar-track { background: transparent !important; }
html[data-buld-theme] body ::-webkit-scrollbar-thumb { background: var(--buld-divider) !important; border-radius: var(--buld-radius-pill) !important; }
html[data-buld-theme] body ::-webkit-scrollbar-thumb:hover { background: var(--buld-ink-4) !important; }

/* ============================================================
   MAP — directly on page bg, NO box/shadow/glow, fills its container
   ============================================================ */
/* Outer wrappers: 100% transparent, no borders/padding */
html[data-buld-theme] body .geo-hero-stage,
html[data-buld-theme] body.dark .geo-hero-stage,
html[data-buld-theme] body #panel-overview .dz-map-visual,
html[data-buld-theme] body .dz-map-surface,
html[data-buld-theme] body #dzOrdersMap {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    filter: none !important;
    -webkit-filter: none !important;
    min-height: unset !important;
}
html[data-buld-theme] body .geo-hero-stage::before,
html[data-buld-theme] body .geo-hero-stage::after,
html[data-buld-theme] body .dz-map-visual::before,
html[data-buld-theme] body .dz-map-visual::after { display: none !important; background: transparent !important; }

/* Map fills its parent — no empty margin around it */
html[data-buld-theme] body .dz-map-stage,
html[data-buld-theme] body .dz-map-surface,
html[data-buld-theme] body #dzOrdersMap {
    width: 100% !important;
    height: 100% !important;
}
html[data-buld-theme] body .geo-hero-stage #dzOrdersMap svg,
html[data-buld-theme] body .dz-map-surface svg,
html[data-buld-theme] body .dz-map-svg,
html[data-buld-theme] body .dz-map-svg-real {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    display: block !important;
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* User-controlled FLAT transform on the stage (no 3D, no perspective, no rotation) */
html[data-buld-theme] body .dz-map-stage,
html[data-buld-theme] body .geo-hero-stage .dz-map-stage,
html[data-buld-theme] body .geo-hero-stage:hover .dz-map-stage {
    transform: scale(var(--map-scale, 1)) translate(var(--map-x, 0px), var(--map-y, 0px)) !important;
    transform-origin: center center !important;
    transition: transform 0ms !important;
    cursor: grab;
    perspective: none !important;
    transform-style: flat !important;
    will-change: auto !important;
}
html[data-buld-theme] body .dz-map-stage.is-dragging { cursor: grabbing !important; }
html[data-buld-theme] body .geo-hero-stage,
html[data-buld-theme] body.dark .geo-hero-stage {
    perspective: none !important;
    transform-style: flat !important;
}

/* ============================================================
   MAP COLORS — Light + Dark (clearer, more visible)
   ============================================================ */
/* LIGHT MODE — darker visible navy/blue (not pale) */
html[data-buld-theme="light"] body #panel-overview .dz-geo-feature path {
    fill: rgba(15, 76, 117, var(--feature-alpha, 0.32)) !important;
    stroke: #ffffff !important;
    stroke-width: 1.2 !important;
}
html[data-buld-theme="light"] body #panel-overview .dz-geo-feature.is-empty path {
    fill: rgba(0, 0, 0, 0.08) !important;
    stroke: #ffffff !important;
}
html[data-buld-theme="light"] body #panel-overview .dz-geo-feature:hover path,
html[data-buld-theme="light"] body #panel-overview .dz-geo-feature.active path {
    fill: rgba(0, 113, 227, 0.92) !important;
    stroke: #FF9F0A !important;
    stroke-width: 1.6 !important;
}
html[data-buld-theme="light"] body #panel-overview .dz-geo-feature.top-region path {
    stroke: #FF9F0A !important;
    stroke-width: 2 !important;
}

/* DARK MODE — soft teal that pops on slate */
html[data-buld-theme="dark"] body #panel-overview .dz-geo-feature path {
    fill: rgba(94, 234, 212, var(--feature-alpha, 0.20)) !important;
    stroke: rgba(255, 255, 255, 0.14) !important;
    stroke-width: 1.1 !important;
}
html[data-buld-theme="dark"] body #panel-overview .dz-geo-feature.is-empty path {
    fill: rgba(255, 255, 255, 0.04) !important;
    stroke: rgba(255, 255, 255, 0.08) !important;
}
html[data-buld-theme="dark"] body #panel-overview .dz-geo-feature:hover path,
html[data-buld-theme="dark"] body #panel-overview .dz-geo-feature.active path {
    fill: rgba(94, 234, 212, 0.90) !important;
    stroke: #FFD60A !important;
    stroke-width: 1.6 !important;
}
html[data-buld-theme="dark"] body #panel-overview .dz-geo-feature.top-region path {
    stroke: #FFD60A !important;
    stroke-width: 2 !important;
}

/* KILL the persistent rectangle around the map in dark mode */
html[data-buld-theme] body #panel-overview .geo-hero-stage,
html[data-buld-theme] body.dark #panel-overview .geo-hero-stage,
html[data-buld-theme] body .geo-hero,
html[data-buld-theme] body.dark .geo-hero,
html[data-buld-theme] body .geo-hero-grid,
html[data-buld-theme] body.dark .geo-hero-grid {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
}
html[data-buld-theme] body .geo-hero::before,
html[data-buld-theme] body .geo-hero::after,
html[data-buld-theme] body .geo-hero-grid::before,
html[data-buld-theme] body .geo-hero-grid::after,
html[data-buld-theme] body.dark .geo-hero-stage::before,
html[data-buld-theme] body.dark .geo-hero-stage::after { display: none !important; background: transparent !important; }

/* Map crown badge (Plus haut •) */
html[data-buld-theme] body .dz-map-crown {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
    box-shadow: none !important;
}

/* ============================================================
   HIGH-SPECIFICITY OVERRIDES — beats #panel-X selectors
   (named selectors only — no wildcards)
   ============================================================ */
html[data-buld-theme] body #panel-overview .gross-value-card,
html[data-buld-theme] body #panel-overview .estimated-rev-card,
html[data-buld-theme] body #panel-overview .funnel-section,
html[data-buld-theme] body #panel-overview .dash-recent-card,
html[data-buld-theme] body #panel-overview .attention-card,
html[data-buld-theme] body #panel-overview .ac-table-card,
html[data-buld-theme] body #panel-all-orders .orders-kpi-card,
html[data-buld-theme] body #panel-analytics .an-card,
html[data-buld-theme] body #panel-analytics .an-kpi-card {
    /* PAINT ONLY — preserve original layout (padding/margin/sizing) */
    background: var(--buld-elevated) !important;
    background-image: none !important;
    border-color: var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body #panel-overview .gross-value-card *,
html[data-buld-theme] body #panel-overview .estimated-rev-card * {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body #panel-overview .gross-value-label,
html[data-buld-theme] body #panel-overview .gross-value-sublabel {
    color: var(--buld-ink-3) !important;
}

/* In dark mode: keep cards FLAT (no shadow), just clean border */
html[data-buld-theme="dark"] body #panel-overview .gross-value-card,
html[data-buld-theme="dark"] body #panel-overview .estimated-rev-card,
html[data-buld-theme="dark"] body #panel-overview .funnel-section,
html[data-buld-theme="dark"] body #panel-overview .dash-recent-card,
html[data-buld-theme="dark"] body #panel-all-orders .orders-kpi-card {
    box-shadow: none !important;
    border-color: var(--buld-divider) !important;
}

/* Badges inside gross-value-card */
html[data-buld-theme] body #panel-overview .gross-value-badge {
    background: var(--buld-success-soft) !important;
    color: var(--buld-success) !important;
    border: none !important;
}

/* ============================================================
   KILLER AUDIT FIXES — applied from Playwright auto-audit findings
   ============================================================ */

/* === Agent Chat — direct overrides (more reliable than var cascade) === */
html[data-buld-theme="light"] body .agent-input-box,
html[data-buld-theme="light"] body .agent-input-area,
html[data-buld-theme="light"] body .agent-panel .agent-input-box {
    background: var(--buld-elevated-2, #FFFFFF) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body .agent-input-box textarea,
html[data-buld-theme="light"] body .agent-input-area textarea {
    color: var(--buld-ink-1) !important;
    background: transparent !important;
}
html[data-buld-theme="light"] body #agentSendBtn.agent-send-btn,
html[data-buld-theme="light"] body .agent-send-btn {
    background: var(--buld-cta) !important;
    color: #FFFFFF !important;
    border: none !important;
}
html[data-buld-theme="light"] body .agent-panel,
html[data-buld-theme="light"] body #agentPanel.agent-panel,
html[data-buld-theme="light"] body .agent-messages,
html[data-buld-theme="light"] body #agentMessages.agent-messages {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border-color: var(--buld-hairline) !important;
}
html[data-buld-theme="light"] body .agent-tabs,
html[data-buld-theme="light"] body .agent-suggestion {
    background: var(--buld-elevated-2, #FFFFFF) !important;
    color: var(--buld-ink-1) !important;
    border-color: var(--buld-hairline) !important;
}

/* === Force ALL carrier logo cards in light mode (with stronger selector) === */
html[data-buld-theme="light"] body.dashboard-body .carrier-logo-card,
html[data-buld-theme="light"] body.dashboard-body [class*="carrier-logo-card"],
html[data-buld-theme="light"] body #panel-carriers .carrier-logo-card,
html[data-buld-theme="light"] body #panel-carriers [class*="carrier-logo"] {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
}
html[data-buld-theme="light"] body.dashboard-body .carrier-logo-card * {
    color: var(--buld-ink-1) !important;
}

/* === Carrier KPI / analytics cards === */
html[data-buld-theme="light"] body.dashboard-body .carrier-kpi-card,
html[data-buld-theme="light"] body.dashboard-body .carriers-kpi-card,
html[data-buld-theme="light"] body.dashboard-body .table-card.carrier-analytics-card,
html[data-buld-theme="light"] body #panel-carriers .carrier-kpi-card,
html[data-buld-theme="light"] body #panel-carriers .table-card {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
}
html[data-buld-theme="light"] body .carrier-kpi-card *,
html[data-buld-theme="light"] body .carriers-kpi-card *,
html[data-buld-theme="light"] body .carrier-analytics-card * {
    color: var(--buld-ink-1) !important;
}

/* === Carrier-card.active state === */
html[data-buld-theme="light"] body.dashboard-body .carrier-card.active,
html[data-buld-theme="light"] body #panel-shipping .carrier-card.active,
html[data-buld-theme="light"] body #panel-shipping .origin-wilaya-block {
    background: var(--buld-cta-soft) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-cta) !important;
}

/* === LP cards (Landing Pages) === */
html[data-buld-theme="light"] body.dashboard-body .lp-card,
html[data-buld-theme="light"] body.dashboard-body .lp-style-card,
html[data-buld-theme="light"] body.dashboard-body .lp-style-card.is-active,
html[data-buld-theme="light"] body #panel-landing-pages .lp-card,
html[data-buld-theme="light"] body #panel-landing-pages .lp-style-card {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
}
html[data-buld-theme="light"] body.dashboard-body .lp-style-card.is-active {
    border: 1px solid var(--buld-cta) !important;
    box-shadow: 0 0 0 3px var(--buld-cta-soft) !important;
}

/* === Theme cards === */
html[data-buld-theme="light"] body.dashboard-body .theme-card,
html[data-buld-theme="light"] body #panel-themes .theme-card,
html[data-buld-theme="light"] body #panel-themes [class*="theme-cover"] {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
}

/* === Apps cards === */
html[data-buld-theme="light"] body.dashboard-body .apps-card,
html[data-buld-theme="light"] body.dashboard-body .apps-card.is-installed,
html[data-buld-theme="light"] body #panel-applications .apps-card {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
}

/* === Form / Dom / Switches cards === */
html[data-buld-theme="light"] body.dashboard-body .form-card,
html[data-buld-theme="light"] body.dashboard-body .dom-card,
html[data-buld-theme="light"] body.dashboard-body .sw-cand-card,
html[data-buld-theme="light"] body.dashboard-body .sw-cand-card.sw-cand-card-passive,
html[data-buld-theme="light"] body #panel-domains .dom-card,
html[data-buld-theme="light"] body #panel-add-product .form-card,
html[data-buld-theme="light"] body #panel-switches .sw-cand-card {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
}

/* === COD form dark button (keep dark but use proper ink) === */
html[data-buld-theme="light"] body.dashboard-body .cf-btn.cf-btn-dark {
    background: var(--buld-ink-1) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--buld-radius-pill) !important;
}

/* === Prod yaya cards === */
html[data-buld-theme="light"] body.dashboard-body .prod-card-yaya,
html[data-buld-theme="light"] body.dashboard-body .prod-thumb-yaya {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
}



/* === app-layout (background of every panel) === */
html[data-buld-theme="light"] body .app-layout {
    background: var(--buld-page) !important;
    color: var(--buld-ink-1) !important;
}

/* === Agent panel (chat assistant — visible across all panels) === */
html[data-buld-theme="light"] body #agentPanel.agent-panel,
html[data-buld-theme="light"] body .agent-panel,
html[data-buld-theme="light"] body #agentMessages.agent-messages,
html[data-buld-theme="light"] body .agent-messages,
html[data-buld-theme="light"] body #agentWelcomeInput.agent-welcome-input,
html[data-buld-theme="light"] body .agent-tabs,
html[data-buld-theme="light"] body .agent-suggestion,
html[data-buld-theme="light"] body .agent-input-area,
html[data-buld-theme="light"] body .agent-input-box {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border-color: var(--buld-hairline) !important;
}

/* === Carrier cards (Yalidine, Maystro, Noest, etc.) === */
html[data-buld-theme="light"] body .carrier-card,
html[data-buld-theme="light"] body .carrier-card.active,
html[data-buld-theme="light"] body .carrier-kpi-card,
html[data-buld-theme="light"] body .carriers-kpi-card,
html[data-buld-theme="light"] body .carrier-logo-card,
html[data-buld-theme="light"] body .carrier-logo-card.anderson,
html[data-buld-theme="light"] body .carrier-logo-card.connected,
html[data-buld-theme="light"] body .carrier-logo-card.dhd,
html[data-buld-theme="light"] body .carrier-logo-card.ecom_delivery,
html[data-buld-theme="light"] body .carrier-logo-card.ecotrack,
html[data-buld-theme="light"] body .carrier-logo-card.guepex,
html[data-buld-theme="light"] body .carrier-logo-card.maystro,
html[data-buld-theme="light"] body .carrier-logo-card.noest,
html[data-buld-theme="light"] body .carrier-logo-card.zimou,
html[data-buld-theme="light"] body .carrier-logo-card.zr_express,
html[data-buld-theme="light"] body .table-card.carrier-analytics-card {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
}
html[data-buld-theme="light"] body .carrier-card *,
html[data-buld-theme="light"] body .carrier-logo-card * {
    color: var(--buld-ink-1) !important;
}

/* === Apps hero cards (Meta, TikTok, Google, Snap, etc.) === */
html[data-buld-theme="light"] body .apps-card,
html[data-buld-theme="light"] body .apps-card.is-installed,
html[data-buld-theme="light"] body .apps-hero.apps-hero-custom_api,
html[data-buld-theme="light"] body .apps-hero.apps-hero-salla,
html[data-buld-theme="light"] body .apps-hero.apps-hero-tiktok {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
}
/* These ones keep their brand colors but ensure text contrast */
html[data-buld-theme="light"] body .apps-hero.apps-hero-google,
html[data-buld-theme="light"] body .apps-hero.apps-hero-shopify,
html[data-buld-theme="light"] body .apps-hero.apps-hero-snap,
html[data-buld-theme="light"] body .apps-hero.apps-hero-wix,
html[data-buld-theme="light"] body .apps-hero.apps-hero-woocommerce {
    color: var(--buld-ink-1) !important;
}

/* === Products yaya cards === */
html[data-buld-theme="light"] body .prod-card-yaya {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
}
html[data-buld-theme="light"] body .prod-thumb-yaya {
    color: var(--buld-ink-1) !important;
}

/* === Landing pages cards === */
html[data-buld-theme="light"] body .lp-card,
html[data-buld-theme="light"] body .lp-style-card,
html[data-buld-theme="light"] body .lp-style-card.is-active,
html[data-buld-theme="light"] body #lpAppearanceLock.lp-disabled-overlay {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
}

/* === Theme cards (theme picker in Marketing) === */
html[data-buld-theme="light"] body .theme-card,
html[data-buld-theme="light"] body .theme-cover {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
}

/* === Form cards & misc === */
html[data-buld-theme="light"] body .form-card,
html[data-buld-theme="light"] body .dom-card,
html[data-buld-theme="light"] body .origin-wilaya-block,
html[data-buld-theme="light"] body .empty-preview-icon,
html[data-buld-theme="light"] body #mapDragHint.map-drag-hint,
html[data-buld-theme="light"] body .queue-item.current {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
}

/* === Action clusters / button groups === */
html[data-buld-theme="light"] body .action-cluster {
    color: var(--buld-ink-1) !important;
}

/* === Inventory pills === */
html[data-buld-theme="light"] body .inv-pill.active {
    background: var(--buld-cta) !important;
    color: #fff !important;
    border-color: var(--buld-cta) !important;
}

/* === Switches candidate cards === */
html[data-buld-theme="light"] body .sw-cand-card.sw-cand-card-passive {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    opacity: 0.7;
}

/* === COD form buttons === */
html[data-buld-theme="light"] body .cf-btn.cf-btn-dark {
    background: var(--buld-ink-1) !important;
    color: #fff !important;
    border: 1px solid var(--buld-ink-1) !important;
}

/* === DARK MODE specific fixes === */
html[data-buld-theme="dark"] body #themesNicheFilter.themes-niche-filter {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border-color: var(--buld-divider) !important;
}
html[data-buld-theme="dark"] body .apps-hero.apps-hero-meta,
html[data-buld-theme="dark"] body .apps-hero.apps-hero-snap {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-divider) !important;
}
/* Status pills that became too dark in dark mode */
html[data-buld-theme="dark"] body .status-pill.st-cancelled {
    background: var(--buld-danger-soft) !important;
    color: var(--buld-danger) !important;
    border-color: transparent !important;
}
html[data-buld-theme="dark"] body .status-pill.st-new {
    background: var(--buld-cta-soft) !important;
    color: var(--buld-cta) !important;
    border-color: transparent !important;
}

/* ============================================================
   QA MINI CARDS — quick action cards in dashboard
   ============================================================ */
html[data-buld-theme="light"] body #panel-overview .qa-mini-card,
html[data-buld-theme="light"] body.dashboard-body #panel-overview .qa-mini-card {
    background: var(--buld-elevated-2, #FFFFFF) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
html[data-buld-theme="light"] body #panel-overview .qa-mini-card *,
html[data-buld-theme="light"] body.dashboard-body #panel-overview .qa-mini-card .qa-mini-label {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body #panel-overview .qa-mini-icon {
    background: var(--buld-page) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
}
html[data-buld-theme="dark"] body #panel-overview .qa-mini-card {
    background: var(--buld-elevated) !important;
    border-color: var(--buld-divider) !important;
}

/* ============================================================
   ULTRA NUCLEAR — beats every legacy rule via maximum specificity
   Uses html[data-buld-theme="light"] + ID + multiple classes
   to outweigh anything in orders.css, signature.css, dark-fix.css
   ============================================================ */

/* === stats-grid (the KPI strip wrapper) === */
html[data-buld-theme="light"] body.dashboard-body .stats-grid,
html[data-buld-theme="light"] body.dashboard-body #panel-overview .stats-grid,
html[data-buld-theme="light"] body.dashboard-body #panel-all-orders .stats-grid,
html[data-buld-theme="light"] body.dashboard-body .integ-stats-row,
html[data-buld-theme="light"] body.dashboard-body .tracking-stats,
html[data-buld-theme="light"] body .stats-grid {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
    box-shadow: none !important;
}

/* === Every panel-level wrapper === */
html[data-buld-theme="light"] body.dashboard-body #panel-overview *,
html[data-buld-theme="light"] body.dashboard-body #panel-all-orders *,
html[data-buld-theme="light"] body.dashboard-body #panel-abandoned-carts *,
html[data-buld-theme="light"] body.dashboard-body #panel-store-settings *,
html[data-buld-theme="light"] body.dashboard-body #panel-team *,
html[data-buld-theme="light"] body.dashboard-body #panel-domains *,
html[data-buld-theme="light"] body.dashboard-body #panel-add-product *,
html[data-buld-theme="light"] body.dashboard-body #panel-products * {
    /* Inherit text colors */
    border-color: var(--buld-hairline);
}

/* === Specific card backgrounds — light mode must be light === */
html[data-buld-theme="light"] body.dashboard-body #panel-overview .funnel-section,
html[data-buld-theme="light"] body.dashboard-body #panel-overview .gross-value-card,
html[data-buld-theme="light"] body.dashboard-body #panel-overview .estimated-rev-card,
html[data-buld-theme="light"] body.dashboard-body #panel-overview .dash-recent-card,
html[data-buld-theme="light"] body.dashboard-body #panel-overview .attention-card,
html[data-buld-theme="light"] body.dashboard-body #panel-overview .ac-table-card,
html[data-buld-theme="light"] body.dashboard-body #panel-all-orders .ac-table-card,
html[data-buld-theme="light"] body.dashboard-body #panel-abandoned-carts .ac-kpi,
html[data-buld-theme="light"] body.dashboard-body #panel-abandoned-carts .ac-table-card,
html[data-buld-theme="light"] body.dashboard-body #panel-store-settings .settings-section,
html[data-buld-theme="light"] body.dashboard-body #panel-add-product .form-card,
html[data-buld-theme="light"] body.dashboard-body #panel-add-product .product-form-card,
html[data-buld-theme="light"] body.dashboard-body #panel-products .product-card {
    background: var(--buld-elevated) !important;
    background-image: none !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
    box-shadow: none !important;
    color: var(--buld-ink-1) !important;
}

/* === Strip dark backgrounds from inline styles in light mode === */
html[data-buld-theme="light"] body.dashboard-body [style*="background:#4f4a54"],
html[data-buld-theme="light"] body.dashboard-body [style*="background: #4f4a54"],
html[data-buld-theme="light"] body.dashboard-body [style*="background:#3a363f"],
html[data-buld-theme="light"] body.dashboard-body [style*="background: #3a363f"],
html[data-buld-theme="light"] body.dashboard-body [style*="background:#272728"],
html[data-buld-theme="light"] body.dashboard-body [style*="background: #272728"],
html[data-buld-theme="light"] body.dashboard-body [style*="background:#5a5560"],
html[data-buld-theme="light"] body.dashboard-body [style*="background: #5a5560"],
html[data-buld-theme="light"] body.dashboard-body [style*="background:#635e69"],
html[data-buld-theme="light"] body.dashboard-body [style*="background: #635e69"] {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
}

/* === Texts inside dashboard panels — universal ink === */
html[data-buld-theme="light"] body.dashboard-body h1,
html[data-buld-theme="light"] body.dashboard-body h2,
html[data-buld-theme="light"] body.dashboard-body h3,
html[data-buld-theme="light"] body.dashboard-body h4,
html[data-buld-theme="light"] body.dashboard-body h5,
html[data-buld-theme="light"] body.dashboard-body strong,
html[data-buld-theme="light"] body.dashboard-body .panel h1,
html[data-buld-theme="light"] body.dashboard-body .panel-header h1,
html[data-buld-theme="light"] body.dashboard-body .panel-header h1 *,
html[data-buld-theme="light"] body.dashboard-body [class*="-title"]:not([class*="-subtitle"]):not([class*="-eyebrow"]) {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body.dashboard-body p,
html[data-buld-theme="light"] body.dashboard-body small,
html[data-buld-theme="light"] body.dashboard-body [class*="-subtitle"],
html[data-buld-theme="light"] body.dashboard-body [class*="-meta"],
html[data-buld-theme="light"] body.dashboard-body [class*="-hint"],
html[data-buld-theme="light"] body.dashboard-body .text-muted,
html[data-buld-theme="light"] body.dashboard-body .text-secondary {
    color: var(--buld-ink-3) !important;
}

/* ============================================================
   PHASE 5 — AGGRESSIVE LIGHT MODE OVERRIDES
   Target: any element that stays dark when in light mode
   Strategy: ID-level specificity + !important + theme attribute
   ============================================================ */

/* The KPI strip wrapper (stats-grid) — light mode = light bg */
html[data-buld-theme="light"] body #panel-overview .stats-grid,
html[data-buld-theme="light"] body #panel-all-orders .stats-grid,
html[data-buld-theme="light"] body #panel-all-orders .orders-kpi-grid,
html[data-buld-theme="light"] body #panel-overview .orders-kpi-grid,
html[data-buld-theme="light"] body [class*="orders-kpi-grid"],
html[data-buld-theme="light"] body .stats-grid {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
    box-shadow: none !important;
    border-radius: var(--buld-radius-card) !important;
}

/* Stat cells inside the strip — transparent (let parent show) */
html[data-buld-theme="light"] body .stats-grid > *,
html[data-buld-theme="light"] body .orders-kpi-grid > * {
    background: transparent !important;
    color: var(--buld-ink-1) !important;
}

/* Every dashboard card by class — force light bg in light mode */
html[data-buld-theme="light"] body .panel .orders-kpi-card,
html[data-buld-theme="light"] body .panel .an-kpi-card,
html[data-buld-theme="light"] body .panel .ac-kpi,
html[data-buld-theme="light"] body .panel .funnel-section,
html[data-buld-theme="light"] body .panel .gross-value-card,
html[data-buld-theme="light"] body .panel .estimated-rev-card,
html[data-buld-theme="light"] body .panel .geo-side-panel,
html[data-buld-theme="light"] body .panel .dash-recent-card,
html[data-buld-theme="light"] body .panel .ac-table-card,
html[data-buld-theme="light"] body .panel .an-card,
html[data-buld-theme="light"] body .panel .dom-card,
html[data-buld-theme="light"] body .panel .call-card,
html[data-buld-theme="light"] body .panel .cf-shipping-card,
html[data-buld-theme="light"] body .panel .cf-table-card,
html[data-buld-theme="light"] body .panel .summary-card,
html[data-buld-theme="light"] body .panel .admin-card,
html[data-buld-theme="light"] body .panel [class*="-section"]:not(.nav-section):not(.sidebar-section),
html[data-buld-theme="light"] body .panel [class*="-card"]:not(.switcher-card):not(.user-card):not([class*="card-icon"]):not([class*="card-label"]):not([class*="card-title"]):not([class*="card-value"]) {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
    box-shadow: none !important;
}

/* Settings/admin sections that wrap forms (Basic info, etc.) */
html[data-buld-theme="light"] body #panel-store-settings .settings-section,
html[data-buld-theme="light"] body #panel-team .settings-section,
html[data-buld-theme="light"] body #panel-domains .settings-section,
html[data-buld-theme="light"] body #panel-switches .settings-section,
html[data-buld-theme="light"] body [class*="basic-info"],
html[data-buld-theme="light"] body [class*="info-card"],
html[data-buld-theme="light"] body [class*="settings-card"] {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
    border-radius: var(--buld-radius-card) !important;
}

/* All labels in forms — force ink in light mode */
html[data-buld-theme="light"] body label,
html[data-buld-theme="light"] body .form-label,
html[data-buld-theme="light"] body [class*="-label"]:not([class*="-input"]):not([class*="badge"]):not([class*="status"]) {
    color: var(--buld-ink-2) !important;
}

/* Add Product page form fields */
html[data-buld-theme="light"] body #panel-add-product .form-card,
html[data-buld-theme="light"] body #panel-add-product .product-form-card,
html[data-buld-theme="light"] body #panel-add-product [class*="form-section"] {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
}

/* Products grid card info area (the dark area below product image) */
html[data-buld-theme="light"] body #panel-products .product-card,
html[data-buld-theme="light"] body #panel-products .product-card *,
html[data-buld-theme="light"] body .product-grid-item,
html[data-buld-theme="light"] body [class*="product-card-info"],
html[data-buld-theme="light"] body [class*="product-card-body"] {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body #panel-products .product-card .product-card-image,
html[data-buld-theme="light"] body [class*="product-card-image"] {
    background: var(--buld-elevated) !important;
}

/* Action buttons in table rows (the dark icon buttons after confirm/cancel) */
html[data-buld-theme="light"] body table .ord-action-btn,
html[data-buld-theme="light"] body table button[class*="-action"],
html[data-buld-theme="light"] body [class*="row-actions"] button {
    background: transparent !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-2) !important;
    border-radius: 8px !important;
}

/* Abandoned carts table rows — should be light, not dark */
html[data-buld-theme="light"] body #panel-abandoned-carts table tr,
html[data-buld-theme="light"] body #panel-abandoned-carts .ac-row,
html[data-buld-theme="light"] body #panel-abandoned-carts [class*="-row"] {
    background: transparent !important;
    border-bottom: 1px solid var(--buld-hairline) !important;
}
html[data-buld-theme="light"] body #panel-abandoned-carts table tr:hover,
html[data-buld-theme="light"] body #panel-abandoned-carts .ac-row:hover {
    background: var(--buld-surface-2) !important;
}

/* Modal text in light mode — force ink on placeholder text */
html[data-buld-theme="light"] body .modal label,
html[data-buld-theme="light"] body .modal h1,
html[data-buld-theme="light"] body .modal h2,
html[data-buld-theme="light"] body .modal h3,
html[data-buld-theme="light"] body .modal h4,
html[data-buld-theme="light"] body .modal p,
html[data-buld-theme="light"] body .modal span:not([class*="badge"]):not([class*="pill"]) {
    color: var(--buld-ink-1) !important;
}

/* Product detail modal — stock/marge stat cells should have visible bg */
html[data-buld-theme="light"] body [class*="product-stats"],
html[data-buld-theme="light"] body [class*="product-detail"] [class*="stat"] {
    background: var(--buld-surface-2) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
}

/* ============================================================
   PHASE 4 — universal component coverage (forms, modals, toasts)
   ============================================================ */

/* ─── MODALS / DIALOGS ─── */
html[data-buld-theme] body .modal,
html[data-buld-theme] body .modal-content,
html[data-buld-theme] body [class*="-modal"]:not([class*="trigger"]):not([class*="overlay"]):not([class*="backdrop"]),
html[data-buld-theme] body [class*="dialog"]:not([class*="trigger"]):not([class*="overlay"]):not([class*="backdrop"]),
html[data-buld-theme] body .modal-body,
html[data-buld-theme] body [class*="modal-body"] {
    background: var(--buld-elevated-2, #FFFFFF) !important;
    color: var(--buld-ink-1) !important;
    border-radius: var(--buld-radius-card) !important;
    border: 1px solid var(--buld-hairline) !important;
}
html[data-buld-theme="dark"] body .modal,
html[data-buld-theme="dark"] body .modal-content,
html[data-buld-theme="dark"] body [class*="-modal"]:not([class*="trigger"]):not([class*="overlay"]) {
    background: var(--buld-elevated) !important;
    border-color: var(--buld-divider) !important;
}
html[data-buld-theme] body .modal-header,
html[data-buld-theme] body .modal-footer,
html[data-buld-theme] body [class*="-modal-header"],
html[data-buld-theme] body [class*="-modal-footer"] {
    border-color: var(--buld-hairline) !important;
}
html[data-buld-theme] body .modal-overlay,
html[data-buld-theme] body .modal-backdrop,
html[data-buld-theme] body [class*="overlay"],
html[data-buld-theme] body [class*="backdrop"] {
    background: rgba(0, 0, 0, 0.45) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
}

/* ─── FORMS (inputs, selects, textareas, labels) ─── */
html[data-buld-theme] body input[type="text"],
html[data-buld-theme] body input[type="email"],
html[data-buld-theme] body input[type="tel"],
html[data-buld-theme] body input[type="number"],
html[data-buld-theme] body input[type="password"],
html[data-buld-theme] body input[type="search"],
html[data-buld-theme] body input[type="url"],
html[data-buld-theme] body input[type="date"],
html[data-buld-theme] body textarea,
html[data-buld-theme] body .form-input,
html[data-buld-theme] body .form-control {
    background: var(--buld-elevated-2, #FFFFFF) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-divider) !important;
    border-radius: var(--buld-radius-input) !important;
    font-family: var(--buld-font-text) !important;
}
html[data-buld-theme="dark"] body input,
html[data-buld-theme="dark"] body textarea,
html[data-buld-theme="dark"] body .form-input {
    background: var(--buld-surface-2) !important;
    border-color: var(--buld-divider) !important;
}
html[data-buld-theme] body input:focus,
html[data-buld-theme] body textarea:focus,
html[data-buld-theme] body .form-input:focus {
    border-color: var(--buld-cta) !important;
    box-shadow: 0 0 0 4px var(--buld-cta-soft) !important;
    outline: 0 !important;
}
html[data-buld-theme] body input::placeholder,
html[data-buld-theme] body textarea::placeholder {
    color: var(--buld-ink-4) !important;
}
html[data-buld-theme] body label,
html[data-buld-theme] body .form-label {
    color: var(--buld-ink-2) !important;
    font-family: var(--buld-font-text) !important;
}

/* ─── TOASTS / NOTIFICATIONS ─── */
/* NOTE: exclude *-container / *-wrap — the empty toast CONTAINER must stay
   transparent; otherwise it renders as a gray line/box across the topbar. */
html[data-buld-theme] body .toast,
html[data-buld-theme] body [class*="toast"]:not([class*="trigger"]):not([class*="container"]):not([class*="wrap"]),
html[data-buld-theme] body .notification,
html[data-buld-theme] body [class*="notification"]:not([class*="badge"]):not([class*="container"]):not([class*="wrap"]) {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}
/* Hard guarantee: toast/notification containers never paint a surface */
html[data-buld-theme] body .toast-container,
html[data-buld-theme] body [class*="toast-container"],
html[data-buld-theme] body [class*="notification-container"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
html[data-buld-theme] body .toast--success,
html[data-buld-theme] body [class*="toast-success"] {
    border-color: var(--buld-success) !important;
}
html[data-buld-theme] body .toast--error,
html[data-buld-theme] body [class*="toast-error"] {
    border-color: var(--buld-danger) !important;
}

/* ─── BREADCRUMBS ─── */
html[data-buld-theme] body .breadcrumb,
html[data-buld-theme] body [class*="breadcrumb"]:not([class*="separator"]) {
    color: var(--buld-ink-3) !important;
    background: transparent !important;
}
html[data-buld-theme] body .breadcrumb .current,
html[data-buld-theme] body [class*="breadcrumb-current"] {
    color: var(--buld-ink-1) !important;
    font-weight: 500 !important;
}

/* ─── PAGINATION ─── */
html[data-buld-theme] body .pagination,
html[data-buld-theme] body [class*="pagination"] button,
html[data-buld-theme] body [class*="page-btn"] {
    background: transparent !important;
    color: var(--buld-ink-2) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-btn) !important;
}
html[data-buld-theme] body [class*="page-btn"]:hover {
    background: var(--buld-surface-2) !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body [class*="page-btn"].is-active,
html[data-buld-theme] body [class*="page-btn"].active {
    background: var(--buld-cta) !important;
    color: #fff !important;
    border-color: var(--buld-cta) !important;
}

/* ─── EMPTY STATES ─── */
html[data-buld-theme] body .empty-state,
html[data-buld-theme] body [class*="empty-state"],
html[data-buld-theme] body [class*="no-results"],
html[data-buld-theme] body [class*="placeholder"] {
    color: var(--buld-ink-3) !important;
    background: transparent !important;
}

/* ─── LOADING SPINNERS ─── */
html[data-buld-theme] body .spinner,
html[data-buld-theme] body [class*="spinner"],
html[data-buld-theme] body [class*="loader"] {
    border-color: var(--buld-hairline) !important;
    border-top-color: var(--buld-cta) !important;
}

/* ─── BUTTONS — secondary, ghost, danger variants ─── */
html[data-buld-theme] body .btn-secondary,
html[data-buld-theme] body button[class*="-secondary"]:not(.bx-btn) {
    background: var(--buld-surface-2) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-pill) !important;
}
html[data-buld-theme] body .btn-ghost,
html[data-buld-theme] body button[class*="-ghost"]:not(.bx-btn) {
    background: transparent !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-pill) !important;
}
html[data-buld-theme] body .btn-danger,
html[data-buld-theme] body button[class*="-danger"]:not(.bx-btn):not(.ap-account-item) {
    background: var(--buld-danger) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--buld-radius-pill) !important;
}

/* ─── TOOLTIPS ─── */
html[data-buld-theme] body .tooltip,
html[data-buld-theme] body [class*="tooltip"]:not([class*="trigger"]) {
    background: var(--buld-ink-1) !important;
    color: var(--buld-page) !important;
    border-radius: var(--buld-radius-btn) !important;
    font-size: 12px !important;
    font-family: var(--buld-font-text) !important;
}

/* ─── ACCORDION / EXPANDABLE ─── */
html[data-buld-theme] body .accordion,
html[data-buld-theme] body [class*="accordion"]:not([class*="trigger"]),
html[data-buld-theme] body .expandable {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
    color: var(--buld-ink-1) !important;
}

/* ─── TAGS / CHIPS (filter chips) ─── */
html[data-buld-theme] body .tag,
html[data-buld-theme] body .chip,
html[data-buld-theme] body [class*="-tag"]:not([class*="-tag-label"]),
html[data-buld-theme] body [class*="-chip"]:not([class*="-chip-label"]) {
    background: var(--buld-surface-2) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-pill) !important;
    font-size: 12px !important;
}

/* ─── DIVIDERS / HR ─── */
html[data-buld-theme] body hr,
html[data-buld-theme] body .divider,
html[data-buld-theme] body [class*="-divider"]:not([class*="vertical"]) {
    background: var(--buld-hairline) !important;
    border-color: var(--buld-hairline) !important;
    height: 1px !important;
    margin-block: 12px !important;
}

/* ─── PROGRESS BARS ─── */
html[data-buld-theme] body .progress,
html[data-buld-theme] body [class*="progress"]:not([class*="-bar"]):not([class*="-fill"]):not([class*="-text"]) {
    background: var(--buld-surface-2) !important;
    border-radius: var(--buld-radius-pill) !important;
    overflow: hidden;
}
html[data-buld-theme] body [class*="progress-fill"],
html[data-buld-theme] body [class*="progress-bar"]:not([class*="wrap"]) {
    background: var(--buld-cta) !important;
}

/* ─── SUMMARY CARDS / KPI VARIATIONS ─── */
html[data-buld-theme] body .summary-card,
html[data-buld-theme] body [class*="summary"]:not([class*="-label"]):not([class*="-value"]):not([class*="-sub"]) {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
    color: var(--buld-ink-1) !important;
}

/* ─── ADMIN PANELS / SETTINGS SECTIONS ─── */
html[data-buld-theme] body .settings-section,
html[data-buld-theme] body [class*="settings-"]:not([class*="-label"]):not([class*="-value"]):not([class*="-toggle"]),
html[data-buld-theme] body .admin-card {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
    color: var(--buld-ink-1) !important;
}

/* ─── TOGGLE SWITCHES ─── */
html[data-buld-theme] body input[type="checkbox"].toggle,
html[data-buld-theme] body .toggle-switch,
html[data-buld-theme] body [class*="-toggle"]:not([class*="theme-toggle"]):not([class*="sidebar-toggle"]) {
    accent-color: var(--buld-cta) !important;
}

/* ─── LISTS / MENUS ─── */
html[data-buld-theme] body .menu-list,
html[data-buld-theme] body .dropdown-menu,
html[data-buld-theme] body [class*="-list"]:not([class*="-list-item"]):not([class*="-list-label"]) {
    background: var(--buld-elevated-2, var(--buld-elevated)) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-input) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .menu-item,
html[data-buld-theme] body .dropdown-item,
html[data-buld-theme] body [class*="-list-item"] {
    color: var(--buld-ink-1) !important;
    background: transparent !important;
}
html[data-buld-theme] body .menu-item:hover,
html[data-buld-theme] body .dropdown-item:hover,
html[data-buld-theme] body [class*="-list-item"]:hover {
    background: var(--buld-surface-2) !important;
}

/* ─── COMMON LEGACY TEXT — force ink ─── */
html[data-buld-theme] body .text-primary,
html[data-buld-theme] body .heading,
html[data-buld-theme] body .title {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .text-secondary,
html[data-buld-theme] body .subtitle,
html[data-buld-theme] body .text-muted {
    color: var(--buld-ink-3) !important;
}

/* ─── ACCEPTS LEGACY DARK-MODE INLINE STYLES — strip them in light mode ─── */
html[data-buld-theme="light"] body [style*="background:#4f4a54"],
html[data-buld-theme="light"] body [style*="background: #4f4a54"],
html[data-buld-theme="light"] body [style*="background:#3a363f"],
html[data-buld-theme="light"] body [style*="background: #3a363f"],
html[data-buld-theme="light"] body [style*="background:#272728"],
html[data-buld-theme="light"] body [style*="background: #272728"] {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="dark"] body [style*="background:#ffffff"],
html[data-buld-theme="dark"] body [style*="background: #ffffff"],
html[data-buld-theme="dark"] body [style*="background:#fff"],
html[data-buld-theme="dark"] body [style*="background: #fff"] {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
}

/* ============================================================
   COMPREHENSIVE CLEANUP — fixes all observed inconsistencies
   in BOTH light + dark modes.
   ============================================================ */

/* === SUB-TABS (Tableau de bord / Analyses) — pure underline, no box === */
html[data-buld-theme] body .ap-subnav-tab {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
    box-shadow: none !important;
}
html[data-buld-theme] body .ap-subnav-tab:hover {
    background: transparent !important;
}
html[data-buld-theme] body .ap-subnav-tab.is-active::after {
    background: var(--buld-ink-1) !important;
    height: 1.5px !important;
}

/* === KPI CELLS — unified strip, no rogue dark cell === */
html[data-buld-theme] body .orders-kpi-card,
html[data-buld-theme] body .orders-kpi-card.kpi-tone-blue,
html[data-buld-theme] body .orders-kpi-card.kpi-tone-amber,
html[data-buld-theme] body .orders-kpi-card.kpi-tone-violet,
html[data-buld-theme] body .orders-kpi-card.kpi-tone-teal,
html[data-buld-theme] body .orders-kpi-card.kpi-tone-green,
html[data-buld-theme] body .orders-kpi-card.kpi-tone-rose,
html[data-buld-theme] body .orders-kpi-card.kpi-tone-slate,
html[data-buld-theme] body .orders-kpi-card.kpi-tone-indigo,
html[data-buld-theme] body [class*="kpi-tone-"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .orders-kpi-value {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .orders-kpi-label {
    color: var(--buld-ink-3) !important;
}

/* === ACTION BUTTONS in tables (icon buttons after confirm/cancel) === */
html[data-buld-theme="light"] body .ord-action-btn,
html[data-buld-theme="light"] body [class*="action-btn"],
html[data-buld-theme="light"] body button[class*="-action"] {
    background: transparent !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-2) !important;
    border-radius: 8px !important;
}
html[data-buld-theme="light"] body .ord-action-btn:hover {
    background: var(--buld-surface-2) !important;
    color: var(--buld-ink-1) !important;
}

/* === CARRIER / Choose carrier card === */
html[data-buld-theme="light"] body .carrier-choice-card,
html[data-buld-theme="light"] body [class*="carrier-choice"],
html[data-buld-theme="light"] body [class*="carrier-card"] {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
    border-radius: var(--buld-radius-card) !important;
}
html[data-buld-theme="light"] body .carrier-choice-card *,
html[data-buld-theme="light"] body [class*="carrier-card"] * {
    color: var(--buld-ink-1) !important;
}

/* === SELECT/DROPDOWN dark backgrounds (Point de départ etc.) === */
html[data-buld-theme="light"] body select,
html[data-buld-theme="light"] body .form-select,
html[data-buld-theme="light"] body [class*="-select"]:not(.form-row),
html[data-buld-theme="light"] body [class*="dropdown"]:not(.dropdown-trigger) {
    background: var(--buld-elevated-2, #FFFFFF) !important;
    border: 1px solid var(--buld-divider) !important;
    color: var(--buld-ink-1) !important;
    border-radius: var(--buld-radius-input) !important;
}
html[data-buld-theme="light"] body select option {
    background: var(--buld-elevated-2, #FFFFFF) !important;
    color: var(--buld-ink-1) !important;
}

/* === PRODUCTS page heading "Products" — make visible === */
html[data-buld-theme] body #panel-products h1,
html[data-buld-theme] body #panel-products h2,
html[data-buld-theme] body #panel-products .page-title,
html[data-buld-theme] body #panel-products [class*="page-title"] {
    color: var(--buld-ink-1) !important;
    font-family: var(--buld-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}
html[data-buld-theme] body #panel-products p,
html[data-buld-theme] body #panel-products .page-sub {
    color: var(--buld-ink-3) !important;
}

/* === Universal text safety net — any element with fragile bg-coupled text === */
html[data-buld-theme="light"] body [style*="color: #f4f4f5"],
html[data-buld-theme="light"] body [style*="color:#f4f4f5"],
html[data-buld-theme="light"] body [style*="color: #fff"],
html[data-buld-theme="light"] body [style*="color:#fff"],
html[data-buld-theme="light"] body [style*="color: white"] {
    color: var(--buld-ink-1) !important;
}

/* === Product cards (the products grid) — keep their image bg, but clean borders === */
html[data-buld-theme] body .product-card,
html[data-buld-theme] body [class*="-product-item"] {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
    box-shadow: none !important;
}

/* ============================================================
   APPLE TYPOGRAPHY ENFORCER — applies SF Pro + ink colors everywhere
   ============================================================ */
/* Body + all descendants: SF Pro Text as base font */
html[data-buld-theme] body,
html[data-buld-theme] body *:not(svg):not(path):not(i[class*="lucide"]):not(.lucide):not(.fa):not([class*="fa-"]):not(.ap-cta):not(.btn-primary):not(.buld-theme-toggle):not(.ap-theme-toggle) {
    font-family: var(--buld-font-text) !important;
    letter-spacing: var(--buld-tracking) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Display font for headings + display elements */
html[data-buld-theme] body h1,
html[data-buld-theme] body h2,
html[data-buld-theme] body h3,
html[data-buld-theme] body h4,
html[data-buld-theme] body h5,
html[data-buld-theme] body h6,
html[data-buld-theme] body .panel-header h1,
html[data-buld-theme] body .panel-header h1 *,
html[data-buld-theme] body [class*="hero__title"],
html[data-buld-theme] body [class*="display"],
html[data-buld-theme] body .ap-subnav__title,
html[data-buld-theme] body [class*="-kpi-value"],
html[data-buld-theme] body [class*="-card-value"],
html[data-buld-theme] body .funnel-step-count {
    font-family: var(--buld-font-display) !important;
    letter-spacing: -0.022em !important;
    color: var(--buld-ink-1) !important;
}

/* Text color enforcement across all elements that should be primary ink */
html[data-buld-theme] body h1,
html[data-buld-theme] body h2,
html[data-buld-theme] body h3,
html[data-buld-theme] body h4,
html[data-buld-theme] body h5,
html[data-buld-theme] body h6,
html[data-buld-theme] body p,
html[data-buld-theme] body span:not([class*="badge"]):not([class*="pill"]):not([class*="status-"]):not([class*="icon"]),
html[data-buld-theme] body label,
html[data-buld-theme] body strong,
html[data-buld-theme] body td:not([class*="status"]),
html[data-buld-theme] body div:not([class*="badge"]):not([class*="pill"]):not([class*="status-"]):not([class*="ap-cta"]):not([class*="btn-primary"]) {
    /* Don't force color globally — only when an element has white text in light mode or black text in dark */
}

/* Specific fix: Welcome header and its subtitle */
html[data-buld-theme] body #panel-overview .panel-header h1,
html[data-buld-theme] body #panel-overview .panel-header h1 span,
html[data-buld-theme] body #panel-overview .panel-header h1 *,
html[data-buld-theme] body #welcomeName {
    font-family: var(--buld-font-display) !important;
    color: var(--buld-ink-1) !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
}
html[data-buld-theme] body #panel-overview .panel-header p {
    font-family: var(--buld-font-text) !important;
    color: var(--buld-ink-3) !important;
    letter-spacing: var(--buld-tracking) !important;
}

/* Inputs, textareas, selects, buttons inherit SF Pro */
html[data-buld-theme] body input,
html[data-buld-theme] body textarea,
html[data-buld-theme] body select,
html[data-buld-theme] body button {
    font-family: var(--buld-font-text) !important;
    letter-spacing: var(--buld-tracking) !important;
}

/* Mono text stays mono — for code, hex codes, IDs */
html[data-buld-theme] body code,
html[data-buld-theme] body pre,
html[data-buld-theme] body kbd,
html[data-buld-theme] body samp,
html[data-buld-theme] body [class*="mono"] {
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace !important;
}

/* ============================================================
   FIX BATCH — user-reported visible issues
   ============================================================ */

/* 1) "Welcome, Mohamed" — h1 in panel-header → fully ink (both modes) */
html[data-buld-theme] body .panel-header h1,
html[data-buld-theme] body .panel-header h1 *,
html[data-buld-theme] body .panel-header h1 span,
html[data-buld-theme] body #welcomeName {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .panel-header p {
    color: var(--buld-ink-3) !important;
}

/* 2) "Recent orders" items inside .dash-recent-card */
html[data-buld-theme] body .dash-recent-card strong,
html[data-buld-theme] body .dash-recent-card .dash-recent-title,
html[data-buld-theme] body .dash-recent-card h3,
html[data-buld-theme] body .dash-recent-card h4 {
    color: var(--buld-ink-1) !important;
    font-family: var(--buld-font-display) !important;
    font-weight: 600 !important;
}
html[data-buld-theme] body .dash-recent-card p,
html[data-buld-theme] body .dash-recent-card span,
html[data-buld-theme] body .dash-recent-card small,
html[data-buld-theme] body .dash-recent-card .dash-recent-sub {
    color: var(--buld-ink-2) !important;
}

/* 3) DELETE the legacy "+ Nouvelle commande" button (we already have one in subnav) */
html[data-buld-theme] body #panel-overview .panel-header > button.btn-primary,
html[data-buld-theme] body .panel-header > button[onclick*="new-orders"] {
    display: none !important;
}

/* 4) Quick-action cards (.qa-mini-card / similar) → follow theme in light mode */
html[data-buld-theme="light"] body .qa-mini-card,
html[data-buld-theme="light"] body [class*="qa-mini"]:not([class*="qa-mini-icon"]):not([class*="qa-mini-label"]),
html[data-buld-theme="light"] body .quick-action-card,
html[data-buld-theme="light"] body [class*="action-tile"] {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body .qa-mini-icon,
html[data-buld-theme="light"] body [class*="qa-mini-icon"] {
    background: var(--buld-page) !important;
    color: var(--buld-ink-1) !important;
    border-color: var(--buld-hairline) !important;
}
html[data-buld-theme="light"] body .qa-mini-label,
html[data-buld-theme="light"] body [class*="qa-mini-label"] {
    color: var(--buld-ink-1) !important;
}

/* 5) Orders table wrapper card border consistency */
html[data-buld-theme] body .ac-table-card,
html[data-buld-theme] body .dash-recent-card,
html[data-buld-theme] body [class*="table-card"] {
    border: 1px solid var(--buld-hairline) !important;
    background: var(--buld-elevated) !important;
    border-radius: var(--buld-radius-card) !important;
}

/* 6) ORDERS KPI BAR — restore the original look (unified strip, not individual boxes) */
html[data-buld-theme] body #panel-all-orders .orders-kpi-card,
html[data-buld-theme] body .orders-kpi-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 20px !important;
}
html[data-buld-theme] body .orders-kpi-value {
    color: var(--buld-ink-1) !important;
}
/* The grid wrapper handles the unified background + border (one card for all) */
html[data-buld-theme] body .orders-kpi-grid,
html[data-buld-theme] body [class*="orders-kpi-grid"],
html[data-buld-theme] body .stats-grid {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
    overflow: hidden;
    box-shadow: none !important;
}
/* Cell dividers — subtle hairline between KPI cells */
html[data-buld-theme] body .orders-kpi-grid > .orders-kpi-card:not(:last-child),
html[data-buld-theme] body .stats-grid > .orders-kpi-card:not(:last-child) {
    border-inline-end: 1px solid var(--buld-hairline) !important;
}

/* DARK MODE — comprehensive fixes for visible distortions */
html[data-buld-theme="dark"] body .panel-header h1,
html[data-buld-theme="dark"] body #welcomeName,
html[data-buld-theme="dark"] body .dash-recent-card *,
html[data-buld-theme="dark"] body .qa-mini-label,
html[data-buld-theme="dark"] body [class*="qa-mini-label"],
html[data-buld-theme="dark"] body .ac-kpi-value,
html[data-buld-theme="dark"] body .orders-kpi-value {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="dark"] body .panel-header p,
html[data-buld-theme="dark"] body .dash-recent-card p,
html[data-buld-theme="dark"] body .dash-recent-card span,
html[data-buld-theme="dark"] body .dash-recent-card small {
    color: var(--buld-ink-3) !important;
}
html[data-buld-theme="dark"] body .qa-mini-card,
html[data-buld-theme="dark"] body [class*="qa-mini"]:not([class*="qa-mini-icon"]):not([class*="qa-mini-label"]),
html[data-buld-theme="dark"] body .quick-action-card,
html[data-buld-theme="dark"] body [class*="action-tile"] {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-divider) !important;
}
html[data-buld-theme="dark"] body .qa-mini-icon,
html[data-buld-theme="dark"] body [class*="qa-mini-icon"] {
    background: var(--buld-surface-2) !important;
    color: var(--buld-ink-1) !important;
    border-color: var(--buld-divider) !important;
}

/* DESTROY all dashed/dotted debug outlines everywhere — once and forever */
html body *,
html[data-buld-theme] body * {
    outline: none !important;
    outline-offset: 0 !important;
}
html[data-buld-theme] body [data-buld-needs-style],
html[data-buld-theme] body [data-buld-radius-drift] {
    outline: none !important;
}

/* DESTROY all card shadows (Apple-flat aesthetic) — both modes */
html[data-buld-theme] body .orders-kpi-card,
html[data-buld-theme] body .an-kpi-card,
html[data-buld-theme] body .ac-kpi,
html[data-buld-theme] body .ac-table-card,
html[data-buld-theme] body .carrier-kpi-card,
html[data-buld-theme] body .dash-kpi-card,
html[data-buld-theme] body .dash-recent-card,
html[data-buld-theme] body .an-card,
html[data-buld-theme] body .an-tile,
html[data-buld-theme] body .an-chart-card,
html[data-buld-theme] body .dom-card,
html[data-buld-theme] body .cf-shipping-card,
html[data-buld-theme] body .cf-table-card,
html[data-buld-theme] body .cf-mode-card,
html[data-buld-theme] body .estimated-rev-card,
html[data-buld-theme] body .gross-value-card,
html[data-buld-theme] body .profit-main-card,
html[data-buld-theme] body .profit-breakdown,
html[data-buld-theme] body .profit-per-unit,
html[data-buld-theme] body .attention-card,
html[data-buld-theme] body .coming-soon-card,
html[data-buld-theme] body .call-card,
html[data-buld-theme] body .geo-side-panel,
html[data-buld-theme] body .credits-card,
html[data-buld-theme] body .form-card,
html[data-buld-theme] body .funnel-section,
html[data-buld-theme] body .plan-usage-banner,
html[data-buld-theme] body .origin-wilaya-block,
html[data-buld-theme] body .geo-hero-stage,
html[data-buld-theme] body .stat-card,
html[data-buld-theme] body .revenue-card,
html[data-buld-theme] body .action-card,
html[data-buld-theme] body .table-card,
html[data-buld-theme] body .product-card,
html[data-buld-theme] body .report-card,
html[data-buld-theme] body .profit-box,
html[data-buld-theme] body .dz-rank-item,
html[data-buld-theme] body .dz-map-focus,
html[data-buld-theme] body .dz-map-kpi,
html[data-buld-theme] body .geo-strip-cell {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* ============================================================
   APPLE-STYLE TOPBAR — exact replica of prototype apple-style.html
   ============================================================ */
.ap-topbar-wrap {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
}
/* Tier 1 — main Apple nav (3-zone layout: logo | nav | utilities) */
.ap-nav-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    z-index: 30;                  /* above subnav so dropdowns aren't clipped */
    height: 64px;                 /* fixed — never grows with logo */
    background: var(--buld-topbar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-bottom: none;
    font-size: 14px;
    font-weight: 400;
    color: var(--buld-ink-1);
    transition: background 200ms ease, border-color 200ms ease;
    position: relative;
    overflow: visible;            /* allow oversized logo to spill out */
}
.ap-nav-main__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1400px;
    padding: 0 32px;
    height: 64px;                 /* never grow with an oversized logo */
}
.ap-nav-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 64px;                 /* keep click area within the bar */
    position: relative;
}
/* An oversized logo may spill out visually but must NOT capture clicks
   meant for the sub-nav below it. */
.ap-nav-logo { pointer-events: none; }
.ap-nav-logo img { pointer-events: none; }
.ap-nav-center {
    display: flex;
    align-items: center;
    gap: 28px;
    justify-content: center;
}
.ap-nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
}
.ap-nav-link {
    color: var(--buld-ink-1);
    opacity: 0.88;
    transition: opacity 150ms ease, color 150ms ease;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.01em;
    background: transparent;
    border: none;
    font-family: inherit;
    white-space: nowrap;
    padding: 4px 2px;
}
.ap-nav-link:hover { opacity: 1; }
.ap-nav-link.is-active { opacity: 1; font-weight: 500; }
.ap-nav-link i, .ap-nav-link svg { width: 16px; height: 16px; }
.ap-nav-link--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ap-nav-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--buld-ink-1);
    margin-inline-end: 12px;
    flex-shrink: 0;
}
.ap-nav-logo {
    overflow: visible !important;
    position: relative;
    z-index: 5;
    cursor: grab;
    user-select: none;
    transform: translate(var(--ap-logo-x, 0px), var(--ap-logo-y, 0px));
    transition: transform 0ms;    /* live drag */
}
.ap-nav-logo.is-dragging { cursor: grabbing; opacity: 0.85; }
.ap-nav-logo img {
    height: var(--ap-logo-size, 64px);
    width: auto;
    max-width: none;              /* no width cap — grow freely */
    object-fit: contain;
    display: block;
    transition: height 150ms ease;
    pointer-events: none;         /* drag events bubble to anchor */
    -webkit-user-drag: none;
}
.ap-nav-left {
    overflow: visible !important;
    position: relative;
    z-index: 5;
}
html[data-buld-theme="light"] .ap-nav-logo img.ap-logo--dark { display: none; }
html[data-buld-theme="dark"] .ap-nav-logo img.ap-logo--light { display: none; }
.ap-nav-spacer { flex: 1; }

/* Tier 2 — Product sub-nav (Mac Studio style) */
.ap-subnav {
    position: relative;
    z-index: 20;                  /* below nav-main so its dropdowns overlay the subnav */
    background: var(--buld-subnav-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    /* No inter-tier divider — it used to cut through the oversized logo. */
    border-bottom: 1px solid var(--buld-hairline);
    transition: background 200ms ease, border-color 200ms ease;
}
.ap-subnav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    height: 52px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}
.ap-subnav__title {
    justify-self: start;
}
.ap-subnav__tabs {
    justify-self: center;
}
.ap-subnav__actions {
    justify-self: end;
}
.ap-subnav__title {
    font-family: var(--buld-font-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--buld-ink-1);
}
.ap-subnav__tabs {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 12px;
    font-weight: 400;
    color: var(--buld-ink-2);
    overflow-x: auto;
    scrollbar-width: none;
}
.ap-subnav__tabs::-webkit-scrollbar { display: none; }
.ap-subnav-tab {
    position: relative;
    padding: 4px 0;
    color: var(--buld-ink-2);
    cursor: pointer;
    transition: color 150ms ease;
    letter-spacing: -0.01em;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 12px;
    white-space: nowrap;
}
.ap-subnav-tab:hover { color: var(--buld-ink-1); }
.ap-subnav-tab.is-active { color: var(--buld-ink-1); }
.ap-subnav-tab.is-active::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -4px;
    height: 1px;
    background: var(--buld-ink-1);
}
.ap-subnav__actions { display: flex; align-items: center; gap: 12px; }

/* CTA pill — Apple signature blue */
.ap-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    font-family: var(--buld-font-text);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.01em;
    background: var(--buld-cta);
    color: #fff;
    border: none;
    border-radius: var(--buld-radius-pill);
    cursor: pointer;
    transition: background 150ms ease;
}
.ap-cta:hover { background: var(--buld-cta-hover); }

/* Theme toggle (tier 2 right side) */
.ap-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 22px;
    border-radius: var(--buld-radius-pill);
    background: var(--buld-hover);
    border: none;
    color: var(--buld-ink-1);
    font-family: var(--buld-font-text);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 150ms ease;
}
.ap-theme-toggle:hover { background: var(--buld-divider); }
.ap-theme-toggle svg { width: 12px; height: 12px; }

/* When new topbar is active, fully hide the legacy one */
html[data-buld-ap-nav="true"] .topbar-global { display: none !important; }

/* ============================================================
   LEGACY TOPBAR NAV (kept for compatibility — UNUSED when ap-nav active)
   ============================================================ */
.buld-nav-main {
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.buld-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    color: var(--buld-ink-1, #1D1D1F);
    font-family: var(--buld-font-text, system-ui);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.01em;
    opacity: 0.88;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 150ms ease, color 150ms ease;
    position: relative;
    white-space: nowrap;
}
.buld-nav-link:hover { opacity: 1; }
.buld-nav-link.is-active {
    opacity: 1;
    font-weight: 500;
}
.buld-nav-link.is-active::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -10px;
    height: 2px;
    background: var(--buld-cta, #0071E3);
    border-radius: 999px;
}
.buld-nav-link i,
.buld-nav-link svg { width: 14px; height: 14px; }

/* Tier-2 sub-tabs */
.buld-subnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    height: 48px;
    background: var(--buld-topbar-bg, rgba(245,245,247,0.72));
    border-bottom: 1px solid var(--buld-hairline, rgba(0,0,0,0.1));
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}
.buld-subnav__title {
    font-family: var(--buld-font-display, system-ui);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--buld-ink-1);
    flex-shrink: 0;
}
.buld-subnav__tabs {
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
    flex: 1;
    justify-content: center;
    scrollbar-width: none;
}
.buld-subnav__tabs::-webkit-scrollbar { display: none; }
.buld-sub-tab {
    color: var(--buld-ink-3);
    font-family: var(--buld-font-text);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.01em;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    position: relative;
    white-space: nowrap;
    transition: color 150ms ease;
}
.buld-sub-tab:hover { color: var(--buld-ink-1); }
.buld-sub-tab.is-active { color: var(--buld-ink-1); font-weight: 500; }
.buld-sub-tab.is-active::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -8px;
    height: 1px;
    background: var(--buld-ink-1);
}

/* Hide legacy topbar brand center when our nav is active */
html[data-buld-nav="true"] .topbar-center,
html[data-buld-nav="true"] .topbar-brand,
html[data-buld-nav="true"] .topbar-logo { display: none !important; }

/* Sidebar PURGED — main content takes full width */
html[data-buld-hide-sidebar="true"] .sidebar,
html[data-buld-hide-sidebar="true"] #sidebar,
html[data-buld-hide-sidebar="true"] aside.sidebar,
html[data-buld-hide-sidebar="true"] .app-rail,
html[data-buld-hide-sidebar="true"] .sidebar-toggle-btn,
html[data-buld-hide-sidebar="true"] #sidebarToggleBtn { display: none !important; }
html[data-buld-hide-sidebar="true"] .main-content {
    margin: 0 !important;
    padding-inline-start: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
    grid-column: 1 / -1 !important;
}
html[data-buld-hide-sidebar="true"] .app-layout {
    grid-template-columns: 1fr !important;
    display: block !important;
}
html[data-buld-hide-sidebar="true"] body { padding-inline-start: 0 !important; }

/* ============================================================
   BULD LOGO (large, visible — replaces brand center)
   ============================================================ */
.buld-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-inline-end: 24px;
    flex-shrink: 0;
}
.buld-logo__img {
    height: 72px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
    transition: opacity 150ms ease;
}
.buld-logo:hover .buld-logo__img { opacity: 0.88; }
/* Two-variant logo: separate file per mode (no CSS filter hacks) */
html[data-buld-theme="light"] .buld-logo__img--dark { display: none !important; }
html[data-buld-theme="dark"] .buld-logo__img--light { display: none !important; }
/* Make topbar taller to accommodate big logo */
html[data-buld-theme] body .topbar-global { min-height: 88px !important; padding-block: 4px !important; }

/* ============================================================
   AVATAR GLOW (purple/blue accent ring like the active "N")
   ============================================================ */
html[data-buld-theme] body .avatar.is-glow,
html[data-buld-theme] body [data-glow="true"] {
    background: linear-gradient(135deg, #7c3aed 0%, #2997FF 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow:
        0 0 0 2px var(--buld-page),
        0 0 0 3px rgba(124, 58, 237, 0.50),
        0 4px 12px rgba(41, 151, 255, 0.30) !important;
}

/* Topbar primary avatar always glows */
html[data-buld-theme] body .topbar-right [class*="user-avatar"],
html[data-buld-theme] body .topbar-right .avatar:not(.is-store) {
    background: linear-gradient(135deg, #7c3aed 0%, #2997FF 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 0 0 2px var(--buld-page), 0 0 0 3px rgba(124, 58, 237, 0.50) !important;
}

/* ============================================================
   MAP — no card, no border, direct on page background
   ============================================================ */
html[data-buld-theme] body #panel-overview .dz-map-visual,
html[data-buld-theme] body .dz-map-visual,
html[data-buld-theme] body.dark .dz-map-visual,
html[data-buld-theme] body .geo-hero-stage,
html[data-buld-theme] body.dark .geo-hero-stage,
html[data-buld-theme] body .dz-map-stage,
html[data-buld-theme] body .dz-map-surface {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
html[data-buld-theme] body .dz-map-visual::before,
html[data-buld-theme] body .dz-map-visual::after,
html[data-buld-theme] body .geo-hero-stage::before,
html[data-buld-theme] body .geo-hero-stage::after { display: none !important; }

/* Wilaya summary panel (top-right card next to map) */
html[data-buld-theme] body .geo-hero-side,
html[data-buld-theme] body.dark .geo-hero-side {
    background: transparent !important;
}
html[data-buld-theme] body .geo-side-strip,
html[data-buld-theme] body.dark .geo-side-strip {
    background: var(--buld-elevated) !important;
    border: 1px solid var(--buld-hairline) !important;
    border-radius: var(--buld-radius-card) !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme] body .geo-strip-cell,
html[data-buld-theme] body.dark .geo-strip-cell {
    background: transparent !important;
    color: var(--buld-ink-1) !important;
    border: 0 !important;
}
html[data-buld-theme] body .geo-strip-label {
    color: var(--buld-ink-3) !important;
}
html[data-buld-theme] body .geo-strip-cell strong {
    color: var(--buld-ink-1) !important;
    font-family: var(--buld-font-display) !important;
    font-weight: 600 !important;
}

/* ============================================================
   THEME TOGGLE BUTTON (sun/moon)
   ============================================================ */
.buld-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    height: 30px;
    border-radius: var(--buld-radius-pill, 980px);
    background: var(--buld-hover, #E8E8ED);
    color: var(--buld-ink-1, #1D1D1F);
    border: none;
    font-family: var(--buld-font-text, system-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 150ms ease;
}
.buld-theme-toggle:hover { background: var(--buld-divider, #D2D2D7); }
.buld-theme-toggle svg { width: 14px; height: 14px; }

/* ============================================================
   FINAL OVERRIDES — appended at end of file for max cascade priority
   These guarantee they win over any earlier rule with same specificity
   ============================================================ */
html[data-buld-theme="light"] body.dashboard-body .agent-input-box,
html[data-buld-theme="light"] body.dashboard-body .agent-input-area .agent-input-box,
html[data-buld-theme="light"] body.dashboard-body #agentPanel .agent-input-box {
    background: #FFFFFF !important;
    border: 1px solid var(--buld-hairline, rgba(0,0,0,0.10)) !important;
    color: var(--buld-ink-1, #1D1D1F) !important;
}
html[data-buld-theme="light"] body.dashboard-body .carriers-kpi-card,
html[data-buld-theme="light"] body.dashboard-body #panel-carriers .carriers-kpi-card {
    background: var(--buld-elevated, #E8E8ED) !important;
    color: var(--buld-ink-1, #1D1D1F) !important;
    border: 1px solid var(--buld-hairline, rgba(0,0,0,0.10)) !important;
}
html[data-buld-theme="light"] body.dashboard-body .prod-card-yaya {
    background: var(--buld-elevated, #E8E8ED) !important;
    color: var(--buld-ink-1, #1D1D1F) !important;
    border: 1px solid var(--buld-hairline, rgba(0,0,0,0.10)) !important;
}
html[data-buld-theme="light"] body.dashboard-body .form-card,
html[data-buld-theme="light"] body.dashboard-body #panel-add-product .form-card {
    background: var(--buld-elevated, #E8E8ED) !important;
    color: var(--buld-ink-1, #1D1D1F) !important;
    border: 1px solid var(--buld-hairline, rgba(0,0,0,0.10)) !important;
}
/* cf-btn-dark intentionally dark — accept it as designed */
html[data-buld-theme="light"] body.dashboard-body .cf-btn.cf-btn-dark {
    background: var(--buld-ink-1, #1D1D1F) !important;
    color: #FFFFFF !important;
    border: none !important;
}

/* ============================================================
   APPLE-GRADE POLISH — based on multi-skill design audit findings
   ============================================================ */

/* 1) FOCUS RING — restore for a11y (was killed by `outline:none !important *`) */
html[data-buld-theme] body :focus-visible {
    outline: 2px solid var(--buld-cta) !important;
    outline-offset: 2px !important;
    border-radius: inherit;
}
html[data-buld-theme] body button:focus-visible,
html[data-buld-theme] body a:focus-visible {
    box-shadow: 0 0 0 4px var(--buld-cta-soft) !important;
}
html[data-buld-theme] body input:focus-visible,
html[data-buld-theme] body textarea:focus-visible,
html[data-buld-theme] body select:focus-visible {
    outline: 0 !important;  /* inputs use border-color instead */
    border-color: var(--buld-cta) !important;
    box-shadow: 0 0 0 4px var(--buld-cta-soft) !important;
}

/* 2) LINE-HEIGHT system — applied universally */
html[data-buld-theme] body { line-height: var(--buld-lh-text, 1.47); }
html[data-buld-theme] body h1,
html[data-buld-theme] body .panel-header h1,
html[data-buld-theme] body [class*="hero__title"],
html[data-buld-theme] body .ap-subnav__title {
    line-height: var(--buld-lh-tight, 1.12) !important;
    letter-spacing: var(--buld-tracking-tight, -0.025em) !important;
    font-weight: 600 !important;
}
html[data-buld-theme] body h2,
html[data-buld-theme] body h3,
html[data-buld-theme] body h4 {
    line-height: var(--buld-lh-display, 1.21) !important;
    letter-spacing: var(--buld-tracking-display, -0.022em) !important;
}
html[data-buld-theme] body small,
html[data-buld-theme] body .text-muted,
html[data-buld-theme] body [class*="-label"],
html[data-buld-theme] body [class*="-meta"] {
    line-height: var(--buld-lh-tight-text, 1.33) !important;
}

/* 3) NAV LINK consistent tracking */
html[data-buld-theme] body .sidebar-link {
    letter-spacing: var(--buld-tracking-tight-sm, -0.01em) !important;
    line-height: 1.38 !important;
    padding: 6px 10px !important;
    margin: 1px 8px !important;
    transition: background var(--buld-dur-hover, 150ms) ease,
                color var(--buld-dur-hover, 150ms) ease !important;
}

/* 4) UNIFIED INPUTS — single source of truth */
html[data-buld-theme] body input[type="text"],
html[data-buld-theme] body input[type="email"],
html[data-buld-theme] body input[type="tel"],
html[data-buld-theme] body input[type="number"],
html[data-buld-theme] body input[type="search"],
html[data-buld-theme] body input[type="password"],
html[data-buld-theme] body input[type="url"],
html[data-buld-theme] body input[type="date"],
html[data-buld-theme] body textarea,
html[data-buld-theme] body select,
html[data-buld-theme] body .form-input,
html[data-buld-theme] body .form-control,
html[data-buld-theme] body .search-box {
    background: var(--buld-elevated-2, #FFFFFF) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-divider) !important;
    border-radius: var(--buld-radius-input) !important;
    transition: border-color var(--buld-dur-hover, 150ms) ease,
                box-shadow var(--buld-dur-hover, 150ms) ease !important;
}
html[data-buld-theme="dark"] body input[type="text"],
html[data-buld-theme="dark"] body input[type="email"],
html[data-buld-theme="dark"] body input[type="tel"],
html[data-buld-theme="dark"] body input[type="number"],
html[data-buld-theme="dark"] body input[type="search"],
html[data-buld-theme="dark"] body textarea,
html[data-buld-theme="dark"] body select,
html[data-buld-theme="dark"] body .form-input,
html[data-buld-theme="dark"] body .search-box {
    background: var(--buld-surface-2) !important;
    border-color: var(--buld-divider) !important;
}

/* 5) BUTTON transitions everywhere */
html[data-buld-theme] body .btn-primary,
html[data-buld-theme] body button[class*="primary"],
html[data-buld-theme] body .plan-upgrade-btn,
html[data-buld-theme] body .topbar-btn,
html[data-buld-theme] body .ord-action-btn,
html[data-buld-theme] body .ap-cta,
html[data-buld-theme] body [class*="action-btn"] {
    transition: background var(--buld-dur-hover, 150ms) ease,
                color var(--buld-dur-hover, 150ms) ease,
                transform var(--buld-dur-hover, 150ms) ease,
                box-shadow var(--buld-dur-hover, 150ms) ease !important;
}
html[data-buld-theme] body .btn-primary:active,
html[data-buld-theme] body .ap-cta:active {
    transform: scale(0.97);
}

/* 6) UNIFIED action button shape (circle 32px) — Apple Finder style */
html[data-buld-theme] body .ord-action-btn,
html[data-buld-theme] body [class*="action-btn"]:not([class*="action-btns"]):not(.an-action-pill) {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* 7) DROPDOWN/MENU items — smooth hover */
html[data-buld-theme] body .dropdown-item,
html[data-buld-theme] body .menu-item,
html[data-buld-theme] body [class*="-list-item"] {
    transition: background var(--buld-dur-hover, 150ms) ease,
                color var(--buld-dur-hover, 150ms) ease !important;
}

/* 8) DARK MODE — subtle shadow for depth (Ultra preset polish) */
html[data-buld-theme="dark"] body .orders-kpi-grid,
html[data-buld-theme="dark"] body .dash-recent-card,
html[data-buld-theme="dark"] body .ac-table-card,
html[data-buld-theme="dark"] body .gross-value-card,
html[data-buld-theme="dark"] body .estimated-rev-card,
html[data-buld-theme="dark"] body .funnel-section {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 8px 24px rgba(0, 0, 0, 0.32) !important;
}

/* 9) DARK MODE — sidebar icons lighter than text for visual hierarchy */
html[data-buld-theme="dark"] body .sidebar-link i,
html[data-buld-theme="dark"] body .sidebar-link svg {
    color: var(--buld-ink-3) !important;
    opacity: 0.85;
}
html[data-buld-theme="dark"] body .sidebar-link.active i,
html[data-buld-theme="dark"] body .sidebar-link.active svg,
html[data-buld-theme="dark"] body .sidebar-link.is-active i,
html[data-buld-theme="dark"] body .sidebar-link.is-active svg {
    color: var(--buld-cta) !important;
    opacity: 1;
}

/* 10) UNIFIED MODAL overlay */
html[data-buld-theme] body .modal-overlay,
html[data-buld-theme] body .modal-backdrop,
html[data-buld-theme] body [class*="overlay"]:not([class*="trigger"]),
html[data-buld-theme] body [class*="backdrop"]:not([class*="trigger"]) {
    background: rgba(0, 0, 0, 0.42) !important;
    -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
    backdrop-filter: blur(8px) saturate(160%) !important;
}

/* 11) MAP color update — warmer to match dark Ultra preset */
html[data-buld-theme="dark"] body #panel-overview .dz-geo-feature path {
    fill: rgba(100, 210, 255, var(--feature-alpha, 0.22)) !important;
    stroke: rgba(255, 255, 255, 0.18) !important;
}
html[data-buld-theme="dark"] body #panel-overview .dz-geo-feature:hover path,
html[data-buld-theme="dark"] body #panel-overview .dz-geo-feature.active path {
    fill: rgba(41, 151, 255, 0.85) !important;
    stroke: #FF9F0A !important;
}

/* 12) AVATAR gradient using Apple system colors */
html[data-buld-theme] body .avatar.is-glow {
    background: linear-gradient(135deg, #5856D6 0%, #2997FF 100%) !important;
}

/* =========================================================
   PHASE C — VISION-AUDIT FIXES (v44, 2026-05-15)
   Applied after reviewing 90 screenshots across all 22 panels.
   See /tmp/buld_visual/findings.md for the source observations.
   ========================================================= */

/* F1 — REVERTED: forcing max-height/margin on the logo broke the user's
   custom logo-resize system (24-400px) + drag-positioning. Leave the logo
   to the existing localStorage-driven JS sizing in orders.html. */

/* F2 — Remove decorative underline/sparkline noise from KPI labels.
   Apple-style minimalism: labels are quiet, only the value is loud. */
html[data-buld-theme] body .kpi-label::after,
html[data-buld-theme] body .metric-label::after,
html[data-buld-theme] body .stat-label::after,
html[data-buld-theme] body [class*="kpi"] [class*="label"]::after,
html[data-buld-theme] body [class*="metric"] [class*="label"]::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    border: 0 !important;
    height: 0 !important;
}
html[data-buld-theme] body .kpi-label,
html[data-buld-theme] body .metric-label,
html[data-buld-theme] body .stat-label,
html[data-buld-theme] body [class*="kpi"] [class*="label"],
html[data-buld-theme] body [class*="metric"] [class*="label"] {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
/* Disable inline sparkline divs that sit under metric values (carriers panel) */
html[data-buld-theme] body .metric-spark,
html[data-buld-theme] body .stat-spark,
html[data-buld-theme] body [class*="sparkline"]:not(canvas):not(svg) {
    display: none !important;
}

/* F3 — Soften the "dark grey trio" secondary action buttons in tables.
   Primary stays bold (blue/purple). Secondaries are soft-outlined and ink-2
   so the icons are clearly readable but no longer compete with the primary CTA. */
html[data-buld-theme="light"] body .ord-action-btn:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject),
html[data-buld-theme="light"] body .order-action-btn:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject),
html[data-buld-theme="light"] body [class*="table"] .actions [class*="btn"]:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject):not(.act-call) {
    background: rgba(0, 0, 0, 0.03) !important;
    color: var(--buld-ink-2) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
    transition: all .15s ease !important;
}
html[data-buld-theme="light"] body .ord-action-btn:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject) svg,
html[data-buld-theme="light"] body .ord-action-btn:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject) i {
    color: var(--buld-ink-2) !important;
    opacity: 1 !important;
}
html[data-buld-theme="light"] body .ord-action-btn:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject):hover,
html[data-buld-theme="light"] body .order-action-btn:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject):hover,
html[data-buld-theme="light"] body [class*="table"] .actions [class*="btn"]:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject):not(.act-call):hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: var(--buld-ink-1) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}
html[data-buld-theme="dark"] body .ord-action-btn:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject),
html[data-buld-theme="dark"] body .order-action-btn:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject),
html[data-buld-theme="dark"] body [class*="table"] .actions [class*="btn"]:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject):not(.act-call) {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--buld-ink-2) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: none !important;
}
html[data-buld-theme="dark"] body .ord-action-btn:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject) svg,
html[data-buld-theme="dark"] body .ord-action-btn:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject) i {
    color: var(--buld-ink-2) !important;
    opacity: 1 !important;
}
html[data-buld-theme="dark"] body .ord-action-btn:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject):hover,
html[data-buld-theme="dark"] body .order-action-btn:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject):hover,
html[data-buld-theme="dark"] body [class*="table"] .actions [class*="btn"]:not(.is-primary):not(.act-send):not(.act-approve):not(.act-reject):not(.act-call):hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--buld-ink-1) !important;
}

/* F4 / F9 — Force ALL primary buttons (themes "Installer", team "Ajouter membre",
   app "Connecter", etc.) to derive from --buld-cta. Apple blue, not dim navy.
   Targets actual DOM: themes button has [data-action="install"] with INLINE
   background:#0f172a (no !important — loses to our !important). */
html[data-buld-theme] body button[data-action="install"]:not([disabled]),
html[data-buld-theme] body .apps-btn.apps-btn-primary,
html[data-buld-theme] body #panel-team .panel-header .btn-primary,
html[data-buld-theme] body .btn-primary[data-i18n="btn_add_member"] {
    background: var(--buld-cta) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 113, 227, 0.18) !important;
}
html[data-buld-theme] body button[data-action="install"]:not([disabled]):hover,
html[data-buld-theme] body .apps-btn.apps-btn-primary:hover,
html[data-buld-theme] body #panel-team .panel-header .btn-primary:hover {
    background: var(--buld-cta-hover, #0A84FF) !important;
    background-image: none !important;
}
/* Disabled install button (already-active theme) — keep muted */
html[data-buld-theme="light"] body button[data-action="install"][disabled] {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--buld-ink-3) !important;
}
html[data-buld-theme="dark"] body button[data-action="install"][disabled] {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--buld-ink-3) !important;
}

/* F5 — Neutralize jarring brand backgrounds on app cards (Snapchat yellow, youcan purple).
   Logo sits on neutral surface; tag chips below carry the brand color if needed. */
html[data-buld-theme="light"] body .app-card .app-logo,
html[data-buld-theme="light"] body .application-card [class*="logo"],
html[data-buld-theme="light"] body [class*="app-grid"] [class*="card"] [class*="logo-wrap"] {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
html[data-buld-theme="dark"] body .app-card .app-logo,
html[data-buld-theme="dark"] body .application-card [class*="logo"],
html[data-buld-theme="dark"] body [class*="app-grid"] [class*="card"] [class*="logo-wrap"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* F6 — Carriers panel: unify the two adjacent KPI rows.
   Remove the sparkline divider on the second row so both rows feel identical. */
html[data-buld-theme] body #panel-carriers .carrier-kpi-spark,
html[data-buld-theme] body #panel-carriers [class*="kpi"] [class*="spark"],
html[data-buld-theme] body #panel-carriers .stat-card-sparkline {
    display: none !important;
}

/* F7 — cod-forms: lift the lonely KPI strip so it doesn't float above 75% empty viewport. */
html[data-buld-theme] body #panel-cod-forms .panel-body,
html[data-buld-theme] body #panel-cod-forms .cod-forms-content {
    min-height: auto !important;
}

/* F11 — Soften "—" empty markers across tables/KPIs. */
html[data-buld-theme] body td .em-dash,
html[data-buld-theme] body .empty-marker {
    opacity: 0.5;
    color: var(--buld-ink-3) !important;
}

/* =========================================================
   PHASE D — DOM-DRIVEN CONTRAST FIXES (v46, 2026-05-15)
   Found by /tmp/buld_deep_scanner.py — 10,953 issues catalogued.
   Top categories addressed: INVISIBLE_TEXT (235), HARDCODED_WHITE (191),
   LOW_CONTRAST (885). Path-specific fixes win over legacy body.dark leakage.
   ========================================================= */

/* D1 — "Dernières commandes" / attention-row widget.
   Legacy: body.dark .attention-body strong { color:#f1f5f9 } leaks into Light
   mode through residual body.dark class. Force light values when theme=light. */
html[data-buld-theme="light"] body .table-card-header h3,
html[data-buld-theme="light"] body .attention-header h3,
html[data-buld-theme="light"] body .attention-body strong,
html[data-buld-theme="light"] body .attention-row strong,
html[data-buld-theme="light"] body .attention-row-simple strong {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body .attention-body span,
html[data-buld-theme="light"] body .attention-row span,
html[data-buld-theme="light"] body .attention-row-simple span:not(.attention-count) {
    color: var(--buld-ink-3) !important;
}
html[data-buld-theme="dark"] body .table-card-header h3,
html[data-buld-theme="dark"] body .attention-header h3,
html[data-buld-theme="dark"] body .attention-body strong,
html[data-buld-theme="dark"] body .attention-row strong {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="dark"] body .attention-body span,
html[data-buld-theme="dark"] body .attention-row span:not(.attention-count) {
    color: var(--buld-ink-3) !important;
}

/* D2 — "Coming soon" placeholder text — same leakage pattern. */
html[data-buld-theme="light"] body .coming-soon-card h3 {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body .coming-soon-card p {
    color: var(--buld-ink-3) !important;
}

/* D3 — "Starter" / Gross-value badge: green-on-green (contrast 1.0). */
html[data-buld-theme] body #grossValueBadge,
html[data-buld-theme] body .gross-value-top .gross-value-badge,
html[data-buld-theme] body [class*="value-badge"] {
    background: rgba(20, 174, 92, 0.14) !important;
    color: #14ae5c !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
}
html[data-buld-theme="dark"] body #grossValueBadge,
html[data-buld-theme="dark"] body [class*="value-badge"] {
    background: rgba(50, 215, 75, 0.18) !important;
    color: #30D158 !important;
}

/* D4 — Appearance drawer slider values (`#mapSizeVal`, `#logoSizeVal` etc.)
   were rendering dark text on the purple `--accent` background. */
html[data-buld-theme] body .appear-slider-row span[id$="Val"],
html[data-buld-theme] body .appear-section .appear-slider-row > span {
    color: var(--buld-ink-1) !important;
    background: transparent !important;
}
html[data-buld-theme="dark"] body .appear-slider-row span[id$="Val"] {
    color: var(--buld-ink-1) !important;
}

/* D5 — Appearance drawer "Tout réinitialiser" button — `#c2bdc8` on white = 1.84. */
html[data-buld-theme="light"] body #appearResetAll,
html[data-buld-theme="light"] body .appear-actions button {
    color: var(--buld-ink-2) !important;
    background: rgba(0,0,0,0.04) !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
}
html[data-buld-theme="light"] body #appearResetAll:hover {
    background: rgba(0,0,0,0.08) !important;
}

/* D6 — Theme cards (`article.theme-card`) have inline `background:#fff` that
   stays white in Dark mode. The inner footer div also hardcodes #fff.
   These inline styles lose to our !important. */
html[data-buld-theme="dark"] body article.theme-card,
html[data-buld-theme="dark"] body article.theme-card > div {
    background: var(--buld-elevated) !important;
    border-color: var(--buld-divider) !important;
}
html[data-buld-theme="dark"] body article.theme-card span[style*="color:#0f172a"],
html[data-buld-theme="dark"] body article.theme-card span {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="dark"] body article.theme-card [data-action="preview"] {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: var(--buld-ink-2) !important;
}

/* (D7 onboarding step-label rules deleted — the stepper no longer exists) */

/* D8 — Generic: any text element whose color matches Dark ink (#f1f5f9 / #f4f4f5)
   when in Light mode → force ink-1. This catches all the cross-leakage cases at once. */
html[data-buld-theme="light"] body [style*="color:#f1f5f9"],
html[data-buld-theme="light"] body [style*="color: #f1f5f9"],
html[data-buld-theme="light"] body [style*="color:#f4f4f5"],
html[data-buld-theme="light"] body [style*="color: #f4f4f5"],
html[data-buld-theme="light"] body [style*="color:#ffffff"],
html[data-buld-theme="light"] body [style*="color: #ffffff"],
html[data-buld-theme="light"] body [style*="color:#fff;"],
html[data-buld-theme="light"] body [style*="color: #fff;"] {
    color: var(--buld-ink-1) !important;
}

/* D9 — Generic: any hardcoded #fff/#ffffff inline backgrounds in Dark mode. */
html[data-buld-theme="dark"] body [style*="background:#fff"],
html[data-buld-theme="dark"] body [style*="background-color:#fff"],
html[data-buld-theme="dark"] body [style*="background: #fff"],
html[data-buld-theme="dark"] body [style*="background-color: #fff"],
html[data-buld-theme="dark"] body [style*="background:#ffffff"],
html[data-buld-theme="dark"] body [style*="background: #ffffff"] {
    background: var(--buld-elevated) !important;
    background-color: var(--buld-elevated) !important;
}

/* D10 — Generic: any hardcoded #0f172a / #0a0a0a backgrounds in Light mode → CTA blue. */
html[data-buld-theme="light"] body [style*="background:#0f172a"],
html[data-buld-theme="light"] body [style*="background: #0f172a"],
html[data-buld-theme="light"] body [style*="background:#0a0a0a"] {
    background: var(--buld-cta) !important;
    background-color: var(--buld-cta) !important;
    color: #fff !important;
}

/* D11 — Table rows that retain dark `#1e293b`/`#0f172a` from legacy in Light mode. */
html[data-buld-theme="light"] body table tr[style*="background"]:not([style*="rgba"]) {
    background: transparent !important;
}

/* D13 — Tracking panel "En transit" / "En livraison" status text — were
   appearing as pure white text on light-grey panel (cr=1.0 in light mode). */
html[data-buld-theme="light"] body #panel-tracking td,
html[data-buld-theme="light"] body #panel-tracking [class*="status"],
html[data-buld-theme="light"] body #panel-tracking [class*="cell"] {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body #panel-tracking [class*="muted"],
html[data-buld-theme="light"] body #panel-tracking [class*="sub"] {
    color: var(--buld-ink-3) !important;
}

/* D14 — All-orders cells (170 LOW_CONTRAST findings). The legacy table CSS
   sets td color to dark-mode value. */
html[data-buld-theme="light"] body #panel-all-orders td,
html[data-buld-theme="light"] body #panel-all-orders .orders-table td,
html[data-buld-theme="light"] body #panel-all-orders .orders-table tbody td * {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body #panel-all-orders .orders-table tbody td .muted,
html[data-buld-theme="light"] body #panel-all-orders .orders-table .sub,
html[data-buld-theme="light"] body #panel-all-orders [class*="cell-sub"] {
    color: var(--buld-ink-3) !important;
}

/* D15 — orders.css has UNGATED rules with #panel-overview (ID specificity
   beats us unless we also use #panel-overview). These rules force dark colors
   on Light mode. Override them surgically. */
html[data-buld-theme="light"] body #panel-overview .attention-card,
html[data-buld-theme="light"] body #panel-overview .attention-card .table-card-header,
html[data-buld-theme="light"] body #panel-overview .attention-card .table-card-header h3,
html[data-buld-theme="light"] body #panel-overview .attention-header h3 {
    color: var(--buld-ink-1) !important;
    background: var(--buld-elevated) !important;
}
html[data-buld-theme="light"] body #panel-overview .attention-row {
    background: var(--buld-elevated-2) !important;
    border-bottom: 1px solid var(--buld-hairline) !important;
}
html[data-buld-theme="light"] body #panel-overview .attention-row strong,
html[data-buld-theme="light"] body #panel-overview .attention-row .attention-body strong {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body #panel-overview .attention-row span,
html[data-buld-theme="light"] body #panel-overview .attention-row .attention-body span:not(.attention-count) {
    color: var(--buld-ink-3) !important;
}
html[data-buld-theme="light"] body #panel-overview .attention-view {
    color: var(--buld-cta) !important;
}

/* D16 — Gross-value-card hero (overview top): orders.css forces #4f4a54 dark
   bg + #f4f4f5 white text — ugly inverted in light. */
html[data-buld-theme="light"] body #panel-overview .gross-value-card {
    background: linear-gradient(135deg, #0071E3 0%, #2997FF 100%) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 24px rgba(0, 113, 227, 0.18), 0 1px 2px rgba(0, 113, 227, 0.10) !important;
}
html[data-buld-theme="light"] body #panel-overview .gross-value-card * {
    color: #ffffff !important;
}
html[data-buld-theme="light"] body #panel-overview .gross-value-badge {
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    padding: 2px 10px !important;
    border-radius: 999px !important;
}
html[data-buld-theme="light"] body #panel-overview .est-rev-icon {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border: 0 !important;
}

/* D18 — Agent panel header (BuildPro AI / تجريبي badge) — purple-on-purple. */
html[data-buld-theme] body #agentPanel .agent-header-title {
    color: #ffffff !important;
}
html[data-buld-theme] body #agentPanel .agent-header-badge {
    background: rgba(255,255,255,0.20) !important;
    color: #ffffff !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
}

/* D19 — Toolbar buttons in panel-all-orders had hardcoded dark hover.
   Reset to follow theme. */
html[data-buld-theme="light"] body #panel-all-orders .toolbar-btn:hover,
html[data-buld-theme="light"] body .topbar-btn:hover,
html[data-buld-theme="light"] body .spacing-toggle-btn:hover,
html[data-buld-theme="light"] body .select-scope-btn:hover,
html[data-buld-theme="light"] body .bulk-btn-more:hover {
    background: rgba(0,0,0,0.06) !important;
    color: var(--buld-ink-1) !important;
    border-color: rgba(0,0,0,0.12) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* D20 — orders-theme.css `.table-card-header h3` family forces var(--om-text).
   In light mode that's correct (#1f2937), but legacy ungated #panel-*
   rules in orders.css beat it. Catch the remaining heading family. */
html[data-buld-theme="light"] body .panel-header h1,
html[data-buld-theme="light"] body .panel-header h2,
html[data-buld-theme="light"] body .section-title-row h2,
html[data-buld-theme="light"] body .funnel-header h3,
html[data-buld-theme="light"] body .stat-card-value,
html[data-buld-theme="light"] body .ord-price,
html[data-buld-theme="light"] body .dom-title,
html[data-buld-theme="light"] body .cf-title {
    color: var(--buld-ink-1) !important;
}

/* ============================================================
   PANEL SWITCH — isolate each panel's stacking context so a panel
   swap can never leave repaint artifacts bleeding across panels.
   (No translateZ/GPU layers — those caused their own flicker.)
   ============================================================ */
.panel {
    isolation: isolate;
}

/* ============================================================
   ACCOUNT AVATAR + DROPDOWN — professional user menu
   ============================================================ */
.ap-account { position: relative; display: inline-flex; align-items: center; }
.ap-avatar-btn {
    background: none; border: none; padding: 0; margin-inline-start: 4px;
    cursor: pointer; display: inline-flex; border-radius: 50%;
    transition: transform 120ms ease, box-shadow 150ms ease;
}
.ap-avatar-btn:hover { transform: translateY(-1px); }
.ap-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; letter-spacing: 0;
    color: #fff; background: linear-gradient(135deg, var(--buld-cta), #6366f1);
    box-shadow: 0 0 0 1px var(--buld-hairline);
    user-select: none; overflow: hidden;
}
.ap-account.is-open .ap-avatar { box-shadow: 0 0 0 2px var(--buld-cta); }
.ap-avatar--lg { width: 44px; height: 44px; font-size: 18px; }

.ap-account-menu {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
    min-width: 264px; padding: 8px;
    background: var(--buld-elevated-2, var(--buld-elevated));
    border: 1px solid var(--buld-hairline);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.28);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
    z-index: 200;
}
.ap-account.is-open .ap-account-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.ap-account-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.ap-account-id { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ap-account-id strong { font-size: 14px; font-weight: 600; color: var(--buld-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-account-id > span { font-size: 12px; color: var(--buld-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-account-plan {
    align-self: flex-start; margin-top: 4px; padding: 1px 8px;
    font-size: 10.5px !important; font-weight: 600; color: var(--buld-cta) !important;
    background: var(--buld-cta-soft, rgba(0,113,227,0.12)); border-radius: 980px;
}
.ap-account-sep { height: 1px; background: var(--buld-hairline); margin: 4px 0; }

.ap-account-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: none; background: none; cursor: pointer;
    font-size: 13.5px; font-weight: 500; color: var(--buld-ink-1);
    border-radius: 9px; text-align: start; font-family: inherit;
    transition: background 120ms ease, color 120ms ease;
}
.ap-account-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.8; }
.ap-account-item:hover { background: var(--buld-hover); }
.ap-account-item--danger { color: var(--buld-danger, #d33a2b); }
.ap-account-item--danger svg { opacity: 1; }
.ap-account-item--danger:hover { background: rgba(211,58,43,0.12); }

/* Account menu — plan row, upgrade, credits, external links */
.ap-account-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 10px 10px; }
.ap-account-plan {
    padding: 2px 10px; font-size: 12px !important; font-weight: 600;
    color: var(--buld-ink-2) !important; background: var(--buld-hover); border-radius: 980px;
}
.ap-account-upgrade {
    padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
    color: var(--buld-ink-1); background: var(--buld-elevated); font-family: inherit;
    border: 1px solid var(--buld-hairline); border-radius: 8px;
    transition: background 120ms ease, border-color 120ms ease;
}
.ap-account-upgrade:hover { background: var(--buld-hover); border-color: var(--buld-divider); }
.ap-account-item--credits .ap-account-credits { margin-inline-start: auto; font-weight: 600; color: var(--buld-ink-2); font-size: 13px; }
.ap-account-item--credits .ap-account-chev { width: 15px; height: 15px; opacity: 0.5; }
.ap-account-item .ap-account-ext { width: 15px; height: 15px; margin-inline-start: auto; opacity: 0.45; }
.ap-account-item { text-decoration: none; }

/* ============================================================
   NOTIFICATIONS — slide-in drawer
   ============================================================ */
.ap-notif-btn { position: relative; }
.ap-notif-dot {
    position: absolute; top: 2px; inset-inline-end: 2px; min-width: 15px; height: 15px;
    padding: 0 3px; border-radius: 980px; background: var(--buld-danger, #d33a2b);
    color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
    box-shadow: 0 0 0 2px var(--buld-topbar-bg);
}
.ap-notif-panel { position: fixed; inset: 0; z-index: 1000; pointer-events: none; visibility: hidden; }
.ap-notif-panel.is-open { visibility: visible; }
.ap-notif-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.35);
    opacity: 0; transition: opacity 220ms ease;
}
.ap-notif-drawer {
    position: absolute; top: 0; inset-inline-end: 0; height: 100%;
    width: 400px; max-width: 92vw; display: flex; flex-direction: column;
    background: var(--buld-elevated-2, var(--buld-elevated));
    border-inline-start: 1px solid var(--buld-hairline);
    box-shadow: -16px 0 48px rgba(0,0,0,0.25);
    transform: translateX(100%); transition: transform 260ms cubic-bezier(0.32,0.72,0,1);
}
.ap-notif-panel.is-open { pointer-events: auto; }
.ap-notif-panel.is-open .ap-notif-backdrop { opacity: 1; }
.ap-notif-panel.is-open .ap-notif-drawer { transform: translateX(0); }

.ap-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 14px; }
.ap-notif-head h2 { margin: 0; font-size: 19px; font-weight: 600; color: var(--buld-ink-1); letter-spacing: -0.02em; }
.ap-notif-close {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--buld-ink-3); border-radius: 8px; cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.ap-notif-close:hover { background: var(--buld-hover); color: var(--buld-ink-1); }
.ap-notif-close svg { width: 18px; height: 18px; }

.ap-notif-tabs { display: flex; gap: 6px; padding: 0 18px 6px; border-bottom: 1px solid var(--buld-hairline); }
.ap-notif-tab {
    padding: 8px 14px; border: none; background: transparent; cursor: pointer; font-family: inherit;
    font-size: 13.5px; font-weight: 500; color: var(--buld-ink-3); border-radius: 8px 8px 0 0;
    position: relative; transition: color 120ms ease;
}
.ap-notif-tab:hover { color: var(--buld-ink-1); }
.ap-notif-tab.is-active { color: var(--buld-ink-1); font-weight: 600; }
.ap-notif-tab.is-active::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
    background: var(--buld-cta); border-radius: 2px;
}

.ap-notif-list { flex: 1; overflow-y: auto; padding: 8px; }
.ap-notif-item {
    position: relative; padding: 14px 14px; margin: 4px 2px; border-radius: 12px;
    cursor: pointer; transition: background 130ms ease;
}
.ap-notif-item:hover { background: var(--buld-hover); }
.ap-notif-item.is-unread { background: var(--buld-cta-soft, rgba(0,113,227,0.07)); }
.ap-notif-item.is-unread::before {
    content: ''; position: absolute; top: 18px; inset-inline-start: 4px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--buld-cta);
}
.ap-notif-item.is-unread { padding-inline-start: 20px; }
.ap-notif-item h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--buld-ink-1); }
.ap-notif-item p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--buld-ink-3); }
.ap-notif-item time { font-size: 11.5px; color: var(--buld-ink-4); }
.ap-notif-badge {
    float: inline-end; margin-inline-start: 8px; padding: 2px 8px; border-radius: 980px;
    font-size: 10px; font-weight: 700; color: var(--buld-cta);
    background: var(--buld-cta-soft, rgba(0,113,227,0.12));
}
.ap-notif-empty { padding: 48px 20px; text-align: center; color: var(--buld-ink-4); font-size: 13.5px; }

.ap-notif-foot { padding: 12px 18px; border-top: 1px solid var(--buld-hairline); }
.ap-notif-readall {
    width: 100%; padding: 9px; border: 1px solid var(--buld-hairline); background: transparent;
    color: var(--buld-ink-2); border-radius: 9px; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 500; transition: background 120ms ease, color 120ms ease;
}
.ap-notif-readall:hover { background: var(--buld-hover); color: var(--buld-ink-1); }

/* ============================================================
   APP CARDS — logo hero on white, body keeps themed surface
   ============================================================ */
html[data-buld-theme] body #panel-applications .apps-hero {
    background: #ffffff !important;
    border-bottom: 1px solid var(--buld-hairline) !important;
}

/* ============================================================
   GRAND BATTLE — theme-correct KPI cards & empty states
   High specificity (theme + body.dashboard-body + #panel) so these win
   over the legacy rules that left invisible text (audit-verified).
   ============================================================ */
/* LIGHT MODE — hero value cards are LIGHT here; their text must be dark ink,
   not the white it inherits from the shared rule. */
html[data-buld-theme="light"] body.dashboard-body #panel-overview .gross-value-card,
html[data-buld-theme="light"] body.dashboard-body #panel-overview .gross-value-card *,
html[data-buld-theme="light"] body.dashboard-body #panel-overview .estimated-rev-card,
html[data-buld-theme="light"] body.dashboard-body #panel-overview .estimated-rev-card * {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body.dashboard-body #panel-overview .gross-value-card [class*="sublabel"],
html[data-buld-theme="light"] body.dashboard-body #panel-overview .gross-value-card [class*="label"],
html[data-buld-theme="light"] body.dashboard-body #panel-overview .estimated-rev-card [class*="label"] {
    color: var(--buld-ink-3) !important;
}
/* (LIGHT MODE KPI boxes deleted — the strip is one .p-card with transparent cells, see premium.css) */
/* DARK MODE — these surfaces were stuck white (white-on-white text). */
html[data-buld-theme="dark"] body.dashboard-body #panel-stopdesk .sd-kpi-strip,
html[data-buld-theme="dark"] body.dashboard-body #panel-stopdesk .sd-toolbar,
html[data-buld-theme="dark"] body.dashboard-body #panel-confirmation .call-queue,
html[data-buld-theme="dark"] body.dashboard-body #panel-shipping .eo2-empty,
html[data-buld-theme="dark"] body.dashboard-body #panel-shipping [class*="empty"] {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border-color: var(--buld-hairline) !important;
}
html[data-buld-theme="dark"] body.dashboard-body #panel-stopdesk .sd-kpi-strip *,
html[data-buld-theme="dark"] body.dashboard-body #panel-stopdesk .sd-toolbar *,
html[data-buld-theme="dark"] body.dashboard-body #panel-confirmation .call-queue *,
html[data-buld-theme="dark"] body.dashboard-body #panel-shipping [class*="empty"] * {
    color: var(--buld-ink-1) !important;
}

/* ============================================================
   GRAND BATTLE — phase 2: remaining contrast offenders
   (each selector pinned via live-DOM probe)
   ============================================================ */
/* DARK — carrier selector side panel kept a white classless box */
html[data-buld-theme="dark"] body #panel-shipping .carrier-selector,
html[data-buld-theme="dark"] body #panel-shipping .carrier-grid,
html[data-buld-theme="dark"] body #panel-shipping .carrier-grid > div {
    background: var(--buld-elevated) !important;
    color: var(--buld-ink-1) !important;
    border-color: var(--buld-hairline) !important;
}
/* DARK — stop-desk empty state used near-black ink on the dark surface */
html[data-buld-theme="dark"] body .sd-empty-state,
html[data-buld-theme="dark"] body .sd-empty-state .sd-empty-title,
html[data-buld-theme="dark"] body .sd-empty-state * {
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="dark"] body .sd-empty-state [class*="sub"],
html[data-buld-theme="dark"] body .sd-empty-state p {
    color: var(--buld-ink-3) !important;
}
/* DARK — dropzones stayed white while their hint text was near-white */
html[data-buld-theme="dark"] body #panel-add-product .ap-image-zone,
html[data-buld-theme="dark"] body #panel-landing-pages .upload-zone {
    background: var(--buld-surface-2, #3a363f) !important;
    border-color: var(--buld-divider) !important;
    color: var(--buld-ink-1) !important;
}
/* DARK — "(facultatif)" hint sits on a white builder card: use dark hint ink */
html[data-buld-theme="dark"] body #panel-landing-pages .lp-field-opt {
    color: #6E6E73 !important;
}
/* LIGHT — outline buttons in table headers kept a dark surface */
html[data-buld-theme="light"] body .yaya-scope .btn-outline,
html[data-buld-theme="light"] body .orders-table-card-header .btn-outline {
    background: var(--buld-elevated-2, #ffffff) !important;
    color: var(--buld-ink-1) !important;
    border: 1px solid var(--buld-divider) !important;
}
/* LIGHT — pagination info was too faint on the page background */
html[data-buld-theme="light"] body .table-info,
html[data-buld-theme="light"] body .table-footer-start {
    color: var(--buld-ink-3) !important;
}
/* LIGHT — order modal rows kept the dark hover surface behind labels */
html[data-buld-theme="light"] body .order-modal,
html[data-buld-theme="light"] body .order-modal .om-body,
html[data-buld-theme="light"] body .order-modal .om-row {
    background: var(--buld-elevated-2, #ffffff) !important;
    color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body .order-modal .om-label {
    color: var(--buld-ink-3) !important;
}

/* ============================================================
   HOME SHORTCUTS — Shopify-admin style quick actions row
   ============================================================ */
.home-shortcuts {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin: 4px 0 18px;
}
.home-shortcut {
    display: flex; align-items: center; gap: 12px; text-align: start;
    padding: 14px 16px; cursor: pointer; font-family: inherit;
    background: var(--buld-elevated); border: 1px solid var(--buld-hairline);
    border-radius: var(--buld-radius-card, 18px);
    transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
}
.home-shortcut:hover { background: var(--buld-hover); transform: translateY(-1px); border-color: var(--buld-divider); }
.hs-ico {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--buld-cta-soft); color: var(--buld-cta); font-size: 0;
}
.hs-ico svg, .hs-ico i { width: 18px; height: 18px; }
.hs-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-txt strong { font-size: 13.5px; font-weight: 600; color: var(--buld-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-txt small { font-size: 11.5px; color: var(--buld-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .home-shortcuts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .home-shortcuts { grid-template-columns: 1fr; } }

/* ============================================================
   LANGUAGES — FR / EN / AR (app/i18n/buld-i18n.js)
   ============================================================ */
/* FR · EN · ع segment, after the theme toggle. Fixed LTR order in every language. */
.ap-lang {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    margin: 0 6px;
    border-radius: var(--buld-radius-pill);
    background: var(--buld-hover);
    border: 1px solid var(--buld-hairline);
    direction: ltr;
}
.ap-lang-btn {
    min-width: 24px;
    padding: 4px 7px;
    border: none;
    border-radius: var(--buld-radius-pill);
    background: transparent;
    color: var(--buld-ink-3);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background var(--buld-dur-hover) ease, color var(--buld-dur-hover) ease;
}
.ap-lang-btn:hover { color: var(--buld-ink-1); }
.ap-lang-btn.is-active {
    background: var(--buld-elevated-2);
    color: var(--buld-ink-1);
    box-shadow: var(--buld-shadow);
}
html[data-buld-theme="dark"] .ap-lang-btn.is-active { background: var(--buld-hover); }
.ap-lang-btn:focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 1px; }
.ap-lang-btn[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--buld-font-text) !important; font-size: 13px; }

/* Arabic: Arabic typeface first (Latin digits and brand names keep SF Pro), no negative tracking. */
:root[data-buld-theme][data-buld-lang="ar"] {
    --buld-font-display: "IBM Plex Sans Arabic", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --buld-font-text:    "IBM Plex Sans Arabic", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --buld-tracking:     0;
}

/* While a dictionary loads (first visit in EN/AR), hide French instead of flashing it. Max 1.5 s. */
html.buld-i18n-pending body { visibility: hidden; }