/* R709: lightweight explicit Light/Night appearance controls.
   R695 intentionally stopped loading billion-ui.js because its full-document
   observers and effects caused lag. That also removed the script that created the
   original appearance switcher. R709 restores only theme selection, without any
   observer, polling timer, ripple, ambient layer, animation loop, or page rebuild. */

body.r120-rice-ui .app-header .header-actions .r709-theme-switcher {
  display: inline-grid !important;
  grid-template-columns: repeat(2, minmax(74px, auto)) !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 44px !important;
  padding: 4px !important;
  border: 1px solid rgba(85, 70, 120, .18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 4px 14px rgba(27, 20, 45, .06) !important;
  pointer-events: auto !important;
}

body.r120-rice-ui .app-header .header-actions .r709-theme-choice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 74px !important;
  min-height: 36px !important;
  width: auto !important;
  padding: 7px 11px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #5e576a !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  transform: none !important;
}

body.r120-rice-ui .app-header .header-actions .r709-theme-choice svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  flex: 0 0 17px !important;
}

body.r120-rice-ui .app-header .header-actions .r709-theme-choice.active,
body.r120-rice-ui .app-header .header-actions .r709-theme-choice[aria-pressed="true"] {
  background: #17131f !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-theme="dark"] body.r120-rice-ui .app-header .header-actions .r709-theme-switcher,
body.dark.r120-rice-ui .app-header .header-actions .r709-theme-switcher {
  background: rgba(20, 18, 27, .88) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.r120-rice-ui .app-header .header-actions .r709-theme-choice,
body.dark.r120-rice-ui .app-header .header-actions .r709-theme-choice {
  color: #c7c1d1 !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] body.r120-rice-ui .app-header .header-actions .r709-theme-choice.active,
html[data-theme="dark"] body.r120-rice-ui .app-header .header-actions .r709-theme-choice[aria-pressed="true"],
body.dark.r120-rice-ui .app-header .header-actions .r709-theme-choice.active,
body.dark.r120-rice-ui .app-header .header-actions .r709-theme-choice[aria-pressed="true"] {
  background: #f5f2fb !important;
  color: #17131f !important;
  -webkit-text-fill-color: #17131f !important;
}

/* Keep the legacy button available to old code but never show a duplicate control. */
body.r120-rice-ui .app-header #themeButton.r709-legacy-theme-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Keep the side-rail theme button useful as a quick Light/Night toggle. */
body.r120-rice-ui #railThemeButton {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 900px) {
  body.r120-rice-ui .app-header .header-actions .r709-theme-switcher {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.r120-rice-ui .app-header .header-actions .r709-theme-choice {
    width: 100% !important;
  }
}