/* 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);
}

/* 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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);
}

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

body.dark-mode .admonitionblock {
  border-left-width: 3px;
}

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

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

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

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

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

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

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

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;
}

/* Smooth transition for mode switching */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.header,
.nav,
.toolbar,
.footer {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}