/* Rive & Vero Intelligence Dashboard — Custom CSS */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=DM+Sans:wght@400;500;600;700&display=swap');

/* Make heatmap y-axis labels clickable for drill-down navigation */
#chart-lv3-price-heatmap .yaxislayer-above text,
#chart-lv3-price-heatmap .yaxislayer text,
#chart-lv1-price-heatmap .yaxislayer-above text,
#chart-lv1-price-heatmap .yaxislayer text,
#chart-imp-heatmap .yaxislayer-above text,
#chart-imp-heatmap .yaxislayer text {
    cursor: pointer !important;
    pointer-events: all !important;
}

:root {
    --accent: #4F8EF7;
    --amber:  #F59E0B;
    --card:   #112236;
    --bg:     #060C17;
    --border: rgba(148,163,184,0.12);
    --text-muted: #64748B;
    --text-soft:  #94A3B8;
    --font-mono:  'IBM Plex Mono', 'Courier New', monospace;
    --font-ui:    'DM Sans', system-ui, sans-serif;
    --sidebar-w:  214px;
    --navbar-h:   50px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: #060C17 !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    color: #E2E8F0 !important;
    font-size: 14px;
}

/* ── TOPBAR (v7 brand bar) ── */
#v5-navbar {
    background-color: #0A1628 !important;
    border-bottom: none !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
}
/* Topbar hover states */
.topbar-profile:hover {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.07) !important;
}

/* ── SIDEBAR (v7) ── */
#sidebar {
    background-color: #091525 !important;
    border-left: none !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    width: 214px !important;
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    bottom: 0 !important;
    overflow-y: hidden !important;
    z-index: 90 !important;
    padding: 0 !important;
}

/* ── SIDEBAR NAV ITEMS ── */
.nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    color: #253245 !important;
    text-decoration: none !important;
    margin-bottom: 1px !important;
    position: relative !important;
    transition: color 0.12s, background 0.12s !important;
    border: 1px solid transparent !important;
}
.nav-item:hover {
    color: #94A3B8 !important;
    background: rgba(255,255,255,0.04) !important;
    text-decoration: none !important;
}
.nav-item.active {
    color: #E2E8F0 !important;
    background: rgba(79,142,247,0.06) !important;
    border: 1px solid rgba(79,142,247,0.08) !important;
    text-decoration: none !important;
}
.nav-item-bar {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 2px !important;
    height: 14px !important;
    background: transparent !important;
    border-radius: 0 2px 2px 0 !important;
    transition: background 0.12s !important;
}
.nav-item.active .nav-item-bar {
    background: #4F8EF7 !important;
}

/* ── NAV ICONS (CSS mask-image) ── */
.nav-icon {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    background: currentColor !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}
.nav-icon-dashboard {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='1' y='1' width='5.5' height='5.5' rx='1'/%3E%3Crect x='8.5' y='1' width='5.5' height='5.5' rx='1'/%3E%3Crect x='1' y='8.5' width='5.5' height='5.5' rx='1'/%3E%3Crect x='8.5' y='8.5' width='5.5' height='5.5' rx='1'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='1' y='1' width='5.5' height='5.5' rx='1'/%3E%3Crect x='8.5' y='1' width='5.5' height='5.5' rx='1'/%3E%3Crect x='1' y='8.5' width='5.5' height='5.5' rx='1'/%3E%3Crect x='8.5' y='8.5' width='5.5' height='5.5' rx='1'/%3E%3C/svg%3E") !important;
}
.nav-icon-markets {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M1 14V9M5 14V5.5M9 14V10M13 14V2'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M1 14V9M5 14V5.5M9 14V10M13 14V2'/%3E%3C/svg%3E") !important;
}
.nav-icon-competitors {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='7.5' cy='7.5' r='6'/%3E%3Ccircle cx='7.5' cy='7.5' r='2.5'/%3E%3Cpath d='M7.5 1.5v2M7.5 11.5v2M1.5 7.5h2M11.5 7.5h2'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='7.5' cy='7.5' r='6'/%3E%3Ccircle cx='7.5' cy='7.5' r='2.5'/%3E%3Cpath d='M7.5 1.5v2M7.5 11.5v2M1.5 7.5h2M11.5 7.5h2'/%3E%3C/svg%3E") !important;
}
.nav-icon-routes {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='2.5' cy='7.5' r='1.5'/%3E%3Ccircle cx='7.5' cy='2.5' r='1.5'/%3E%3Ccircle cx='12.5' cy='7.5' r='1.5'/%3E%3Ccircle cx='7.5' cy='12.5' r='1.5'/%3E%3Cpath d='M4 7.5h2M9 7.5h2M7.5 4v2M7.5 9v2'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='2.5' cy='7.5' r='1.5'/%3E%3Ccircle cx='7.5' cy='2.5' r='1.5'/%3E%3Ccircle cx='12.5' cy='7.5' r='1.5'/%3E%3Ccircle cx='7.5' cy='12.5' r='1.5'/%3E%3Cpath d='M4 7.5h2M9 7.5h2M7.5 4v2M7.5 9v2'/%3E%3C/svg%3E") !important;
}
.nav-icon-explorer {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Crect x='1' y='1' width='13' height='13' rx='1.5'/%3E%3Cpath d='M1 5.5h13M1 9.5h13M5.5 5.5v8'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Crect x='1' y='1' width='13' height='13' rx='1.5'/%3E%3Cpath d='M1 5.5h13M1 9.5h13M5.5 5.5v8'/%3E%3C/svg%3E") !important;
}
.nav-icon-explore {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='7.5' r='6'/%3E%3Cpath d='M10 5l-2.5 5-2.5-2.5z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='7.5' r='6'/%3E%3Cpath d='M10 5l-2.5 5-2.5-2.5z'/%3E%3C/svg%3E") !important;
}
.nav-icon-scraper {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Crect x='1' y='2' width='13' height='11' rx='1.5'/%3E%3Cpath d='M1 6h13M4.5 9l2 2-2 2M9 12.5h2.5'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Crect x='1' y='2' width='13' height='11' rx='1.5'/%3E%3Cpath d='M1 6h13M4.5 9l2 2-2 2M9 12.5h2.5'/%3E%3C/svg%3E") !important;
}
.nav-icon-admin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='7.5' r='2.5'/%3E%3Cpath d='M7.5 1v2M7.5 12v2M1 7.5h2M12 7.5h2M3.1 3.1l1.4 1.4M10.5 10.5l1.4 1.4M3.1 11.9l1.4-1.4M10.5 4.5l1.4-1.4'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='7.5' r='2.5'/%3E%3Cpath d='M7.5 1v2M7.5 12v2M1 7.5h2M12 7.5h2M3.1 3.1l1.4 1.4M10.5 10.5l1.4 1.4M3.1 11.9l1.4-1.4M10.5 4.5l1.4-1.4'/%3E%3C/svg%3E") !important;
}

