/* ============================================================
   BuildPro AI — Canonical Sidebar (.ds-sidebar)
   ────────────────────────────────────────────────────────────
   Single source of truth for left navigation across:
     admin / dashboard / orders / store-builder / app-shell.
   Style: flat French analytics — white surface, fine borders,
   restrained blue accent, Inter, sober counters.

   Tokens come from app/design-system/tokens.css. Do NOT
   redeclare colors / sizes here — extend tokens instead.
   ============================================================ */

.ds-sidebar {
    --_w: var(--sidebar-w, 248px);
    --_w-collapsed: var(--sidebar-collapsed-w, 68px);

    width: var(--_w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: var(--text-sm, 13px);
    font-feature-settings: 'cv11', 'ss01';
    box-shadow: var(--sidebar-shadow-rail);
    height: 100vh;
    align-self: stretch;
    overflow: hidden;
    transition: width var(--duration-normal, 220ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    z-index: var(--z-sticky, 200);
}

/* When parent has constrained height (.app-shell, .app-layout, .shell), the
   sidebar fills the parent instead of overflowing the viewport. The mount
   wrapper uses display:contents so we match by descendant, not direct child. */
.app-shell .ds-sidebar,
.app-layout .ds-sidebar,
.shell .ds-sidebar {
    height: auto;
    min-height: 0;
    align-self: stretch;
}

/* ----- Collapsed (rail) state ----- */
.ds-sidebar[data-collapsed="true"] {
    width: var(--_w-collapsed);
}
.ds-sidebar[data-collapsed="true"] .ds-sidebar__label,
.ds-sidebar[data-collapsed="true"] .ds-sidebar__count,
.ds-sidebar[data-collapsed="true"] .ds-sidebar__chevron,
.ds-sidebar[data-collapsed="true"] .ds-sidebar__group-label,
.ds-sidebar[data-collapsed="true"] .ds-sidebar__brand-text,
.ds-sidebar[data-collapsed="true"] .ds-sidebar__search,
.ds-sidebar[data-collapsed="true"] .ds-sidebar__subitems,
.ds-sidebar[data-collapsed="true"] .ds-sidebar__footer-text {
    display: none;
}
.ds-sidebar[data-collapsed="true"] .ds-sidebar__item {
    justify-content: center;
    padding-inline: 0;
}

/* ============================================================
   BRAND
   ============================================================ */
.ds-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 16px;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}
.ds-sidebar__brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--sidebar-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.ds-sidebar__brand-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--sidebar-active-text);
    letter-spacing: -0.01em;
}
.ds-sidebar__collapse {
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--sidebar-text-muted);
    cursor: pointer;
    transition: background 120ms ease-out;
}
.ds-sidebar__collapse:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }

/* ============================================================
   SEARCH
   ============================================================ */
.ds-sidebar__search {
    padding: 12px 12px 4px;
    flex-shrink: 0;
}
.ds-sidebar__search-btn {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: var(--sidebar-hover);
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--sidebar-text-muted);
    cursor: pointer;
    transition: border-color 120ms ease-out, background 120ms ease-out;
    text-align: start;
}
.ds-sidebar__search-btn:hover {
    background: var(--sidebar-bg);
    border-color: var(--sidebar-border);
}
.ds-sidebar__search-btn .ds-sidebar__kbd {
    margin-inline-start: auto;
    padding: 1px 5px;
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 4px;
    font-size: 10.5px;
    color: var(--sidebar-text-muted);
    font-family: var(--font-mono, monospace);
}

/* ============================================================
   NAV — groups + items
   ============================================================ */
.ds-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border) transparent;
}
.ds-sidebar__nav::-webkit-scrollbar { width: 6px; }
.ds-sidebar__nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}
.ds-sidebar__nav:hover::-webkit-scrollbar-thumb { background: var(--sidebar-border); }

.ds-sidebar__group { display: flex; flex-direction: column; gap: 1px; }
.ds-sidebar__group + .ds-sidebar__group { margin-top: 12px; }

.ds-sidebar__group-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sidebar-section-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 12px 4px;
    user-select: none;
}

.ds-sidebar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background 120ms ease-out, color 120ms ease-out;
    border: none;
    background: transparent;
    width: 100%;
    text-align: start;
    white-space: nowrap;
}
.ds-sidebar__item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-active-text);
}
.ds-sidebar__item:focus-visible {
    outline: 2px solid var(--sidebar-accent);
    outline-offset: -2px;
}

.ds-sidebar__item[aria-current="page"] {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}
.ds-sidebar__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-inline-start: -8px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--sidebar-accent);
    border-radius: 0 2px 2px 0;
}
.ds-sidebar__item[aria-current="page"] .ds-sidebar__icon { color: var(--sidebar-icon-active); }

.ds-sidebar__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--sidebar-icon);
    display: grid;
    place-items: center;
}
.ds-sidebar__icon svg { width: 100%; height: 100%; stroke-width: 1.75; }

