/* 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 */

/* =========================================================
   GLASS ONLY ON THE MAP CARD
   Add className="glass-map-only" ONLY to the map card.
   Everything else remains normal.
   ========================================================= */

/* The glass surface */
.glass-map-only {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;

  /* Transparent-ish surface (lets our internal blurred layer show through) */
  background: rgba(15, 23, 42, 0.30) !important;

  border: 1px solid rgba(148, 163, 184, 0.22) !important;

  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* Blurred "background image" INSIDE the card.
   This makes it glassy even if the page background is plain. */
.glass-map-only::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Option A: Use an image (recommended for the look you showed)
     Put an image at: assets/nordics_glass_bg.jpg
  */

  background-size: cover;
  background-position: center;

  /* The “frosted” part */
  filter: blur(18px) saturate(140%);
  transform: scale(1.10); /* prevents blur edges */
  opacity: 0.55;
}
.pi-no-hand-cursor .js-plotly-plot .plotly .cursor-pointer {
  cursor: default !important;
}
/* Remove the “hand” cursor on the Price index graph, but keep hover working */
.pi-no-hand-cursor .js-plotly-plot,
.pi-no-hand-cursor .js-plotly-plot * {
  cursor: default !important;
}
/* Extra sheen + subtle vignette */
.glass-map-only::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;



  opacity: 1;
}

/* Keep header/body above the glass layers */
.glass-map-only .card-header,
.glass-map-only .card-body {
  position: relative;
  z-index: 1;
}

/* Header styling (only for this card) */
.glass-map-only .card-header,
.glass-map-only .custom-card-header {
  background: rgba(2, 6, 23, 0.25) !important;
  border-bottom: 1px solid rgba(148,163,184,0.18) !important;
  color: rgba(226, 232, 240, 0.95) !important;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Make Plotly transparent so the glass shows */
.glass-map-only .js-plotly-plot,
.glass-map-only .plot-container,
.glass-map-only .svg-container {
  background: transparent !important;
}

/* Hide plotly modebar if it ever shows up */
.glass-map-only .modebar {
  display: none !important;
}

/* Optional: nicer drop shadow on the svg */
.glass-map-only .main-svg {
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.18));
}
/* Glass effect ONLY for the map graph (because we target .pi-glass-map) */
.pi-glass-map {
  position: relative;
  border-radius: 16px;
  overflow: hidden;              /* keeps the glass clipped to the map area */
  touch-action: none;            /* helps prevent touch pan/zoom gestures */
}

/* Frosted layer behind the Plotly SVG */
.pi-glass-map::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;

  /* glass look */
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);

  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);

  pointer-events: none;          /* IMPORTANT: keep hover working */
  z-index: 0;
}

/* Ensure Plotly is above the glass layer */
.pi-glass-map .js-plotly-plot,
.pi-glass-map .plot-container {
  position: relative;
  z-index: 1;
}

/* Remove any Plotly container backgrounds so the glass shows through */
.pi-glass-map .js-plotly-plot,
.pi-glass-map .plot-container,
.pi-glass-map .svg-container {
  background: transparent !important;
}
/* =====================================================================
   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;
}

/* Plotly-style swatches */
#npd-nordics-overview-short-top-tooltip .pi-tt-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.20);
  flex: 0 0 auto;
}

#npd-nordics-overview-short-top-tooltip .pi-tt-swatch-ongoing { background: #1557A2; }
#npd-nordics-overview-short-top-tooltip .pi-tt-swatch-muted  { background: rgba(100, 116, 139, 0.55); }

/* 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 {
  /* IMPORTANT: don't touch Bootstrap positioning */
  overflow: hidden;

  /* ✅ LOCK the drawer's own blue so it doesn't “inherit” grey from the page */
  background: rgba(8, 26, 47, 0.96) !important; /* was 0.30 */
  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: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);

  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

/* ✅ Make sure inner wrappers don't paint a different background */
#pi-nordics-explorer-comp-drawer.pi-glass-offcanvas .offcanvas-header,
#pi-nordics-explorer-comp-drawer.pi-glass-offcanvas .offcanvas-body {
  background: transparent !important;
}

/* Internal blurred texture layer (now stronger, independent of page) */
#pi-nordics-explorer-comp-drawer.pi-glass-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; /* was 0.55 (too see-through) */

  z-index: 0;
}