/* Nav badge (e.g. scraper count) */
.nav-badge {
    margin-left: auto !important;
    font-size: 9px !important;
    background: rgba(79,142,247,0.08) !important;
    color: rgba(79,142,247,0.4) !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    font-family: 'IBM Plex Mono', monospace !important;
}

/* Nav divider */
.nav-divider {
    height: 1px !important;
    background: rgba(255,255,255,0.04) !important;
    margin: 6px 14px 8px !important;
}

/* ── FILTER SECTION HEADER ── */
.f-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 12px 5px 14px !important;
    background: rgba(255,255,255,0.02) !important;
    border-top: 1px solid rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
    margin-bottom: 3px !important;
}
.f-header-label {
    font-size: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    color: #4B5563 !important;
    font-family: 'IBM Plex Mono', monospace !important;
}
.f-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.f-active-count {
    font-size: 8px !important;
    font-family: 'IBM Plex Mono', monospace !important;
    color: #F59E0B !important;
    opacity: 0.7 !important;
}
.f-header-clear {
    font-size: 9px !important;
    color: #253245 !important;
    cursor: pointer !important;
    font-family: 'IBM Plex Mono', monospace !important;
}
.f-header-clear:hover {
    color: #94A3B8 !important;
}

/* ── FILTER LABELS (amber dot system) ── */
.f-label {
    font-size: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #374151 !important;
    font-family: 'IBM Plex Mono', monospace !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 2px !important;
}
.f-field.has-value .f-label::before {
    content: '' !important;
    display: inline-block !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #F59E0B !important;
    flex-shrink: 0 !important;
}
.f-field.has-value .f-label {
    color: rgba(245,158,11,0.7) !important;
}
/* Keep old label rule as fallback — exclude dropdown option labels */
#sidebar label:not(.dash-dropdown-option) {
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #374151 !important;
    margin-bottom: 3px !important;
    display: block !important;
}

/* ── MORE BUTTON ── */
.more-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 8px !important;
    font-family: 'IBM Plex Mono', monospace !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    color: #4B5563 !important;
    background: none !important;
    border: none !important;
}
.more-btn:hover {
    color: #94A3B8 !important;
}
.more-dot {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #F59E0B !important;
    flex-shrink: 0 !important;
}
.more-arrow {
    font-size: 8px !important;
}

/* ── ADMIN IMPERSONATION WIDGET ── */
#impersonation-widget {
    background: rgba(245,158,11,0.02) !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
}


/* Period pair */
#sidebar .period-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
}

/* (Old clear filters button + sidebar toggle removed — see v7 styles at bottom) */

/* ── MAIN CONTENT AREA ── */
/* margin-left and margin-top are handled by #content-area in app.py */
.page-content, #page-content, [id="page-content"] {
    padding: 22px 26px 60px !important;
    min-height: 100vh !important;
}

/* Hide old filter bar */
.filter-bar { display: none !important; }
.page-content .filter-bar { display: none !important; }

/* ── CARDS ── */
.card {
    background-color: #112236 !important;
    border: 1px solid rgba(148,163,184,0.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
.card-body {
    background-color: transparent !important;
}

/* ── KPI CARDS ── */
.kpi-card .card {
    height: 100px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px 12px !important;
    cursor: pointer !important;
    transition: border-color 0.2s, background 0.2s !important;
}
.kpi-card .card:hover {
    border-color: rgba(148,163,184,0.24) !important;
    background-color: #172D47 !important;
}
.kpi-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #64748B !important;
    margin-bottom: 6px !important;
}
.kpi-value-mono {
    font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
}
.kpi-delta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
}

/* ── CONTEXT BAR ── */
.context-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}
.ctx-period-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #E2E8F0 !important;
}
.ctx-vs-label {
    font-size: 12px !important;
    color: #64748B !important;
    margin-left: 10px !important;
}

