/* Theme Toggle Styles - Palantir-Inspired Design */

/* CSS Custom Properties for Light and Dark Themes */
:root {
  /* Light theme — clean white with Raft magenta accents */
  --primary-main: #C52EA3;
  --primary-light: #D65BB8;
  --primary-dark: #A12584;

  --secondary-main: #6e7781;
  --secondary-light: #8c959f;
  --secondary-dark: #57606a;

  --text-primary: #1f2328;
  --text-secondary: #656d76;
  --text-disabled: #8c959f;

  --background-default: #ffffff;
  --background-paper: #ffffff;
  --background-elevation-0: #f6f8fa;
  --background-elevation-1: #f6f8fa;
  --background-elevation-2: #eaeef2;
  --background-elevation-3: #d8dee4;
  --background-elevation-4: #d0d7de;

  --action-hover: rgba(208, 215, 222, 0.32);
  --action-selected: rgba(208, 215, 222, 0.48);

  --divider: #d0d7de;

  --error-main: #cf222e;
  --warning-main: #bf8700;
  --info-main: #0969da;
  --success-main: #1a7f37;

  --navbar-bg: #24292f;
  --navbar-text: #ffffff;
}

[data-theme="dark"] {
  /* Dark theme — navy/charcoal with Raft magenta accents */
  --primary-main: #C52EA3;
  --primary-light: #E88CD1;
  --primary-dark: #8E1F73;

  --secondary-main: #6e7681;
  --secondary-light: #8b949e;
  --secondary-dark: #484f58;

  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-disabled: #484f58;

  --background-default: #0d1117;
  --background-paper: #161b22;
  --background-elevation-0: #0d1117;
  --background-elevation-1: #161b22;
  --background-elevation-2: #1c2128;
  --background-elevation-3: #21262d;
  --background-elevation-4: #30363d;

  --action-hover: rgba(177, 186, 196, 0.12);
  --action-selected: rgba(177, 186, 196, 0.2);

  --divider: #30363d;

  --error-main: #f85149;
  --warning-main: #d29922;
  --info-main: #58a6ff;
  --success-main: #3fb950;

  --navbar-bg: #010409;
  --navbar-text: #f0f6fc;
}

/* Theme Toggle Button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: #fff;
  stroke: #fff;
}

/* Light theme - show moon icon (white) */
.theme-toggle .sun-icon {
  display: none;
}

.theme-toggle .moon-icon {
  display: block;
}

/* Dark theme - show sun icon (white, same as moon) */
[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
  fill: #fff;
  stroke: #fff;
}

[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

/* Apply theme colors to body and main elements */
body {
  background: var(--background-default);
  color: var(--text-primary);
}

/* Header/Navbar */
.navbar {
  background:
    linear-gradient(rgba(36, 41, 47, 0.88), rgba(36, 41, 47, 0.92)),
    url('../img/AbstractNetworkBG.jpg') center/cover no-repeat,
    var(--navbar-bg) !important;
  color: var(--navbar-text) !important;
  box-shadow: 0 1px 0 var(--divider);
}

.navbar-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 1215.5px) {
  .navbar-center { display: none; }
}

[data-theme="dark"] .navbar {
  background:
    linear-gradient(rgba(1, 4, 9, 0.88), rgba(1, 4, 9, 0.92)),
    url('../img/AbstractNetworkBG.jpg') center/cover no-repeat,
    var(--navbar-bg) !important;
}

.navbar a {
  color: #fff !important;
}

.navbar-brand .navbar-item:first-child {
  color: #fff !important;
}

.navbar-brand .navbar-item:hover,
.navbar-end .navbar-item:hover,
.navbar-end a.navbar-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* Navigation */
.nav {
  background: var(--background-elevation-1);
}

.nav-container {
  background: var(--background-elevation-1);
}

.nav-menu {
  background: var(--background-elevation-1);
}

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

.nav-item a,
.nav-link,
.nav-text {
  color: var(--text-primary);
}

.nav-item a:hover {
  color: var(--primary-dark);
}

.is-current-page > .nav-link,
.is-current-page > .nav-text {
  color: var(--primary-main);
  font-weight: 600;
}

/* Toolbar */
.toolbar {
  background: var(--background-elevation-1);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--divider);
}

/* Documentation Content */
.doc {
  color: var(--text-primary);
}

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

.doc h2:not(.discrete) {
  border-bottom: 1px solid var(--divider);
}

.doc a {
  color: var(--primary-main);
}

.doc a:hover {
  color: var(--primary-dark);
}

/* Code blocks */
.doc p code,
.doc thead code,
.doc .colist > table code {
  background: var(--background-elevation-3);
  color: var(--text-primary);
}

.doc .listingblock pre:not(.highlight),
.doc .literalblock pre,
.doc pre.highlight > code {
  background: var(--background-elevation-2);
  color: var(--text-primary);
  border: 1px solid var(--divider);
}

/* Tables */
.doc table.tableblock {
  border-color: var(--divider);
}

.doc table.tableblock td,
.doc table.tableblock th {
  border-color: var(--divider);
  background: var(--background-paper);
}