.ds-sidebar__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.ds-sidebar__count {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: 10.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.ds-sidebar__count[data-tone="strong"] {
    background: var(--badge-bg-strong);
    color: var(--badge-text-strong);
}
.ds-sidebar__count[data-tone="accent"] {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-accent);
}

.ds-sidebar__badge {
    height: 18px;
    padding: 0 7px;
    border-radius: 9px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
}
.ds-sidebar__badge[data-tone="green"] { background: #dcfce7; color: #15803d; }
.ds-sidebar__badge[data-tone="amber"] { background: #fef3c7; color: #b45309; }
.ds-sidebar[data-collapsed="true"] .ds-sidebar__badge { display: none; }

.ds-sidebar__item.is-featured {
    background: linear-gradient(90deg, rgba(16,185,129,.10), transparent);
    border-inline-end: 3px solid #10b981;
}
.ds-sidebar__item.is-featured .ds-sidebar__label { color: #047857; font-weight: 600; }
.ds-sidebar__item.is-featured .ds-sidebar__icon { color: #10b981; }
.ds-sidebar__item.is-featured:hover { background: linear-gradient(90deg, rgba(16,185,129,.16), transparent); }
body.dark .ds-sidebar__item.is-featured .ds-sidebar__label { color: #6ee7b7; }

.ds-sidebar__chevron {
    width: 14px;
    height: 14px;
    color: var(--sidebar-text-muted);
    transition: transform 150ms ease-out;
}
.ds-sidebar__item[aria-expanded="true"] .ds-sidebar__chevron {
    transform: rotate(90deg);
}
[dir="rtl"] .ds-sidebar__item[aria-expanded="true"] .ds-sidebar__chevron {
    transform: rotate(-90deg);
}

/* ----- Subitems ----- */
.ds-sidebar__subitems {
    display: none;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 4px;
    margin-inline-start: 26px;
    border-inline-start: 1px solid var(--sidebar-divider);
    padding-inline-start: 8px;
}
.ds-sidebar__item[aria-expanded="true"] + .ds-sidebar__subitems { display: flex; }

.ds-sidebar__subitem {
    height: 28px;
    padding: 0 10px;
    border-radius: 5px;
    color: var(--sidebar-text-muted);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out;
}
.ds-sidebar__subitem:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-active-text);
}
.ds-sidebar__subitem[aria-current="page"] {
    color: var(--sidebar-active-text);
    background: var(--sidebar-hover);
    font-weight: 600;
}

.ds-sidebar__divider {
    height: 1px;
    background: var(--sidebar-divider);
    margin: 8px 4px;
    border: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ds-sidebar__footer {
    flex-shrink: 0;
    padding: 10px 12px;
    border-top: 1px solid var(--sidebar-border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.ds-sidebar__footer-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sidebar-accent), #6b8ee8);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 11px;
    flex-shrink: 0;
}
.ds-sidebar__footer-text {
    flex: 1;
    overflow: hidden;
}
.ds-sidebar__footer-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sidebar-active-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.ds-sidebar__footer-meta {
    font-size: 11px;
    color: var(--sidebar-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* ============================================================
   MOBILE — off-canvas drawer
   ============================================================ */
@media (max-width: 1024px) {
    .ds-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        transform: translateX(-100%);
        transition: transform 220ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
        box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,.1));
        z-index: var(--z-drawer, 300);
    }
    [dir="rtl"] .ds-sidebar { transform: translateX(100%); }
    .ds-sidebar[data-mobile-open="true"] { transform: translateX(0); }

    .ds-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.4);
        z-index: calc(var(--z-drawer, 300) - 1);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease-out;
    }
    .ds-sidebar-backdrop[data-visible="true"] {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ============================================================
   SECONDARY VARIANT (used as second sidebar in orders.html spy)
   ============================================================ */
.ds-sidebar--secondary {
    background: var(--sidebar-hover);
    box-shadow: inset 1px 0 0 var(--sidebar-border);
}
.ds-sidebar--secondary .ds-sidebar__brand { background: transparent; }

/* ============================================================
    DARK MODE — unified BuildPro grey + brand-blue palette
   ────────────────────────────────────────────────────────────
   One neutral grey shell (#3f3e40) for ALL surfaces (topbar,
   sidebar, cards, panels, boxes, modals) + a single accent
    (BuildPro brand blue #2f63d8 / #5b8def) for active states,
   primary actions, KPI sparklines & links.
   ============================================================ */
body.dark,
body.dark-mode {
    /* Surfaces — built around signature #4f4a54 */
    --bp-dark-bg:        #ebebeb;   /* page background (a touch darker) */
    --bp-dark-surface:   #4f4a54;   /* cards, topbar, sidebar — SIGNATURE */
    --bp-dark-surface-2: #5a5560;   /* hover / nested */
    --bp-dark-surface-3: #6a6470;   /* active / pressed */
    --bp-dark-border:    #635e69;
    --bp-dark-border-2:  #756f7c;
    --bp-dark-text:      #f1f1f2;
    --bp-dark-text-muted:#c2bdc8;

    /* Brand accent (BuildPro blue) */
    --bp-accent:         #2f63d8;
    --bp-accent-hover:   #3f73e8;
    --bp-accent-soft:    rgba(91, 141, 239, 0.18);
    --bp-accent-text:    #8ab4ff;

    /* Override legacy card variables used across the codebase */
    --card-bg:           var(--bp-dark-surface);
    --card-border:       var(--bp-dark-border);
    --sys-bg:            var(--bp-dark-bg);
}

/* ---------- Page background ---------- */
body.dark.dashboard-body,
body.dark,
body.dark-mode {
    background: var(--bp-dark-bg) !important;
    color: var(--bp-dark-text);
}

/* ---------- Top bar ---------- */
body.dark .topbar-global,
body.dark .topbar,
body.dark-mode .topbar-global,
body.dark-mode .topbar {
    background: var(--bp-dark-surface) !important;
    border-color: var(--bp-dark-border) !important;
    color: var(--bp-dark-text) !important;
}

/* ---------- ALL card / panel / box / section surfaces ----------
   Universal wildcard: catches *-card, *-panel, *-box, *-section
   no matter where they live (orders / dashboard / store-builder /
   admin / spy / commerce). Overrides scoped selectors via !important.
*/
body.dark [class*="-card"],
body.dark [class*="-panel"],
body.dark [class*="-box"],
body.dark .funnel-section,
body.dark .plan-usage-banner,
body.dark .settings-card,
body.dark .modal-box,
body.dark .modal-content,
body.dark .modal-body,
body.dark .switcher-card,
body.dark-mode [class*="-card"],
body.dark-mode [class*="-panel"],
body.dark-mode [class*="-box"] {
    background: var(--bp-dark-surface) !important;
    border-color: var(--bp-dark-border) !important;
    color: var(--bp-dark-text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Hover lift (neutral) */
body.dark [class*="-card"]:hover,
body.dark-mode [class*="-card"]:hover {
    border-color: var(--bp-dark-border-2) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
}

/* ---------- Inner text inside cards ---------- */
body.dark [class*="-card"] .stat-card-value,
body.dark [class*="-card"] [class*="-value"],
body.dark [class*="-card"] [class*="-title"] {
    color: var(--bp-dark-text);
}
body.dark [class*="-card"] .stat-card-label,
body.dark [class*="-card"] [class*="-label"],
body.dark [class*="-card"] [class*="-subtitle"],
body.dark [class*="-card"] [class*="-muted"] {
    color: var(--bp-dark-text-muted);
}

/* ---------- BuildPro brand-blue accent ---------- */
/* Primary CTA buttons */
body.dark .btn-primary,
body.dark .btn-blue,
body.dark .topbar-btn.primary,
body.dark .ds-sidebar__item.is-active,
body.dark-mode .btn-primary {
    background: var(--bp-accent) !important;
    border-color: var(--bp-accent) !important;
    color: #fff !important;
}
body.dark .btn-primary:hover,
body.dark .btn-blue:hover,
body.dark-mode .btn-primary:hover {
    background: var(--bp-accent-hover) !important;
    border-color: var(--bp-accent-hover) !important;
}

/* Active/selected states */
body.dark .nav-item.active,
body.dark .sidebar-item.active,
body.dark .tab.active,
body.dark .pill.active,
body.dark .switcher-card.active {
    background: var(--bp-accent-soft) !important;
    color: var(--bp-accent-text) !important;
    border-color: var(--bp-accent) !important;
}

/* Links inside dark surfaces */
body.dark a,
body.dark-mode a {
    color: var(--bp-accent-text);
}

/* Sparklines / KPI accent strokes already use blue — keep them as is */

/* ---------- Borders & dividers ---------- */
body.dark hr,
body.dark .divider,
body.dark [class*="-divider"] {
    border-color: var(--bp-dark-border) !important;
    background: var(--bp-dark-border) !important;
}

/* ---------- Inputs ---------- */
body.dark input,
body.dark select,
body.dark textarea,
body.dark .search-box,
body.dark .form-control {
    background: var(--bp-dark-surface-2) !important;
    border-color: var(--bp-dark-border) !important;
    color: var(--bp-dark-text) !important;
}
body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
    border-color: var(--bp-accent) !important;
    box-shadow: 0 0 0 3px var(--bp-accent-soft) !important;
}

/* ---------- Tables ---------- */
body.dark table,
body.dark .table {
    background: var(--bp-dark-surface) !important;
    color: var(--bp-dark-text);
}
body.dark th,
body.dark td {
    border-color: var(--bp-dark-border) !important;
}
body.dark tr:hover {
    background: var(--bp-dark-surface-2) !important;
}

/* ---------- Override legacy navy/dark-blue spots ----------
   Some legacy rules hardcoded #0c1222 / #162032. Force them
   back to neutral grey so nothing leaks the old palette.
*/
body.dark [style*="#0c1222"],
body.dark [style*="#162032"] {
    background-color: var(--bp-dark-surface) !important;
}

/* ============================================================
   DARK MODE — High-specificity overrides for legacy panels
   The legacy CSS scopes many rules to #panel-* IDs which beat
   class selectors. We mirror the same specificity here so the
   unified grey palette actually applies inside those panels.
   ============================================================ */

/* ---------- #panel-all-orders ---------- */
body.dark #panel-all-orders .orders-kpi-row,
body.dark #panel-all-orders .orders-kpi-card,
body.dark #panel-all-orders .orders-table-card,
body.dark #panel-all-orders .orders-reference-table td,
body.dark #panel-all-orders .bulk-actions,
body.dark #panel-all-orders .orders-toolbar,
body.dark #panel-all-orders .orders-toolbar-flat {
    background: var(--bp-dark-surface) !important;
    border-color: var(--bp-dark-border) !important;
    color: var(--bp-dark-text) !important;
}
body.dark #panel-all-orders .orders-reference-table thead th {
    background: var(--bp-dark-surface-2) !important;
    color: var(--bp-dark-text) !important;
    border-bottom-color: var(--bp-dark-border) !important;
}
body.dark #panel-all-orders tbody tr:hover {
    background: var(--bp-dark-surface-2) !important;
}
body.dark #panel-all-orders .orders-kpi-label {
    color: var(--bp-dark-text-muted) !important;
}
body.dark #panel-all-orders .orders-kpi-value,
body.dark #panel-all-orders .orders-table-card-header h3 {
    color: var(--bp-dark-text) !important;
}

