/* Shared look of switchers (segmented controls) and selectors, the
   Prognoz page's 3M/6M/1Y toggle being the reference: one joined control,
   38px 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 {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  height: 38px !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 {
  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 { border-right: 0 !important; }

.range-toggle > label:hover,
.exp-sidebar .radio-toggle > label:hover,
.db-tabbar > button:hover,
.cpr-filter-group > 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 {
  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 {
  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 {
  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 { 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 {
  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 { height: 38px !important; min-height: 38px !important; font-size: 15px !important; }