/* ── PERIOD TOGGLE (pill style) ── */
.period-toggle-wrap {
    display: flex !important;
    gap: 2px !important;
    background: #112236 !important;
    border: 1px solid rgba(148,163,184,0.12) !important;
    border-radius: 6px !important;
    padding: 3px !important;
}
.period-toggle-wrap .form-check {
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
}
.period-toggle-wrap input[type="radio"] {
    display: none !important;
    position: absolute !important;
    opacity: 0 !important;
}
.period-toggle-wrap label {
    display: block !important;
    padding: 4px 12px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    background: transparent !important;
    color: #64748B !important;
    transition: all 0.15s !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}
/* Dash puts checked state on the label's parent form-check via JS class */
.period-toggle-wrap .form-check:has(input:checked) label {
    background: rgba(79,142,247,0.15) !important;
    color: #4F8EF7 !important;
}

/* ── PERIOD PANEL (dropdown below period chip) ── */
.period-panel {
    font-family: 'DM Sans', system-ui, sans-serif !important;
}
.period-preset-btn:hover {
    background: rgba(148,163,184,0.08) !important;
}
.period-preset-btn.active {
    color: #E2E8F0 !important;
}
.period-apply-btn:hover {
    background: #0D9488 !important;
}

/* Period panel small dropdowns — layout only, colors in universal section */
.period-dd-small button.dash-dropdown {
    border-radius: 4px !important;
    min-height: 28px !important;
    padding: 4px 6px !important;
    box-shadow: none !important;
}
.period-dd-small .dash-dropdown-value-item span {
    color: #94A3B8 !important;
    font-size: 11px !important;
    font-family: 'DM Sans', sans-serif !important;
}
.period-dd-small .dash-dropdown-placeholder {
    color: #64748B !important;
    font-size: 11px !important;
}
.period-dd-small .dash-dropdown-trigger-icon {
    color: #64748B !important;
    opacity: 0.9 !important;
    width: 14px !important;
    height: 14px !important;
}
/* Sidebar period panel — tighter dropdowns */
#sidebar button.period-dd-small.dash-dropdown {
    min-height: 22px !important;
    height: 22px !important;
    padding: 1px 4px !important;
    font-size: 10px !important;
}
#sidebar button.period-dd-small .dash-dropdown-value-item span {
    font-size: 10px !important;
    color: #CBD5E1 !important;
}
#sidebar button.period-dd-small .dash-dropdown-trigger-icon {
    display: none !important;
}
#sidebar .period-panel { min-width: 180px !important; }

/* ── PRODUCT GROUP PILLS (layout only — colors/font in universal section) ── */
.group-pill {
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.15s !important;
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ── CHART CARD TITLES ── */
.chart-card-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #94A3B8 !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 10px !important;
    text-align: left !important;
}

/* ── BRIEF ANCHOR — chart drives height, brief adapts ── */
.brief-anchor {
    position: relative;
    height: 100%;
}
.brief-anchor > .intel-brief-card {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}

/* ── INTELLIGENCE BRIEF ── */
.intel-brief-card,
.intel-brief-card.card {
    background: rgba(79,142,247,0.04) !important;
    border: 1.5px solid rgba(79,142,247,0.28) !important;
    border-top: 3px solid #4F8EF7 !important;
    border-right: 3px solid #4F8EF7 !important;
    box-shadow: inset 0 0 60px rgba(79,142,247,0.03), 0 4px 24px rgba(0,0,0,0.25) !important;
}
.brief-header {
    padding: 14px 18px 10px !important;
    border-bottom: 1px solid rgba(79,142,247,0.15) !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
}
.brief-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #4F8EF7 !important;
    font-family: 'IBM Plex Mono', monospace !important;
}
.brief-period {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 10px !important;
    color: #64748B !important;
}

/* ── SECTION DIVIDER ── */
.section-divider {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 18px 0 12px !important;
}
.section-divider::before,
.section-divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(148,163,184,0.12) !important;
}
.section-divider span {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #64748B !important;
    white-space: nowrap !important;
}

/* ── AG GRID DARK ── */
.ag-theme-alpine .ag-root-wrapper,
.ag-theme-alpine .ag-header,
.ag-theme-alpine .ag-row-even,
.ag-theme-alpine .ag-paging-panel {
    background-color: #112236 !important;
}
.ag-theme-alpine .ag-row-odd { background-color: #0D1B2E !important; }
.ag-theme-alpine .ag-row:hover { background-color: #172D47 !important; }
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine .ag-cell { color: #94A3B8 !important; }
.ag-theme-alpine .ag-header-cell {
    border-bottom: 2px solid rgba(79,142,247,0.3) !important;
}

/* ── LEADERBOARD ROWS ── */
.lb-row { cursor: pointer; transition: background-color 0.1s ease; }
.lb-row:hover { background-color: #172D47 !important; }

/* ── MY DASHBOARD — Competitor + Alert rows ── */
.dash-comp-row { cursor: pointer; transition: background-color 0.12s ease; }
.dash-comp-row:hover { background-color: rgba(79,142,247,0.06) !important; }
.dash-alert-row { cursor: pointer; transition: background-color 0.12s ease; }
.dash-alert-row:hover { background-color: rgba(79,142,247,0.06) !important; }
.dash-adj-row { cursor: pointer; transition: background-color 0.12s ease; }
.dash-adj-row:hover { background-color: rgba(79,142,247,0.06) !important; }

/* ── VOLUME CHART SCROLLABLE CONTAINER ── */
.volume-chart-scroll {
    max-height: 550px;
    overflow-y: auto;
    overflow-x: hidden;
}
.volume-chart-scroll::-webkit-scrollbar { width: 4px; }
.volume-chart-scroll::-webkit-scrollbar-track { background: transparent; }
.volume-chart-scroll::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.25); border-radius: 4px;
}
.volume-chart-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,0.45);
}
.volume-chart-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,0.25) transparent;
}