/* ---------- #panel-carriers ---------- */
body.dark #panel-carriers .integ-stat-card,
body.dark #panel-carriers .carrier-kpi-card,
body.dark #panel-carriers .carrier-kpi-card.purple,
body.dark #panel-carriers .carrier-kpi-card.blue,
body.dark #panel-carriers .carrier-kpi-card.red,
body.dark #panel-carriers .carrier-kpi-card.green,
body.dark #panel-carriers .carrier-analytics-card,
body.dark #panel-carriers .table-card {
    background: var(--bp-dark-surface) !important;
    border-color: var(--bp-dark-border) !important;
    color: var(--bp-dark-text) !important;
}
body.dark #panel-carriers .integ-stat-label,
body.dark #panel-carriers .carrier-kpi-top,
body.dark #panel-carriers .carrier-kpi-card small {
    color: var(--bp-dark-text-muted) !important;
}
body.dark #panel-carriers .integ-stat-value,
body.dark #panel-carriers .carrier-kpi-card strong,
body.dark #panel-carriers .carrier-analytics-card h3,
body.dark #panel-carriers .table-card h3 {
    color: var(--bp-dark-text) !important;
}

/* ---------- #panel-overview ---------- */
body.dark #panel-overview .stats-grid,
body.dark #panel-overview .stats-grid .stat-card,
body.dark #panel-overview .overview-hero-shell,
body.dark #panel-overview .command-center-strip,
body.dark #panel-overview .brief-block,
body.dark #panel-overview .hero-metric-tile,
body.dark #panel-overview .focus-metric-card,
body.dark #panel-overview .priority-item {
    background: var(--bp-dark-surface) !important;
    border-color: var(--bp-dark-border) !important;
    color: var(--bp-dark-text) !important;
}
body.dark #panel-overview .stats-grid .stat-card-value,
body.dark #panel-overview .overview-hero-copy h1,
body.dark #panel-overview .hero-metric-tile strong {
    color: var(--bp-dark-text) !important;
}
body.dark #panel-overview .overview-overline,
body.dark #panel-overview .hero-tag,
body.dark #panel-overview .command-chip,
body.dark #panel-overview .priority-strong {
    color: var(--bp-dark-text-muted) !important;
}

