/* ============================================================
   BuildPro AI — Signature
   - Light mode: stats KPI cards + table cards painted #4f4a54
   - Page/sidebar/topbar: original colors preserved
   - Topbar logo size cap (overflow fix)
   ============================================================ */

:root {
    --bp-sig:           #4f4a54;
    --bp-sig-2:         #5a5560;   /* hover */
    --bp-sig-3:         #6a6470;   /* pressed / pill bg */
    --bp-sig-line:      rgba(255, 255, 255, 0.10);
    --bp-sig-line-2:    rgba(255, 255, 255, 0.18);
    --bp-sig-ink:       #f4f3f6;
    --bp-sig-ink-2:     #c8c4cf;
    --bp-sig-ink-3:     #948e9c;
}

/* Logo size cap (fixes >500px overflow bug) */
html body .topbar-global .topbar-logo,
html body .topbar-global .topbar-brand img {
    max-width: 140px !important;
    max-height: 40px !important;
    width: auto !important;
    height: 40px !important;
    object-fit: contain !important;
}

/* ════════════════════════════════════════════════════════════
   LIGHT MODE — KPI cards & table cards on #4f4a54
   Scoped to html:not(.dark) so dark-mode rules keep working.
   ════════════════════════════════════════════════════════════ */

/* ---- KPI / stat cards ---- */
html:not(.dark) body .carrier-kpi-card,
html:not(.dark) body .gross-value-card,
html:not(.dark) body .stat-card,
html:not(.dark) body .om-stat-card,
html:not(.dark) body .orders-kpi-card {
    background: var(--bp-sig) !important;
    background-image: none !important;
    border: 1px solid var(--bp-sig-line) !important;
    color: var(--bp-sig-ink) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 6px 18px -8px rgba(15, 16, 20, 0.35) !important;
}
html:not(.dark) body .carrier-kpi-card *,
html:not(.dark) body .gross-value-card *,
html:not(.dark) body .stat-card *,
html:not(.dark) body .om-stat-card *,
html:not(.dark) body .orders-kpi-card * {
    color: inherit;
    border-color: var(--bp-sig-line) !important;
}
html:not(.dark) body .carrier-kpi-card strong,
html:not(.dark) body .gross-value-card .gross-value-amount,
html:not(.dark) body .stat-card .stat-value,
html:not(.dark) body .om-stat-card strong,
html:not(.dark) body .orders-kpi-value {
    color: #ffffff !important;
}
html:not(.dark) body .carrier-kpi-card small,
html:not(.dark) body .carrier-kpi-card .carrier-kpi-top,
html:not(.dark) body .gross-value-label,
html:not(.dark) body .gross-value-sublabel,
html:not(.dark) body .stat-card .stat-label,
html:not(.dark) body .om-stat-card small,
html:not(.dark) body .orders-kpi-label {
    color: var(--bp-sig-ink-2) !important;
}

/* ---- Table cards / panels with lists ---- */
html:not(.dark) body .table-card,
html:not(.dark) body .carrier-analytics-card,
html:not(.dark) body .om-table,
html:not(.dark) body .data-table-card {
    background: var(--bp-sig) !important;
    background-image: none !important;
    border: 1px solid var(--bp-sig-line) !important;
    color: var(--bp-sig-ink) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 8px 24px -10px rgba(15, 16, 20, 0.35) !important;
}
html:not(.dark) body .table-card h1,
html:not(.dark) body .table-card h2,
html:not(.dark) body .table-card h3,
html:not(.dark) body .table-card h4,
html:not(.dark) body .carrier-analytics-card h1,
html:not(.dark) body .carrier-analytics-card h2,
html:not(.dark) body .carrier-analytics-card h3,
html:not(.dark) body .carrier-analytics-card h4 {
    color: #ffffff !important;
}

/* List rows inside table-card → subtle separators */
html:not(.dark) body .table-card .carrier-live-list > *,
html:not(.dark) body .table-card .carrier-breakdown-list > *,
html:not(.dark) body .carrier-analytics-card > div > * {
    border-color: var(--bp-sig-line) !important;
    color: var(--bp-sig-ink) !important;
}
html:not(.dark) body .table-card .carrier-live-list > *:hover,
html:not(.dark) body .carrier-analytics-card > div > *:hover {
    background: var(--bp-sig-2) !important;
}

/* Muted secondary text inside dark cards */
html:not(.dark) body .table-card .muted,
html:not(.dark) body .table-card [class*="-muted"],
html:not(.dark) body .table-card [class*="-subtitle"],
html:not(.dark) body .carrier-analytics-card .muted,
html:not(.dark) body .carrier-analytics-card [class*="-subtitle"] {
    color: var(--bp-sig-ink-3) !important;
}