/* ── SIBLING PILLS — hidden scrollbar ── */
.sibling-pills-scroll { scrollbar-width: none; }
.sibling-pills-scroll::-webkit-scrollbar { display: none; }

/* ── INTEL BRIEF SLIM SCROLLBAR ── */
.intel-brief-card .card-body::-webkit-scrollbar { width: 4px; }
.intel-brief-card .card-body::-webkit-scrollbar-track { background: transparent; }
.intel-brief-card .card-body::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.25); border-radius: 4px;
}
.intel-brief-card .card-body::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,0.45);
}
.intel-brief-card .card-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,0.25) transparent;
    flex: 1 1 0;
    min-height: 0;
}

/* ── ALERT FEED SLIM SCROLLBAR ── */
.alert-feed-scroll::-webkit-scrollbar { width: 4px; }
.alert-feed-scroll::-webkit-scrollbar-track { background: transparent; }
.alert-feed-scroll::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.25); border-radius: 4px;
}
.alert-feed-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,0.45);
}
.alert-feed-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,0.25) transparent;
}

/* ── DASHBOARD TABBED CARD ── */
.dash-card-tabs .nav-tabs {
    border-bottom: 1px solid rgba(148,163,184,0.12) !important;
    background: transparent !important;
    gap: 0;
    padding: 0 8px;
}
.dash-card-tabs .nav-link {
    color: #64748B !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: 'IBM Plex Mono', monospace !important;
    letter-spacing: 0.5px;
    padding: 10px 16px 8px !important;
    text-transform: uppercase;
    border-radius: 0 !important;
    transition: color 0.15s ease;
}
.dash-card-tabs .nav-link:hover {
    color: #94A3B8 !important;
    border-bottom: 2px solid rgba(79,142,247,0.3) !important;
}
.dash-card-tabs .nav-link.active {
    color: #4F8EF7 !important;
    border-bottom: 2px solid #4F8EF7 !important;
    background: transparent !important;
}
.dash-card-tabs .tab-content {
    flex: 1;
}
.dash-card-tabs .tab-pane {
    padding: 0;
}
/* Row 4 paired cards — compact single-row tabs */
#dash-comp-tabs .nav-tabs,
#dash-aw-tabs .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#dash-comp-tabs .nav-tabs::-webkit-scrollbar,
#dash-aw-tabs .nav-tabs::-webkit-scrollbar { display: none; }
#dash-comp-tabs .nav-link,
#dash-aw-tabs .nav-link {
    font-size: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    padding: 6px 6px 5px !important;
    white-space: nowrap;
}

/* ── HIDE SCROLLBAR ── */
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }


/* ── FILTER BADGE BUTTONS ── */
.filter-badge-btn {
    background: rgba(79,142,247,0.12) !important;
    border: 1px solid rgba(79,142,247,0.3) !important;
    color: #93C5FD !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    cursor: pointer !important;
}
.filter-badge-btn:hover {
    background: rgba(79,142,247,0.22) !important;
    border-color: #4F8EF7 !important;
}

#sidebar input,
#sidebar .form-control,
#sidebar .form-select {
    background-color: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: #E2E8F0 !important;
    box-shadow: none !important;
}