/* ---------- Toolbars / tabs / pills (universal) ---------- */
body.dark .toolbar-btn,
body.dark .filter-tab,
body.dark .nav-tab,
body.dark .ord-phone,
body.dark .ord-location {
    background: var(--bp-dark-surface-2) !important;
    border-color: var(--bp-dark-border) !important;
    color: var(--bp-dark-text) !important;
}
body.dark .toolbar-btn:hover,
body.dark .filter-tab:hover {
    background: var(--bp-dark-surface-3) !important;
    border-color: var(--bp-dark-border-2) !important;
}
body.dark .toolbar-btn.active,
body.dark .filter-tab.active,
body.dark .nav-tab.active {
    background: var(--bp-accent-soft) !important;
    border-color: var(--bp-accent) !important;
    color: var(--bp-accent-text) !important;
}

/* ---------- Tables (universal) ---------- */
body.dark thead,
body.dark thead th {
    background: var(--bp-dark-surface-2) !important;
    color: var(--bp-dark-text) !important;
    border-color: var(--bp-dark-border) !important;
}
body.dark tbody td {
    border-color: var(--bp-dark-border) !important;
    color: var(--bp-dark-text);
}

/* ---------- Search/inputs that were navy ---------- */
body.dark .sidebar-search,
body.dark .search-box,
body.dark .new-order-details,
body.dark .form-input,
body.dark .call-notes,
body.dark .credits-bar,
body.dark .profit-margin-bar,
body.dark .product-thumb,
body.dark .w-bar {
    background: var(--bp-dark-surface-2) !important;
    border-color: var(--bp-dark-border) !important;
    color: var(--bp-dark-text) !important;
}