/* Sheen + vignette */
#pi-nordics-explorer-comp-drawer.pi-glass-offcanvas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  z-index: 0;
}

/* Keep real content above the glass layers */
#pi-nordics-explorer-comp-drawer.pi-glass-offcanvas .offcanvas-header,
#pi-nordics-explorer-comp-drawer.pi-glass-offcanvas .offcanvas-body {
  position: relative;
  z-index: 1;
}

/* 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 {
  /* keep bootstrap offcanvas layout intact */
  overflow: hidden;

  /* same navy base as your glass drawer */
  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;

  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);

  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

/* glass texture layer (independent of page behind) */
.pi-nordics-explorer #pi-nordics-explorer-filters-offcanvas.pi-glass-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 #pi-nordics-explorer-filters-offcanvas.pi-glass-offcanvas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;


}

/* keep header/body above the glass layers */
.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;
  position: relative;
  z-index: 1;
}

/* 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;

  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

/* 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 {
  /* Keep Bootstrap positioning intact */
  overflow: hidden;

  /* Dark glass base (same family as the drawer) */
  background: rgba(8, 26, 47, 0.96) !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: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);

  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

/* 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;

  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);

  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;
}
/* ============================================
   Nordics Overview — Shortage details offcanvas
   Keep the grid contained inside the drawer
   ============================================ */

.pi-short-details-oc .offcanvas-body{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;      /* ✅ critical */
  overflow: hidden;   /* ✅ prevents the drawer itself from scrolling */
  padding: 0.75rem;
}

/* The panel returned by _shortage_details_panel() */
.pi-short-details-oc .pi-oc-panel{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;      /* ✅ critical */
}

/* White card that contains toolbar + grid */
.pi-short-details-oc .pi-oc-white-card{
  flex: 1 1 auto;
  min-height: 0;      /* ✅ critical */
  display: flex;
  flex-direction: column;
}

/* Wrapper that directly contains AgGrid */
.pi-short-details-oc .pi-oc-grid-wrap{
  flex: 1 1 auto;
  min-height: 0;      /* ✅ critical */
}

/* Make sure the ag-grid theme can actually fill its parent */
.pi-short-details-oc .ag-theme-alpine{
  height: 100%;
}
/* =========================================================
   Comparable group drawer — clip AG Grid inside the white card
   Scoped to: #pi-nordics-explorer-comp-drawer
   ========================================================= */

/* 1) Clip the grid area (this is the wrapper you created) */
#pi-nordics-explorer-comp-drawer .pi-oc-grid-wrap{
  border-radius: 14px;
  overflow: hidden;      /* ✅ this is the key */
  background: #fff;      /* prevents “glass bleed” */
}

/* 2) Remove AG Grid’s own outer border so it doesn’t look “outside” the card */
#pi-nordics-explorer-comp-drawer .pi-oc-grid-wrap .ag-root-wrapper{
  border: 0 !important;
  border-radius: 14px;   /* safety: some themes paint here */
  overflow: hidden;      /* safety: clip header corners */
}

/* 3) Make sure the grid fills the wrapper height */
#pi-nordics-explorer-comp-drawer .pi-oc-grid-wrap .ag-theme-alpine{
  height: 100% !important;
  width: 100% !important;
}
/* =========================================================
   Nordics Explorer — Comparable group drawer
   ✅ Keep AG Grid fully INSIDE the white card (no spill)
   Drawer id: #pi-nordics-explorer-comp-drawer
   ========================================================= */

/* 1) Prevent any horizontal spill from the offcanvas itself */
#pi-nordics-explorer-comp-drawer .offcanvas-body{
  overflow-x: hidden !important;  /* keep y-scroll from Bootstrap */
}

/* 2) The white cards must CLIP their contents to show rounded corners */
#pi-nordics-explorer-comp-drawer .pi-oc-white-card{
  overflow: hidden !important;
  border-radius: 16px !important; /* match your inline style */
  min-width: 0 !important;        /* critical in flex layouts */
}

/* 3) The grid wrapper should also not allow content to push wider */
#pi-nordics-explorer-comp-drawer .pi-oc-grid-wrap{
  overflow: hidden !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 4) Make sure AG Grid root can shrink inside the card */
#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;
}
/* =========================================================
   Explorer drawer: table fits viewport, AG Grid scrolls
   Targets: #pi-nordics-explorer-comp-drawer
   ========================================================= */

