/* fifthelement.ai Color Scheme - Global Variables */
:root {
  /* Dark Theme Colors (from platform) */
  --fifth-element-dark-bg: #1a1a1a;
  /* Main dark background */
  --fifth-element-dark-header: #2d2d2d;
  /* Dark header/nav */
  --fifth-element-dark-card: #2a2a2a;
  /* Dark card background */
  --fifth-element-dark-text: #e0e0e0;
  /* Light text on dark */
  --fifth-element-dark-text-secondary: #a0a0a0;
  /* Secondary text */

  /* Light Theme Colors */
  --fifth-element-light-bg: #ffffff;
  /* Light background */
  --fifth-element-light-header: #ffffff;
  /* Light header */
  --fifth-element-light-text: #0e315d;
  /* Dark text on light */

  /* Accent Colors */
  --fifth-element-footer: #0e315d;
  /* Navy footer */
  --fifth-element-blue-primary: #0879f0;
  /* Primary blue */
  --fifth-element-blue-bright: #1e90ff;
  /* Bright blue for cards */
  --fifth-element-blue-accent: #007bff;
  /* Accent blue */
  --fifth-element-blue-light: #1eadff;
  /* Light blue */

  /* Card Gradient - Bright Blue (from platform cards) */
  --fifth-element-card-gradient: linear-gradient(135deg, #1e90ff 0%, #0879f0 100%);
  --fifth-element-card-gradient-hover: linear-gradient(135deg, #0879f0 0%, #1e90ff 100%);

  /* Light Blue Gradient - For light mode cards */
  --fifth-element-light-gradient: linear-gradient(135deg, #CFF0FE 0%, #8CE1FE 50%, #90E2FF 100%);
  --fifth-element-light-gradient-reverse: linear-gradient(135deg, #90E2FF 0%, #8CE1FE 50%, #CFF0FE 100%);
}

/* Header and Search styling is defined in theme-specific sections below */

/* ===== LIGHT MODE THEME ===== */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--fifth-element-blue-primary);
  --md-primary-fg-color--light: var(--fifth-element-blue-light);
  --md-primary-fg-color--dark: var(--fifth-element-footer);
  --md-accent-fg-color: var(--fifth-element-blue-accent);
  --md-default-bg-color: var(--fifth-element-light-bg);
  --md-default-fg-color: var(--fifth-element-light-text);
}

/* Light Mode - Header */
[data-md-color-scheme="default"] .md-header {
  background: var(--fifth-element-light-header) !important;
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.1);
}

[data-md-color-scheme="default"] .md-header__title,
[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-header svg,
[data-md-color-scheme="default"] .md-icon {
  color: var(--fifth-element-light-text) !important;
  fill: var(--fifth-element-light-text);
}

[data-md-color-scheme="default"] .md-header__button:hover {
  opacity: 0.7;
}

/* Light Mode - Search Bar */
[data-md-color-scheme="default"] .md-search__input {
  background-color: rgba(14, 49, 93, 0.05);
  color: var(--fifth-element-light-text);
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: rgba(14, 49, 93, 0.5);
}

[data-md-color-scheme="default"] .md-search__input:focus {
  background-color: rgba(14, 49, 93, 0.08);
}

/* Light Mode - Tabs */
[data-md-color-scheme="default"] .md-tabs {
  background: var(--fifth-element-light-header) !important;
  border-bottom: 1px solid rgba(14, 49, 93, 0.1);
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: var(--fifth-element-light-text) !important;
  opacity: 0.7;
}

[data-md-color-scheme="default"] .md-tabs__link:hover {
  opacity: 0.9;
}

[data-md-color-scheme="default"] .md-tabs__link--active {
  color: var(--fifth-element-blue-primary) !important;
  opacity: 1;
  font-weight: 600;
  border-bottom: 2px solid var(--fifth-element-blue-primary);
}

/* Light Mode - Cards with Light Blue Gradient */
[data-md-color-scheme="default"] .md-typeset .grid.cards> :is(ul, ol)>li {
  background: var(--fifth-element-light-gradient);
}

[data-md-color-scheme="default"] .md-typeset .grid.cards> :is(ul, ol)>li:hover {
  background: var(--fifth-element-light-gradient-reverse);
}

/* ===== DARK MODE THEME (Platform Style) ===== */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--fifth-element-blue-bright);
  --md-primary-fg-color--light: var(--fifth-element-blue-light);
  --md-primary-fg-color--dark: var(--fifth-element-blue-primary);
  --md-accent-fg-color: var(--fifth-element-blue-bright);
  --md-default-bg-color: var(--fifth-element-dark-bg);
  --md-default-fg-color: var(--fifth-element-dark-text);
  --md-code-bg-color: var(--fifth-element-dark-card);
}