#sidebar input:focus,
#sidebar .form-control:focus {
    background-color: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.15) !important;
    box-shadow: none !important;
    color: #E2E8F0 !important;
    outline: none !important;
}
#sidebar *:focus,
#sidebar *:focus-visible,
#sidebar *:focus-within {
    outline: none !important;
    box-shadow: none !important;
}
/* Dash dropdown popover renders outside #sidebar — kill focus globally */
[data-radix-popper-content-wrapper] *:focus,
[data-radix-popper-content-wrapper] *:focus-visible,
[data-radix-popper-content-wrapper] *:focus-within,
[data-radix-popper-content-wrapper]:focus,
[data-radix-popper-content-wrapper]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ── DASH 4.0 SIDEBAR DROPDOWNS (amber Option A) ── */
/* Trigger button — dark, subtle */
#sidebar button.dash-dropdown {
    background-color: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 4px !important;
    width: 100% !important;
    min-height: 24px !important;
    padding: 4px 10px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color 0.12s, color 0.12s !important;
}
#sidebar button.dash-dropdown:focus,
#sidebar button.dash-dropdown:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: rgba(255,255,255,0.15) !important;
}
#sidebar button.dash-dropdown:hover {
    border-color: rgba(255,255,255,0.15) !important;
}
#sidebar button.dash-dropdown[data-state="open"] {
    border-color: rgba(255,255,255,0.15) !important;
}
/* Grid container — text left, arrow right */
#sidebar button.dash-dropdown .dash-dropdown-grid-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 6px !important;
    overflow: hidden !important;
    min-height: 0 !important;
    padding: 0 !important;
}
/* Value text */
#sidebar button.dash-dropdown .dash-dropdown-value {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
#sidebar button.dash-dropdown .dash-dropdown-value-item span {
    color: #CBD5E1 !important;
    font-size: 10px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    white-space: nowrap !important;
}
#sidebar button.dash-dropdown .dash-dropdown-placeholder {
    color: #374151 !important;
    font-size: 10px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
}
/* Arrow — subtle */
#sidebar button.dash-dropdown .dash-dropdown-trigger-icon {
    color: #374151 !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    width: 12px !important;
    height: 12px !important;
}
/* Trigger with value — amber border hint */
#sidebar button.dash-dropdown:has(.dash-dropdown-value-item) {
    border-color: rgba(245,158,11,0.2) !important;
}
/* Year/month narrow dropdowns — never truncate */
#sidebar button.dash-dropdown.period-year,
#sidebar button.dash-dropdown.period-month {
    padding: 4px 4px !important;
}
#sidebar button.dash-dropdown.period-year .dash-dropdown-value-item span,
#sidebar button.dash-dropdown.period-month .dash-dropdown-value-item span {
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 10px !important;
}
#sidebar button.dash-dropdown.period-year .dash-dropdown-trigger-icon,
#sidebar button.dash-dropdown.period-month .dash-dropdown-trigger-icon {
    width: 10px !important;
    height: 10px !important;
}
/* Dropdown popup panel — dark */
.dash-dropdown-content {
    background-color: #0B1929 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    z-index: 9999 !important;
    outline: none !important;
}
/* ── Kill purple focus ring on ALL dropdown elements globally ── */
.dash-dropdown-content *:focus,
.dash-dropdown-content *:focus-visible,
.dash-dropdown-content *:focus-within {
    outline: none !important;
    box-shadow: none !important;
}
.dash-dropdown-options {
    background-color: #0B1929 !important;
}
/* Options — amber dot for selected (Option A) */
.dash-dropdown-option {
    color: #374151 !important;
    font-size: 10px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    padding: 5px 10px !important;
    cursor: pointer !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background 0.08s, color 0.08s !important;
}
.dash-dropdown-option:hover,
.dash-dropdown-option[data-highlighted] {
    background-color: rgba(255,255,255,0.03) !important;
    color: #64748B !important;
}
/* Selected option — amber dot + light text (ID specificity to beat #sidebar label) */
#sidebar .dash-dropdown-option[aria-selected="true"],
#sidebar .dash-dropdown-option.selected,
#sidebar .dash-dropdown-option:has(input:checked) {
    color: #E2E8F0 !important;
    font-weight: 500 !important;
    background: transparent !important;
}
#sidebar .dash-dropdown-option[aria-selected="true"]::before,
#sidebar .dash-dropdown-option.selected::before {
    content: '' !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #F59E0B !important;
    flex-shrink: 0 !important;
}
.dash-options-list-option-text {
    color: inherit !important;
}
.dash-options-list-option-checkbox {
    accent-color: #F59E0B !important;
}
.dash-dropdown-action-button {
    background: transparent !important;
    color: #374151 !important;
    border: none !important;
    font-size: 10px !important;
    cursor: pointer !important;
}
.dash-dropdown-action-button:hover {
    color: #94A3B8 !important;
}
.dash-dropdown-actions {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
/* Search input inside panel */
.dash-dropdown-search {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    color: #94A3B8 !important;
    caret-color: #4F8EF7 !important;
    font-size: 10px !important;
    border-radius: 0 !important;
    padding: 6px 8px !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
}
.dash-dropdown-search::placeholder {
    color: #1E2E42 !important;
}
.dash-dropdown-search:focus,
.dash-dropdown-search:focus-visible {
    border-bottom-color: rgba(245,158,11,0.2) !important;
    outline: none !important;
    box-shadow: none !important;
}
.dash-dropdown-search-container {
    background-color: #0B1929 !important;
    outline: none !important;
    box-shadow: none !important;
}
.dash-dropdown-search-container:focus,
.dash-dropdown-search-container:focus-within {
    outline: none !important;
    box-shadow: none !important;
}
.dash-dropdown-search-icon {
    color: #253245 !important;
}
#sidebar button.dash-dropdown .dash-dropdown-value-count {
    background: rgba(245,158,11,0.1) !important;
    color: rgba(245,158,11,0.7) !important;
    border-radius: 3px !important;
    font-size: 9px !important;
    padding: 1px 5px !important;
}

/* ── PORT SELECT DROPDOWN (context bar, dark to match sidebar) ── */
/* Note: className goes ON the button itself, so use button.port-select-dropdown */
button.dash-dropdown.port-select-dropdown {
    background-color: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 4px !important;
    min-height: 26px !important;
    padding: 3px 8px !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
button.dash-dropdown.port-select-dropdown:hover {
    border-color: rgba(255,255,255,0.15) !important;
}
button.dash-dropdown.port-select-dropdown .dash-dropdown-grid-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 6px !important;
}
button.dash-dropdown.port-select-dropdown .dash-dropdown-value-item span {
    color: #CBD5E1 !important;
    font-size: 10px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
}
button.dash-dropdown.port-select-dropdown .dash-dropdown-placeholder {
    color: #475569 !important;
    font-size: 10px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
}
button.dash-dropdown.port-select-dropdown .dash-dropdown-trigger-icon {
    color: #475569 !important;
    width: 12px !important;
    height: 12px !important;
}
button.dash-dropdown.port-select-dropdown:has(.dash-dropdown-value-item) {
    border-color: rgba(20,184,166,0.25) !important;
}
button.dash-dropdown.port-select-dropdown .dash-dropdown-value-count {
    background: rgba(20,184,166,0.1) !important;
    color: rgba(20,184,166,0.7) !important;
    border-radius: 3px !important;
    font-size: 9px !important;
    padding: 1px 5px !important;
}