/* HTML tables inside .table-card */
html:not(.dark) body .table-card table,
html:not(.dark) body .table-card thead,
html:not(.dark) body .table-card tbody,
html:not(.dark) body .table-card tr,
html:not(.dark) body .table-card th,
html:not(.dark) body .table-card td {
    background: transparent !important;
    color: var(--bp-sig-ink) !important;
    border-color: var(--bp-sig-line) !important;
}
html:not(.dark) body .table-card thead th {
    background: rgba(0, 0, 0, 0.18) !important;
    color: var(--bp-sig-ink-2) !important;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
html:not(.dark) body .table-card tbody tr:hover td {
    background: var(--bp-sig-2) !important;
}

/* Pills / badges inside the dark cards: neutral over signature surface */
html:not(.dark) body .table-card .badge:not([class*="success"]):not([class*="error"]):not([class*="warning"]):not([class*="info"]),
html:not(.dark) body .table-card .pill:not(.active):not(.is-active),
html:not(.dark) body .carrier-analytics-card .badge:not([class*="success"]):not([class*="error"]):not([class*="warning"]):not([class*="info"]) {
    background: var(--bp-sig-3) !important;
    color: var(--bp-sig-ink) !important;
    border: 1px solid var(--bp-sig-line-2) !important;
}

/* ════════════════════════════════════════════════════════════
   PLATFORM-WIDE EXTENSION
   Same Transporteurs dark look on EVERY stat card & table
   across orders / dashboard / commerce / admin / analytics.
   Light mode only — dark mode keeps its own rules.
   ════════════════════════════════════════════════════════════ */

/* ---- All stat / KPI / metric cards ---- */
html:not(.dark) body .integ-stat-card,
html:not(.dark) body .an-kpi-card,
html:not(.dark) body .focus-metric-card,
html:not(.dark) body .hero-metric-tile,
html:not(.dark) body .priority-item,
html:not(.dark) body .metric-card,
html:not(.dark) body .kpi-card,
html:not(.dark) body .dash-stat-card,
html:not(.dark) body .admin-stat-card,
html:not(.dark) body .commerce-stat-card,
html:not(.dark) body .stats-grid > .stat-card {
    background: var(--bp-sig) !important;
    background-image: none !important;
    border: 1px solid var(--bp-sig-line) !important;
    color: var(--bp-sig-ink) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 6px 18px -8px rgba(15, 16, 20, 0.35) !important;
}

/* Big numeric values inside stat cards → white */
html:not(.dark) body .integ-stat-value,
html:not(.dark) body .an-kpi-value,
html:not(.dark) body .stat-card-value,
html:not(.dark) body .metric-card .value,
html:not(.dark) body .kpi-card .value,
html:not(.dark) body .focus-metric-card strong,
html:not(.dark) body .hero-metric-tile strong,
html:not(.dark) body .priority-item strong {
    color: #ffffff !important;
}

/* Labels / secondary text inside stat cards */
html:not(.dark) body .integ-stat-label,
html:not(.dark) body .an-kpi-label,
html:not(.dark) body .stat-card-label,
html:not(.dark) body .stat-card-header,
html:not(.dark) body .stat-card-change,
html:not(.dark) body .metric-card .label,
html:not(.dark) body .kpi-card .label {
    color: var(--bp-sig-ink-2) !important;
}

/* Stat-card icons → translucent over signature surface */
html:not(.dark) body .stat-card .stat-card-icon {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--bp-sig-ink) !important;
}

/* ---- All table cards across the platform ---- */
html:not(.dark) body .cf-table-card,
html:not(.dark) body .orders-table-card,
html:not(.dark) body .dash-table-card,
html:not(.dark) body .admin-table-card,
html:not(.dark) body .commerce-table-card,
html:not(.dark) body .data-card,
html:not(.dark) body .list-card {
    background: var(--bp-sig) !important;
    background-image: none !important;
    border: 1px solid var(--bp-sig-line) !important;
    color: var(--bp-sig-ink) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 8px 24px -10px rgba(15, 16, 20, 0.35) !important;
}

/* Headings inside any table card */
html:not(.dark) body .cf-table-card h1,
html:not(.dark) body .cf-table-card h2,
html:not(.dark) body .cf-table-card h3,
html:not(.dark) body .cf-table-card h4,
html:not(.dark) body .orders-table-card-header,
html:not(.dark) body .orders-table-card-header h3,
html:not(.dark) body .dash-table-card h3,
html:not(.dark) body .admin-table-card h3,
html:not(.dark) body .commerce-table-card h3,
html:not(.dark) body .data-card h3,
html:not(.dark) body .list-card h3 {
    color: #ffffff !important;
}

