/* Dark Mode Theme for Antora UI - Binaural Histolog
 *
 * Provides both automatic (system preference) and manual dark mode
 * with three-state toggle: auto → light → dark
 */

/* ========== CSS Variables ========== */
:root {
  /* Light mode defaults (current site colors) */
  --color-bg-body: #ffffff;
  --color-bg-page: #ffffff;
  --color-bg-code: #fafafa;
  --color-bg-nav: #fafafa;
  --color-bg-navbar: #191919;
  --color-text-primary: #333333;
  --color-text-secondary: #5d5d5d;
  --color-text-link: #1565c0;
  --color-text-navbar: #ffffff;
  --color-border: #e1e1e1;
  --color-border-light: #c1c1c1;
  --color-admonition-note: #e3f2fd;
  --color-admonition-tip: #e8f5e9;
  --color-admonition-warning: #fff3e0;
  --color-admonition-caution: #fce4ec;
}

/* Automatic dark mode via system preference */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --color-bg-body: #1a1a1a;
    --color-bg-page: #1a1a1a;
    --color-bg-code: #2d2d2d;
    --color-bg-nav: #1e1e1e;
    --color-bg-navbar: #0d0d0d;
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #a0a0a0;
    --color-text-link: #58a6ff;
    --color-text-navbar: #ffffff;
    --color-border: #404040;
    --color-border-light: #505050;
    --color-admonition-note: #1e3a5f;
    --color-admonition-tip: #1e3a1e;
    --color-admonition-warning: #4a3500;
    --color-admonition-caution: #4a1e2e;
  }
}

/* Manual dark mode - user override */
body.dark-mode {
  --color-bg-body: #1a1a1a;
  --color-bg-page: #1a1a1a;
  --color-bg-code: #2d2d2d;
  --color-bg-nav: #1e1e1e;
  --color-bg-navbar: #0d0d0d;
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #a0a0a0;
  --color-text-link: #58a6ff;
  --color-text-navbar: #ffffff;
  --color-border: #404040;
  --color-border-light: #505050;
  --color-admonition-note: #1e3a5f;
  --color-admonition-tip: #1e3a1e;
  --color-admonition-warning: #4a3500;
  --color-admonition-caution: #4a1e2e;
}

/* Manual light mode - override system dark preference */
body.light-mode {
  --color-bg-body: #ffffff;
  --color-bg-page: #ffffff;
  --color-bg-code: #fafafa;
  --color-bg-nav: #fafafa;
  --color-bg-navbar: #191919;
  --color-text-primary: #333333;
  --color-text-secondary: #5d5d5d;
  --color-text-link: #1565c0;
  --color-text-navbar: #ffffff;
  --color-border: #e1e1e1;
  --color-border-light: #c1c1c1;
  --color-admonition-note: #e3f2fd;
  --color-admonition-tip: #e8f5e9;
  --color-admonition-warning: #fff3e0;
  --color-admonition-caution: #fce4ec;
}

/* ========== Apply Variables to Elements ========== */

/* Body and main containers */
body {
  background-color: var(--color-bg-body);
  color: var(--color-text-primary);
}

.doc {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
}

.article {
  color: var(--color-text-primary);
}

/* Headings */
.doc h1,
.doc h2,
.doc h3,
.doc h4,
.doc h5,
.doc h6 {
  color: var(--color-text-primary);
}

/* Links */
.doc a {
  color: var(--color-text-link);
}

.doc a:hover {
  filter: brightness(1.2);
}

a.bare,
a[href^="http://"],
a[href^="https://"] {
  color: var(--color-text-link);
}

/* Navbar */
.navbar {
  background-color: var(--color-bg-navbar);
}

.navbar-item,
.navbar-link {
  color: var(--color-text-navbar);
}

/* Navbar inversion for dark mode */
body.dark-mode .navbar {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
}

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

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

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .navbar {
    background-color: var(--color-bg-page);
    color: var(--color-text-primary);
  }

  :root:not(.light-mode) .navbar-brand .navbar-item,
  :root:not(.light-mode) .navbar-brand .navbar-item a {
    color: var(--color-text-primary);
  }

  :root:not(.light-mode) .navbar-item,
  :root:not(.light-mode) .navbar-link {
    color: var(--color-text-primary);
  }
}

/* Navigation sidebar */
.nav {
  background-color: var(--color-bg-nav);
}

.nav-menu h3.title {
  color: var(--color-text-primary);
}

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

.nav-link:hover {
  color: var(--color-text-primary);
  background-color: rgba(0, 0, 0, 0.05);
}

body.dark-mode .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.nav-link.is-active {
  color: var(--color-text-link);
  font-weight: 600;
}

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

.nav-heading {
  color: var(--color-text-secondary);
}

/* Code blocks */
pre,
code {
  background-color: var(--color-bg-code);
  color: var(--color-text-primary);
}

pre.highlight {
  background-color: var(--color-bg-code);
}

.listingblock pre {
  background-color: var(--color-bg-code);
}