#pi-nordics-explorer-comp-drawer .offcanvas-body{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;      /* ✅ critical for flex children */
  overflow: hidden;   /* ✅ prevents drawer clipping / outer scrolling */
}

/* Your internal wrapper */
#pi-nordics-explorer-comp-drawer .pi-oc{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;      /* ✅ critical */
}

/* Header + chart should not grow */
#pi-nordics-explorer-comp-drawer .pi-oc-head,
#pi-nordics-explorer-comp-drawer .pi-oc-chart-card{
  flex: 0 0 auto;
}

/* Table card consumes remaining height */
#pi-nordics-explorer-comp-drawer .pi-oc-table-card{
  flex: 1 1 auto;
  min-height: 0;      /* ✅ critical */
  overflow: hidden;   /* keeps rounded corners clean */
  display: flex;
  flex-direction: column;
}

/* Wrapper around the grid fills the table card */
#pi-nordics-explorer-comp-drawer .pi-oc-table-card .pi-oc-grid-wrap{
  flex: 1 1 auto;
  min-height: 0;      /* ✅ critical */
}

/* Ensure AG Grid theme can actually take the height */
#pi-nordics-explorer-comp-drawer .pi-oc-table-card .ag-theme-alpine{
  height: 100% !important;
}
/* =========================================================
   Explorer drawer: lock layout + make AG Grid scroll internally
   Target: #pi-nordics-explorer-comp-drawer
   ========================================================= */

/* Ensure the offcanvas itself is a fixed-height column */
#pi-nordics-explorer-comp-drawer.offcanvas{
  height: 100vh;
  max-height: 100vh;
}

/* Body becomes a flex column and DOES NOT scroll */
#pi-nordics-explorer-comp-drawer .offcanvas-body{
  display: flex;
  flex-direction: column;

  flex: 1 1 auto;     /* ✅ important */
  min-height: 0;      /* ✅ critical for nested flex scrolling */
  overflow: hidden;   /* ✅ prevents whole drawer scrolling */

  padding: 0.75rem;
}

/* Inner wrapper fills the body */
#pi-nordics-explorer-comp-drawer .pi-oc{
  display: flex;
  flex-direction: column;

  flex: 1 1 auto;     /* ✅ important */
  min-height: 0;      /* ✅ critical */
}

/* 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;
}

/* Table card takes remaining space */
#pi-nordics-explorer-comp-drawer .pi-oc-table-card{
  flex: 1 1 auto;
  min-height: 0;      /* ✅ critical */
  overflow: hidden;   /* keep rounded corners clean */

  display: flex;
  flex-direction: column;
}

/* Wrapper that contains the AgGrid must fill the card */
#pi-nordics-explorer-comp-drawer .pi-oc-grid-wrap{
  flex: 1 1 auto;
  min-height: 0;      /* ✅ critical */
}

/* Make sure the theme container actually has height */
#pi-nordics-explorer-comp-drawer .pi-oc-grid-wrap .ag-theme-alpine{
  height: 100% !important;
  min-height: 0 !important;
}

/* ✅ Force the *actual* scroll viewport to be scrollable
   (some custom CSS/themes accidentally override this) */
#pi-nordics-explorer-comp-drawer .ag-body-viewport{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* =========================================================
   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 (this is the important selector) */
.offcanvas.pi-glass-offcanvas {
  background: rgba(15, 23, 42, 0.86) !important;  /* your dark glass base */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #F8FAFC;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* 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;
}

/* texture layer (independent of whatever is behind the drawer) */
#npd-nordics-overview-country-overview-offcanvas::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-position: center;

  filter: blur(18px) saturate(160%);
  transform: scale(1.10);
  opacity: 0.70;

  z-index: 0;
}

#npd-nordics-overview-country-overview-offcanvas::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  z-index: 0;
}

/* 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;
  position: relative;
  z-index: 1;
}

/* 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;
}

/* Make the “hero” risk card a touch more premium */
#sh-risk-drawer .pi-risk-hero.card {
  background: rgba(56, 189, 248, 0.09) !important;
  border-color: rgba(56, 189, 248, 0.22) !important;
}

/* Empty-state card */
#sh-risk-drawer .pi-glass-empty.card {
  background: rgba(2, 6, 23, 0.16) !important;
  border: 1px dashed rgba(148, 163, 184, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !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;
}