.doc table.stripes-all > tbody > tr:nth-of-type(2n),
.doc table.stripes-even > tbody > tr:nth-of-type(2n) {
  background: var(--background-elevation-1);
}

/* Admonitions */
.doc .admonitionblock td.content {
  background: var(--background-elevation-2);
  border: 1px solid var(--divider);
}

.doc .admonitionblock td.icon i.icon-note {
  background-color: var(--info-main);
}

.doc .admonitionblock td.icon i.icon-tip {
  background-color: var(--success-main);
}

.doc .admonitionblock td.icon i.icon-important {
  background-color: #16A34A; /* green */
  color: #fff;
}

.doc .admonitionblock td.icon i.icon-warning {
  background-color: var(--warning-main);
}

.doc .admonitionblock td.icon i.icon-caution {
  background-color: #EAB308; /* yellow */
  color: #000;
}

/* Sidebar TOC */
.toc-menu {
  color: var(--text-secondary);
}

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

.toc-menu a {
  color: var(--text-secondary);
  border-left-color: var(--divider);
}

.toc-menu a:hover {
  color: var(--primary-dark);
}

.toc-menu a.is-active {
  color: var(--primary-main);
  border-left-color: var(--primary-main);
}

/* Blockquotes */
.doc .quoteblock,
.doc .verseblock {
  background: var(--background-elevation-2);
  border-left-color: var(--primary-main);
  color: var(--text-secondary);
}

/* Sidebar blocks */
.doc .sidebarblock {
  background: var(--background-elevation-2);
  border: 1px solid var(--divider);
}

/* Example blocks */
.doc .exampleblock > .content,
.doc details.result > .content {
  background: var(--background-paper);
  border-color: var(--divider);
}

/* Dark mode images - give transparent images a light background */
[data-theme="dark"] .doc .imageblock img {
  background: #f6f8fa;
  border-radius: 6px;
  padding: 8px;
}

/* Footer */
footer.footer {
  background: var(--background-elevation-2);
  color: var(--text-secondary);
  border-top: 1px solid var(--divider);
}

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

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

nav.pagination a {
  color: var(--primary-main);
}

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

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

.breadcrumbs a:hover {
  color: var(--primary-main);
}

/* Home icon - invert for dark mode so #222 SVG is visible */
[data-theme="dark"] .home-link {
  filter: invert(1);
}

/* Navigation panel explore */
.nav-panel-explore {
  background: var(--background-elevation-1);
}

.nav-panel-explore .context {
  background: var(--background-elevation-2);
  color: var(--text-secondary);
  box-shadow: 0 -1px 0 var(--divider);
}

.nav-panel-explore .components {
  background: var(--background-elevation-2);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
}

.nav-panel-explore .component .version a {
  background: var(--background-elevation-4);
  color: var(--text-primary);
}

.nav-panel-explore .component .is-current a {
  background: var(--primary-main);
  color: var(--background-default);
}

/* Scrollbar theming */
@media (pointer: fine) {
  @supports (scrollbar-width: thin) {
    html {
      scrollbar-color: var(--secondary-main) var(--background-elevation-0);
    }

    body * {
      scrollbar-color: var(--secondary-main) transparent;
    }
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--secondary-main);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-dark);
  }

  ::-webkit-scrollbar-track {
    background-color: var(--background-elevation-0);
  }
}

/* Search button in header - update to match theme */
.search-button {
  background: var(--background-elevation-3) !important;
  border-color: var(--divider) !important;
  color: var(--text-primary) !important;
}

.search-button:hover {
  background: var(--background-elevation-4) !important;
}

.search-button svg {
  fill: var(--text-primary) !important;
  stroke: var(--text-primary) !important;
}

.search-button-shortcut {
  background: var(--background-elevation-4) !important;
  border-color: var(--divider) !important;
  color: var(--text-primary) !important;
}

/* Update search modal to match theme */
.search-modal {
  background: var(--background-paper) !important;
  color: var(--text-primary) !important;
}

.search-input {
  background: var(--background-elevation-1) !important;
  color: var(--text-primary) !important;
  border-color: var(--divider) !important;
}

.search-result-item {
  border-color: var(--divider) !important;
}

.search-result-item:hover,
.search-result-item.selected {
  background: var(--action-hover) !important;
}

.search-result-title {
  color: var(--text-primary) !important;
}

.search-result-breadcrumb {
  color: var(--text-secondary) !important;
}

.search-result-excerpt {
  color: var(--text-secondary) !important;
}

.search-footer {
  border-color: var(--divider) !important;
  background: var(--background-elevation-1) !important;
  color: var(--text-secondary) !important;
}

.search-key {
  background: var(--background-elevation-2) !important;
  border-color: var(--divider) !important;
  color: var(--text-primary) !important;
}

.search-empty {
  color: var(--text-secondary) !important;
}

/* Remove global transitions for instant theme switching */
* {
  transition: none !important;
}

/* Only add transitions to interactive elements */
.theme-toggle,
.search-button,
.navbar-item,
.nav-item a,
.toc-menu a,
button {
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}