/* ========================================================================== App overrides (AG Grid, Popovers, Filters, Offcanvas) ========================================================================== */ /* -- AG Grid: keep pinned-left clean and above scroll --------------------- */ .custom-ag-grid .ag-pinned-left-header, .custom-ag-grid .ag-pinned-left-cols-container { background: #fff; box-shadow: 2px 0 0 rgba(0,0,0,.05); z-index: 2; } /* Make Δ% column easy to scan (no dynamic colors without JS) */ .custom-ag-grid [col-id="pct_change_previous_to_current"] { font-variant-numeric: tabular-nums; } /* -- KPI cards: disabled state ------------------------------------------- */ .kpi-card-click.disabled, .card.kpi-card-click.disabled, #kpi-inc.disabled, #kpi-dec.disabled { opacity: .45 !important; filter: grayscale(1); pointer-events: none !important; transition: opacity .12s ease-in-out; } /* Text tone inside the card while disabled */ .kpi-card-click.disabled .card-title, .kpi-card-click.disabled .kpi-value { color: #6c757d !important; /* Bootstrap gray-600 */ } /* -- App popover ---------------------------------------------------------- */ .popover.popover--app { border: 1px solid var(--blue-100, #dbe7f6); border-radius: 0.5rem; box-shadow: 0 6px 22px rgba(0,0,0,.10); max-width: 360px; } /* Header = same blue as table headers */ .popover.popover--app .popover-header { background-color: var(--blue-050, #eef5fd); color: var(--blue-700, #1557a2); font-weight: 600; padding: .40rem .60rem; border-bottom: 1px solid var(--blue-100, #dbe7f6); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } /* Body = compact; same “small” type scale */ .popover.popover--app .popover-body { padding: .50rem .60rem; font-size: .875rem; line-height: 1.25rem; color: var(--bs-body-color, #222); } .popover.popover--app .popover-body > * + * { margin-top: .35rem; } /* Inline formulas look like subtle chips */ .popover.popover--app .popover-body code { background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); border-radius: .25rem; padding: .05rem .30rem; font-size: .85em; } /* Muted notes */ .popover.popover--app .popover-body small { color: #6b6b6b; } /* Arrow colors line up with header/body */ .popover.popover--app .popover-arrow::before { opacity: 1; } .popover.popover--app.bs-popover-top .popover-arrow::before { border-top-color: var(--blue-100, #dbe7f6); } .popover.popover--app.bs-popover-top .popover-arrow::after { border-top-color: #fff; } .popover.popover--app.bs-popover-end .popover-arrow::before { border-right-color: var(--blue-100, #dbe7f6); } .popover.popover--app.bs-popover-end .popover-arrow::after { border-right-color: #fff; } .popover.popover--app.bs-popover-bottom .popover-arrow::before { border-bottom-color: var(--blue-100, #dbe7f6); } .popover.popover--app.bs-popover-bottom .popover-arrow::after { border-bottom-color: #fff; } .popover.popover--app.bs-popover-start .popover-arrow::before { border-left-color: var(--blue-100, #dbe7f6); } .popover.popover--app.bs-popover-start .popover-arrow::after { border-left-color: #fff; } /* ========================================================================== Stacking / overflow fixes for dropdowns (react-select v1 & v5) ========================================================================== */ /* Base wrapper: positioned, but NOT high z-index by default */ .zfix { position: relative; z-index: auto !important; } /* When a control inside is focused/open, lift the whole wrapper */ .zfix:focus-within { z-index: 10010 !important; } /* react-select v1 & v5 menu containers (when not portaled) */ .zfix .Select-menu-outer, .zfix .Select__menu { z-index: 10020 !important; } /* If menus are portaled to , ensure they’re above cards */ .Select__menu-portal { z-index: 10020 !important; } /* Generic catch-all in case class names differ slightly */ .zfix [class*="menu"] { z-index: 10020 !important; } /* Let menus escape containers (only where needed) */ .filters-card, .filters-card .card-body, .filters-card .accordion, .filters-card .accordion-item, .filters-card .accordion-body, .filters-card .accordion-collapse.collapse.show, .offcanvas .accordion-item, .offcanvas .accordion-body, .offcanvas .accordion-collapse.collapse.show { overflow: visible !important; } /* Keep loading overlays below the dropdown menus */ .dash-spinner, .dash-loading, ._dash-loading, .dash-loading-output { z-index: 2000 !important; } /* ========================================================================== Countries toggle pills — OLD blue style (card + offcanvas) (Scoped to checkbox/radio *toggle* buttons only; does NOT touch regular outline buttons like "Reset to defaults", and does NOT touch .metric-btn) ========================================================================== */ /* Base (unselected) */ .filters-card .btn-check + .btn.btn-outline-secondary:not(.metric-btn), .offcanvas .btn-check + .btn.btn-outline-secondary:not(.metric-btn) { border-radius: .5rem; border-color: var(--blue-200, #dbe7f6); color: var(--blue-700, #1557a2); background-color: var(--blue-050, #eef5fd); font-weight: 600; padding: .375rem .75rem; } /* Hover */ .filters-card .btn-check + .btn.btn-outline-secondary:not(.metric-btn):hover, .offcanvas .btn-check + .btn.btn-outline-secondary:not(.metric-btn):hover { background-color: var(--blue-075, #e7f0fd); border-color: var(--blue-300, #c6dcfb); color: var(--blue-800, #0f4c8a); } /* Checked / active (filled blue) */ .filters-card .btn-check:checked + .btn.btn-outline-secondary:not(.metric-btn), .offcanvas .btn-check:checked + .btn.btn-outline-secondary:not(.metric-btn), .filters-card .btn.btn-outline-secondary:not(.metric-btn).active, .offcanvas .btn.btn-outline-secondary:not(.metric-btn).active, .filters-card .btn.btn-outline-secondary:not(.metric-btn):active, .offcanvas .btn.btn-outline-secondary:not(.metric-btn):active { color: #fff !important; background-color: var(--blue-700, #1557a2) !important; border-color: var(--blue-700, #1557a2) !important; } /* Focus ring (keyboard) */ .filters-card .btn-check:focus + .btn.btn-outline-secondary:not(.metric-btn), .offcanvas .btn-check:focus + .btn.btn-outline-secondary:not(.metric-btn), .filters-card .btn.btn-outline-secondary:not(.metric-btn):focus, .offcanvas .btn.btn-outline-secondary:not(.metric-btn):focus { outline: 0; box-shadow: 0 0 0 .20rem rgba(21, 87, 162, .25); } /* Optional spacing for token-like pills */ .filters-card .btn.btn-outline-secondary:not(.metric-btn), .offcanvas .btn.btn-outline-secondary:not(.metric-btn) { margin-right: .5rem; margin-bottom: .5rem; } /* ========================================================================== (end) ========================================================================== */ /* ============================================================ Countries checklist → aligned grid, no overflow (neutralize .form-check-inline margins/inline-block) ============================================================ */ /* Make the checklist a responsive grid */ .filters-card [id$="-countries-chk"], .offcanvas [id$="-countries-chk"] { display: grid; /* Auto-fit columns that never get narrower than 120px, otherwise share remaining space evenly */ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 14px; align-items: stretch; } /* The wrappers added by `inline=True` cause overflow; neutralize them */ .filters-card [id$="-countries-chk"] .form-check-inline, .offcanvas [id$="-countries-chk"] .form-check-inline { margin-right: 0 !important; /* kill the default 1rem margin */ display: block; /* let grid control placement */ } /* Remove bottom margins too so cells line up perfectly */ .filters-card [id$="-countries-chk"] .form-check, .offcanvas [id$="-countries-chk"] .form-check { margin: 0 !important; } /* Pills fill the grid cell and center their text */ .filters-card [id$="-countries-chk"] .btn.btn-outline-secondary, .offcanvas [id$="-countries-chk"] .btn.btn-outline-secondary { width: 100%; margin: 0 !important; text-align: center; justify-content: center; min-height: 40px; display: inline-flex; align-items: center; box-sizing: border-box; /* safety */ } /* ============================================ Right-side stat stack (Countries / SKUs / ATC) ============================================ */ /* Wrapper: subtle bucket with rounded corners */ .stat-stack { display: inline-flex; flex-direction: column; gap: .40rem; padding: .35rem; border: 1px solid var(--blue-100, #dbe7f6); background: var(--blue-025, #f5f9ff); border-radius: .75rem; } /* Each row: compact “micro-card” with aligned label/value */ .stat-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .32rem .60rem; border: 1px solid #e8eef9; background: #fff; border-radius: .55rem; min-width: 170px; /* keeps numbers aligned; adjust if needed */ box-shadow: 0 1px 0 rgba(16, 24, 40, .03); } /* Label: calm blue, semi-bold, small */ .stat-label { color: var(--blue-700, #1557a2); font-weight: 600; font-size: .85rem; white-space: nowrap; } /* Value: strong, mono-like width, in a soft capsule */ .stat-value { color: #0f172a; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--blue-050, #eef5fd); border: 1px solid var(--blue-100, #dbe7f6); border-radius: 999px; padding: .10rem .48rem; min-width: 2.6ch; /* keeps width stable for “0”..“999” */ text-align: right; } /* (Keep your existing blue theme variables here, unchanged) */ /* ============================================================ Old Filters pill — keep old look, just bolder label + readable badge ============================================================ */ /* ============================================================ Filters pill: subtle glow + optional gentle pulse (keeps your old style; only enhances visibility) ============================================================ */ /* Static glow (always on if the class is present) */ .filters-btn { position: relative; /* keep your old border look */ border-color: var(--blue-150, #e6eefb); /* soft ambient glow */ box-shadow: 0 0 0 .18rem rgba(21,87,162,.10), 0 1px 2px rgba(16,24,40,.05); } /* Stronger glow on hover/focus */ .filters-btn:hover, .filters-btn:focus-visible { background: var(--blue-025, #f5f9ff); border-color: var(--blue-300, #c6dcfb); box-shadow: 0 0 0 .22rem rgba(21,87,162,.18), 0 3px 10px rgba(16,24,40,.10); } /* Optional pulsing ring to draw attention gently */ .filters-btn.filters-btn--pulse::after { content: ""; position: absolute; inset: -6px; /* ring outside the pill */ border-radius: 999px; pointer-events: none; box-shadow: 0 0 0 0 rgba(21,87,162,.22); animation: filtersPulse 2.4s ease-out infinite; } @keyframes filtersPulse { 0% { box-shadow: 0 0 0 0 rgba(21,87,162,.22); } 70% { box-shadow: 0 0 0 12px rgba(21,87,162,0); } 100% { box-shadow: 0 0 0 12px rgba(21,87,162,0); } } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .filters-btn.filters-btn--pulse::after { animation: none; } } /* Keep your earlier label/badge improvements */ .filters-btn .filters-btn-label { font-weight: 700; color: var(--blue-800, #0f4c8a); } .filters-btn .filters-btn-badge { background: var(--blue-075, #e7f0fd) !important; color: #0f172a !important; border: 1px solid var(--blue-150, #e6eefb); border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums; padding: .12rem .40rem; min-width: 1.8ch; line-height: 1; } .chips-row .chip { max-width: 240px; /* tweak per breakpoint */ display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== Filters button — quiet pill with default glow Scoped to the card footer so it won’t affect other light buttons. ========================================================================== */ /* Base */ .filters-card .filters-btn { /* shape & spacing to match your chips/buttons */ border-radius: .625rem; /* 10px; chips are .5–.75rem */ padding: .38rem .70rem; /* aligns with 36–38px controls */ line-height: 1.15; font-weight: 600; color: var(--blue-800, #0f4c8a); background: #fff; border-color: var(--blue-150, #e6eefb); /* default ambient glow */ box-shadow: 0 0 0 .18rem rgba(21,87,162,.10), 0 1px 2px rgba(16,24,40,.05); /* smooth but snappy */ transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease; } /* Hover / focus-visible: stronger glow + subtle tint */ .filters-card .filters-btn:hover, .filters-card .filters-btn:focus-visible { background: var(--blue-025, #f5f9ff); border-color: var(--blue-300, #c6dcfb); box-shadow: 0 0 0 .22rem rgba(21,87,162,.18), 0 3px 10px rgba(16,24,40,.10); outline: 0; /* we provide a custom ring */ } /* Active press: tiny depress + inner shadow */ .filters-card .filters-btn:active { transform: translateY(.5px); box-shadow: 0 0 0 .18rem rgba(21,87,162,.12) inset, 0 1px 2px rgba(16,24,40,.12) inset; } /* Disabled: keep layout but mute the glow */ .filters-card .filters-btn[disabled], .filters-card .filters-btn.disabled { color: #6c757d !important; background: #f8fafc; border-color: #e5edf9; box-shadow: none; pointer-events: none; opacity: .75; } /* Label + badge styling (consistent with your chip tone) */ .filters-card .filters-btn .filters-btn-label { font-weight: 700; letter-spacing: .01em; } .filters-card .filters-btn .filters-btn-badge { margin-left: .5rem; background: var(--blue-075, #e7f0fd) !important; color: #0f172a !important; border: 1px solid var(--blue-150, #e6eefb); border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums; padding: .12rem .40rem; line-height: 1; } /* Optional: hide the badge when zero via data attribute (no JS change needed) */ .filters-card .filters-btn[data-count="0"] .filters-btn-badge { display: none; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .filters-card .filters-btn { transition: none; } } /* ========================================================================== Filters button — chip-like, on-brand glow (matches your tokens) ========================================================================== */ .filters-card .filters-btn { /* Chip-y look (same tone as your country pills) */ border-radius: .625rem; border: 1px solid var(--blue-150, #e6eefb); background: var(--blue-050, #eef5fd); color: var(--blue-800, #0f4c8a); padding: .38rem .70rem; line-height: 1.15; font-weight: 600; /* Default gentle glow so it reads as the primary action in the footer */ box-shadow: 0 0 0 .18rem rgba(21,87,162,.10), 0 1px 2px rgba(16,24,40,.05); transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease; } .filters-card .filters-btn:hover, .filters-card .filters-btn:focus-visible { background: var(--blue-075, #e7f0fd); border-color: var(--blue-300, #c6dcfb); box-shadow: 0 0 0 .22rem rgba(21,87,162,.18), 0 3px 10px rgba(16,24,40,.10); outline: 0; /* custom ring above */ } .filters-card .filters-btn:active { transform: translateY(.5px); box-shadow: inset 0 1px 2px rgba(16,24,40,.12); } /* Disabled state: quiet, no glow */ .filters-card .filters-btn[disabled], .filters-card .filters-btn.disabled { color: #6c757d !important; background: #f8fafc; border-color: #e5edf9; box-shadow: none; opacity: .80; pointer-events: none; } /* Internal label + badge to match your chips */ .filters-card .filters-btn .filters-btn-label { font-weight: 700; letter-spacing: .01em; } .filters-card .filters-btn .filters-btn-badge { margin-left: .5rem; background: var(--blue-075, #e7f0fd) !important; color: #0f172a !important; border: 1px solid var(--blue-150, #e6eefb); border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums; padding: .12rem .40rem; line-height: 1; } /* Optional: hide the badge visually when count is 0 if you set data-count="0" */ .filters-card .filters-btn[data-count="0"] .filters-btn-badge { display: none; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .filters-card .filters-btn { transition: none; } } /* ========================================================================== Apply button — same color & feel as ACTIVE country toggles ========================================================================== */ .filters-card .btn-apply { /* active toggle colors */ color: #fff !important; background-color: var(--blue-700, #1557a2) !important; border-color: var(--blue-700, #1557a2) !important; border-radius: .55rem; /* similar to your pills */ box-shadow: 0 0 0 .20rem rgba(21,87,162,.12); transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; } .filters-card .btn-apply:hover { background-color: var(--blue-800, #0f4c8a) !important; border-color: var(--blue-800, #0f4c8a) !important; } .filters-card .btn-apply:focus-visible { outline: 0; box-shadow: 0 0 0 .24rem rgba(21,87,162,.25); } .filters-card .btn-apply:active { box-shadow: inset 0 1px 2px rgba(0,0,0,.16); } /* ====================================================================== Apply button — matches active country toggles, slightly smaller Works inside the card AND the offcanvas overlay ====================================================================== */ .filters-card .btn-apply, .offcanvas .btn-apply { color: #fff !important; background-color: var(--blue-700, #1557a2) !important; border-color: var(--blue-700, #1557a2) !important; border-radius: .55rem; box-shadow: 0 0 0 .20rem rgba(21,87,162,.12); transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; } /* Smaller, comfortable size (≈34–36px tall) */ .filters-card .btn-apply.btn-sm, .offcanvas .btn-apply.btn-sm { padding: .32rem .66rem; /* tighter than default */ font-size: .90rem; /* a touch smaller than base */ line-height: 1.2; border-radius: .5rem; min-height: 34px; /* aligns with your pills */ } .filters-card .btn-apply:hover, .offcanvas .btn-apply:hover { background-color: var(--blue-800, #0f4c8a) !important; border-color: var(--blue-800, #0f4c8a) !important; } .filters-card .btn-apply:focus-visible, .offcanvas .btn-apply:focus-visible { outline: 0; box-shadow: 0 0 0 .24rem rgba(21,87,162,.25); } .filters-card .btn-apply:active, .offcanvas .btn-apply:active { box-shadow: inset 0 1px 2px rgba(0,0,0,.16); } /* ============================================================ Pills / chips (shared look for counts and text) ============================================================ */ .chip { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .60rem; border-radius: 999px; background: var(--blue-050, #eef5fd); border: 1px solid var(--blue-150, #e6eefb); line-height: 1; white-space: nowrap; } /* Label: calm blue (matches Countries pill tone) */ .chip__label { color: var(--blue-700, #1557a2); font-weight: 600; } /* Value: stronger, readable, tabular numerals for numbers */ .chip__value { color: #0f172a; font-weight: 800; font-variant-numeric: tabular-nums; } /* Optional variant: show value as a small badge (if you want it) */ .chip--badge .chip__value { background: var(--blue-075, #e7f0fd); border: 1px solid var(--blue-150, #e6eefb); border-radius: 999px; padding: .10rem .44rem; line-height: 1; } /* Keep rows tidy when they wrap */ .chips-row .chip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; } /* Pills used in Filters footer */ .chips-row .chip { display:inline-flex; align-items:center; gap:.40rem; padding:.30rem .60rem; border-radius:9999px; border:1px solid #dbe7f6; background:#f5f9ff; line-height:1; white-space:nowrap; } .chips-row .chip__label { color:#1557a2; font-weight:600; } .chips-row .chip__value { color:#0f172a; font-weight:800; font-variant-numeric:tabular-nums; } /* ============================================================ "More filters" button — chip-like, on-brand glow ============================================================ */ .filters-card .filters-btn { position: relative; border-radius: .625rem; border: 1px solid var(--blue-150, #e6eefb); background: var(--blue-050, #eef5fd); color: var(--blue-800, #0f4c8a); padding: .38rem .70rem; line-height: 1.15; font-weight: 600; /* Ambient, subtle glow so it reads as an action */ box-shadow: 0 0 0 .18rem rgba(21,87,162,.10), 0 1px 2px rgba(16,24,40,.05); transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease; } .filters-card .filters-btn:hover, .filters-card .filters-btn:focus-visible { background: var(--blue-075, #e7f0fd); border-color: var(--blue-300, #c6dcfb); box-shadow: 0 0 0 .22rem rgba(21,87,162,.18), 0 3px 10px rgba(16,24,40,.10); outline: 0; } .filters-card .filters-btn:active { transform: translateY(.5px); box-shadow: inset 0 1px 2px rgba(16,24,40,.12); } /* Disabled state stays quiet */ .filters-card .filters-btn[disabled], .filters-card .filters-btn.disabled { color: #6c757d !important; background: #f8fafc; border-color: #e5edf9; box-shadow: none; opacity: .80; pointer-events: none; } /* ✨ Pulse only when there is at least one active filter (data-count > 0) */ .filters-card .filters-btn[data-count]:not([data-count="0"])::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; pointer-events: none; box-shadow: 0 0 0 0 rgba(21,87,162,.22); animation: filtersPulse 2.4s ease-out infinite; } @keyframes filtersPulse { 0% { box-shadow: 0 0 0 0 rgba(21,87,162,.22); } 70% { box-shadow: 0 0 0 12px rgba(21,87,162,0); } 100% { box-shadow: 0 0 0 12px rgba(21,87,162,0); } } /* Badge styling + render parentheses in CSS so markup can be simple */ .filters-card .filters-btn .filters-btn-badge { margin-left: .5rem; background: var(--blue-075, #e7f0fd); color: #0f172a; border: 1px solid var(--blue-150, #e6eefb); border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums; padding: .12rem .40rem; line-height: 1; } .filters-card .filters-btn .filters-btn-badge::before { content: "("; margin-right: .20rem; } .filters-card .filters-btn .filters-btn-badge::after { content: ")"; margin-left: .20rem; } /* If you want to *hide* the badge when zero: */ .filters-card .filters-btn[data-count="0"] .filters-btn-badge { display: none; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .filters-card .filters-btn[data-count]:not([data-count="0"])::after { animation: none; } } .custom-card-header { font-weight: 500; }