/* Generic <table> inside any of these cards */
html:not(.dark) body .cf-table-card table,
html:not(.dark) body .orders-table-card table,
html:not(.dark) body .dash-table-card table,
html:not(.dark) body .admin-table-card table,
html:not(.dark) body .commerce-table-card table,
html:not(.dark) body .data-card table,
html:not(.dark) body .list-card table {
    background: transparent !important;
    color: var(--bp-sig-ink) !important;
}
html:not(.dark) body .cf-table-card thead th,
html:not(.dark) body .orders-table-card thead th,
html:not(.dark) body .dash-table-card thead th,
html:not(.dark) body .admin-table-card thead th,
html:not(.dark) body .commerce-table-card thead th,
html:not(.dark) body .data-card thead th,
html:not(.dark) body .list-card thead th {
    background: rgba(0, 0, 0, 0.18) !important;
    color: var(--bp-sig-ink-2) !important;
    border-color: var(--bp-sig-line) !important;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
html:not(.dark) body .cf-table-card tbody td,
html:not(.dark) body .orders-table-card tbody td,
html:not(.dark) body .dash-table-card tbody td,
html:not(.dark) body .admin-table-card tbody td,
html:not(.dark) body .commerce-table-card tbody td,
html:not(.dark) body .data-card tbody td,
html:not(.dark) body .list-card tbody td {
    border-color: var(--bp-sig-line) !important;
    color: var(--bp-sig-ink) !important;
}
html:not(.dark) body .cf-table-card tbody tr:hover td,
html:not(.dark) body .orders-table-card tbody tr:hover td,
html:not(.dark) body .dash-table-card tbody tr:hover td,
html:not(.dark) body .admin-table-card tbody tr:hover td,
html:not(.dark) body .commerce-table-card tbody tr:hover td,
html:not(.dark) body .data-card tbody tr:hover td,
html:not(.dark) body .list-card tbody tr:hover td {
    background: var(--bp-sig-2) !important;
}

/* ════════════════════════════════════════════════════════════
   DARK MODE FIXES
   Override hardcoded light/blue surfaces so they blend into
   the signature dark palette (#3a363f bg / #4f4a54 surface).
   Targets: .gross-value-card blue gradient, .geo-hero-stage
   white plate, white logo placeholder, side strips.
   ════════════════════════════════════════════════════════════ */

/* Big revenue / gross value card → no more navy gradient */
body.dark .gross-value-card,
html.dark body .gross-value-card {
    background: var(--bp-sig) \!important;
    background-image: none \!important;
    border: 1px solid var(--bp-sig-line) \!important;
    color: var(--bp-sig-ink) \!important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 6px 18px -8px rgba(0, 0, 0, 0.45) \!important;
}
body.dark .gross-value-card::before,
html.dark body .gross-value-card::before {
    background: none \!important;
    opacity: 0 \!important;
}
body.dark .gross-value-label,
body.dark .gross-value-sublabel { color: var(--bp-sig-ink-2) \!important; }
body.dark .gross-value-number,
body.dark .gross-value-count { color: #ffffff \!important; }
body.dark .gross-value-bar { background: rgba(255, 255, 255, 0.10) \!important; }

/* Geo hero map stage → dark plate, no white gradient, no dotted grid */
body.dark .geo-hero-stage,
html.dark body .geo-hero-stage {
    background: #3a363f \!important;
    background-image: none \!important;
    border: 1px solid var(--bp-sig-line) \!important;
    box-shadow: none \!important;
}
body.dark .geo-hero-stage::before,
html.dark body .geo-hero-stage::before {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0) \!important;
    opacity: 0.5 \!important;
}
body.dark .geo-hero-eyebrow { color: var(--bp-sig-ink-3) \!important; }
body.dark .geo-hero-title h2 { color: var(--bp-sig-ink) \!important; }
body.dark .geo-hero-meta { color: var(--bp-sig-ink-3) \!important; }

/* Side strip cards next to the map (Commandes / Livrées / etc.) */
body.dark .geo-side-strip,
body.dark .geo-side-card,
body.dark .geo-side-tile,
html.dark body .geo-side-strip,
html.dark body .geo-side-card,
html.dark body .geo-side-tile {
    background: var(--bp-sig) \!important;
    border-color: var(--bp-sig-line) \!important;
    color: var(--bp-sig-ink) \!important;
}
body.dark .geo-side-strip > * { border-color: var(--bp-sig-line) \!important; }

/* Topbar logo white box: kill any white background fallback */
body.dark .topbar-brand,
body.dark .topbar-logo,
body.dark .topbar-logo-light,
body.dark .topbar-logo-dark,
html.dark body .topbar-brand,
html.dark body .topbar-logo {
    background: transparent \!important;
    background-color: transparent \!important;
    box-shadow: none \!important;
}

/* Period bar / launch stepper → blend into dark page */
body.dark .dash-period-bar,
body.dark .launch-stepper,
html.dark body .dash-period-bar,
html.dark body .launch-stepper {
    background: var(--bp-sig) \!important;
    border: 1px solid var(--bp-sig-line) \!important;
    color: var(--bp-sig-ink) \!important;
}
body.dark .dash-period-trigger,
html.dark body .dash-period-trigger {
    background: var(--bp-sig-2) \!important;
    border-color: var(--bp-sig-line-2) \!important;
    color: var(--bp-sig-ink) \!important;
}
body.dark .ls-eyebrow,
body.dark .dash-period-label-eyebrow { color: var(--bp-sig-ink-3) \!important; }
body.dark .ls-title,
body.dark .ls-progress-text { color: var(--bp-sig-ink) \!important; }
body.dark .ls-cap { color: var(--bp-sig-ink-2) \!important; }
body.dark .ls-track-line { background: var(--bp-sig-2) \!important; }

/* Catch-all: any block still rendering pure white in dark mode */
body.dark .geo-hero-stage > *:not(canvas):not(svg):not(.dz-map-stage):not(.dz-map-surface) {
    background-color: transparent \!important;
}