/* Dark Mode - Header (Dark like platform) */
[data-md-color-scheme="slate"] .md-header {
  background: var(--fifth-element-dark-header) !important;
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.5);
}

[data-md-color-scheme="slate"] .md-header__title,
[data-md-color-scheme="slate"] .md-header__button,
[data-md-color-scheme="slate"] .md-header-nav__title {
  color: var(--fifth-element-dark-text) !important;
}

[data-md-color-scheme="slate"] .md-header svg,
[data-md-color-scheme="slate"] .md-header .md-icon {
  color: var(--fifth-element-dark-text) !important;
  fill: var(--fifth-element-dark-text);
}

/* Dark Mode - Search Bar */
[data-md-color-scheme="slate"] .md-search__input {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--fifth-element-dark-text);
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: var(--fifth-element-dark-text-secondary);
}

[data-md-color-scheme="slate"] .md-search__input:focus {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Dark Mode - Tabs */
[data-md-color-scheme="slate"] .md-tabs {
  background: var(--fifth-element-dark-header) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: var(--fifth-element-dark-text-secondary) !important;
  opacity: 0.8;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover {
  opacity: 1;
  color: var(--fifth-element-dark-text) !important;
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: var(--fifth-element-blue-bright) !important;
  opacity: 1;
  font-weight: 600;
  border-bottom: 2px solid var(--fifth-element-blue-bright);
}

/* Dark Mode - Cards with Bright Blue Gradient (like platform) */
[data-md-color-scheme="slate"] .md-typeset .grid.cards> :is(ul, ol)>li {
  background: var(--fifth-element-card-gradient);
  border-color: rgba(30, 144, 255, 0.3);
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards> :is(ul, ol)>li:hover {
  background: var(--fifth-element-card-gradient-hover);
  box-shadow: 0 0.4rem 1.2rem rgba(30, 144, 255, 0.4);
}

/* Dark Mode - Card Links (white for visibility on blue background) */
[data-md-color-scheme="slate"] .md-typeset .grid.cards> :is(ul, ol)>li a {
  color: #ffffff !important;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards> :is(ul, ol)>li a:hover {
  color: #ffffff !important;
  opacity: 0.9;
  text-decoration: underline;
}

/* Dark Mode - Sidebar */
[data-md-color-scheme="slate"] .md-sidebar {
  background-color: var(--fifth-element-dark-bg);
}

[data-md-color-scheme="slate"] .md-sidebar--primary {
  background-color: var(--fifth-element-dark-bg);
}

[data-md-color-scheme="slate"] .md-nav {
  color: var(--fifth-element-dark-text);
  background-color: transparent;
}

[data-md-color-scheme="slate"] .md-nav__title {
  background-color: var(--fifth-element-dark-header);
  color: var(--fifth-element-dark-text);
}

[data-md-color-scheme="slate"] .md-nav__item {
  color: var(--fifth-element-dark-text);
}

/* Dark Mode - Content Background */
[data-md-color-scheme="slate"] .md-content {
  background-color: var(--fifth-element-dark-bg);
}

[data-md-color-scheme="slate"] .md-main {
  background-color: var(--fifth-element-dark-bg);
}

/* Footer Styling */
.md-footer {
  background-color: var(--fifth-element-footer) !important;
}

/* Logo Styling - Consistent across themes */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
  max-width: none;
}

/* Header Title - Reduce spacing from logo */
[dir=ltr] .md-header__title {
  margin-left: -0.3rem;
}

/* Navigation and Tabs styling is defined in theme-specific sections */

/* Links - Light Mode */
[data-md-color-scheme="default"] a {
  color: var(--fifth-element-blue-accent);
}

[data-md-color-scheme="default"] a:hover {
  color: var(--fifth-element-blue-light);
}

/* Links - Dark Mode */
[data-md-color-scheme="slate"] a {
  color: var(--fifth-element-blue-bright);
}

[data-md-color-scheme="slate"] a:hover {
  color: var(--fifth-element-blue-light);
}

/* Buttons - Light Mode */
[data-md-color-scheme="default"] .md-button {
  background: var(--fifth-element-light-gradient);
  border: none;
  color: var(--fifth-element-light-text);
  font-weight: 600;
  transition: all 0.3s ease;
}

[data-md-color-scheme="default"] .md-button:hover {
  background: var(--fifth-element-light-gradient-reverse);
  transform: translateY(-2px);
  box-shadow: 0 0.4rem 1rem rgba(140, 225, 254, 0.5);
}

[data-md-color-scheme="default"] .md-button--primary {
  background: var(--fifth-element-light-gradient);
  border: none;
  color: var(--fifth-element-light-text);
}

[data-md-color-scheme="default"] .md-button--primary:hover {
  background: var(--fifth-element-light-gradient-reverse);
  box-shadow: 0 0.4rem 1.2rem rgba(140, 225, 254, 0.6);
}

/* Buttons - Dark Mode */
[data-md-color-scheme="slate"] .md-button {
  background: var(--fifth-element-card-gradient);
  border: none;
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
}

[data-md-color-scheme="slate"] .md-button:hover {
  background: var(--fifth-element-card-gradient-hover);
  transform: translateY(-2px);
  box-shadow: 0 0.4rem 1rem rgba(30, 144, 255, 0.5);
}

[data-md-color-scheme="slate"] .md-button--primary {
  background: var(--fifth-element-card-gradient);
  border: none;
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-button--primary:hover {
  background: var(--fifth-element-card-gradient-hover);
  box-shadow: 0 0.4rem 1.2rem rgba(30, 144, 255, 0.6);
}

/* Search Bar styling is defined in header section above */

/* Code Blocks - Light Mode */
[data-md-color-scheme="default"] .highlight code {
  background-color: rgba(14, 49, 93, 0.05);
}

/* Code Blocks - Dark Mode */
[data-md-color-scheme="slate"] .highlight code {
  background-color: var(--fifth-element-dark-card);
}

/* Admonitions - Light Mode */
[data-md-color-scheme="default"] .md-typeset .admonition.tip,
[data-md-color-scheme="default"] .md-typeset details.tip {
  border-color: var(--fifth-element-blue-accent);
  background-color: rgba(207, 240, 254, 0.15);
}

[data-md-color-scheme="default"] .md-typeset .admonition.info,
[data-md-color-scheme="default"] .md-typeset details.info {
  border-color: #8CE1FE;
  background-color: rgba(140, 225, 254, 0.1);
}

[data-md-color-scheme="default"] .md-typeset .admonition.note,
[data-md-color-scheme="default"] .md-typeset details.note {
  border-color: #90E2FF;
  background-color: rgba(144, 226, 255, 0.1);
}

/* Admonitions - Dark Mode */
[data-md-color-scheme="slate"] .md-typeset .admonition.tip,
[data-md-color-scheme="slate"] .md-typeset details.tip {
  border-color: var(--fifth-element-blue-bright);
  background-color: rgba(30, 144, 255, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.info,
[data-md-color-scheme="slate"] .md-typeset details.info {
  border-color: var(--fifth-element-blue-bright);
  background-color: rgba(30, 144, 255, 0.1);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.note,
[data-md-color-scheme="slate"] .md-typeset details.note {
  border-color: var(--fifth-element-blue-bright);
  background-color: rgba(30, 144, 255, 0.1);
}

/* Grid Cards - Universal Styling */
.md-typeset .grid.cards> :is(ul, ol)>li {
  transition: all 0.3s ease;
  border-radius: 5px;
}

.md-typeset .grid.cards> :is(ul, ol)>li:hover {
  transform: translateY(-2px);
}

/* Table of Contents - Light Mode */
[data-md-color-scheme="default"] .md-nav__link {
  color: var(--fifth-element-light-text);
}

[data-md-color-scheme="default"] .md-nav__link--active {
  color: var(--fifth-element-blue-primary) !important;
  font-weight: 700;
  border-left: 3px solid var(--fifth-element-blue-primary);
  padding-left: 0.6rem;
}

[data-md-color-scheme="default"] .md-nav__link:hover {
  color: var(--fifth-element-blue-accent);
}

/* Table of Contents - Dark Mode */
[data-md-color-scheme="slate"] .md-nav__link {
  color: var(--fifth-element-dark-text);
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: var(--fifth-element-blue-bright) !important;
  font-weight: 700;
  border-left: 3px solid var(--fifth-element-blue-bright);
  padding-left: 0.6rem;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: var(--fifth-element-blue-light);
}

/* Top Navigation Active Tab styling is defined in tabs section above */

/* Scrollbar Customization */
::-webkit-scrollbar-thumb {
  background-color: var(--fifth-element-blue-accent);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--fifth-element-blue-light);
}

/* ===== UNIVERSAL REFINEMENTS ===== */

/* Task List Checkboxes - Works for both themes */
.md-typeset .task-list-indicator:before {
  background-color: var(--fifth-element-footer);
}

[data-md-color-scheme="slate"] .md-typeset .task-list-indicator:before {
  background-color: var(--fifth-element-dark-card);
}

/* Search Form - Transparent background */
.md-search__form {
  background-color: transparent !important;
}

/* Search Input - Rounded corners */
.md-search__input {
  border-radius: 25px !important;
}

/* Universal Card Border Radius */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 5px;
}

/* Buttons Border Radius */
.md-button {
  border-radius: 5px;
}

/* ===== IMAGES & CAPTIONS ===== */

/* Add border to all content images */
.md-content img {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
}

[data-md-color-scheme="slate"] .md-content img {
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Center image captions */
.md-content img+em,
.md-content figure figcaption,
.md-content p>em:only-child {
  display: block;
  text-align: center;
  font-style: italic;
  color: var(--fifth-element-dark-text-secondary);
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

[data-md-color-scheme="default"] .md-content img+em,
[data-md-color-scheme="default"] .md-content p>em:only-child {
  color: rgba(14, 49, 93, 0.7);
}

/* ===== SIDEBAR IMPROVEMENTS ===== */

/* Smaller font for sidebar navigation */
.md-sidebar .md-nav__link {
  font-size: 0.7rem !important;
  line-height: 1.5;
}

.md-sidebar .md-nav__title {
  font-size: 0.75rem !important;
  font-weight: 700;
}

/* Add vertical spacing between sidebar items */
.md-sidebar .md-nav__item {
  margin-bottom: 0.4rem;
}

.md-sidebar .md-nav__item .md-nav__item {
  margin-bottom: 0.25rem;
  margin-left: 0.5rem;
}

/* Compact nested navigation */
.md-sidebar .md-nav--secondary .md-nav__link {
  font-size: 0.65rem !important;
}

/* ===== HYPOTHESIS ANNOTATION SYSTEM STYLING ===== */

/* Hypothesis Annotation Highlights - More Visible */
hypothesis-highlight {
  background-color: rgba(255, 255, 0, 0.4) !important;
  border-bottom: 2px solid #ff9800 !important;
  transition: background-color 0.2s ease;
}

hypothesis-highlight:hover {
  background-color: rgba(255, 152, 0, 0.6) !important;
  cursor: pointer;
}

/* Hypothesis Sidebar Customization */
.hypothesis-sidebar {
  border-left: 3px solid #0879f0 !important;
}

/* Make annotation count badge more visible */
.hypothesis-highlights-always-on .hypothesis-bucket-button {
  background-color: #0579f6b4 !important;
}