/* ============================================================
   PHASE 1 POLISH — Layout fixes + section labels + dark accents
   ============================================================ */

/* ---------- Section labels in legacy sidebars (orders/dashboard/store-builder) ---------- */
.sidebar .nav-section-title,
.nav-section-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    padding: 14px 16px 6px !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
}
body.dark .sidebar .nav-section-title,
body.dark .nav-section-title {
    color: var(--bp-dark-text-muted, #b8b7ba) !important;
}

/* ---------- Page height contract ----------
   Final shell model for dashboard/order pages:
   - the browser page itself never scrolls
   - .app-layout owns the exact viewport area under the 60px topbar
   - the sidebar fills that area and keeps its own nav scroll
   - .main-content fills that area and is the only content scroller
   This removes both failure modes: sidebar longer than page and page longer than sidebar. */
html,
body.dashboard-body {
    height: 100%;
    overflow: hidden !important;
}
body.dashboard-body {
    min-height: 100dvh !important;
}
.topbar-global {
    flex: 0 0 60px;
}
.app-layout {
    display: flex !important;
    flex: 1 1 auto !important;
    height: calc(100dvh - 60px) !important;
    min-height: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
}
.sidebar,
.sidebar-spy {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
}
.main-content,
.app-layout > .main-content,
.main-content-spy,
.app-layout > .main-content-spy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.panel,
.app-layout .panel {
    min-height: auto !important;
    padding-bottom: 32px;
}

/* ---------- Sidebar footer sticky so all nav items reachable (Domains visible) ---------- */
.sidebar:not([hidden]):not([data-ds-hidden]) {
    display: flex;
    flex-direction: column;
}
.sidebar[hidden],
.sidebar[data-ds-hidden] {
    display: none !important;
}
.sidebar .sidebar-nav,
.sidebar .nav-content,
.sidebar nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
.sidebar .sidebar-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    background: inherit;
    border-top: 1px solid var(--card-border, #e5e7eb);
    z-index: 2;
}
body.dark .sidebar .sidebar-footer {
    background: var(--bp-dark-surface) !important;
    border-top-color: var(--bp-dark-border) !important;
}

/* ---------- Dark polish: tame stray purple/cyan accents ---------- */
body.dark .system-switch,
body.dark .system-switch-track {
    display: none !important; /* legacy switch removed from topbar */
}

/* The thin gradient line above orders-table-card */
body.dark .orders-table-card::before,
body.dark .table-card::before {
    background: var(--bp-accent) !important;
    opacity: 0.6;
}

/* Replace common legacy purples with brand blue inside dark */
body.dark .badge-shipped { background: var(--bp-accent-soft) !important; color: var(--bp-accent-text) !important; border-color: var(--bp-accent) !important; }
body.dark .ord-action-btn.act-view { background: var(--bp-accent-soft) !important; color: var(--bp-accent-text) !important; }
body.dark .stat-card-icon.purple { background: var(--bp-accent-soft) !important; color: var(--bp-accent-text) !important; }

/* Topbar buttons in dark — uniform style */
body.dark .topbar-system-link,
body.dark .lang-toggle,
body.dark .topbar-btn {
    background: var(--bp-dark-surface-2) !important;
    border: 1px solid var(--bp-dark-border) !important;
    color: var(--bp-dark-text) !important;
}
body.dark .topbar-system-link:hover,
body.dark .topbar-btn:hover {
    background: var(--bp-dark-surface-3) !important;
    border-color: var(--bp-dark-border-2) !important;
}
body.dark .topbar-system-link span,
body.dark .topbar-system-link i,
body.dark .topbar-btn i {
    color: var(--bp-dark-text) !important;
}

/* Lang toggle slider blue */
body.dark .lang-slider {
    background: var(--bp-accent) !important;
}

/* ---------- Sidebar store-switcher host ---------- */
.sidebar-store-host {
    padding: 10px 12px 6px;
    border-bottom: 1px solid var(--card-border, #ececec);
    margin-bottom: 4px;
}
.sidebar-store-host .store-switcher,
.sidebar-store-host .store-switcher-btn {
    width: 100%;
    box-sizing: border-box;
}
.sidebar-store-host .store-switcher-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--card-border, #ececec);
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font: 600 13px/1.2 'Inter', sans-serif;
    color: #1f2937;
}
.sidebar-store-host .store-switcher-name {
    flex: 1;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.dark .sidebar-store-host {
    border-bottom-color: var(--bp-dark-border) !important;
}
body.dark .sidebar-store-host .store-switcher-btn {
    background: var(--bp-dark-surface-2) !important;
    border-color: var(--bp-dark-border) !important;
    color: var(--bp-dark-text) !important;
}
body.dark .sidebar-store-host .store-switcher-btn:hover {
    background: var(--bp-dark-surface-3) !important;
}

/* ---------- Eye button (live store link) inside dropdown ---------- */
.ss-item { position: relative; }
.ss-item-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-inline-start: 6px;
    border-radius: 6px;
    color: #6b7280;
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all .15s ease;
}
.ss-item-eye:hover {
    color: var(--bp-accent, #2f63d8);
    background: rgba(47, 99, 216, 0.10);
    border-color: rgba(47, 99, 216, 0.25);
}
.ss-item-eye svg { width: 16px; height: 16px; }
body.dark .ss-item-eye { color: var(--bp-dark-text-muted); }
body.dark .ss-item-eye:hover {
    color: var(--bp-accent-text);
    background: var(--bp-accent-soft);
    border-color: var(--bp-accent);
}

/* ============================================================
   PHASE 1.1 — Final dark polish (cover legacy decorative bits)
   ============================================================ */

/* Decorative gradient lines / glows that look broken in dark */
body.dark .stat-card::before,
body.dark .table-card::before,
body.dark .revenue-card::before,
body.dark .call-card::before,
body.dark .orders-table-card::before,
body.dark .integ-stat-card::before,
body.dark .new-order-card::before,
body.dark [class*="-card"]::before {
    background: var(--bp-accent) !important;
    opacity: 0.35 !important;
}

/* Remove gradient underlays on dashboard buttons/sliders that show purple tint in dark */
body.dark .lp-analyze-card::before,
body.dark .demo-image-card::before,
body.dark .ad-preview-card::before,
body.dark .preview-panel::before {
    background: transparent !important;
}

/* Dashed/dotted decorative borders in dark — make them subtle grey */
body.dark .call-history,
body.dark .donut-legend,
body.dark .profit-breakdown {
    border-color: var(--bp-dark-border) !important;
}
body.dark *[style*="dashed"],
body.dark .call-card .call-history {
    border-top-color: var(--bp-dark-border-2) !important;
    border-bottom-color: var(--bp-dark-border-2) !important;
}

/* Stat card icon tinted bgs — neutralize to brand blue soft */
body.dark .stat-card-icon.blue,
body.dark .stat-card-icon.purple,
body.dark .stat-card-icon.cyan,
body.dark .stat-card-icon.amber,
body.dark .stat-card-icon.green,
body.dark .stat-card-icon.red {
    background: var(--bp-accent-soft) !important;
    color: var(--bp-accent-text) !important;
}

/* Integration platform tiles — uniform card surface, keep brand logo only */
body.dark .integ-platform-tile,
body.dark .platform-tile,
body.dark [class*="platform-card"] {
    background: var(--bp-dark-surface-2) !important;
    border: 1px solid var(--bp-dark-border) !important;
    color: var(--bp-dark-text) !important;
}

/* Connected-store cards top accent (was bright green/cyan) */
body.dark .connected-store-card,
body.dark .connected-store-card::before {
    border-top-color: var(--bp-accent) !important;
    background-image: none !important;
}
body.dark .connected-store-card::before {
    background: var(--bp-accent) !important;
    opacity: 0.5 !important;
}

/* Team / role badges — brand-blue tones instead of purple/random */
body.dark .role-badge,
body.dark .team-role,
body.dark [class*="role-"] {
    background: var(--bp-accent-soft) !important;
    color: var(--bp-accent-text) !important;
    border-color: var(--bp-accent) !important;
}

/* "Actif" / "Inactif" status pills */
body.dark .status-active { background: rgba(16,185,129,0.18) !important; color: #34d399 !important; border-color: rgba(16,185,129,0.4) !important; }
body.dark .status-inactive { background: rgba(100,116,139,0.18) !important; color: #94a3b8 !important; border-color: rgba(100,116,139,0.4) !important; }

/* Tracking pills (yal-XXXXX) — brand blue not random blue */
body.dark .tracking-pill,
body.dark [class*="track-pill"],
body.dark .yal-tracking {
    background: var(--bp-accent-soft) !important;
    color: var(--bp-accent-text) !important;
    border-color: var(--bp-accent) !important;
}

/* Tables: zebra rows and hovers in dark */
body.dark tbody tr {
    background: transparent !important;
}
body.dark tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02) !important;
}
body.dark tbody tr:hover {
    background: var(--bp-dark-surface-2) !important;
}

/* Headings inside dark cards */
body.dark .panel-header h1,
body.dark .panel-header h2,
body.dark .table-card h3,
body.dark .integ-stat-card strong,
body.dark .carrier-analytics-card h3 {
    color: var(--bp-dark-text) !important;
}
body.dark .panel-header p,
body.dark .panel-header .subtitle {
    color: var(--bp-dark-text-muted) !important;
}

/* Buttons on right of headers — uniform dark style */
body.dark .btn-outline,
body.dark .btn-secondary {
    background: var(--bp-dark-surface-2) !important;
    border: 1px solid var(--bp-dark-border) !important;
    color: var(--bp-dark-text) !important;
}
body.dark .btn-outline:hover,
body.dark .btn-secondary:hover {
    background: var(--bp-dark-surface-3) !important;
    border-color: var(--bp-dark-border-2) !important;
}

/* Make sure dotted underlines (KPI labels in flat-french style) use muted grey */
body.dark [class*="kpi-label"],
body.dark .stat-card-label,
body.dark .orders-kpi-label,
body.dark .an-card-label {
    color: var(--bp-dark-text-muted) !important;
    border-bottom-color: var(--bp-dark-border) !important;
    text-decoration-color: var(--bp-dark-border) !important;
}

/* ============================================================
   PHASE 2 — KPI shell unification (orders/dashboard/store-builder)
   Fixes the "white empty box" appearance: the .stats-grid wrapper
   itself was forced #fff with #d9dde3 segment borders. Override
   the container + segmented borders + stuck sparkline tooltips.
   ============================================================ */

/* Outer KPI shell — was forced #fff in legacy CSS */
html body.dark #panel-overview .stats-grid,
html body.dark .integ-stats-row,
html body.dark .tracking-stats,
html body.dark .stats-grid,
html body.dark .stats-grid.stats-8 {
    background: var(--bp-dark-surface) !important;
    border: 1px solid var(--bp-dark-border) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

/* Segmented separators between cards — REMOVED in dark for the clean
   look the user requested. Cards float in the shell without dividers. */
html body.dark #panel-overview .stats-grid .stat-card,
html body.dark #panel-overview .stats-grid .stat-card:not(:last-child),
html body.dark .integ-stats-row .integ-stat-card,
html body.dark .integ-stats-row .integ-stat-card:not(:last-child),
html body.dark .tracking-stats .track-stat,
html body.dark .tracking-stats .track-stat:not(:last-child),
html body.dark .stats-grid .stat-card,
html body.dark .stats-grid .stat-card:not(:last-child),
html body.dark .stats-grid.stats-8 .stat-card,
html body.dark .stats-grid.stats-8 .stat-card:not(:last-child),
html body.dark #panel-all-orders .orders-kpi-card,
html body.dark #panel-all-orders .orders-kpi-card:not(:last-child),
html body.dark .an-kpi-row .an-kpi-card,
html body.dark .an-kpi-card,
html body.dark .an-kpi-card:not(:last-child) {
    border-inline-end: none !important;
    border-inline-start: none !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: none !important;
    border-top: none !important;
}

/* Cards inside the segmented shell stay flat (no double-border).
   NOTE: orders.css "NUCLEAR" rule uses `.stats-grid.stats-8 .stat-card`
   (specificity 0,2,4) so we must match or exceed it here.
   ALSO: line 6210 of orders.css applies a leftover navy gradient
   (#182334 → #131c2c) via `body.dark .stat-card` — we must wipe it. */
html body.dark #panel-overview .stats-grid .stat-card,
html body.dark #panel-overview .stats-grid.stats-8 .stat-card,
html body.dark .stats-grid .stat-card,
html body.dark .stats-grid.stats-8 .stat-card,
html body.dark .integ-stats-row .integ-stat-card,
html body.dark .tracking-stats .track-stat {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px 18px 14px !important;
    transform: none !important;
}

/* Kill the decorative top strip + bottom underline pseudo-elements */
html body.dark #panel-overview .stats-grid .stat-card::before,
html body.dark #panel-overview .stats-grid .stat-card::after,
html body.dark .stats-grid.stats-8 .stat-card::before,
html body.dark .stats-grid.stats-8 .stat-card::after,
html body.dark .integ-stats-row .integ-stat-card::before,
html body.dark .integ-stats-row .integ-stat-card::after,
html body.dark .tracking-stats .track-stat::before,
html body.dark .tracking-stats .track-stat::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* No segmented separators — keep cards floating cleanly inside the shell */

/* Force gap=0 so segmented shell looks unified (no gap-induced "boxes") */
html body.dark #panel-overview .stats-grid,
html body.dark #panel-overview .stats-grid.stats-8,
html body.dark .stats-grid,
html body.dark .stats-grid.stats-8 {
    gap: 0 !important;
    overflow: hidden !important;
}

/* Re-apply the dotted underline label style in dark with muted color */
html body.dark #panel-overview .stats-grid .stat-card-label,
html body.dark .integ-stat-label,
html body.dark .track-stat-label {
    border-bottom: 1px dotted var(--bp-dark-border-2) !important;
    color: var(--bp-dark-text-muted) !important;
}

/* KPI value crisp white */
html body.dark #panel-overview .stats-grid .stat-card-value,
html body.dark .integ-stat-value,
html body.dark .track-stat-value {
    color: #fafafa !important;
}

/* Sparkline tooltip — only visible when explicitly toggled .visible */
.sparkline-tooltip:not(.visible) {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}
html body.dark .sparkline-tooltip {
    background: var(--bp-dark-surface-3) !important;
    color: #fafafa !important;
    border: 1px solid var(--bp-dark-border-2) !important;
}

/* Sparkline current/compare strokes in dark — use brand blue */
html body.dark .trend-current-path { stroke: var(--bp-accent-text) !important; }
html body.dark .trend-compare-path { stroke: rgba(138, 180, 255, 0.45) !important; }

/* Map tooltip in dark */
html body.dark #panel-overview .dz-map-tooltip {
    background: var(--bp-dark-surface-3) !important;
    border: 1px solid var(--bp-dark-border-2) !important;
    color: #fafafa !important;
}

/* Topbar row in dark — was rgba(235,235,235) */
html body.dark .topbar {
    background: var(--bp-dark-surface) !important;
    border-bottom: 1px solid var(--bp-dark-border) !important;
}

/* Generic panel/card containers that may still leak white */
html body.dark .revenue-card,
html body.dark .table-card,
html body.dark .report-card,
html body.dark .profit-breakdown,
html body.dark .profit-per-unit,
html body.dark .panel-section,
html body.dark .map-card {
    background: var(--bp-dark-surface) !important;
    border: 1px solid var(--bp-dark-border) !important;
    color: var(--bp-dark-text) !important;
}

/* Section headings inside cards */
html body.dark .revenue-header h3,
html body.dark .table-card-header h3,
html body.dark .report-card h3,
html body.dark .profit-breakdown h3,
html body.dark .profit-per-unit h3 {
    color: #fafafa !important;
    border-bottom-color: var(--bp-dark-border) !important;
}

/* ============================================================
   PHASE 3 — Kill decorative dotted/underline lines under labels
   The flat-french analytics style uses dotted underlines on
   labels (.stat-card-label, .integ-stat-label, .orders-kpi-label,
   .carrier-kpi-top span, .focus-metric-label, .an-kpi-label, etc).
   In our dark unified theme they create visual noise — remove
   everywhere. Apply across orders/analytics/carriers/integ/tracking.
   ============================================================ */

html body.dark #panel-overview .stats-grid .stat-card-label,
html body.dark .integ-stat-label,
html body.dark .track-stat-label,
html body.dark #panel-all-orders .orders-kpi-label,
html body.dark #panel-carriers .carrier-kpi-top span,
html body.dark #panel-overview .focus-metric-label,
html body.dark .an-kpi-label,
html body.dark .an-card-label,
html body.dark [class*="kpi-label"],
html body.dark .stat-card-label,
html body.dark .revenue-header h3,
html body.dark .table-card-header h3,
html body.dark .report-card h3,
html body.dark .profit-breakdown h3,
html body.dark .profit-per-unit h3,
html body.dark #panel-all-orders .orders-table-card-header h3 {
    border-bottom: none !important;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    padding-bottom: 0 !important;
}

/* Hide the sparkline underline decoration in dark — too noisy on cards */
html body.dark .stat-card-spark,
html body.dark .orders-kpi-spark,
html body.dark .integ-stat-spark,
html body.dark .track-stat-spark {
    display: none !important;
}

/* Hide sparkline tooltip in dark too (already handled by .visible class) */
html body.dark .sparkline-tooltip:not(.visible) {
    display: none !important;
}

/* Kill dashed/dotted bottom borders on analytics list items in dark */
html body.dark .an-st-item,
html body.dark .dom-pstep:not(:last-child) {
    border-bottom: 1px solid var(--bp-dark-border) !important;
}

/* ============================================================
   FINAL VIEWPORT LAYOUT GUARD
   Root fix for the recurring "short page / long sidebar" gap.
   The browser document is locked; .main-content is the only scroller.
   ============================================================ */
html,
body.dashboard-body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
}
body.dashboard-body .topbar-global {
    flex: 0 0 60px !important;
}
body.dashboard-body .app-layout {
    display: flex !important;
    flex: 1 1 auto !important;
    height: calc(100dvh - 60px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 60px) !important;
    align-items: stretch !important;
    overflow: hidden !important;
}
body.dashboard-body #sidebar.sidebar,
body.dashboard-body .sidebar-spy {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;
    overflow: hidden !important;
}
body.dashboard-body #mainContent,
body.dashboard-body .app-layout > #mainContent.main-content,
body.dashboard-body #mainContentSpy,
body.dashboard-body .app-layout > #mainContentSpy.main-content-spy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-self: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
body.dashboard-body #mainContent > .panel.active,
body.dashboard-body #mainContentSpy > .spy-panel.active {
    min-height: auto !important;
}