/* Inline code */
p code,
li code,
td code,
dt code,
dd code {
  background-color: var(--color-bg-code);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

/* Tables */
table {
  border-color: var(--color-border);
}

table.tableblock {
  border-color: var(--color-border);
}

th,
thead td {
  background-color: var(--color-bg-code);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

td {
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

tr:nth-child(even) {
  background-color: var(--color-bg-code);
}

/* Admonitions */
.admonitionblock {
  border-left: 4px solid var(--color-border);
}

.admonitionblock.note {
  background-color: var(--color-admonition-note);
}

.admonitionblock.tip {
  background-color: var(--color-admonition-tip);
}

.admonitionblock.warning {
  background-color: var(--color-admonition-warning);
}

.admonitionblock.caution,
.admonitionblock.important {
  background-color: var(--color-admonition-caution);
}

.admonitionblock td.icon {
  color: var(--color-text-primary);
}

.admonitionblock td.content {
  color: var(--color-text-primary);
}

/* Override base UI bundle's white background on admonition content */
.doc .admonitionblock td.content {
  background-color: transparent;
}

/* Borders and dividers */
hr {
  border-color: var(--color-border);
}

.sect1 {
  border-color: var(--color-border);
}

/* Breadcrumbs */
.breadcrumbs {
  color: var(--color-text-secondary);
}

.breadcrumbs a {
  color: var(--color-text-link);
}

/* Search */
#search {
  border: 1px solid var(--color-border);
}

.search-input,
input[type="text"],
input[type="search"] {
  background-color: var(--color-bg-code);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.search-input::placeholder {
  color: var(--color-text-secondary);
}

/* Hide component version header in search results */
.search-result-component-header {
  display: none !important;
}

/* Table of Contents */
.toc {
  background-color: var(--color-bg-page);
  border-color: var(--color-border);
}

.toc-menu {
  color: var(--color-text-secondary);
}

.toc .toc-menu h3 {
  color: var(--color-text-primary);
}

.toc a {
  color: var(--color-text-primary);
}

.toc a:hover {
  color: var(--color-text-link);
}

.toc .toc-menu a.is-active {
  color: var(--color-text-link);
  font-weight: 600;
}

/* Page versions and navigation */
.page-versions {
  background-color: var(--color-bg-code);
  border-color: var(--color-border);
}

.nav-panel-menu {
  background-color: var(--color-bg-nav);
}

/* Hide nav panel explore in both light and dark mode */
.nav-panel-explore {
  display: none !important;
}

/* Toolbar */
.toolbar {
  color: var(--color-text-secondary);
  background-color: var(--color-bg-nav);
  box-shadow: 0 1px 0 var(--color-border);
}

.toolbar a {
  color: var(--color-text-secondary);
}

/* Nav toggle - make visible in dark mode by inverting the icon */
body.dark-mode .nav-toggle {
  filter: invert(1);
}

body.dark-mode .nav-toggle.is-active {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .nav-toggle {
    filter: invert(1);
  }

  :root:not(.light-mode) .nav-toggle.is-active {
    filter: invert(1);
  }
}

/* Home link - use filter invert to make dark icons visible in dark mode */
body.dark-mode .home-link {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .home-link {
    filter: invert(1);
  }
}

/* Footer */
.footer {
  background-color: var(--color-bg-navbar);
  color: var(--color-text-navbar);
}

footer.footer {
  background-color: var(--color-bg-navbar);
  color: var(--color-text-navbar);
}

.footer a {
  color: var(--color-text-link);
}

/* Images - slight opacity reduction in dark mode */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) img {
    opacity: 0.9;
  }
}

body.dark-mode img {
  opacity: 0.9;
}

/* Quotes and verse blocks */
blockquote {
  border-left-color: var(--color-border);
  color: var(--color-text-secondary);
}

.doc #preamble .abstract blockquote {
  background-color: var(--color-bg-page);
  border-left-color: var(--color-border);
  color: var(--color-text-primary);
}

.doc .quoteblock,
.doc .verseblock {
  background-color: var(--color-bg-code);
  border-left-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* Lists */
.ulist,
.olist,
.dlist {
  color: var(--color-text-primary);
}

/* Sidebar blocks */
.sidebarblock {
  background-color: var(--color-bg-code);
  border-color: var(--color-border);
}

.doc .sidebarblock {
  background-color: var(--color-bg-code);
}

/* Example blocks */
.exampleblock {
  background-color: var(--color-bg-code);
  border-color: var(--color-border);
}

/* Dark mode toggle button */
#dark-mode-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-text-navbar);
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

#dark-mode-toggle:focus {
  outline: 2px solid var(--color-text-link);
  outline-offset: 2px;
}

#dark-mode-toggle .theme-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

/* Light mode (default) - sun has dark border, moon is filled */
#dark-mode-toggle .theme-icon .sun-rays,
#dark-mode-toggle .theme-icon .sun-circle {
  stroke: #333;
  fill: none;
}

#dark-mode-toggle .theme-icon .moon-fill {
  fill: #333;
  stroke: #333;
}

/* Dark mode - sun is solid white, moon is white filled */
body.dark-mode #dark-mode-toggle .theme-icon .sun-rays,
body.dark-mode #dark-mode-toggle .theme-icon .sun-circle {
  stroke: #fff;
  fill: #fff;
}

body.dark-mode #dark-mode-toggle .theme-icon .moon-fill {
  fill: #fff;
  stroke: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) #dark-mode-toggle .theme-icon .sun-rays,
  :root:not(.light-mode) #dark-mode-toggle .theme-icon .sun-circle {
    stroke: #fff;
    fill: #fff;
  }

  :root:not(.light-mode) #dark-mode-toggle .theme-icon .moon-fill {
    fill: #fff;
    stroke: #fff;
  }
}

/* Pagination */
.pagination {
  border-color: var(--color-border);
}

.pagination a {
  color: var(--color-text-link);
  border-color: var(--color-border);
}

.pagination .is-current {
  background-color: var(--color-text-link);
  color: #ffffff;
}

/* Smooth transitions for theme changes */
body,
.doc,
.nav,
.navbar,
pre,
code,
table,
th,
td,
.admonitionblock {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ========== Desktop Layout ========== */

@media screen and (min-width: 1024px) {
  /* Ensure proper spacing between navbar-brand items on desktop */
  .navbar-brand .navbar-item {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Search field in navbar-brand on desktop */
  .navbar-brand .navbar-item.search {
    flex: 0 1 auto;
  }
}