/* ================================================================ 11_nordics.css Nordics module: map, country offcanvas, general offcanvas, overview drawers ================================================================ */ /* Make Plotly fully transparent so your card/background shows through */ #npd-nordics-overview-breadth-fig .js-plotly-plot, #npd-nordics-overview-breadth-fig .plotly, #npd-nordics-overview-breadth-fig .main-svg, #npd-nordics-overview-breadth-fig .svg-container { background: transparent !important; } /* If Plotly ever shows a modebar, kill it */ #npd-nordics-overview-breadth-fig .modebar { display: none !important; } /* assets/glass_map_only.css */ /* ===================================================================== Nordics Overview — "Most affected" ATC-level toggle (Area/Therapy/...) Turns dbc.RadioItems button-checks into a small segmented control ===================================================================== */ #npd-nordics-overview-short-groupby.metric-toggle { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; /* match your tab rail look */ background-color: #e0e6f4; border: 1px solid #cfd6e8; border-radius: 0.65rem; padding: 2px; } /* dbc.RadioItems renders each option in a .form-check wrapper */ #npd-nordics-overview-short-groupby.metric-toggle .form-check { margin: 0 !important; padding: 0 !important; } /* Base (inactive) button look */ #npd-nordics-overview-short-groupby.metric-toggle .btn.metric-btn { /* override bootstrap btn-outline-secondary defaults */ background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; color: #64748b !important; font-weight: 600; font-size: 0.82rem; line-height: 1.1; padding: 0.34rem 0.72rem; border-radius: 0.55rem !important; transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out, transform 80ms ease-out; } /* Hover (inactive) */ #npd-nordics-overview-short-groupby.metric-toggle .btn.metric-btn:hover { background-color: #e8ecf9 !important; color: #334155 !important; text-decoration: none; } /* Active/checked */ #npd-nordics-overview-short-groupby.metric-toggle .btn.metric-btn.active, #npd-nordics-overview-short-groupby.metric-toggle .btn-check:checked + .btn.metric-btn { background-color: #ffffff !important; border-color: #c6cee6 !important; color: var(--brand-accent) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10) !important; } /* Press feedback */ #npd-nordics-overview-short-groupby.metric-toggle .btn.metric-btn:active { transform: translateY(1px); } /* Keyboard focus ring (focus lands on the hidden input, so use sibling selector) */ #npd-nordics-overview-short-groupby.metric-toggle .btn-check:focus + .btn.metric-btn, #npd-nordics-overview-short-groupby.metric-toggle .btn.metric-btn:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 1px 2px rgba(15, 23, 42, 0.10) !important; } /* Optional: on very small screens, let them wrap nicely */ @media (max-width: 576px) { #npd-nordics-overview-short-groupby.metric-toggle { width: 100%; } #npd-nordics-overview-short-groupby.metric-toggle .btn.metric-btn { flex: 1 1 auto; text-align: center; } } #npd-nordics-overview-short-top-tooltip .pi-tt-card { background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 12px; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14); padding: 10px 12px; font-size: 11.5px; line-height: 1.25; color: #0f172a; /* ✅ KEY: stop it becoming a skinny column */ width: clamp(260px, 28vw, 340px); max-width: 90vw; white-space: normal; /* ✅ DO NOT use overflow-wrap:anywhere on the whole card */ overflow-wrap: normal; word-break: normal; } /* Target ONLY this tooltip instance */ #npd-nordics-overview-short-top-tooltip { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; /* prevents the “super thin” squeeze */ max-width: 380px; } /* The tooltip “box” (make it look like Plotly hover) */ #npd-nordics-overview-short-top-tooltip .pi-tt { font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; line-height: 1.25; color: #111827; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(0, 0, 0, 0.45); border-radius: 2px; /* Plotly-ish (not pill/rounded card) */ padding: 8px 10px; box-shadow: none; min-width: 260px; max-width: 360px; /* critical: wrap long reasons cleanly (no letter-by-letter) */ overflow-wrap: anywhere; word-break: normal; } #npd-nordics-overview-short-top-tooltip .pi-tt-head { margin-bottom: 6px; } #npd-nordics-overview-short-top-tooltip .pi-tt-title { font-weight: 600; margin: 0 0 2px 0; } #npd-nordics-overview-short-top-tooltip .pi-tt-sub { font-size: 11px; color: #64748b; margin: 0; } /* KPI rows — align like Plotly unified hover */ #npd-nordics-overview-short-top-tooltip .pi-tt-kpis { display: grid; gap: 2px; margin-bottom: 6px; } #npd-nordics-overview-short-top-tooltip .pi-tt-kv { display: flex; align-items: center; gap: 6px; } #npd-nordics-overview-short-top-tooltip .pi-tt-k { font-weight: 600; } #npd-nordics-overview-short-top-tooltip .pi-tt-v { margin-left: auto; font-weight: 600; } /* Body block */ #npd-nordics-overview-short-top-tooltip .pi-tt-body { border-top: 1px solid rgba(0, 0, 0, 0.12); padding-top: 6px; } #npd-nordics-overview-short-top-tooltip .pi-tt-line { margin-top: 4px; } #npd-nordics-overview-short-top-tooltip .pi-tt-lbl { font-weight: 600; color: #334155; } #npd-nordics-overview-short-top-tooltip .pi-tt-foot { margin-top: 6px; font-size: 11px; color: #64748b; } /* Force wrapping inside our custom tooltip (Dash/Bootstrap can sometimes inherit nowrap) */ #npd-nordics-overview-short-top-tooltip .pi-tt, #npd-nordics-overview-short-top-tooltip .pi-tt * { white-space: normal !important; } /* Bulleted reasons block */ #npd-nordics-overview-short-top-tooltip .pi-tt-bullets { margin-top: 2px; } #npd-nordics-overview-short-top-tooltip .pi-tt-bullet { margin: 1px 0; overflow-wrap: anywhere; } #npd-nordics-overview-short-top-tooltip .pi-tt-muted { color: #64748b; } /* ========================================================= Nordics Explorer — Comparable group drawer Match the “sleek details drawer” treatment from Overview Scoped to this drawer ID to avoid collateral changes. ========================================================= */ /* ========================================================= Nordics Explorer — Comparable group drawer Consistent navy base + glass texture (doesn't depend on page behind) ========================================================= */ #pi-nordics-explorer-comp-drawer.pi-glass-offcanvas { overflow: hidden; background: rgba(8, 26, 47, 0.97) !important; color: rgba(226, 232, 240, 0.95); border-left: 1px solid rgba(148, 163, 184, 0.22); box-shadow: -22px 0 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.10); backdrop-filter: none; -webkit-backdrop-filter: none; } #pi-nordics-explorer-comp-drawer.pi-glass-offcanvas .offcanvas-header, #pi-nordics-explorer-comp-drawer.pi-glass-offcanvas .offcanvas-body { background: transparent !important; } /* Optional: make muted text readable on dark glass */ #pi-nordics-explorer-comp-drawer.pi-glass-offcanvas .text-muted, #pi-nordics-explorer-comp-drawer.pi-glass-offcanvas small { color: rgba(226, 232, 240, 0.72) !important; } /* ========================================================= Explorer — Filters count badge (PRIMARY only) Leaves the button styling alone. ========================================================= */ .pi-nordics-explorer #pi-nordics-explorer-filters-count { /* keep it compact + consistent */ display: inline-flex; align-items: center; justify-content: center; height: 18px; min-width: 18px; padding: 0 6px; border-radius: 999px !important; /* PRIMARY */ background: var(--bs-primary) !important; color: #fff !important; /* clean (no “dot” look) */ border: 0 !important; box-shadow: none !important; /* typography */ font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; /* slight optical alignment inside the button */ transform: translateY(-1px); } /* Optional: slightly nicer spacing from the word "Filters" */ .pi-nordics-explorer #pi-nordics-explorer-filters-count.ms-2 { margin-left: 0.45rem !important; } /* ========================================================= Nordics Explorer — Filters Offcanvas (GLASS) Targets ONLY: #pi-nordics-explorer-filters-offcanvas ========================================================= */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas { overflow: hidden; background: rgba(8, 26, 47, 0.97) !important; color: rgba(226, 232, 240, 0.95) !important; border-left: 1px solid rgba(148, 163, 184, 0.22) !important; box-shadow: -22px 0 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; backdrop-filter: none; -webkit-backdrop-filter: none; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .offcanvas-header, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .offcanvas-body { background: transparent !important; } /* header typography + divider */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .offcanvas-header { border-bottom: 1px solid rgba(148,163,184,0.18) !important; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .offcanvas-title, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .pi-oc-title { color: rgba(226, 232, 240, 0.96) !important; font-weight: 900 !important; letter-spacing: 0.2px; } /* make the bootstrap close X visible on dark */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .btn-close { filter: invert(1); opacity: 0.80; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .btn-close:hover { opacity: 1; } /* body layout so footer can sit nicely at the bottom when there's space */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .offcanvas-body { display: flex; flex-direction: column; gap: 12px; } /* muted text readable on glass */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .text-muted, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas small { color: rgba(226, 232, 240, 0.72) !important; } /* ===== View settings “card” ===== */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .filters-section { border-radius: 16px; padding: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.20); } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .filters-section-title { color: rgba(226, 232, 240, 0.80); font-weight: 900; font-size: 0.92rem; margin-bottom: 8px; } /* labels */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .form-label { color: rgba(226, 232, 240, 0.92) !important; } /* ===== Accordion glass ===== */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: rgba(148, 163, 184, 0.18); --bs-accordion-btn-color: rgba(226, 232, 240, 0.94); --bs-accordion-active-color: rgba(226, 232, 240, 0.98); --bs-accordion-btn-focus-box-shadow: none; } /* IMPORTANT: do NOT clip dropdown menus */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .accordion-item, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .accordion-collapse, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .accordion-body { overflow: visible !important; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .accordion-item { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(148, 163, 184, 0.18) !important; border-radius: 14px !important; margin-bottom: 10px; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .accordion-button { background: rgba(2, 6, 23, 0.18) !important; color: rgba(226, 232, 240, 0.94) !important; font-weight: 900; border-radius: 14px !important; box-shadow: none !important; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .accordion-button:not(.collapsed) { background: rgba(56, 189, 248, 0.10) !important; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .accordion-button::after { filter: invert(1) opacity(0.85); } /* ===== RadioItems / Checklist buttons (Pack/Unit, View, Countries) ===== */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .metric-toggle { display: inline-flex; flex-wrap: wrap; gap: 8px; } /* base (inactive) */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .metric-toggle .btn, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .accordion-body .btn.btn-outline-secondary { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; color: rgba(226, 232, 240, 0.85) !important; font-weight: 900; box-shadow: none !important; border-radius: 12px !important; } /* hover */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .metric-toggle .btn:hover, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .accordion-body .btn.btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.09) !important; border-color: rgba(226, 232, 240, 0.30) !important; } /* active / checked */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .metric-toggle .btn.active, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .metric-toggle .btn-check:checked + .btn, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .accordion-body .btn.btn-outline-secondary.active, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .accordion-body .btn-check:checked + .btn.btn-outline-secondary { background: rgba(56, 189, 248, 0.18) !important; border-color: rgba(56, 189, 248, 0.55) !important; color: rgba(226, 232, 240, 0.98) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22) !important; } /* ===== dcc.Dropdown (react-select) glass styling ===== */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select__control, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select-control { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; border-radius: 12px !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.95) !important; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select__single-value, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select-value-label { color: rgba(226, 232, 240, 0.95) !important; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select__placeholder, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select-placeholder { color: rgba(226, 232, 240, 0.62) !important; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select__input-container, .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select-input { color: rgba(226, 232, 240, 0.95) !important; } /* menu */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select__menu { background: rgba(15, 23, 42, 0.98) !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; border-radius: 12px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important; z-index: 2000 !important; /* helps inside offcanvas/accordion */ } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select__option { color: rgba(226, 232, 240, 0.92) !important; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select__option--is-focused { background: rgba(56, 189, 248, 0.14) !important; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select__option--is-selected { background: rgba(56, 189, 248, 0.22) !important; } /* multi-value tags */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select__multi-value { background: rgba(56, 189, 248, 0.14) !important; border: 1px solid rgba(56, 189, 248, 0.28) !important; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select__multi-value__label { color: rgba(226, 232, 240, 0.96) !important; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select__multi-value__remove { color: rgba(226, 232, 240, 0.80) !important; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .dd-compact .Select__multi-value__remove:hover { background: rgba(239, 68, 68, 0.22) !important; color: rgba(255, 255, 255, 0.95) !important; } /* ===== Footer ===== */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .filters-footer { margin-top: auto; padding-top: 12px; background: rgba(2, 6, 23, 0.28); border-top: 1px solid rgba(148, 163, 184, 0.18); border-radius: 14px; } /* footer buttons look a bit more “drawer-like” */ .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .filters-footer .btn { border-radius: 12px; font-weight: 800; } .pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas .filters-footer .btn-outline-secondary { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(148, 163, 184, 0.22) !important; color: rgba(226, 232, 240, 0.92) !important; } /* ------------------------------------------------------- Nordics Explorer — Filters button badge (count) Fixes: - badge vertical alignment (no "floating 1") - button uses your real primary (brand accent) - badge stays readable on hover (inverts) -------------------------------------------------------- */ /* 0) If you already have these, KEEP yours and remove this block. */ :root { /* Set these to your real brand primary */ --brand-accent: #1557A2; --brand-accent-rgb: 21, 87, 162; } /* 1) Make the Filters button use the real primary color (scoped ONLY to this button, not global Bootstrap) */ #pi-nordics-explorer-filters-toggle.btn-outline-primary { --bs-btn-color: var(--brand-accent); --bs-btn-border-color: rgba(var(--brand-accent-rgb), 0.55); --bs-btn-hover-bg: var(--brand-accent); --bs-btn-hover-border-color: var(--brand-accent); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--brand-accent); --bs-btn-active-border-color: var(--brand-accent); --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: var(--brand-accent-rgb); } /* 2) Align icon + text + badge cleanly (prevents baseline quirks) */ #pi-nordics-explorer-filters-toggle { display: inline-flex; align-items: center; } /* 3) The badge itself — make the number perfectly centered */ #pi-nordics-explorer-filters-count.badge { display: inline-flex !important; align-items: center; justify-content: center; height: 18px; min-width: 18px; padding: 0 6px; font-size: 0.72rem; line-height: 1; font-weight: 700; border-radius: 999px; background-color: var(--brand-accent) !important; color: #fff !important; /* Optical centering: removes “floating” feel */ transform: translateY(-0.5px); } /* 4) When the outline button fills on hover/focus, invert the badge so it still has contrast */ #pi-nordics-explorer-filters-toggle:hover #pi-nordics-explorer-filters-count, #pi-nordics-explorer-filters-toggle:focus-visible #pi-nordics-explorer-filters-count { background-color: rgba(255, 255, 255, 0.94) !important; color: var(--brand-accent) !important; } /* Force Plotly hover label styling for the Nordics overview map */ #npd-nordics-overview-breadth-fig .hoverlayer .hovertext .bg { fill: #ffffff !important; stroke: #CBD5E1 !important; } #npd-nordics-overview-breadth-fig .hoverlayer .hovertext text { fill: #0F172A !important; } /* ------------------------------------------------------- Nordics Explorer — Filters button count badge (final) - perfectly centered (no floating) - uses your real brand primary (not bootstrap default blue) -------------------------------------------------------- */ /* keep your brand vars (only if you don't already have them elsewhere) */ :root{ --brand-accent: #1557A2; --brand-accent-rgb: 21, 87, 162; } /* button: keep as you had it (brand primary outline) */ #pi-nordics-explorer-filters-toggle.btn-outline-primary{ --bs-btn-color: var(--brand-accent); --bs-btn-border-color: rgba(var(--brand-accent-rgb), 0.55); --bs-btn-hover-bg: var(--brand-accent); --bs-btn-hover-border-color: var(--brand-accent); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--brand-accent); --bs-btn-active-border-color: var(--brand-accent); --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: var(--brand-accent-rgb); } /* ensure children align cleanly */ #pi-nordics-explorer-filters-toggle{ display: inline-flex; align-items: center; } /* ✅ the badge: centered + brand-colored */ #pi-nordics-explorer-filters-count.badge{ /* IMPORTANT: kill any previous "floating" nudges */ transform: none !important; top: auto !important; display: inline-grid !important; place-items: center; height: 18px; min-width: 18px; padding: 0 6px; border-radius: 999px; background-color: var(--brand-accent) !important; color: #fff !important; font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } /* optional: slightly tighter spacing than Bootstrap's ms-2 */ #pi-nordics-explorer-filters-count.ms-2{ margin-left: 0.45rem !important; } /* invert badge on hover so it stays readable */ #pi-nordics-explorer-filters-toggle:hover #pi-nordics-explorer-filters-count, #pi-nordics-explorer-filters-toggle:focus-visible #pi-nordics-explorer-filters-count{ background-color: rgba(255,255,255,0.94) !important; color: var(--brand-accent) !important; } /* ========================================================= Nordics Explorer — FILTERS Offcanvas (GLASS) Targets the Filters panel specifically by ID: #pi-nordics-explorer-filters-offcanvas ========================================================= */ #pi-nordics-explorer-filters-offcanvas { overflow: hidden; background: rgba(8, 26, 47, 0.97) !important; color: rgba(226, 232, 240, 0.95); border-left: 1px solid rgba(148, 163, 184, 0.22); box-shadow: -22px 0 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.10); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Ensure header/body don't repaint a white background */ #pi-nordics-explorer-filters-offcanvas .offcanvas-header, #pi-nordics-explorer-filters-offcanvas .offcanvas-body { background: transparent !important; } /* Internal blurred “texture” layer (independent of page behind) */ #pi-nordics-explorer-filters-offcanvas::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: cover; background-position: center; filter: blur(18px) saturate(160%); transform: scale(1.10); opacity: 0.70; z-index: 0; } /* Sheen + vignette */ #pi-nordics-explorer-filters-offcanvas::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* Keep real content above glass layers */ #pi-nordics-explorer-filters-offcanvas .offcanvas-header, #pi-nordics-explorer-filters-offcanvas .offcanvas-body { position: relative; z-index: 1; } /* Header title + close button */ #pi-nordics-explorer-filters-offcanvas .offcanvas-title { color: rgba(226, 232, 240, 0.95) !important; font-weight: 800; letter-spacing: 0.2px; } #pi-nordics-explorer-filters-offcanvas .btn-close { filter: invert(1) grayscale(100%); opacity: 0.85; } #pi-nordics-explorer-filters-offcanvas .btn-close:hover { opacity: 1; } /* Muted text readable on dark glass */ #pi-nordics-explorer-filters-offcanvas .text-muted, #pi-nordics-explorer-filters-offcanvas small { color: rgba(226, 232, 240, 0.72) !important; } /* ========================================================= View settings block (your .filters-section wrapper) ========================================================= */ #pi-nordics-explorer-filters-offcanvas .filters-section { padding: 12px 12px 10px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(2, 6, 23, 0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); margin-bottom: 12px; } #pi-nordics-explorer-filters-offcanvas .filters-section-title { font-weight: 800; color: rgba(226, 232, 240, 0.92); margin-bottom: 10px; } /* ========================================================= Accordion (Countries / ATC...) — glass panels ========================================================= */ #pi-nordics-explorer-filters-offcanvas .accordion-item { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(148, 163, 184, 0.18) !important; border-radius: 14px !important; overflow: hidden; margin-bottom: 10px; } #pi-nordics-explorer-filters-offcanvas .accordion-button { background: rgba(2, 6, 23, 0.18) !important; color: rgba(226, 232, 240, 0.95) !important; font-weight: 800; box-shadow: none !important; } #pi-nordics-explorer-filters-offcanvas .accordion-button:not(.collapsed) { background: rgba(2, 6, 23, 0.28) !important; } #pi-nordics-explorer-filters-offcanvas .accordion-button::after { filter: invert(1) grayscale(100%); opacity: 0.9; } #pi-nordics-explorer-filters-offcanvas .accordion-button:focus { box-shadow: 0 0 0 0.18rem rgba(56, 189, 248, 0.30) !important; } #pi-nordics-explorer-filters-offcanvas .accordion-body { background: rgba(255, 255, 255, 0.04) !important; } /* ========================================================= Bootstrap button-check pills (RadioItems + Checklist) Your options use btn-outline-secondary ========================================================= */ #pi-nordics-explorer-filters-offcanvas .btn.btn-outline-secondary { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(148, 163, 184, 0.30) !important; color: rgba(226, 232, 240, 0.86) !important; font-weight: 700; } #pi-nordics-explorer-filters-offcanvas .btn.btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(226, 232, 240, 0.42) !important; color: rgba(226, 232, 240, 0.96) !important; } #pi-nordics-explorer-filters-offcanvas .btn-check:checked + .btn.btn-outline-secondary, #pi-nordics-explorer-filters-offcanvas .btn.btn-outline-secondary.active { background: rgba(56, 189, 248, 0.18) !important; border-color: rgba(56, 189, 248, 0.55) !important; color: rgba(226, 232, 240, 0.98) !important; box-shadow: 0 10px 22px rgba(0,0,0,0.20) !important; } /* ========================================================= dcc.Dropdown (react-select) — support both class systems (Dash versions differ: Select-* vs Select__*) ========================================================= */ /* Control */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-control, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__control { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(148, 163, 184, 0.28) !important; box-shadow: none !important; } #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-control:hover, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__control:hover { border-color: rgba(226, 232, 240, 0.42) !important; } /* Placeholder / values */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-placeholder, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-value-label, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__placeholder, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__single-value { color: rgba(226, 232, 240, 0.88) !important; } /* Typing text */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-input > input, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__input input { color: rgba(226, 232, 240, 0.95) !important; } /* Dropdown arrow / indicators */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-arrow, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__indicator { filter: invert(1) grayscale(100%); opacity: 0.9; } /* Menu */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-menu-outer, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__menu { background: rgba(2, 6, 23, 0.96) !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); } /* Options */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-option, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__option { background: transparent !important; color: rgba(226, 232, 240, 0.92) !important; } #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-option.is-focused, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__option--is-focused { background: rgba(56, 189, 248, 0.14) !important; } #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-option.is-selected, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__option--is-selected { background: rgba(56, 189, 248, 0.22) !important; } /* Multi-value chips */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-value, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__multi-value { background: rgba(56, 189, 248, 0.18) !important; border: 1px solid rgba(56, 189, 248, 0.34) !important; color: rgba(226, 232, 240, 0.95) !important; } #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-value-icon, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__multi-value__remove { color: rgba(226, 232, 240, 0.92) !important; } #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-value-icon:hover, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__multi-value__remove:hover { background: rgba(56, 189, 248, 0.26) !important; } /* ========================================================= Footer (Apply / Close) polish ========================================================= */ #pi-nordics-explorer-filters-offcanvas .filters-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, 0.16); } /* ========================================================= Nordics Explorer — Filters offcanvas readability fixes ========================================================= */ /* Make labels readable on dark glass */ #pi-nordics-explorer-filters-offcanvas .form-label, #pi-nordics-explorer-filters-offcanvas label { color: rgba(226, 232, 240, 0.92) !important; } /* If anything inside accordion body inherits dark text, force it light */ #pi-nordics-explorer-filters-offcanvas .accordion-body { color: rgba(226, 232, 240, 0.90) !important; } /* Dropdown placeholder/value contrast (covers both Dash Select class systems) */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-placeholder, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__placeholder { color: rgba(226, 232, 240, 0.72) !important; } #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-value-label, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__single-value { color: rgba(226, 232, 240, 0.92) !important; } /* Slightly improve control background contrast */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-control, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__control { background: rgba(255, 255, 255, 0.06) !important; } /* ========================================================= Nordics Explorer — Filters Offcanvas PATCH Fixes: - unreadable dcc.Dropdown menu/options on dark glass - white “chin” behind Apply/Close footer Scoped ONLY to: #pi-nordics-explorer-filters-offcanvas ========================================================= */ /* ---------- Labels inside the accordion (Area/Therapy/Substance) ---------- */ #pi-nordics-explorer-filters-offcanvas .form-label, #pi-nordics-explorer-filters-offcanvas #pi-nordics-explorer-atc-area-label, #pi-nordics-explorer-filters-offcanvas #pi-nordics-explorer-atc2-label, #pi-nordics-explorer-filters-offcanvas #pi-nordics-explorer-subs-label { color: rgba(226, 232, 240, 0.92) !important; } /* If any body text inherits dark colour, force it readable */ #pi-nordics-explorer-filters-offcanvas .accordion-body { color: rgba(226, 232, 240, 0.90) !important; } /* ---------- dcc.Dropdown control (react-select) ---------- */ /* Covers BOTH class systems: old (.Select-*) and new (.Select__*) */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-control, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__control { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(148, 163, 184, 0.28) !important; border-radius: 12px !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.95) !important; } #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-control:hover, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__control:hover { border-color: rgba(226, 232, 240, 0.42) !important; } /* Placeholder + selected value */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-placeholder, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__placeholder { color: rgba(226, 232, 240, 0.65) !important; } #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-value-label, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__single-value { color: rgba(226, 232, 240, 0.95) !important; } /* Typed search text */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-input > input, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__input input { color: rgba(226, 232, 240, 0.95) !important; } /* Dropdown indicator / clear indicator */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-arrow, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__indicator, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__clear-indicator { filter: invert(1) grayscale(100%) !important; opacity: 0.90 !important; } /* ---------- Dropdown menu surface ---------- */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-menu-outer, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__menu { background: rgba(2, 6, 23, 0.96) !important; border: 1px solid rgba(148, 163, 184, 0.24) !important; border-radius: 12px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important; /* helps inside Offcanvas/Accordion stacking contexts */ z-index: 3000 !important; } /* ✅ Dash often renders options as VirtualizedSelectOption */ #pi-nordics-explorer-filters-offcanvas .dd-compact .VirtualizedSelectOption, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-option, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__option { color: rgba(226, 232, 240, 0.95) !important; background: transparent !important; } /* Focused option */ #pi-nordics-explorer-filters-offcanvas .dd-compact .VirtualizedSelectFocusedOption, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-option.is-focused, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__option--is-focused { background: rgba(56, 189, 248, 0.14) !important; color: rgba(226, 232, 240, 0.98) !important; } /* Selected option */ #pi-nordics-explorer-filters-offcanvas .dd-compact .VirtualizedSelectSelectedOption, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-option.is-selected, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__option--is-selected { background: rgba(56, 189, 248, 0.22) !important; color: rgba(226, 232, 240, 0.98) !important; font-weight: 700 !important; } /* Disabled option (if any) */ #pi-nordics-explorer-filters-offcanvas .dd-compact .VirtualizedSelectDisabledOption, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-option.is-disabled, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__option--is-disabled { color: rgba(226, 232, 240, 0.45) !important; } /* Multi-value chips (multi=True) */ #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-value, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__multi-value { background: rgba(56, 189, 248, 0.16) !important; border: 1px solid rgba(56, 189, 248, 0.30) !important; } #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__multi-value__label { color: rgba(226, 232, 240, 0.98) !important; } #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-value-icon, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__multi-value__remove { color: rgba(226, 232, 240, 0.85) !important; } #pi-nordics-explorer-filters-offcanvas .dd-compact .Select-value-icon:hover, #pi-nordics-explorer-filters-offcanvas .dd-compact .Select__multi-value__remove:hover { background: rgba(239, 68, 68, 0.22) !important; color: rgba(255, 255, 255, 0.95) !important; } /* ---------- Fix the white “chin” (footer background) ---------- */ /* Remove default bottom padding so the footer can sit flush */ #pi-nordics-explorer-filters-offcanvas .offcanvas-body { padding-bottom: 0 !important; } /* Make footer sticky + dark, and cancel the body side padding */ #pi-nordics-explorer-filters-offcanvas .filters-footer { position: sticky; bottom: 0; /* Offcanvas body padding is 1rem — cancel it so footer background spans full width */ margin: 0 -1rem; padding: 12px 1rem calc(12px + env(safe-area-inset-bottom)); background: rgba(8, 26, 47, 0.92) !important; border-top: 1px solid rgba(148, 163, 184, 0.18) !important; box-shadow: 0 -14px 28px rgba(0, 0, 0, 0.22) !important; z-index: 10; } /* Make the outline close button readable on dark footer */ #pi-nordics-explorer-filters-offcanvas .filters-footer .btn-outline-secondary { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(148, 163, 184, 0.26) !important; color: rgba(226, 232, 240, 0.92) !important; } #pi-nordics-explorer-filters-offcanvas .filters-footer .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(226, 232, 240, 0.36) !important; color: rgba(226, 232, 240, 0.98) !important; } /* ------------------------------------------------------- Nordics Explorer — Filters button count badge (fix) - lets Dash control display (no empty dot) - keeps centered digits when shown -------------------------------------------------------- */ #pi-nordics-explorer-filters-toggle{ display: inline-flex; align-items: center; } /* ✅ IMPORTANT: DO NOT set display with !important here */ #pi-nordics-explorer-filters-count.badge{ display: inline-grid; place-items: center; height: 18px; min-width: 18px; padding: 0 6px; border-radius: 999px; background-color: var(--brand-accent) !important; color: #fff !important; font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; transform: none; /* avoids “floating” feel */ } /* ✅ Safety: if children is empty/None, hide no matter what */ #pi-nordics-explorer-filters-count:empty{ display: none !important; } /* spacing from the word “Filters” */ #pi-nordics-explorer-filters-count.ms-2{ margin-left: 0.45rem !important; } /* ========================================================= Comparable-group drawer — full-height sheet, no outer scrollbar, AG Grid scrolls internally. Drawer id: #pi-nordics-explorer-comp-drawer ========================================================= */ /* 1 Drawer itself: full viewport, fixed column */ #pi-nordics-explorer-comp-drawer.offcanvas{ height: 100dvh; max-height: 100dvh; } /* 2 Body: flex column, NO scroll — only the grid scrolls */ #pi-nordics-explorer-comp-drawer .offcanvas-body{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0.75rem; } /* 3 Inner wrapper fills the body */ #pi-nordics-explorer-comp-drawer .pi-oc{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* 4 Header + chart keep natural height */ #pi-nordics-explorer-comp-drawer .pi-oc-head, #pi-nordics-explorer-comp-drawer .pi-oc-chart-card{ flex: 0 0 auto; } /* 5 White cards clip contents for rounded corners */ #pi-nordics-explorer-comp-drawer .pi-oc-white-card{ overflow: hidden; border-radius: 16px; min-width: 0; } /* 6 Table card takes ALL remaining space */ #pi-nordics-explorer-comp-drawer .pi-oc-table-card{ flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* 7 Grid wrapper fills the table card */ #pi-nordics-explorer-comp-drawer .pi-oc-grid-wrap{ flex: 1 1 auto; min-height: 0; border-radius: 14px; overflow: hidden; background: #fff; min-width: 0; max-width: 100%; } /* 8 AG Grid root fills the wrapper */ #pi-nordics-explorer-comp-drawer .pi-oc-grid-wrap .ag-root-wrapper{ border: 0 !important; border-radius: 14px; overflow: hidden; } #pi-nordics-explorer-comp-drawer .ag-theme-alpine, #pi-nordics-explorer-comp-drawer .ag-root-wrapper, #pi-nordics-explorer-comp-drawer .ag-root-wrapper-body{ min-width: 0 !important; max-width: 100% !important; width: 100% !important; } #pi-nordics-explorer-comp-drawer .pi-oc-grid-wrap .ag-theme-alpine{ height: 100% !important; min-height: 0 !important; } /* 9 Internal scrolling, hidden scrollbar */ #pi-nordics-explorer-comp-drawer .custom-ag-grid, #pi-nordics-explorer-comp-drawer .ag-body-viewport{ overflow-y: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #pi-nordics-explorer-comp-drawer .custom-ag-grid::-webkit-scrollbar, #pi-nordics-explorer-comp-drawer .ag-body-viewport::-webkit-scrollbar{ display: none; } /* ========================================================= Nordics overview — map hover/click UX fixes Put in: assets/nordics_overview.css ========================================================= */ /* --------------------------------------------------------- 1) Force hand cursor on the breadth map (removes arrow) Targets the Graph by ID. --------------------------------------------------------- */ #npd-nordics-overview-breadth-fig .js-plotly-plot, #npd-nordics-overview-breadth-fig .js-plotly-plot * { cursor: pointer !important; } /* Plotly sometimes uses draglayer for pointer events */ #npd-nordics-overview-breadth-fig .js-plotly-plot .draglayer, #npd-nordics-overview-breadth-fig .js-plotly-plot .draglayer * { cursor: pointer !important; } /* If hover still feels “arrow-ish”, keep the pointer even on text */ #npd-nordics-overview-breadth-fig .js-plotly-plot .text, #npd-nordics-overview-breadth-fig .js-plotly-plot .text * { cursor: pointer !important; } /* --------------------------------------------------------- 2) Prevent the offcanvas open animation from making the Plotly map look blurred/rasterized/weird. The two main causes are: - Bootstrap backdrop dimming/opacity transitions - "glass" blur/backdrop-filter styles on the offcanvas You already set backdrop=False on this offcanvas (best), but this also neutralizes blur if your custom class adds it. --------------------------------------------------------- */ /* --------------------------------------------------------- 3) Optional: If you still see flicker while opening, you can hint the browser to keep the map on its own layer. (Helps some GPUs / Chrome builds.) /* 1) Style the actual offcanvas element — align with custom-offcanvas look */ .offcanvas.pi-glass-offcanvas { background: rgba(8, 26, 47, 0.97) !important; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--text-strong, #F8FAFC); border-left: 1px solid var(--border-glass, rgba(255, 255, 255, 0.12)); box-shadow: var(--elev-3, 0 18px 45px rgba(0,0,0,.5)); transition: transform 0.18s cubic-bezier(.22,.68,0,1) !important; } /* 2) Make header/body transparent so the root background shows through */ .offcanvas.pi-glass-offcanvas .offcanvas-header, .offcanvas.pi-glass-offcanvas .offcanvas-body { background: transparent !important; } /* 3) Make the default close icon readable on dark */ .offcanvas.pi-glass-offcanvas .btn-close { filter: invert(1) grayscale(100%); opacity: 0.9; } .offcanvas.pi-glass-offcanvas .btn-close:hover { opacity: 1; } /* Optional: if you currently see a “blank strip” at the top */ .offcanvas.pi-glass-offcanvas .offcanvas-header { padding-top: 0.75rem; padding-bottom: 0.25rem; } /* ========================================================= Nordics Overview — Country overview offcanvas (GLASS) Targets ONLY this drawer by ID ========================================================= */ #npd-nordics-overview-country-overview-offcanvas{ overflow: hidden; /* ✅ dark base (same family as your other drawers) */ background: rgba(8, 26, 47, 0.96) !important; color: rgba(226, 232, 240, 0.95) !important; border-left: 1px solid rgba(148, 163, 184, 0.22) !important; box-shadow: -22px 0 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; border-top-left-radius: 16px; border-bottom-left-radius: 16px; /* ✅ keep the map crisp while opening (no “real” backdrop blur) */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* keep real content above the texture */ #npd-nordics-overview-country-overview-offcanvas .offcanvas-header, #npd-nordics-overview-country-overview-offcanvas .offcanvas-body{ background: transparent !important; } /* close button visible on dark */ #npd-nordics-overview-country-overview-offcanvas .btn-close{ filter: invert(1) grayscale(100%); opacity: 0.85; } #npd-nordics-overview-country-overview-offcanvas .btn-close:hover{ opacity: 1; } /* muted text readable on dark glass */ #npd-nordics-overview-country-overview-offcanvas .text-muted, #npd-nordics-overview-country-overview-offcanvas small{ color: rgba(226, 232, 240, 0.72) !important; } /* ----------------------------- NPD Nordics Overview — hover cues ----------------------------- */ /* Bars (all 3 charts) */ #npd-nordics-overview-country-index .barlayer .trace .points path, #npd-nordics-overview-short-status-country .barlayer .trace .points path, #npd-nordics-overview-short-top-groups .barlayer .trace .points path { cursor: pointer; transition: filter 120ms ease, opacity 120ms ease, stroke-width 120ms ease; } /* Subtle lift on hover */ #npd-nordics-overview-country-index .barlayer .trace .points path:hover, #npd-nordics-overview-short-status-country .barlayer .trace .points path:hover, #npd-nordics-overview-short-top-groups .barlayer .trace .points path:hover { filter: brightness(1.08); opacity: 0.96; stroke: rgba(15, 23, 42, 0.35); stroke-width: 1px; } /* Choropleth country polygons */ #npd-nordics-overview-breadth-fig .choroplethlayer path { cursor: pointer; transition: filter 120ms ease, opacity 120ms ease; } /* Subtle lift on hover (no border override -> avoids fighting your selected border trace) */ #npd-nordics-overview-breadth-fig .choroplethlayer path:hover { filter: brightness(1.07); opacity: 0.97; } /* Country “chip” squares (scattergeo markers) */ #npd-nordics-overview-breadth-fig .scatterlayer .trace .points path { cursor: pointer; transition: filter 120ms ease, opacity 120ms ease; } #npd-nordics-overview-breadth-fig .scatterlayer .trace .points path:hover { filter: brightness(1.08); opacity: 0.96; } /* Chip text (Scattergeo text trace) */ #npd-nordics-overview-breadth-fig .scatterlayer text { cursor: pointer; } /* ========================================================= Shortages Risk Drawer — PATCH (fix positioning + subtle blue) Drawer id: #sh-risk-drawer ========================================================= */ /* ✅ 1) FIX: restore Bootstrap Offcanvas positioning If any earlier CSS set position: relative/absolute, this overrides it. */ #sh-risk-drawer.offcanvas { position: fixed !important; top: 0 !important; bottom: 0 !important; } /* If your drawer is placement="end" (right side) */ #sh-risk-drawer.offcanvas-end { right: 0 !important; left: auto !important; /* rounded only on the inside edge */ border-top-left-radius: 16px !important; border-bottom-left-radius: 16px !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* If your drawer is placement="start" (left side) */ #sh-risk-drawer.offcanvas-start { left: 0 !important; right: auto !important; border-top-right-radius: 16px !important; border-bottom-right-radius: 16px !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } border-left: 1px solid rgba(148, 163, 184, 0.22) !important; box-shadow: -22px 0 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; /* IMPORTANT: do NOT set position here (Bootstrap needs fixed) */ } /* Texture layer: keep it, but bias it slightly “bluer” and softer */ #sh-risk-drawer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: cover; background-position: center; filter: blur(18px) saturate(155%); transform: scale(1.10); opacity: 0.62; z-index: 0; } #sh-risk-drawer::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* Keep content above texture */ #sh-risk-drawer .offcanvas-header, #sh-risk-drawer .offcanvas-body { background: transparent !important; position: relative; z-index: 1; } /* Header divider (more “finished”) */ #sh-risk-drawer .offcanvas-header { border-bottom: 1px solid rgba(148,163,184,0.16) !important; padding-top: 0.85rem; padding-bottom: 0.55rem; } /* Close button readable */ #sh-risk-drawer .btn-close { filter: invert(1) grayscale(100%); opacity: 0.85; } #sh-risk-drawer .btn-close:hover { opacity: 1; } /* ✅ 3) Tabs: keep your pill rail, but make it blue-tinted (less grey) */ #sh-risk-drawer .nav-tabs { border-bottom: 0 !important; display: inline-flex; gap: 4px; background: rgba(21, 87, 162, 0.16); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 14px; padding: 4px; margin-bottom: 14px; } #sh-risk-drawer .nav-tabs .nav-link { border: 0 !important; border-radius: 10px !important; color: rgba(226, 232, 240, 0.78) !important; font-weight: 850; padding: 0.42rem 0.85rem; background: transparent !important; transition: background-color 120ms ease, box-shadow 120ms ease, color 120ms ease; } #sh-risk-drawer .nav-tabs .nav-link:hover { background: rgba(255, 255, 255, 0.06) !important; color: rgba(226, 232, 240, 0.94) !important; } #sh-risk-drawer .nav-tabs .nav-link.active { background: rgba(56, 189, 248, 0.12) !important; /* subtle blue “active” */ color: rgba(226, 232, 240, 0.98) !important; border: 1px solid rgba(56, 189, 248, 0.28) !important; box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important; } /* ✅ 4) Cards: transparent but more visible (like your Notifications panel) */ #sh-risk-drawer .card { background: rgba(255, 255, 255, 0.075) !important; /* slightly stronger */ border: 1px solid rgba(148, 163, 184, 0.20) !important; border-radius: 16px !important; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); color: rgba(226, 232, 240, 0.95) !important; } /* Progress bar blends into glass */ #sh-risk-drawer .progress { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; } #sh-risk-drawer .progress-bar { background-color: var(--brand-accent, rgba(56, 189, 248, 0.85)) !important; } /* ── Country Selection Offcanvas (was: country_offcanvas.css) ── */ /* =========================================================== PI – Country & Currency Offcanvas (no change to middle panel background) =========================================================== */ #pi-country-offcanvas.offcanvas, #pi-currency-offcanvas.offcanvas { /* width / shell */ --bs-offcanvas-width: min(92vw, 420px); width: var(--bs-offcanvas-width) !important; color: var(--text-strong); border-left: 1px solid var(--border-glass); border-radius: var(--radius-lg) 0 0 var(--radius-lg); box-shadow: var(--elev-3); -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%); height: 100vh; height: 100dvh; max-height: 100dvh; overflow: hidden; /* body scrolls, shell stays fixed */ } @media (max-width: 576px) { #pi-country-offcanvas.offcanvas, #pi-currency-offcanvas.offcanvas { border-radius: 0; } } /* Header --------------------------------------------------- */ #pi-country-offcanvas .offcanvas-header, #pi-currency-offcanvas .offcanvas-header { border-bottom: 1px solid var(--divider-glass); } #pi-country-offcanvas .offcanvas-title, #pi-currency-offcanvas .offcanvas-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.125rem; letter-spacing: 0.2px; } #pi-country-offcanvas .btn-close, #pi-currency-offcanvas .btn-close { filter: invert(1) opacity(0.75); } #pi-country-offcanvas .btn-close:hover, #pi-currency-offcanvas .btn-close:hover { opacity: 1; } /* Body layout (NO background override here) ---------------- */ #pi-country-offcanvas .offcanvas-body, #pi-currency-offcanvas .offcanvas-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } /* Checklist items ------------------------------------------ */ #pi-country-offcanvas .form-check, #pi-currency-offcanvas .form-check { margin-bottom: 0.5rem; } #pi-country-offcanvas .form-check-label, #pi-currency-offcanvas .form-check-label { color: var(--text-strong); font-weight: 500; } /* Checkbox styling ----------------------------------------- */ #pi-country-offcanvas .form-check-input, #pi-currency-offcanvas .form-check-input { border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glass); box-shadow: none; } #pi-country-offcanvas .form-check-input:focus, #pi-currency-offcanvas .form-check-input:focus { box-shadow: var(--focus-ring); border-color: rgba(72, 168, 255, 0.65); } #pi-country-offcanvas .form-check-input:checked, #pi-currency-offcanvas .form-check-input:checked { background-color: var(--brand-accent); border-color: var(--brand-accent); } /* Footer + Apply button ------------------------------------ */ #pi-country-offcanvas .offcanvas-footer, #pi-currency-offcanvas .offcanvas-footer { position: sticky; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; padding: 12px 16px 20px; background: inherit; /* ← no dark “chin” */ border-top: 1px solid var(--divider-glass); z-index: 3; } #pi-country-offcanvas .offcanvas-footer .btn, #pi-currency-offcanvas .offcanvas-footer .btn { min-width: 120px; font-weight: 600; } #pi-country-offcanvas .offcanvas-footer .btn-primary, #pi-currency-offcanvas .offcanvas-footer .btn-primary { background-color: var(--brand-accent) !important; border-color: var(--brand-accent) !important; } #pi-country-offcanvas .offcanvas-footer .btn-primary:hover, #pi-currency-offcanvas .offcanvas-footer .btn-primary:hover { filter: brightness(1.03); } #pi-country-offcanvas .offcanvas-footer .btn-primary:active, #pi-currency-offcanvas .offcanvas-footer .btn-primary:active { filter: brightness(0.97); } /* =========================================================== Country & Currency Offcanvas (all ids ending in these) =========================================================== */ [id$="-country-offcanvas"].offcanvas, [id$="-currency-offcanvas"].offcanvas { /* size & position */ --bs-offcanvas-width: min(92vw, 420px); --bs-offcanvas-bg: rgba(10, 27, 61, 0.96); /* shell colour */ width: var(--bs-offcanvas-width) !important; background-color: var(--bs-offcanvas-bg) !important; color: var(--text-strong); border-left: 1px solid var(--border-glass); border-radius: var(--radius-lg) 0 0 var(--radius-lg); box-shadow: var(--elev-3); -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%); height: 100vh; height: 100dvh; max-height: 100dvh; overflow: hidden; } @media (max-width: 576px) { [id$="-country-offcanvas"].offcanvas, [id$="-currency-offcanvas"].offcanvas { border-radius: 0; } } /* Header --------------------------------------------------- */ [id$="-country-offcanvas"] .offcanvas-header, [id$="-currency-offcanvas"] .offcanvas-header { border-bottom: 1px solid var(--divider-glass); } [id$="-country-offcanvas"] .offcanvas-title, [id$="-currency-offcanvas"] .offcanvas-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.125rem; letter-spacing: 0.2px; } [id$="-country-offcanvas"] .btn-close, [id$="-currency-offcanvas"] .btn-close { filter: invert(1) opacity(0.75); } [id$="-country-offcanvas"] .btn-close:hover, [id$="-currency-offcanvas"] .btn-close:hover { opacity: 1; } /* Body layout ---------------------------------------------- */ [id$="-country-offcanvas"] .offcanvas-body, [id$="-currency-offcanvas"] .offcanvas-body { padding: 16px 20px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } /* Checklist items (plain form-checks) ---------------------- */ [id$="-country-offcanvas"] .form-check, [id$="-currency-offcanvas"] .form-check { margin-bottom: 0.5rem; } [id$="-country-offcanvas"] .form-check-label, [id$="-currency-offcanvas"] .form-check-label { color: var(--text-strong); font-weight: 500; } /* Checkbox styling ----------------------------------------- */ [id$="-country-offcanvas"] .form-check-input, [id$="-currency-offcanvas"] .form-check-input { border-radius: 999px; width: 16px; height: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glass); box-shadow: none; } [id$="-country-offcanvas"] .form-check-input:focus, [id$="-currency-offcanvas"] .form-check-input:focus { box-shadow: var(--focus-ring); border-color: rgba(72, 168, 255, 0.75); } [id$="-country-offcanvas"] .form-check-input:checked, [id$="-currency-offcanvas"] .form-check-input:checked { background-color: var(--brand-accent); border-color: var(--brand-accent); } /* Footer + Apply button (no extra dark "chin") ------------- */ [id$="-country-offcanvas"] .offcanvas-footer, [id$="-currency-offcanvas"] .offcanvas-footer { position: sticky; bottom: 0; left: 0; right: 0; padding: 12px 20px 16px; /* same colour as shell so it blends in */ background-color: var(--bs-offcanvas-bg); border-top: 1px solid var(--divider-glass); z-index: 3; } /* Full‑width Apply button inside footer (and fallback in body) */ [id$="-country-offcanvas"] .offcanvas-footer .btn, [id$="-currency-offcanvas"] .offcanvas-footer .btn, [id$="-country-offcanvas"] .offcanvas-body .btn[id$="-apply"], [id$="-currency-offcanvas"] .offcanvas-body .btn[id$="-apply"] { width: 100%; background-color: var(--brand-accent); border-color: var(--brand-accent); font-weight: 600; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); } [id$="-country-offcanvas"] .offcanvas-footer .btn:hover, [id$="-currency-offcanvas"] .offcanvas-footer .btn:hover, [id$="-country-offcanvas"] .offcanvas-body .btn[id$="-apply"]:hover, [id$="-currency-offcanvas"] .offcanvas-body .btn[id$="-apply"]:hover { filter: brightness(1.04); } [id$="-country-offcanvas"] .offcanvas-footer .btn:active, [id$="-currency-offcanvas"] .offcanvas-footer .btn:active, [id$="-country-offcanvas"] .offcanvas-body .btn[id$="-apply"]:active, [id$="-currency-offcanvas"] .offcanvas-body .btn[id$="-apply"]:active { filter: brightness(0.97); } [id$="-country-offcanvas"] .offcanvas-body input[type="search"], [id$="-currency-offcanvas"] .offcanvas-body input[type="search"] { display: none !important; } [id$="-country-offcanvas"] .offcanvas-body > :has(input[type="search"]), [id$="-currency-offcanvas"] .offcanvas-body > :has(input[type="search"]) { display: none !important; } /* Hide the search bar in the country/currency offcanvas */ [id$="-country-offcanvas"] .offcanvas-body [placeholder^="Search"], [id$="-currency-offcanvas"] .offcanvas-body [placeholder^="Search"] { display: none !important; } /* =========================================================== Country, Currency & Price Source Offcanvas (all ids ending in these) =========================================================== */ [id$="-country-offcanvas"].offcanvas, [id$="-currency-offcanvas"].offcanvas, [id$="-price-source-offcanvas"].offcanvas { /* size & position */ --bs-offcanvas-width: min(92vw, 420px); --bs-offcanvas-bg: rgba(10, 27, 61, 0.96); /* shell colour */ width: var(--bs-offcanvas-width) !important; background-color: var(--bs-offcanvas-bg) !important; color: var(--text-strong); border-left: 1px solid var(--border-glass); border-radius: var(--radius-lg) 0 0 var(--radius-lg); box-shadow: var(--elev-3); -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%); height: 100vh; height: 100dvh; max-height: 100dvh; overflow: hidden; } @media (max-width: 576px) { [id$="-country-offcanvas"].offcanvas, [id$="-currency-offcanvas"].offcanvas, [id$="-price-source-offcanvas"].offcanvas { border-radius: 0; } } /* Header --------------------------------------------------- */ [id$="-country-offcanvas"] .offcanvas-header, [id$="-currency-offcanvas"] .offcanvas-header, [id$="-price-source-offcanvas"] .offcanvas-header { border-bottom: 1px solid var(--divider-glass); } [id$="-country-offcanvas"] .offcanvas-title, [id$="-currency-offcanvas"] .offcanvas-title, [id$="-price-source-offcanvas"] .offcanvas-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.125rem; letter-spacing: 0.2px; } [id$="-country-offcanvas"] .btn-close, [id$="-currency-offcanvas"] .btn-close, [id$="-price-source-offcanvas"] .btn-close { filter: invert(1) opacity(0.75); } [id$="-country-offcanvas"] .btn-close:hover, [id$="-currency-offcanvas"] .btn-close:hover, [id$="-price-source-offcanvas"] .btn-close:hover { opacity: 1; } /* Body layout ---------------------------------------------- */ [id$="-country-offcanvas"] .offcanvas-body, [id$="-currency-offcanvas"] .offcanvas-body, [id$="-price-source-offcanvas"] .offcanvas-body { padding: 16px 20px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } /* Checklist / radio items ---------------------------------- */ [id$="-country-offcanvas"] .form-check, [id$="-currency-offcanvas"] .form-check, [id$="-price-source-offcanvas"] .form-check { margin-bottom: 0.5rem; } [id$="-country-offcanvas"] .form-check-label, [id$="-currency-offcanvas"] .form-check-label, [id$="-price-source-offcanvas"] .form-check-label { color: var(--text-strong); font-weight: 500; } /* Checkbox / radio styling --------------------------------- */ [id$="-country-offcanvas"] .form-check-input, [id$="-currency-offcanvas"] .form-check-input, [id$="-price-source-offcanvas"] .form-check-input { border-radius: 999px; width: 16px; height: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glass); box-shadow: none; } [id$="-country-offcanvas"] .form-check-input:focus, [id$="-currency-offcanvas"] .form-check-input:focus, [id$="-price-source-offcanvas"] .form-check-input:focus { box-shadow: var(--focus-ring); border-color: rgba(72, 168, 255, 0.75); } [id$="-country-offcanvas"] .form-check-input:checked, [id$="-currency-offcanvas"] .form-check-input:checked, [id$="-price-source-offcanvas"] .form-check-input:checked { background-color: var(--brand-accent); border-color: var(--brand-accent); } /* Footer + bottom button ----------------------------------- */ [id$="-country-offcanvas"] .offcanvas-footer, [id$="-currency-offcanvas"] .offcanvas-footer, [id$="-price-source-offcanvas"] .offcanvas-footer { position: sticky; bottom: 0; left: 0; right: 0; padding: 12px 20px 16px; background-color: var(--bs-offcanvas-bg); border-top: 1px solid var(--divider-glass); z-index: 3; } /* Full‑width button inside footer (and fallback in body) */ [id$="-country-offcanvas"] .offcanvas-footer .btn, [id$="-currency-offcanvas"] .offcanvas-footer .btn, [id$="-price-source-offcanvas"] .offcanvas-footer .btn, [id$="-country-offcanvas"] .offcanvas-body .btn[id$="-apply"], [id$="-currency-offcanvas"] .offcanvas-body .btn[id$="-apply"], [id$="-price-source-offcanvas"] .offcanvas-body .btn[id$="-apply"] { width: 100%; background-color: var(--brand-accent); border-color: var(--brand-accent); font-weight: 600; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); } [id$="-country-offcanvas"] .offcanvas-footer .btn:hover, [id$="-currency-offcanvas"] .offcanvas-footer .btn:hover, [id$="-price-source-offcanvas"] .offcanvas-footer .btn:hover, [id$="-country-offcanvas"] .offcanvas-body .btn[id$="-apply"]:hover, [id$="-currency-offcanvas"] .offcanvas-body .btn[id$="-apply"]:hover, [id$="-price-source-offcanvas"] .offcanvas-body .btn[id$="-apply"]:hover { filter: brightness(1.04); } [id$="-country-offcanvas"] .offcanvas-footer .btn:active, [id$="-currency-offcanvas"] .offcanvas-footer .btn:active, [id$="-price-source-offcanvas"] .offcanvas-footer .btn:active, [id$="-country-offcanvas"] .offcanvas-body .btn[id$="-apply"]:active, [id$="-currency-offcanvas"] .offcanvas-body .btn[id$="-apply"]:active, [id$="-price-source-offcanvas"] .offcanvas-body .btn[id$="-apply"]:active { filter: brightness(0.97); } /* (optional) hide search inside country/currency only ------- */ [id$="-country-offcanvas"] .offcanvas-body input[type="search"], [id$="-currency-offcanvas"] .offcanvas-body input[type="search"] { display: none !important; } [id$="-country-offcanvas"] .offcanvas-body > :has(input[type="search"]), [id$="-currency-offcanvas"] .offcanvas-body > :has(input[type="search"]) { display: none !important; } /* Market‑Trends only: remove the dark "chin" under the Apply button */ #mt-country-offcanvas .offcanvas-body, #mt-currency-offcanvas .offcanvas-body { padding-bottom: 0.5rem; /* or 0, if you want it completely flush */ } /* Kill any extra padding/margin on the last child (the Apply wrapper) */ #mt-country-offcanvas .offcanvas-body > div:last-child, #mt-currency-offcanvas .offcanvas-body > div:last-child { margin-bottom: 0; padding-bottom: 0; } /* ── General Offcanvas (was: offcanvas_general.css) ───────────── */ /* ===================================================================== Historical dimension filters – Offcanvas Match the Settings drawer look & feel Targets: atc / laegemiddel / subgroup / firma / varenummer / pakkeinformation / active_substance / styrke_format_1 / format ===================================================================== */ /* 1) SHELL – same navy glass as Settings drawer ------------------------------------------------------------------ */ #atc-offcanvas.offcanvas, #active_substance-offcanvas.offcanvas, #laegemiddel-offcanvas.offcanvas, #subgroup-offcanvas.offcanvas, #firma-offcanvas.offcanvas, #varenummer-offcanvas.offcanvas, #pakkeinformation-offcanvas.offcanvas, #styrke_format_1-offcanvas.offcanvas, #format-offcanvas.offcanvas { --bs-offcanvas-width: min(96vw, 520px); width: var(--bs-offcanvas-width) !important; background: rgba(16, 38, 79, 0.90) !important; -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%); color: var(--text-strong); border-left: 1px solid var(--border-glass); border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important; box-shadow: var(--elev-3) !important; height: 100vh; height: 100dvh; max-height: 100dvh; overflow: hidden; } @media (max-width: 576px) { #atc-offcanvas.offcanvas, #active_substance-offcanvas.offcanvas, #laegemiddel-offcanvas.offcanvas, #subgroup-offcanvas.offcanvas, #firma-offcanvas.offcanvas, #varenummer-offcanvas.offcanvas, #pakkeinformation-offcanvas.offcanvas, #styrke_format_1-offcanvas.offcanvas, #format-offcanvas.offcanvas { border-radius: 0 !important; } } /* Header ------------------------------------------------------------ */ #atc-offcanvas .offcanvas-header, #active_substance-offcanvas .offcanvas-header, #laegemiddel-offcanvas .offcanvas-header, #subgroup-offcanvas .offcanvas-header, #firma-offcanvas .offcanvas-header, #varenummer-offcanvas .offcanvas-header, #pakkeinformation-offcanvas .offcanvas-header, #styrke_format_1-offcanvas .offcanvas-header, #format-offcanvas .offcanvas-header { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--divider-glass); } #atc-offcanvas .offcanvas-title, #active_substance-offcanvas .offcanvas-title, #laegemiddel-offcanvas .offcanvas-title, #subgroup-offcanvas .offcanvas-title, #firma-offcanvas .offcanvas-title, #varenummer-offcanvas .offcanvas-title, #pakkeinformation-offcanvas .offcanvas-title, #styrke_format_1-offcanvas .offcanvas-title, #format-offcanvas .offcanvas-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.1rem; letter-spacing: 0.15px; } #atc-offcanvas .btn-close, #active_substance-offcanvas .btn-close, #laegemiddel-offcanvas .btn-close, #subgroup-offcanvas .btn-close, #firma-offcanvas .btn-close, #varenummer-offcanvas .btn-close, #pakkeinformation-offcanvas .btn-close, #styrke_format_1-offcanvas .btn-close, #format-offcanvas .btn-close { filter: invert(1) opacity(0.75); } #atc-offcanvas .btn-close:hover, #active_substance-offcanvas .btn-close:hover, #laegemiddel-offcanvas .btn-close:hover, #subgroup-offcanvas .btn-close:hover, #firma-offcanvas .btn-close:hover, #varenummer-offcanvas .btn-close:hover, #pakkeinformation-offcanvas .btn-close:hover, #styrke_format_1-offcanvas .btn-close:hover, #format-offcanvas .btn-close:hover { opacity: 1; } /* Body layout ------------------------------------------------------- */ #atc-offcanvas .offcanvas-body, #active_substance-offcanvas .offcanvas-body, #laegemiddel-offcanvas .offcanvas-body, #subgroup-offcanvas .offcanvas-body, #firma-offcanvas .offcanvas-body, #varenummer-offcanvas .offcanvas-body, #pakkeinformation-offcanvas .offcanvas-body, #styrke_format_1-offcanvas .offcanvas-body, #format-offcanvas .offcanvas-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden !important; /* only list scrolls */ } /* ===================================================================== 2) TOP CONTROLS – Search + Select all + Clear (aligned row) ===================================================================== */ /* Glass panel holding search + buttons */ #atc-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0, #active_substance-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0, #laegemiddel-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0, #subgroup-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0, #firma-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0, #varenummer-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0, #pakkeinformation-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0, #styrke_format_1-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0, #format-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 { background: var(--surface-glass-weak) !important; border-radius: var(--radius-md); border: 1px solid var(--border-glass); padding: 0.65rem 0.9rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; /* wrap buttons under search on very narrow screens */ } /* Kill default .mb-3 margin so it doesn't nudge things vertically */ #atc-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3, #active_substance-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3, #laegemiddel-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3, #subgroup-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3, #firma-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3, #varenummer-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3, #pakkeinformation-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3, #styrke_format_1-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3, #format-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3 { margin: 0 !important; } /* Search wrapper – flexes to fill */ #atc-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:first-child, #active_substance-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:first-child, #laegemiddel-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:first-child, #subgroup-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:first-child, #firma-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:first-child, #varenummer-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:first-child, #pakkeinformation-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:first-child, #styrke_format_1-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:first-child, #format-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:first-child { flex: 1 1 0; min-width: 0; } /* Cancel Bootstrap's width:100% on the input-group so it can share the row */ #atc-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 .input-group.mb-3, #active_substance-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 .input-group.mb-3, #laegemiddel-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 .input-group.mb-3, #subgroup-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 .input-group.mb-3, #firma-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 .input-group.mb-3, #varenummer-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 .input-group.mb-3, #pakkeinformation-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 .input-group.mb-3, #styrke_format_1-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 .input-group.mb-3, #format-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 .input-group.mb-3 { flex: 1 1 auto; min-width: 0; width: auto !important; margin-bottom: 0 !important; } /* Buttons container – sits to the right of search */ #atc-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:not(:first-child), #active_substance-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:not(:first-child), #laegemiddel-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:not(:first-child), #subgroup-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:not(:first-child), #firma-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:not(:first-child), #varenummer-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:not(:first-child), #pakkeinformation-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:not(:first-child), #styrke_format_1-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:not(:first-child), #format-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:not(:first-child) { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } /* Search input (same height as buttons) */ #atc-offcanvas input[id$="-search-input"], #active_substance-offcanvas input[id$="-search-input"], #laegemiddel-offcanvas input[id$="-search-input"], #subgroup-offcanvas input[id$="-search-input"], #firma-offcanvas input[id$="-search-input"], #varenummer-offcanvas input[id$="-search-input"], #pakkeinformation-offcanvas input[id$="-search-input"], #styrke_format_1-offcanvas input[id$="-search-input"], #format-offcanvas input[id$="-search-input"] { height: 40px; padding: 0 0.9rem !important; border-radius: 10px !important; font-size: 0.9rem; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: var(--text-strong) !important; width: 100% !important; } #atc-offcanvas input[id$="-search-input"]::placeholder, #active_substance-offcanvas input[id$="-search-input"]::placeholder, #laegemiddel-offcanvas input[id$="-search-input"]::placeholder, #subgroup-offcanvas input[id$="-search-input"]::placeholder, #firma-offcanvas input[id$="-search-input"]::placeholder, #varenummer-offcanvas input[id$="-search-input"]::placeholder, #pakkeinformation-offcanvas input[id$="-search-input"]::placeholder, #styrke_format_1-offcanvas input[id$="-search-input"]::placeholder, #format-offcanvas input[id$="-search-input"]::placeholder { color: var(--text-muted); } /* --- Select All + Clear filters: fully normalized ghost buttons ------ */ :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) button[id$="-select-all"], :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) button[id$="-clear-all"] { box-sizing: border-box; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 40px !important; padding: 0 0.9rem !important; margin: 0 !important; border-radius: 10px !important; font-size: 0.875rem; font-weight: 500; line-height: 1 !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: var(--text-strong) !important; white-space: nowrap; min-width: max-content; box-shadow: none !important; } /* Hover + focus, same as ghost buttons in settings.css */ :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) button[id$="-select-all"]:hover, :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) button[id$="-clear-all"]:hover { background: rgba(255, 255, 255, 0.04) !important; } :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) button[id$="-select-all"]:focus-visible, :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) button[id$="-clear-all"]:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ===================================================================== 3) LIST AREA – square checkboxes + subtle list panel ===================================================================== */ #atc-offcanvas #atc-options-container, #active_substance-offcanvas #active_substance-options-container, #laegemiddel-offcanvas #laegemiddel-options-container, #subgroup-offcanvas #subgroup-options-container, #firma-offcanvas #firma-options-container, #varenummer-offcanvas #varenummer-options-container, #pakkeinformation-offcanvas #pakkeinformation-options-container, #styrke_format_1-offcanvas #styrke_format_1-options-container, #format-offcanvas #format-options-container { flex: 1 1 auto; min-height: 0; overflow: auto !important; border-radius: var(--radius-md); border: 1px solid var(--border-glass) !important; background: rgba(255, 255, 255, 0.04) !important; } /* Row spacing & labels */ #atc-offcanvas .form-check, #active_substance-offcanvas .form-check, #laegemiddel-offcanvas .form-check, #subgroup-offcanvas .form-check, #firma-offcanvas .form-check, #varenummer-offcanvas .form-check, #pakkeinformation-offcanvas .form-check, #styrke_format_1-offcanvas .form-check, #format-offcanvas .form-check { margin-bottom: 0.35rem; } #atc-offcanvas .form-check-label, #active_substance-offcanvas .form-check-label, #laegemiddel-offcanvas .form-check-label, #subgroup-offcanvas .form-check-label, #firma-offcanvas .form-check-label, #varenummer-offcanvas .form-check-label, #pakkeinformation-offcanvas .form-check-label, #styrke_format_1-offcanvas .form-check-label, #format-offcanvas .form-check-label { color: var(--text-strong); font-weight: 500; font-size: 0.95rem; } /* Square-ish checkbox bullets */ #atc-offcanvas .form-check-input, #active_substance-offcanvas .form-check-input, #laegemiddel-offcanvas .form-check-input, #subgroup-offcanvas .form-check-input, #firma-offcanvas .form-check-input, #varenummer-offcanvas .form-check-input, #pakkeinformation-offcanvas .form-check-input, #styrke_format_1-offcanvas .form-check-input, #format-offcanvas .form-check-input { width: 16px; height: 16px; border-radius: 4px !important; margin-top: 0.25rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glass); box-shadow: none; } #atc-offcanvas .form-check-input:checked, #active_substance-offcanvas .form-check-input:checked, #laegemiddel-offcanvas .form-check-input:checked, #subgroup-offcanvas .form-check-input:checked, #firma-offcanvas .form-check-input:checked, #varenummer-offcanvas .form-check-input:checked, #pakkeinformation-offcanvas .form-check-input:checked, #styrke_format_1-offcanvas .form-check-input:checked, #format-offcanvas .form-check-input:checked { background-color: var(--brand-accent); border-color: var(--brand-accent); } #atc-offcanvas .form-check-input:focus, #active_substance-offcanvas .form-check-input:focus, #laegemiddel-offcanvas .form-check-input:focus, #subgroup-offcanvas .form-check-input:focus, #firma-offcanvas .form-check-input:focus, #varenummer-offcanvas .form-check-input:focus, #pakkeinformation-offcanvas .form-check-input:focus, #styrke_format_1-offcanvas .form-check-input:focus, #format-offcanvas .form-check-input:focus { box-shadow: var(--focus-ring); } /* "Show all" button at bottom of list */ #atc-offcanvas button[id$="-load-more"], #active_substance-offcanvas button[id$="-load-more"], #laegemiddel-offcanvas button[id$="-load-more"], #subgroup-offcanvas button[id$="-load-more"], #firma-offcanvas button[id$="-load-more"], #varenummer-offcanvas button[id$="-load-more"], #pakkeinformation-offcanvas button[id$="-load-more"], #styrke_format_1-offcanvas button[id$="-load-more"], #format-offcanvas button[id$="-load-more"] { margin-top: 0.5rem; height: 32px; border-radius: 8px !important; } /* ===================================================================== 4) APPLY BUTTON – footer CTA (like “Save changes” ===================================================================== */ #atc-offcanvas .offcanvas-body > .p-3:last-child, #active_substance-offcanvas .offcanvas-body > .p-3:last-child, #laegemiddel-offcanvas .offcanvas-body > .p-3:last-child, #subgroup-offcanvas .offcanvas-body > .p-3:last-child, #firma-offcanvas .offcanvas-body > .p-3:last-child, #varenummer-offcanvas .offcanvas-body > .p-3:last-child, #pakkeinformation-offcanvas .offcanvas-body > .p-3:last-child, #styrke_format_1-offcanvas .offcanvas-body > .p-3:last-child, #format-offcanvas .offcanvas-body > .p-3:last-child { padding: 0.75rem 0; border-top: 1px solid var(--divider-glass); } /* Full‑width Apply CTA */ #atc-offcanvas button[id$="-apply"], #active_substance-offcanvas button[id$="-apply"], #laegemiddel-offcanvas button[id$="-apply"], #subgroup-offcanvas button[id$="-apply"], #firma-offcanvas button[id$="-apply"], #varenummer-offcanvas button[id$="-apply"], #pakkeinformation-offcanvas button[id$="-apply"], #styrke_format_1-offcanvas button[id$="-apply"], #format-offcanvas button[id$="-apply"] { width: 100% !important; height: 40px; border-radius: 10px !important; font-size: 0.95rem; font-weight: 600; background-color: var(--brand-accent) !important; border-color: var(--brand-accent) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); } /* "Show all" button at bottom of list */ #atc-offcanvas button[id$="-load-more"], #active_substance-offcanvas button[id$="-load-more"], #laegemiddel-offcanvas button[id$="-load-more"], #subgroup-offcanvas button[id$="-load-more"], #firma-offcanvas button[id$="-load-more"], #varenummer-offcanvas button[id$="-load-more"], #pakkeinformation-offcanvas button[id$="-load-more"], #styrke_format_1-offcanvas button[id$="-load-more"], #format-offcanvas button[id$="-load-more"] { display: block; width: 100% !important; /* span the list width */ margin-top: 0.75rem; height: 32px; border-radius: 10px !important; font-size: 0.85rem; font-weight: 500; white-space: nowrap; background-color: rgba(6, 22, 55, 0.8); /* dark glassy chip */ border: 1px solid rgba(255, 255, 255, 0.16); color: var(--text-muted); box-shadow: none; } /* Hover + focus to match the rest of the drawer CTAs */ #atc-offcanvas button[id$="-load-more"]:hover, #active_substance-offcanvas button[id$="-load-more"]:hover, #laegemiddel-offcanvas button[id$="-load-more"]:hover, #subgroup-offcanvas button[id$="-load-more"]:hover, #firma-offcanvas button[id$="-load-more"]:hover, #varenummer-offcanvas button[id$="-load-more"]:hover, #pakkeinformation-offcanvas button[id$="-load-more"]:hover, #styrke_format_1-offcanvas button[id$="-load-more"]:hover, #format-offcanvas button[id$="-load-more"]:hover { background-color: rgba(255, 255, 255, 0.04); color: var(--text-strong); } #atc-offcanvas button[id$="-load-more"]:focus-visible, #active_substance-offcanvas button[id$="-load-more"]:focus-visible, #laegemiddel-offcanvas button[id$="-load-more"]:focus-visible, #subgroup-offcanvas button[id$="-load-more"]:focus-visible, #firma-offcanvas button[id$="-load-more"]:focus-visible, #varenummer-offcanvas button[id$="-load-more"]:focus-visible, #pakkeinformation-offcanvas button[id$="-load-more"]:focus-visible, #styrke_format_1-offcanvas button[id$="-load-more"]:focus-visible, #format-offcanvas button[id$="-load-more"]:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* "Show All" — match ghost buttons (Select / Clear) */ :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) button[id$="-load-more"] { display: block; width: 100% !important; margin: 0.75rem 0 0; height: 40px; border-radius: 10px !important; padding: 0 0.9rem; font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: var(--text-strong); box-shadow: none; } /* Hover + focus (same as ghost buttons) */ :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) button[id$="-load-more"]:hover { background: rgba(255, 255, 255, 0.04) !important; } :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) button[id$="-load-more"]:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Unified glass scrollbars for all filter lists */ :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) [id$="-options-container"] { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; } :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) [id$="-options-container"]::-webkit-scrollbar { width: 10px; } :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) [id$="-options-container"]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 8px; } :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) [id$="-options-container"]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } :is(#atc-offcanvas, #active_substance-offcanvas, #laegemiddel-offcanvas, #subgroup-offcanvas, #firma-offcanvas, #varenummer-offcanvas, #pakkeinformation-offcanvas, #styrke_format_1-offcanvas, #format-offcanvas) [id$="-options-container"]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); } /* ========================================================== More filters drawer: opt out of Settings' flex layout ========================================================== */ /* Offcanvas body: simple scrolling column, not full-height flex */ .mf-drawer .offcanvas-body { display: block !important; padding: 16px; overflow-y: auto !important; overflow-x: visible !important; gap: 0 !important; } /* Accordion + items: just normal stacked blocks */ .mf-drawer .accordion, .mf-drawer .accordion-item { display: block !important; flex: 0 0 auto !important; min-height: auto !important; } /* Open panel should also be block, not flex */ .mf-drawer .accordion-collapse.collapse.show { display: block !important; flex: 0 0 auto !important; min-height: auto !important; overflow: visible !important; } /* While opening / closing (the .collapsing state) */ .mf-drawer .accordion .collapsing { display: block !important; height: auto !important; flex: 0 0 auto !important; min-height: auto !important; overflow: visible !important; } /* Inner accordion body: stack its children */ .mf-drawer .accordion-body { display: block !important; flex: 0 0 auto !important; min-height: auto !important; } /* Each field box keeps natural height; only the list scrolls */ .mf-drawer .mf-field { margin-bottom: 0.75rem; } .mf-drawer .atc-list { max-height: 160px; overflow-y: auto !important; flex: 0 0 auto !important; } /* Price source offcanvas – make radios look like square checkboxes */ [id$="-source-offcanvas"] .form-check-input { border-radius: 6px; /* ← square corners instead of round */ width: 16px; height: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glass); box-shadow: none; background-image: none; /* remove default radio dot */ } [id$="-source-offcanvas"] .form-check-input:focus { box-shadow: var(--focus-ring); border-color: rgba(72, 168, 255, 0.75); } [id$="-source-offcanvas"] .form-check-input:checked { background-color: var(--brand-accent); border-color: var(--brand-accent); } /* Remove any 'chin' styling if it's still around */ .mf-drawer .offcanvas-footer { border-top: none; margin-top: 0; padding-top: 0; } /* Cancel style in dark drawer */ .mf-drawer .btn-cancel { background: transparent; border: 1px solid rgba(255,255,255,0.35); color: #f9fafb; } /* ────────────────────────────────────────────── */ /* More‑filters footer: remove chin + square btns */ /* ────────────────────────────────────────────── */ /* Kill the dark "chin" bar */ .mf-drawer .offcanvas-footer { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.16); background: transparent !important; /* ← no dark strip */ box-shadow: none !important; } /* Make the bottom Cancel / Apply buttons square‑ish */ .mf-drawer #more-filters-cancel, .mf-drawer #more-filters-apply { border-radius: 6px !important; /* ← key bit: not round */ padding: 0.35rem 1.1rem; font-size: 0.9rem; } /* Ghost Cancel button */ .mf-drawer #more-filters-cancel { background: transparent; border: 1px solid rgba(255,255,255,0.26); color: #f9fafb; } .mf-drawer #more-filters-cancel:hover { background: rgba(255,255,255,0.08); } /* Primary Apply button */ .mf-drawer #more-filters-apply { background: #0a58ca; /* or your brand color */ border-color: #0a58ca; color: #fff; } .mf-drawer #more-filters-apply:hover { background: #1b7bff; } /* Make all “Show all” buttons square‑ish instead of pills */ .show-all-button { border-radius: 6px !important; /* or 8px if you want slightly rounder */ } /* =========================== More filters footer (final) =========================== */ /* No dark chin bar */ .mf-drawer .offcanvas-footer { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.16); background: transparent !important; box-shadow: none !important; } /* Shared footer button shape */ .mf-drawer .offcanvas-footer .mf-footer-btn { border-radius: 6px; padding-inline: 1.2rem; padding-block: 0.45rem; font-weight: 600; } /* Cancel = ghost */ .mf-drawer .offcanvas-footer .mf-cancel-btn { background: transparent !important; border: 1px solid rgba(255,255,255,0.26) !important; color: #f9fafb !important; } /* Apply filters = same blue as “Save view” */ .mf-drawer .offcanvas-footer .mf-apply-btn { background-color: var(--brand) !important; /* same brand blue */ border-color: var(--brand) !important; color: #fff !important; } /* ────────────────────────────────────────────── */ /* More‑filters footer: align Cancel + Apply */ /* ────────────────────────────────────────────── */ /* Footer row: flex, vertically centered */ .mf-drawer .offcanvas-footer { display: flex; justify-content: flex-end; align-items: center; /* ⬅ vertical alignment */ gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.16); background: transparent !important; box-shadow: none !important; } /* Base style for both footer buttons */ .mf-drawer #more-filters-cancel, .mf-drawer #more-filters-apply { display: inline-flex; align-items: center; justify-content: center; margin: 0; /* ⬅ kill any stray margins */ border-radius: 6px !important; padding: 0.45rem 1.2rem; font-size: 0.9rem; font-weight: 600; line-height: 1.25; /* same for both */ } /* Cancel = ghost */ .mf-drawer #more-filters-cancel { background: transparent; border: 1px solid rgba(255,255,255,0.26); color: #f9fafb; } /* Apply filters = same blue as “Save view” */ .mf-drawer #more-filters-apply { background-color: #0a58ca; /* or var(--brand) if you prefer */ border-color: #0a58ca; color: #fff; } /* Apply filters – exactly same blue as other primary buttons */ .mf-drawer .offcanvas-footer #more-filters-apply { background-color: var(--brand) !important; /* same as “Save changes / Save view” */ border-color: var(--brand) !important; color: #fff; } /* Force More‑filters “Apply filters” to #0a58ca */ .mf-drawer #more-filters-apply { background-color: #0a58ca !important; border-color: #0a58ca !important; color: #fff !important; } /* Keep the same colour on hover / focus so it matches the other CTA */ .mf-drawer #more-filters-apply:hover, .mf-drawer #more-filters-apply:focus { background-color: #0a58ca !important; border-color: #0a58ca !important; color: #fff !important; } /* ===================================================================== Extend historical dimension offcanvas styling to Pharmacy pill ===================================================================== */ /* Shell -------------------------------------------------------------- */ #pharmacy-offcanvas.offcanvas { --bs-offcanvas-width: min(96vw, 520px); width: var(--bs-offcanvas-width) !important; background: rgba(16, 38, 79, 0.90) !important; -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%); color: var(--text-strong); border-left: 1px solid var(--border-glass); border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important; box-shadow: var(--elev-3) !important; height: 100vh; height: 100dvh; max-height: 100dvh; overflow: hidden; } @media (max-width: 576px) { #pharmacy-offcanvas.offcanvas { border-radius: 0 !important; } } /* Header ------------------------------------------------------------- */ #pharmacy-offcanvas .offcanvas-header { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--divider-glass); } #pharmacy-offcanvas .offcanvas-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.1rem; letter-spacing: 0.15px; } #pharmacy-offcanvas .btn-close { filter: invert(1) opacity(0.75); } #pharmacy-offcanvas .btn-close:hover { opacity: 1; } /* Body layout -------------------------------------------------------- */ #pharmacy-offcanvas .offcanvas-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden !important; /* only list scrolls */ } /* ===================================================================== Top controls – search + Select all + Clear ===================================================================== */ #pharmacy-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 { background: var(--surface-glass-weak) !important; border-radius: var(--radius-md); border: 1px solid var(--border-glass); padding: 0.65rem 0.9rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; /* wrap buttons under search on very narrow screens */ } /* kill default .mb-3 vertical spacing */ #pharmacy-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3 { margin: 0 !important; } /* search wrapper flexes */ #pharmacy-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:first-child { flex: 1 1 0; min-width: 0; } /* input-group inside search */ #pharmacy-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 .input-group.mb-3 { flex: 1 1 auto; min-width: 0; width: auto !important; margin-bottom: 0 !important; } /* buttons container (Select / Clear) */ #pharmacy-offcanvas .offcanvas-body > .p-3.border-bottom.flex-shrink-0 > .mb-3:not(:first-child) { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } /* Search input ------------------------------------------------------- */ #pharmacy-offcanvas input[id$="-search-input"] { height: 40px; padding: 0 0.9rem !important; border-radius: 10px !important; font-size: 0.9rem; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: var(--text-strong) !important; width: 100% !important; } #pharmacy-offcanvas input[id$="-search-input"]::placeholder { color: var(--text-muted); } /* Ghost buttons: Select all / Clear --------------------------------- */ #pharmacy-offcanvas button[id$="-select-all"], #pharmacy-offcanvas button[id$="-clear-all"] { box-sizing: border-box; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 40px !important; padding: 0 0.9rem !important; margin: 0 !important; border-radius: 10px !important; font-size: 0.875rem; font-weight: 500; line-height: 1 !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: var(--text-strong) !important; white-space: nowrap; min-width: max-content; box-shadow: none !important; } #pharmacy-offcanvas button[id$="-select-all"]:hover, #pharmacy-offcanvas button[id$="-clear-all"]:hover { background: rgba(255, 255, 255, 0.04) !important; } #pharmacy-offcanvas button[id$="-select-all"]:focus-visible, #pharmacy-offcanvas button[id$="-clear-all"]:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ===================================================================== List area – checklist box + Show all ===================================================================== */ #pharmacy-offcanvas #pharmacy-options-container { flex: 1 1 auto; min-height: 0; overflow: auto !important; border-radius: var(--radius-md); border: 1px solid var(--border-glass) !important; background: rgba(255, 255, 255, 0.04) !important; } /* row spacing & labels */ #pharmacy-offcanvas .form-check { margin-bottom: 0.35rem; } #pharmacy-offcanvas .form-check-label { color: var(--text-strong); font-weight: 500; font-size: 0.95rem; } /* square-ish checkboxes */ #pharmacy-offcanvas .form-check-input { width: 16px; height: 16px; border-radius: 4px !important; margin-top: 0.25rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glass); box-shadow: none; } #pharmacy-offcanvas .form-check-input:checked { background-color: var(--brand-accent); border-color: var(--brand-accent); } #pharmacy-offcanvas .form-check-input:focus { box-shadow: var(--focus-ring); } /* "Show all" – match ghost buttons ---------------------------------- */ #pharmacy-offcanvas button[id$="-load-more"] { display: block; width: 100% !important; margin: 0.75rem 0 0; height: 40px; border-radius: 10px !important; padding: 0 0.9rem; font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: var(--text-strong); box-shadow: none; } #pharmacy-offcanvas button[id$="-load-more"]:hover { background: rgba(255, 255, 255, 0.04) !important; } #pharmacy-offcanvas button[id$="-load-more"]:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ===================================================================== Apply button – footer CTA ===================================================================== */ #pharmacy-offcanvas .offcanvas-body > .p-3:last-child { padding: 0.75rem 0; border-top: 1px solid var(--divider-glass); } /* full-width Apply */ #pharmacy-offcanvas button[id$="-apply"] { width: 100% !important; height: 40px; border-radius: 10px !important; font-size: 0.95rem; font-weight: 600; background-color: var(--brand-accent) !important; border-color: var(--brand-accent) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); } /* ===================================================================== Scrollbars in pharmacy list ===================================================================== */ #pharmacy-offcanvas [id$="-options-container"] { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; } #pharmacy-offcanvas [id$="-options-container"]::-webkit-scrollbar { width: 10px; } #pharmacy-offcanvas [id$="-options-container"]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 8px; } #pharmacy-offcanvas [id$="-options-container"]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } #pharmacy-offcanvas [id$="-options-container"]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); }