/* ── PORT PANEL: BACKDROP + CHECKLIST + APPLY ── */
[id$="port-backdrop"] {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 9998;
    background: transparent;
    cursor: default;
}
.port-checklist {
    max-height: 200px;
    overflow-y: auto;
}
.port-check-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 11px !important;
    color: #CBD5E1 !important;
    transition: background 0.12s;
}
.port-check-label:hover {
    background: rgba(79,142,247,0.06);
}
.port-check-input {
    accent-color: #4F8EF7;
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.port-panel-link {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10px;
    color: #64748B;
    cursor: pointer;
    transition: color 0.12s;
}
.port-panel-link:hover {
    color: #CBD5E1;
}
[id$="port-apply-btn"] {
    font-family: 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 0.15s;
    border-radius: 0 0 6px 6px;
}
[id$="port-apply-btn"]:hover {
    background: rgba(79,142,247,0.08);
}

/* ── SEGMENT CLASSIFICATION DROPDOWNS (admin) ── */
.seg-dd-wrap button.dash-dropdown {
    background-color: rgba(148,163,184,0.08) !important;
    border: 1px solid rgba(148,163,184,0.18) !important;
    border-radius: 5px !important;
    min-height: 30px !important;
    padding: 2px 8px !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.seg-dd-wrap button.dash-dropdown:hover {
    background-color: rgba(79,142,247,0.12) !important;
    border-color: rgba(79,142,247,0.40) !important;
}
.seg-dd-wrap button.dash-dropdown[data-state="open"] {
    background-color: rgba(79,142,247,0.12) !important;
    border-color: #4F8EF7 !important;
}
.seg-dd-wrap button.dash-dropdown .dash-dropdown-value-item span {
    color: #E2E8F0 !important;
    font-size: 12px !important;
    font-family: 'DM Sans', sans-serif !important;
}
.seg-dd-wrap button.dash-dropdown .dash-dropdown-placeholder {
    color: #F59E0B !important;
    font-size: 12px !important;
    font-style: italic !important;
}
.seg-dd-wrap button.dash-dropdown .dash-dropdown-trigger-icon {
    color: #64748B !important;
    opacity: 0.8 !important;
}
.seg-dd-wrap button.dash-dropdown .dash-dropdown-grid-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}
/* Clear (X) button */
.seg-dd-wrap .dash-dropdown-clear {
    color: #64748B !important;
}
.seg-dd-wrap .dash-dropdown-clear:hover {
    color: #EF4444 !important;
}

/* ── Compare mode: ✕ remove button on competitor cards ── */
.cmp-card-panel:hover .cmp-remove-btn {
    opacity: 1.0 !important;
}
.cmp-remove-btn:hover {
    background: rgba(239,68,68,0.15) !important;
    color: #EF4444 !important;
    opacity: 1.0 !important;
}

/* ── Ghost ADD card ── */
.cmp-ghost-card {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    border: 2px dashed rgba(148,163,184,0.25);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.cmp-ghost-card:hover {
    border-color: rgba(79,142,247,0.4);
    background: rgba(79,142,247,0.04);
}

/* ── ADD COMPETITOR PILL (LV3) ── */
.cmp-add-pill {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    background: transparent;
    border: 1px dashed rgba(148,163,184,0.3);
    border-radius: 16px;
    padding: 4px 14px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.cmp-add-pill:hover {
    border-color: rgba(20,184,166,0.5);
    color: #14B8A6;
}
.cmp-add-pill.active {
    border-color: #14B8A6;
    border-style: solid;
    color: #14B8A6;
}
.cmp-add-pill:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
/* Search input inside panel */
.cmp-add-search {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.8rem;
    background: rgba(30,41,59,0.8);
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 6px;
    color: #E2E8F0;
    outline: none;
    box-sizing: border-box;
}
.cmp-add-search::placeholder { color: #64748B; }
.cmp-add-search:focus { border-color: rgba(20,184,166,0.5); }
/* Checklist items */
.cmp-add-checklist label {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    color: #CBD5E1;
    transition: background 0.1s;
}
.cmp-add-checklist label:hover { background: rgba(148,163,184,0.08); }
.cmp-add-checklist input[type="checkbox"] {
    margin-right: 10px;
    accent-color: #14B8A6;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
/* Apply / Cancel buttons */
.cmp-add-apply-btn {
    flex: 1;
    padding: 6px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0F172A;
    background: #14B8A6;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.cmp-add-apply-btn:hover { background: #0D9488; }
.cmp-add-cancel-btn {
    flex: 1;
    padding: 6px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94A3B8;
    background: transparent;
    border: 1px solid rgba(148,163,184,0.25);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.cmp-add-cancel-btn:hover { border-color: #94A3B8; color: #CBD5E1; }

/* ── VIEWING-AS STRIP (v7) ── */
.imp-strip {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    height: 28px;
    z-index: 1040;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background: rgba(245,158,11,0.06);
    border-top: 1px solid rgba(245,158,11,0.1);
    border-bottom: 1px solid rgba(245,158,11,0.1);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
}
.imp-exit-btn:hover {
    color: #F59E0B !important;
    border-color: rgba(245,158,11,0.5) !important;
}

/* ── STRIP ↔ SIDEBAR/CONTENT COORDINATION ── */
.has-strip {
    padding-top: 78px !important;
}
.has-strip #sidebar {
    top: 78px !important;
}
.has-strip .imp-strip {
    display: flex !important;
}

/* ── CLEAR FILTERS (v7 — text link style) ── */
#btn-clear-filters {
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #253245 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: color 0.15s !important;
    margin-top: 0 !important;
}
#btn-clear-filters:hover {
    color: rgba(239,68,68,0.6) !important;
    background: transparent !important;
    border: none !important;
}

/* ── SIDEBAR SCROLLBAR ── */
#sidebar > div:first-child::-webkit-scrollbar { width: 4px; }
#sidebar > div:first-child::-webkit-scrollbar-track { background: transparent; }
#sidebar > div:first-child::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}

/* ── OPTION C: VS You / Include Me / MY POSITION superscript badge ── */
.vs-c {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    padding: 3px 8px 3px 6px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.02) !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: #1E2E42 !important;
    margin-top: 5px !important;
    transition: all 0.15s !important;
    white-space: nowrap !important;
}
.vs-c::before {
    content: '' !important;
    display: inline-block !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #1E2E42 !important;
    flex-shrink: 0 !important;
    transition: background 0.15s !important;
}
.vs-c:hover {
    border-color: rgba(255,255,255,0.1) !important;
    color: #374151 !important;
}
.vs-c:hover::before {
    background: #374151 !important;
}
/* Active state — amber (VS YOU / INCLUDE ME) */
.vs-c.on {
    border-color: rgba(245,158,11,0.3) !important;
    background: rgba(245,158,11,0.07) !important;
    box-shadow: 0 1px 8px rgba(245,158,11,0.07) !important;
    color: #F59E0B !important;
}
.vs-c.on::before {
    background: #F59E0B !important;
}
/* Active state — teal variant (MY POSITION) */
.vs-c-teal.on {
    border-color: rgba(20,184,166,0.3) !important;
    background: rgba(20,184,166,0.07) !important;
    box-shadow: 0 1px 8px rgba(20,184,166,0.07) !important;
    color: #14B8A6 !important;
}
.vs-c-teal.on::before {
    background: #14B8A6 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   UNIVERSAL HEADER PILL / BUTTON OVERRIDES — One visual language
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base — shared by ALL header controls (date pill style) ────── */
[id$="seg-pills"] > div,
.group-pill,
[id$="group-pills"] > div:not(.group-pill),
[id$="port-pills"] > div,
[id$="period-chip"] {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #4F8EF7 !important;
    background: rgba(79,142,247,0.12) !important;
    border: 1px solid rgba(79,142,247,0.25) !important;
    border-radius: 4px !important;
    padding: 2px 5px !important;
    white-space: nowrap !important;
}

/* ── Inactive / unselected — dimmed variant ──────────────────── */
/* Segment toggle: inactive pills (no 0.85 opacity inline style) */
[id$="seg-pills"] > div:not([style*="0.85"]) {
    color: #3D6BAE !important;
    border-color: rgba(79,142,247,0.12) !important;
    background: rgba(79,142,247,0.06) !important;
}
/* Group pill: inactive (no teal inline color) */
.group-pill:not([style*="20, 184, 166"]) {
    color: #3D6BAE !important;
    border-color: rgba(79,142,247,0.12) !important;
    background: rgba(79,142,247,0.06) !important;
}

/* ── Port pills: inactive (no teal inline color) ─────────────── */
[id$="port-pills"] > div:not([style*="20, 184, 166"]) {
    color: #3D6BAE !important;
    border-color: rgba(79,142,247,0.12) !important;
    background: rgba(79,142,247,0.06) !important;
}

/* ── Port pills container — match segment pills (no wrapper border) ── */
[id$="port-pills"] {
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 1px !important;
}

/* ── Period panel date selectors — dormant border/bg, keep text color ── */
.period-dd-small button.dash-dropdown {
    background-color: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}
.period-dd-small button.dash-dropdown:hover,
.period-dd-small button.dash-dropdown[data-state="open"] {
    background-color: rgba(79,142,247,0.08) !important;
    border-color: rgba(79,142,247,0.2) !important;
}

/* ── Plotly chart background — dark fill to prevent white flash ── */
.dash-graph,
.js-plotly-plot,
.plot-container,
.svg-container {
    background: #112236;
}

/* ── Heatmap cells — subtle rounded corners ── */
#chart-lv3-price-heatmap .heatmaplayer rect {
    rx: 3px;
    ry: 3px;
}

/* ── KPI loading — uniform height during loading ── */
.kpi-card { min-height: 100px; }

/* ── Data freshness label — hidden ─────────────────────────────── */
[id$="data-freshness"] {
    display: none !important;
}

/* ── Markets Compare — identity cards ─────────────────────────── */
.mkt-cmp-card-panel {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mkt-cmp-card-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}
.mkt-cmp-card-panel:hover .cmp-remove-btn {
    opacity: 1 !important;
}

/* ── Markets Compare — ghost add card ─────────────────────────── */
.mkt-cmp-ghost-card {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    border: 2px dashed rgba(148,163,184,0.25);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    transition: border-color 0.15s;
}
.mkt-cmp-ghost-card:hover {
    border-color: rgba(148,163,184,0.5);
}

/* ── Markets Compare — amber compare button ───────────────────── */
.mkt-compare-btn {
    background: rgba(245,158,11,0.15) !important;
    color: #F59E0B !important;
    border: 1px solid rgba(245,158,11,0.3) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.3px;
    padding: 4px 18px !important;
    border-radius: 6px !important;
    transition: background 0.15s, box-shadow 0.15s;
}
.mkt-compare-btn:hover {
    background: rgba(245,158,11,0.28) !important;
    box-shadow: 0 2px 8px rgba(245,158,11,0.2);
}

/* ── Markets Compare — LV1 group checklist (pill style) ───────── */
.mkt-group-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.mkt-chk-label {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #94A3B8;
    background: rgba(148,163,184,0.08);
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: 12px;
    padding: 2px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mkt-chk-label:hover {
    background: rgba(79,142,247,0.1);
    border-color: rgba(79,142,247,0.3);
    color: #E2E8F0;
}
.mkt-chk-input {
    display: none !important;
}
.mkt-chk-input:checked + .mkt-chk-label {
    background: rgba(79,142,247,0.18);
    border-color: rgba(79,142,247,0.45);
    color: #4F8EF7;
}

/* ── Competitors context-bar override (full-width bands) ── */
.comp-ctx {
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    margin-top: -22px !important;
    margin-left: -26px !important;
    margin-right: -26px !important;
    width: calc(100% + 52px) !important;
    position: sticky !important;
    top: 50px !important;
    z-index: 100 !important;
    background: var(--bg, #060C17) !important;
}

/* ── Markets context-bar override (full-width bands) ── */
.mkt-ctx {
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    margin-top: -22px !important;
    margin-left: -26px !important;
    margin-right: -26px !important;
    width: calc(100% + 52px) !important;
    position: sticky !important;
    top: 50px !important;
    z-index: 100 !important;
    background: var(--bg, #060C17) !important;
}

/* ── Dashboard context-bar override (full-width bands) ── */
.dash-ctx {
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    margin-top: -22px !important;
    margin-left: -26px !important;
    margin-right: -26px !important;
    width: calc(100% + 52px) !important;
    position: sticky !important;
    top: 50px !important;
    z-index: 100 !important;
    background: var(--bg, #060C17) !important;
}

/* ── Routes context-bar override (full-width bands) ── */
.rte-ctx {
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    margin-top: -22px !important;
    margin-left: -26px !important;
    margin-right: -26px !important;
    width: calc(100% + 52px) !important;
    position: sticky !important;
    top: 50px !important;
    z-index: 100 !important;
    background: var(--bg, #060C17) !important;
}

/* ── Markets bc-title subtitle override ── */
.mkt-ctx .bc-title::after {
    content: 'Panorama del Mercado';
}

/* ── BC-BAND (Competitors + Markets header) ── */
.bc-band {
    height: auto;
    min-height: 54px;
    border-bottom: 1px solid rgba(79,142,247,0.16);
    border-left: 3px solid rgba(20,184,166,0.45);
    display: flex;
    align-items: center;
    padding: 0 26px;
    background: rgba(79,142,247,0.03);
    flex-shrink: 0;
}
.bc-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    flex: 1;
    text-align: center;
    line-height: 1.1;
    padding: 14px 0;
}
.comp-ctx .bc-title::after {
    content: 'Selecciona un importador';
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #64748B;
    margin-top: 5px;
}
.bc-back {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 19px;
    color: rgba(79,142,247,0.35);
    cursor: pointer;
    margin-right: 10px;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s;
    background: none;
    border: none;
    padding: 0;
}
.bc-back:hover { color: #4F8EF7; }
.bc-crumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.bc-p {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: rgba(79,142,247,0.35);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.15s;
    background: none;
    border: none;
    padding: 0;
}
.bc-p:hover { color: rgba(79,142,247,0.65); }
.bc-p.mid {
    color: rgba(79,142,247,0.52);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}
.bc-sep {
    color: rgba(79,142,247,0.16);
    font-size: 14px;
    flex-shrink: 0;
    font-family: 'IBM Plex Mono', monospace;
    user-select: none;
    padding: 0;
}
.bc-cur {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    letter-spacing: 0.02em;
}
.bc-badge {
    flex-shrink: 0;
    margin-left: 8px;
    background: rgba(79,142,247,0.08);
    border: 1px solid rgba(79,142,247,0.18);
    border-radius: 10px;
    padding: 1px 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: rgba(79,142,247,0.60);
}
.bc-btn {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.25);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bc-btn::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.28);
    flex-shrink: 0;
}
.bc-btn:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.50);
}
.bc-btn:hover::before {
    background: rgba(255,255,255,0.40);
}
.bc-btn.on {
    background: rgba(20,184,166,0.15);
    border-color: rgba(20,184,166,0.38);
    color: #14B8A6;
}
.bc-btn.on::before {
    background: #14B8A6;
}
.bc-btn.on:hover {
    background: rgba(20,184,166,0.22);
    border-color: rgba(20,184,166,0.48);
    color: #2dd4bf;
}
.bc-btn.on:hover::before {
    background: #2dd4bf;
}

/* ── FILTER BAND (sits flush under bc-band) ── */
.fb {
    border-bottom: 1px solid rgba(79,142,247,0.08);
    border-left: 3px solid rgba(20,184,166,0.45);
    padding: 11px 26px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
    background: rgba(79,142,247,0.08);
    margin-bottom: 24px;
}
.fb .fb-sep {
    color: rgba(79,142,247,0.20);
    font-size: 13px;
    padding: 0 1px;
    font-family: 'IBM Plex Mono', monospace;
    user-select: none;
}