/* ============================================================
   Dark Mode toggle - Sisense Documentation
   ------------------------------------------------------------
   Strategy: instead of hand-overriding every color used across
   the skin, the TOC, third-party widgets, etc., the whole page
   is put through a lightness inversion (filter: invert + a
   compensating hue-rotate). Because inversion only flips
   lightness, any text/background pair that was readable in
   light mode keeps the exact same contrast ratio in dark mode -
   so every element on the page (not just specific panes) ends
   up dark, and nothing becomes illegible.
   Photos, screenshots, videos, and embedded widgets/iframes are
   inverted a second time so they keep their normal appearance,
   and the toggle button itself is double-inverted so it always
   reads the same regardless of mode.
   ============================================================ */

html.dark-mode-active {
  background: #ffffff;
  filter: invert(1) hue-rotate(180deg);
}

/* Give the page a comfortable native scrollbar too. */
html.dark-mode-active {
  scrollbar-color: #4a4f57 #1c1e22;
}

/* Re-invert media and embedded content so it keeps its normal
   (non-inverted) colors. */
html.dark-mode-active img,
html.dark-mode-active video,
html.dark-mode-active picture,
html.dark-mode-active canvas,
html.dark-mode-active svg:not(.dark-mode-toggle-icon),
html.dark-mode-active iframe,
html.dark-mode-active embed,
html.dark-mode-active object {
  filter: invert(1) hue-rotate(180deg);
}

/* ---------------- Toggle button ---------------- */

.dark-mode-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2147483647;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #d8dbe0;
  background-color: #ffffff;
  color: #8b8f96;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dark-mode-toggle:hover {
  transform: scale(1.08);
}

.dark-mode-toggle:focus-visible {
  outline: 2px solid #076685;
  outline-offset: 2px;
}

.dark-mode-toggle-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.dark-mode-toggle.is-dark {
  background-color: #1f2329;
  border-color: #3a3f47;
  color: #ffd651;
}

/* Counter-invert the button (and everything inside it) so it
   always renders as authored above, no matter which mode the
   rest of the page is in. This keeps it a stable, recognizable
   light-bulb control instead of flipping to odd colors. */
html.dark-mode-active .dark-mode-toggle {
  filter: invert(1) hue-rotate(180deg);
}