/* Dark Mode Styles for Cafe Docs */

/* Apply to both html and body for immediate effect */
html.dark-mode,
body.dark-mode {
  --color-text-primary: #e3e3e3;
  --color-text-secondary: #b3b3b3;
  --color-background: #1a1a1a;
  --color-background-offset: #252525;
  --color-background-panel: #2a2a2a;
  --color-link: #6eb5ff;
  --color-link-hover: #9fccff;
  --color-border: #404040;
  --color-code-background: #2d2d2d;
  --color-admonition-note: #4a90e2;
  --color-admonition-tip: #52c41a;
  --color-admonition-warning: #faad14;
  --color-admonition-caution: #ff7875;
  --color-admonition-important: #ff4d4f;
}

html.dark-mode,
body.dark-mode {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  color-scheme: dark;
}

html.dark-mode body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

/* Apply scrollbar styles to html element too for immediate effect */
html.dark-mode ::-webkit-scrollbar,
body.dark-mode ::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #2a2a2a;
}

html.dark-mode ::-webkit-scrollbar-thumb,
body.dark-mode ::-webkit-scrollbar-thumb {
  background-color: #404040;
  border-radius: 0.25rem;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover,
body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

html.dark-mode ::-webkit-scrollbar-track,
body.dark-mode ::-webkit-scrollbar-track {
  background-color: #2a2a2a;
}

html.dark-mode .toolbar,
body.dark-mode .toolbar {
  background-color: #2a2a2a;
  border-bottom: 1px solid #404040;
}

html.dark-mode .header,
body.dark-mode .header {
  background-color: var(--color-background-panel);
  border-bottom: 1px solid var(--color-border);
}

html.dark-mode .navbar,
body.dark-mode .navbar {
  background-color: var(--color-background-panel);
}

html.dark-mode .navbar-menu,
html.dark-mode .navbar-dropdown,
body.dark-mode .navbar-menu,
body.dark-mode .navbar-dropdown {
  background-color: var(--color-background-panel);
  border-color: var(--color-border);
}

html.dark-mode .navbar-item,
html.dark-mode .navbar-link,
body.dark-mode .navbar-item,
body.dark-mode .navbar-link {
  color: var(--color-text-primary);
}

html.dark-mode .navbar-item:hover,
html.dark-mode .navbar-link:hover,
body.dark-mode .navbar-item:hover,
body.dark-mode .navbar-link:hover {
  background-color: var(--color-background-offset);
  color: var(--color-link);
}

html.dark-mode .nav,
body.dark-mode .nav {
  background-color: var(--color-background-panel);
  border-right: 1px solid var(--color-border);
}

html.dark-mode .nav-menu,
body.dark-mode .nav-menu {
  background-color: var(--color-background-panel);
}

html.dark-mode .nav-panel-explore,
body.dark-mode .nav-panel-explore {
  background-color: var(--color-background-panel);
  color: var(--color-text-primary);
}

html.dark-mode .nav-panel-explore .context,
body.dark-mode .nav-panel-explore .context {
  color: var(--color-text-secondary);
  box-shadow: 0 -1px 0 var(--color-border);
}

html.dark-mode .nav-panel-explore .context .title,
body.dark-mode .nav-panel-explore .context .title {
  color: var(--color-text-primary);
}

html.dark-mode .nav-panel-explore .context .version::after,
body.dark-mode .nav-panel-explore .context .version::after {
  filter: invert(1) brightness(1.7);
}

html.dark-mode .nav-panel-explore .components,
body.dark-mode .nav-panel-explore .components {
  background-color: var(--color-background-offset);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
}

html.dark-mode .nav-panel-explore .component .title,
html.dark-mode .nav-panel-explore .component .title a,
body.dark-mode .nav-panel-explore .component .title,
body.dark-mode .nav-panel-explore .component .title a {
  color: var(--color-text-primary);
}

html.dark-mode .nav-panel-explore .component .version a,
body.dark-mode .nav-panel-explore .component .version a {
  background-color: var(--color-border);
  color: var(--color-text-primary);
}

html.dark-mode .nav-panel-explore .component .version a:hover,
body.dark-mode .nav-panel-explore .component .version a:hover {
  background-color: #555;
  color: var(--color-link-hover);
}

html.dark-mode .nav-panel-explore .component .is-current a,
body.dark-mode .nav-panel-explore .component .is-current a {
  background-color: var(--color-link);
  color: #101820;
}

html.dark-mode .nav-link,
body.dark-mode .nav-link {
  color: var(--color-text-secondary);
}

html.dark-mode .nav-link:hover,
html.dark-mode .nav-link:focus,
html.dark-mode .nav-link:active,
html.dark-mode .nav-link.is-current,
body.dark-mode .nav-link:hover,
body.dark-mode .nav-link:focus,
body.dark-mode .nav-link:active,
body.dark-mode .nav-link.is-current {
  color: var(--color-link);
  background-color: var(--color-background-offset);
}

html.dark-mode .nav-text,
body.dark-mode .nav-text {
  color: var(--color-text-primary);
}

html.dark-mode .nav-item-toggle,
body.dark-mode .nav-item-toggle {
  color: var(--color-text-secondary);
}

html.dark-mode .article,
body.dark-mode .article {
  background-color: var(--color-background);
}

html.dark-mode .main,
html.dark-mode .content,
html.dark-mode .doc,
body.dark-mode .main,
body.dark-mode .content,
body.dark-mode .doc {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

html.dark-mode .doc h1,
html.dark-mode .doc h2,
html.dark-mode .doc h3,
html.dark-mode .doc h4,
html.dark-mode .doc h5,
html.dark-mode .doc h6,
body.dark-mode .doc h1,
body.dark-mode .doc h2,
body.dark-mode .doc h3,
body.dark-mode .doc h4,
body.dark-mode .doc h5,
body.dark-mode .doc h6 {
  color: var(--color-text-primary);
}

html.dark-mode .doc h1.sect0,
body.dark-mode .doc h1.sect0 {
  background-color: var(--color-background-offset);
}

html.dark-mode .doc h2:not(.discrete),
body.dark-mode .doc h2:not(.discrete) {
  border-bottom-color: var(--color-border);
}

html.dark-mode .doc .title,
html.dark-mode .doc table.tableblock caption,
html.dark-mode .toc .toc-menu h3,
html.dark-mode .nav-menu h3.title,
body.dark-mode .doc .title,
body.dark-mode .doc table.tableblock caption,
body.dark-mode .toc .toc-menu h3,
body.dark-mode .nav-menu h3.title {
  color: var(--color-text-primary);
}

html.dark-mode .toc .toc-menu,
body.dark-mode .toc .toc-menu {
  color: #c9d4df;
}

html.dark-mode .toc .toc-menu a,
body.dark-mode .toc .toc-menu a {
  border-left-color: var(--color-border);
  color: inherit;
}

html.dark-mode .toc .toc-menu a:hover,
body.dark-mode .toc .toc-menu a:hover {
  border-left-color: var(--color-link-hover);
  color: var(--color-link-hover);
}

html.dark-mode .toc .toc-menu a:focus,
html.dark-mode .toc .toc-menu a:active,
body.dark-mode .toc .toc-menu a:focus,
body.dark-mode .toc .toc-menu a:active {
  background-color: rgba(110, 181, 255, 0.12);
  border-left-color: var(--color-link);
  color: #eaf4ff;
}

html.dark-mode .toc .toc-menu a.is-active,
body.dark-mode .toc .toc-menu a.is-active {
  background-color: rgba(110, 181, 255, 0.18);
  border-left-color: var(--color-link);
  color: #eaf4ff;
}

html.dark-mode .doc a,
body.dark-mode .doc a {
  color: var(--color-link);
}

html.dark-mode .doc a:hover,
body.dark-mode .doc a:hover {
  color: var(--color-link-hover);
}

html.dark-mode .doc code,
body.dark-mode .doc code {
  background-color: var(--color-code-background);
  color: #f8f8f2;
}

html.dark-mode .doc pre,
body.dark-mode .doc pre {
  background-color: var(--color-code-background);
  border: 1px solid var(--color-border);
}

html.dark-mode .sidebarblock,
body.dark-mode .sidebarblock {
  background-color: var(--color-background-offset);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

html.dark-mode .sidebarblock > .content,
body.dark-mode .sidebarblock > .content {
  background-color: transparent;
  border-color: transparent;
  color: inherit;
}

html.dark-mode .sidebarblock .title,
body.dark-mode .sidebarblock .title {
  color: var(--color-text-primary);
}

html.dark-mode .toolbar,
body.dark-mode .toolbar {
  background-color: var(--color-background-panel);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 var(--color-border);
  color: var(--color-text-secondary);
}

html.dark-mode .breadcrumbs,
body.dark-mode .breadcrumbs {
  background-color: transparent;
  color: var(--color-text-secondary);
}

html.dark-mode .breadcrumbs a,
body.dark-mode .breadcrumbs a {
  color: var(--color-link);
}

html.dark-mode .page-versions,
body.dark-mode .page-versions {
  color: var(--color-text-secondary);
}

html.dark-mode .page-versions .version-menu-toggle,
body.dark-mode .page-versions .version-menu-toggle {
  color: var(--color-text-secondary);
  filter: invert(1) brightness(1.7);
}

html.dark-mode .page-versions .version-menu,
body.dark-mode .page-versions .version-menu {
  background: var(--color-background-panel);
  border: 1px solid var(--color-border);
}

html.dark-mode .page-versions .version a,
body.dark-mode .page-versions .version a {
  color: var(--color-link);
}

html.dark-mode .page-versions .version.is-missing,
body.dark-mode .page-versions .version.is-missing {
  color: var(--color-text-secondary);
}

html.dark-mode .home-link::before,
body.dark-mode .home-link::before {
  filter: invert(1) brightness(2) contrast(1.2);
}

html.dark-mode .nav-toggle,
html.dark-mode .edit-this-page a,
body.dark-mode .nav-toggle,
body.dark-mode .edit-this-page a {
  color: var(--color-text-primary);
}

/* Scrollbar styling for dark mode */
body.dark-mode ::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-background-panel);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 0.25rem;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

body.dark-mode ::-webkit-scrollbar-track {
  background-color: var(--color-background-panel);
}

html.dark-mode .footer,
body.dark-mode .footer {
  background-color: var(--color-background-panel);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

html.dark-mode .admonitionblock,
body.dark-mode .admonitionblock {
  border-left-width: 3px;
  color: var(--color-text-primary);
}

html.dark-mode .admonitionblock.note,
body.dark-mode .admonitionblock.note {
  border-left-color: var(--color-admonition-note);
  background-color: rgba(74, 144, 226, 0.1);
}

html.dark-mode .admonitionblock.tip,
body.dark-mode .admonitionblock.tip {
  border-left-color: var(--color-admonition-tip);
  background-color: rgba(82, 196, 26, 0.1);
}

html.dark-mode .admonitionblock.warning,
body.dark-mode .admonitionblock.warning {
  border-left-color: var(--color-admonition-warning);
  background-color: rgba(250, 173, 20, 0.1);
}

html.dark-mode .admonitionblock.caution,
body.dark-mode .admonitionblock.caution {
  border-left-color: var(--color-admonition-caution);
  background-color: rgba(255, 120, 117, 0.1);
}

html.dark-mode .admonitionblock.important,
body.dark-mode .admonitionblock.important {
  border-left-color: var(--color-admonition-important);
  background-color: rgba(255, 77, 79, 0.1);
}

html.dark-mode .admonitionblock table,
html.dark-mode .admonitionblock tr,
html.dark-mode .admonitionblock td,
html.dark-mode .doc .admonitionblock table,
html.dark-mode .doc .admonitionblock tr,
html.dark-mode .doc .admonitionblock td,
body.dark-mode .admonitionblock table,
body.dark-mode .admonitionblock tr,
body.dark-mode .admonitionblock td,
body.dark-mode .doc .admonitionblock table,
body.dark-mode .doc .admonitionblock tr,
body.dark-mode .doc .admonitionblock td {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--color-text-primary);
}

html.dark-mode .admonitionblock td.icon,
html.dark-mode .doc .admonitionblock td.icon,
html.dark-mode .admonitionblock td.content,
html.dark-mode .doc .admonitionblock td.content,
body.dark-mode .admonitionblock td.icon,
body.dark-mode .doc .admonitionblock td.icon,
body.dark-mode .admonitionblock td.content,
body.dark-mode .doc .admonitionblock td.content {
  background-color: transparent !important;
  color: var(--color-text-primary);
}

html.dark-mode table,
body.dark-mode table {
  border-color: var(--color-border);
}

html.dark-mode th,
html.dark-mode td,
body.dark-mode th,
body.dark-mode td {
  border-color: var(--color-border);
  background-color: var(--color-background-panel);
}

html.dark-mode th,
body.dark-mode th {
  background-color: var(--color-background-offset);
}

/* Dark mode toggle button */
.dark-mode-toggle {
  cursor: pointer;
  padding: 0.5rem;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}

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

.dark-mode-toggle .icon-sun {
  display: none;
}

.dark-mode-toggle .icon-moon {
  display: inline;
}

body.dark-mode .dark-mode-toggle .icon-sun {
  display: inline;
}

body.dark-mode .dark-mode-toggle .icon-moon {
  display: none;
}

html.dark-mode body,
html.dark-mode .header,
html.dark-mode .nav,
html.dark-mode .nav-menu,
html.dark-mode .nav-panel-explore,
html.dark-mode .nav-panel-explore .context,
html.dark-mode .nav-panel-explore .components,
html.dark-mode .toolbar,
html.dark-mode .breadcrumbs,
html.dark-mode .footer,
body.dark-mode,
body.dark-mode .header,
body.dark-mode .nav,
body.dark-mode .nav-menu,
body.dark-mode .nav-panel-explore,
body.dark-mode .nav-panel-explore .context,
body.dark-mode .nav-panel-explore .components,
body.dark-mode .toolbar,
body.dark-mode .breadcrumbs,
body.dark-mode .footer {
  transition: none;
}