/* One standard height for every control in a filter/toolbar row: selectors,
   switch/tab bars, search boxes and toolbar buttons (change it here). */
:root { --ctl-h: 34px; }

/* Shared look of switchers (segmented controls) and selectors, the
   Prognoz page's 3M/6M/1Y toggle being the reference: one joined control,
   var(--ctl-h) tall, 8px corners, 1px border; inactive options white in light mode,
   the active one navy (light) / green (dark, the site's dark accent).
   Applied to each page's existing switcher classes, so no markup changes. */

.range-toggle,
.exp-sidebar .radio-toggle,
.db-tabbar,
.cpr-filter-group,
.dg-tabs,
.sp-cat-seg {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  height: var(--ctl-h) !important;
  padding: 0 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: none !important;
}
.exp-sidebar .radio-toggle { display: flex !important; }

.range-toggle > label,
.exp-sidebar .radio-toggle > label,
.db-tabbar > button,
.cpr-filter-group > button,
.dg-tabs > a,
.sp-cat-seg > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-right: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.range-toggle > label:last-of-type,
.exp-sidebar .radio-toggle > label:last-of-type,
.db-tabbar > button:last-child,
.cpr-filter-group > button:last-child,
.dg-tabs > a:last-child,
.sp-cat-seg > button:last-child { border-right: 0 !important; }

.range-toggle > label:hover,
.exp-sidebar .radio-toggle > label:hover,
.db-tabbar > button:hover,
.cpr-filter-group > button:hover,
.dg-tabs > a:hover,
.sp-cat-seg > button:hover { background: #EAF0FA !important; }

.range-toggle > input:checked + label,
.exp-sidebar .radio-toggle > input:checked + label,
.db-tabbar > button.active,
.cpr-filter-group > button.active,
.dg-tabs > a.active,
.sp-cat-seg > button.active {
  background: #1A2B4B !important;
  color: #fff !important;
}

html[data-mode="dark"] .range-toggle,
html[data-mode="dark"] .exp-sidebar .radio-toggle,
html[data-mode="dark"] .db-tabbar,
html[data-mode="dark"] .cpr-filter-group,
html[data-mode="dark"] .dg-tabs,
html[data-mode="dark"] .sp-cat-seg {
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .04) !important;
}
html[data-mode="dark"] .range-toggle > label,
html[data-mode="dark"] .exp-sidebar .radio-toggle > label,
html[data-mode="dark"] .db-tabbar > button,
html[data-mode="dark"] .cpr-filter-group > button,
html[data-mode="dark"] .dg-tabs > a,
html[data-mode="dark"] .sp-cat-seg > button {
  background: transparent !important;
  color: #e0e0e0 !important;
  border-right-color: rgba(255, 255, 255, .12) !important;
}
html[data-mode="dark"] .range-toggle > label:hover,
html[data-mode="dark"] .exp-sidebar .radio-toggle > label:hover,
html[data-mode="dark"] .db-tabbar > button:hover,
html[data-mode="dark"] .cpr-filter-group > button:hover,
html[data-mode="dark"] .dg-tabs > a:hover,
html[data-mode="dark"] .sp-cat-seg > button:hover { background: rgba(76, 175, 80, .12) !important; }
html[data-mode="dark"] .range-toggle > input:checked + label,
html[data-mode="dark"] .exp-sidebar .radio-toggle > input:checked + label,
html[data-mode="dark"] .db-tabbar > button.active,
html[data-mode="dark"] .cpr-filter-group > button.active,
html[data-mode="dark"] .dg-tabs > a.active,
html[data-mode="dark"] .sp-cat-seg > button.active {
  background: #4caf50 !important;
  color: #fff !important;
}

/* selectors: same corners and height as the Prognoz selectors */
.ts-filters .csel-button,
.ts-chart-meta .csel-button { border-radius: 8px !important; }
.sp-date-sel + .csel .csel-button { font-size: 15px !important; }

/* ── standard control height everywhere ── */
.csel-button {
  height: var(--ctl-h) !important; min-height: var(--ctl-h) !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
/* the landing filter bar keeps its card-height controls on purpose */
.landing-filterbar .csel-button { height: var(--filter-h, 69px) !important; min-height: var(--filter-h, 69px) !important; }
.cpr-search, .sp-search, .cpi2-msel-toggle.cpi2-select,
.dg-download-btn, .cpr-btn-download, .dg-period-select {
  height: var(--ctl-h) !important; min-height: var(--ctl-h) !important;
  box-sizing: border-box !important;
}
.cpr-search { padding-top: 0 !important; padding-bottom: 0 !important; }
/* in-page action buttons and box tabs use the same height */
.tab-btn, .sp-cat-pill, .cpi2-btn {
  height: var(--ctl-h) !important; min-height: var(--ctl-h) !important;
  box-sizing: border-box !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
/* supermarket category filter is a standard switch: no separate pill look */
.sp-cat-seg > .sp-cat-pill { box-shadow: none !important; font-size: 17px !important; }