/* ============================================
   Immersive Fusion - Futuristic Documentation Theme
   Based on Example.Spa cyberpunk design system
   ============================================ */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */
:root {
  /* Futuristic color palette */
  --color-primary: #00E5FF;
  --color-secondary: #7C4DFF;
  --color-accent: #FF6D00;
  --color-success: #00E676;
  --color-danger: #FF1744;
  --color-bg-dark: #0a0a0f;
  --color-bg-card: rgba(20, 20, 35, 0.8);
  --color-text: #E0E0E0;
  --color-text-muted: #888;

  /* Glow effects */
  --glow-primary: 0 0 10px rgba(0, 229, 255, 0.5), 0 0 20px rgba(0, 229, 255, 0.3), 0 0 40px rgba(0, 229, 255, 0.15);
  --glow-secondary: 0 0 10px rgba(124, 77, 255, 0.5), 0 0 20px rgba(124, 77, 255, 0.3);
}

/* ============================================
   Dark Mode (Slate) - Primary Futuristic Theme
   ============================================ */
[data-md-color-scheme="slate"] {
  /* Override Material theme colors */
  --md-primary-fg-color: #0a0a0f;
  --md-primary-fg-color--light: #141420;
  --md-primary-fg-color--dark: #050508;
  --md-accent-fg-color: #00E5FF;
  --md-default-bg-color: #0a0a0f;
  --md-default-fg-color: #E0E0E0;
  --md-default-fg-color--light: #888;
  --md-typeset-color: #E0E0E0;
  --md-typeset-a-color: #00E5FF;
  --md-code-bg-color: rgba(15, 15, 25, 0.9);
  --md-code-fg-color: #00E5FF;
}

/* ============================================
   Body & Background - Clean Dark with Glow
   ============================================ */

/* Remove any top gap */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide skip to content element that causes gap */
[data-md-component="skip"],
.md-skip {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0a0a0f !important;
}

[data-md-color-scheme="slate"] body,
[data-md-color-scheme="slate"] .md-container {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 77, 255, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(0, 229, 255, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse 50% 30% at 20% 5%, rgba(0, 229, 255, 0.1) 0%, transparent 35%),
    linear-gradient(180deg, #0a0a12 0%, #08080c 50%, #0a0a0f 100%) !important;
  background-attachment: fixed !important;
}

/* ============================================
   Header - Clean Dark Style (like main site)
   ============================================ */
[data-md-color-scheme="slate"] .md-header {
  background: rgba(10, 10, 18, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 229, 255, 0.2);
  box-shadow: none;
}

/* Layout band: aligned to the 68rem family width shared across the academy,
   docs, and Knowledge Nexus tiers, so all four mkdocs sites render at the same
   content width. (The general academy sets the same value in academy.css.) */
.md-grid { max-width: 68rem; }

/* Header title with gradient like "Immersive Fusion" */
[data-md-color-scheme="slate"] .md-header__title {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

[data-md-color-scheme="slate"] .md-header__topic {
  background: linear-gradient(90deg, #00E5FF, #7C4DFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

/* Logo - clean without excessive glow */
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  filter: none;
  transition: filter 0.3s ease;
}

[data-md-color-scheme="slate"] .md-header__button.md-logo:hover img {
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.5));
}

/* Search box styling */
[data-md-color-scheme="slate"] .md-search__form {
  background: rgba(30, 30, 45, 0.6) !important;
  border: 1px solid rgba(0, 229, 255, 0.15);
  border-radius: 6px;
}

[data-md-color-scheme="slate"] .md-search__input {
  color: #E0E0E0;
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: rgba(224, 224, 224, 0.5);
}

/* ============================================
   Navigation Tabs - Integrated with header
   ============================================ */
[data-md-color-scheme="slate"] .md-tabs {
  background: rgba(10, 10, 18, 0.95) !important;
  border-bottom: 1px solid rgba(0, 229, 255, 0.1);
}

[data-md-color-scheme="slate"] .md-tabs__link {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
  padding: 0 0.5rem;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: rgba(255, 255, 255, 0.9);
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: #fff;
  font-weight: 500;
}

/* ============================================
   Sidebar Navigation
   ============================================ */
[data-md-color-scheme="slate"] .md-sidebar {
  background: transparent;
}

[data-md-color-scheme="slate"] .md-sidebar__inner {
  background: transparent !important;
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
  font-weight: 400;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #fff;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #fff !important;
  font-weight: 600;
}

/* Section headers in nav */
[data-md-color-scheme="slate"] .md-nav__item--nested > .md-nav__link {
  font-weight: 600;
  text-transform: none;
  font-size: 0.8rem;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   Typography - Futuristic Headers
   ============================================ */
.md-header__topic,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
  margin: 0 0 15px 0;
}

[data-md-color-scheme="slate"] h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #00E5FF, #7C4DFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-md-color-scheme="slate"] h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #00E5FF, #7C4DFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-md-color-scheme="slate"] h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
  letter-spacing: 0.5px;
}

h4 {
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
}

h5 {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.48;
  margin: 0 0 12px 0;
}

/* ============================================
   Content Area
   ============================================ */
[data-md-color-scheme="slate"] .md-content {
  background: transparent;
}

[data-md-color-scheme="slate"] .md-content__inner {
  background: transparent !important;
}

/* ============================================
   Links - Neon Style
   ============================================ */
[data-md-color-scheme="slate"] a {
  color: #00E5FF;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

[data-md-color-scheme="slate"] a:hover {
  color: #66F0FF;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

/* Underline animation on hover */
[data-md-color-scheme="slate"] .md-content a:not(.md-button)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #00E5FF, #7C4DFF);
  transition: width 0.3s ease;
}

[data-md-color-scheme="slate"] .md-content a:not(.md-button):hover::after {
  width: 100%;
}

/* ============================================
   Code Blocks - Terminal Style
   ============================================ */
[data-md-color-scheme="slate"] .highlight,
[data-md-color-scheme="slate"] pre {
  background: linear-gradient(145deg, #0d0d15, #080810) !important;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  box-shadow:
    0 0 10px rgba(0, 229, 255, 0.08),
    0 0 20px rgba(0, 229, 255, 0.05),
    inset 0 0 15px rgba(0, 229, 255, 0.02);
  position: relative;
  overflow: hidden;
}

/* Terminal header dots */
[data-md-color-scheme="slate"] .highlight::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 15px;
  width: 12px;
  height: 12px;
  background: #FF1744;
  border-radius: 50%;
  box-shadow:
    20px 0 0 #FF6D00,
    40px 0 0 #00E676;
  z-index: 1;
}

[data-md-color-scheme="slate"] .highlight pre {
  padding-top: 35px !important;
  border: none !important;
  box-shadow: none !important;
}

[data-md-color-scheme="slate"] code {
  font-family: 'JetBrains Mono', 'Fira Code', SFMono-Regular, Consolas, monospace;
  color: #00E5FF;
  text-shadow: 0 0 5px rgba(0, 229, 255, 0.3);
}

[data-md-color-scheme="slate"] .highlight code {
  background: transparent !important;
}

/* Inline code */
[data-md-color-scheme="slate"] :not(pre) > code {
  background: rgba(0, 229, 255, 0.1) !important;
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 4px;
  padding: 2px 6px;
}

/* ============================================
   Buttons - Neon Glow
   ============================================ */
[data-md-color-scheme="slate"] .md-button {
  background: linear-gradient(145deg, rgba(30, 30, 50, 0.8), rgba(15, 15, 30, 0.9));
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 8px;
  color: #00E5FF;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .md-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

[data-md-color-scheme="slate"] .md-button:hover {
  border-color: #00E5FF;
  box-shadow: var(--glow-primary);
  transform: translateY(-2px);
  color: #66F0FF;
}

[data-md-color-scheme="slate"] .md-button:hover::before {
  left: 100%;
}

[data-md-color-scheme="slate"] .md-button--primary {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.3), rgba(0, 229, 255, 0.2));
  border-color: rgba(0, 229, 255, 0.4);
}

/* ============================================
   Cards / Admonitions - Glassmorphism
   ============================================ */
[data-md-color-scheme="slate"] .admonition,
[data-md-color-scheme="slate"] details {
  background: rgba(15, 15, 30, 0.6) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(0, 229, 255, 0.2) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

[data-md-color-scheme="slate"] .admonition-title,
[data-md-color-scheme="slate"] summary {
  background: rgba(0, 229, 255, 0.1) !important;
  border-bottom: 1px solid rgba(0, 229, 255, 0.2);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Info admonition */
[data-md-color-scheme="slate"] .admonition.info,
[data-md-color-scheme="slate"] .admonition.note {
  border-color: rgba(0, 229, 255, 0.4) !important;
}

/* Warning admonition */
[data-md-color-scheme="slate"] .admonition.warning {
  border-color: rgba(255, 109, 0, 0.4) !important;
}

[data-md-color-scheme="slate"] .admonition.warning .admonition-title {
  background: rgba(255, 109, 0, 0.15) !important;
}

/* Danger admonition */
[data-md-color-scheme="slate"] .admonition.danger {
  border-color: rgba(255, 23, 68, 0.4) !important;
}

[data-md-color-scheme="slate"] .admonition.danger .admonition-title {
  background: rgba(255, 23, 68, 0.15) !important;
}

/* Success/Tip admonition */
[data-md-color-scheme="slate"] .admonition.tip,
[data-md-color-scheme="slate"] .admonition.success {
  border-color: rgba(0, 230, 118, 0.4) !important;
}

[data-md-color-scheme="slate"] .admonition.tip .admonition-title,
[data-md-color-scheme="slate"] .admonition.success .admonition-title {
  background: rgba(0, 230, 118, 0.15) !important;
}

/* ============================================
   Tables - Futuristic Grid
   ============================================ */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  background: rgba(20, 20, 35, 0.6);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: rgba(0, 229, 255, 0.1);
  color: #00E5FF;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover {
  background: rgba(0, 229, 255, 0.05);
}

/* ============================================
   Search - Glassmorphism
   ============================================ */
[data-md-color-scheme="slate"] .md-search__form {
  background: rgba(20, 20, 35, 0.8);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 8px;
}

[data-md-color-scheme="slate"] .md-search__input {
  color: #E0E0E0;
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: rgba(224, 224, 224, 0.5);
}

[data-md-color-scheme="slate"] .md-search-result {
  background: rgba(20, 20, 35, 0.95);
  backdrop-filter: blur(12px);
}

[data-md-color-scheme="slate"] .md-search-result__link:hover {
  background: rgba(0, 229, 255, 0.1);
}

/* ============================================
   Footer - Cyber Style
   ============================================ */
[data-md-color-scheme="slate"] .md-footer {
  background: rgba(10, 10, 18, 0.95);
  border-top: 1px solid rgba(0, 229, 255, 0.2);
}

[data-md-color-scheme="slate"] .md-footer-meta {
  background: rgba(10, 10, 18, 0.95);
}

[data-md-color-scheme="slate"] .md-footer-meta__inner {
  color: rgba(255, 255, 255, 0.7);
}

[data-md-color-scheme="slate"] .md-footer a {
  color: rgba(255, 255, 255, 0.8);
}

[data-md-color-scheme="slate"] .md-footer a:hover {
  color: #00E5FF;
}

[data-md-color-scheme="slate"] .md-footer__link {
  color: rgba(255, 255, 255, 0.8);
}

[data-md-color-scheme="slate"] .md-copyright {
  color: rgba(255, 255, 255, 0.6);
}

[data-md-color-scheme="slate"] .md-copyright a {
  color: rgba(255, 255, 255, 0.7);
}

[data-md-color-scheme="slate"] .md-copyright a:hover {
  color: #00E5FF;
}

/* ============================================
   Announcement Banner - Neon
   ============================================ */
.md-banner {
  margin: 0 !important;
  padding: 0.4rem 0 !important;
}

[data-md-color-scheme="slate"] .md-banner {
  background: linear-gradient(90deg, rgba(124, 77, 255, 0.2), rgba(0, 229, 255, 0.2));
  border-bottom: 1px solid rgba(0, 229, 255, 0.3);
}

[data-md-color-scheme="slate"] .md-banner a {
  color: #00E5FF;
}

[data-md-color-scheme="default"] .md-banner {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.15), rgba(124, 77, 255, 0.15));
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-md-color-scheme="default"] .md-banner,
[data-md-color-scheme="default"] .md-banner__inner {
  color: #333 !important;
  font-size: 0.75rem;
}

[data-md-color-scheme="default"] .md-banner a {
  color: #00838f !important;
}

/* ============================================
   Scrollbar - Custom Cyber Style
   ============================================ */
[data-md-color-scheme="slate"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: rgba(10, 10, 15, 0.8);
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00E5FF, #7C4DFF);
  border-radius: 4px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #66F0FF, #9D7FFF);
}

/* ============================================
   Selection - Neon Highlight
   ============================================ */
[data-md-color-scheme="slate"] ::selection {
  background: rgba(0, 229, 255, 0.3);
  color: #fff;
}

/* ============================================
   TOC (Table of Contents)
   ============================================ */
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: #00E5FF;
  border-left: 2px solid #00E5FF;
  padding-left: 10px;
  margin-left: -12px;
}

/* ============================================
   Tab Content
   ============================================ */
[data-md-color-scheme="slate"] .tabbed-labels > label {
  color: rgba(224, 224, 224, 0.7);
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

[data-md-color-scheme="slate"] .tabbed-labels > label:hover {
  color: #00E5FF;
}

[data-md-color-scheme="slate"] .tabbed-labels > label.tabbed-set--active {
  color: #00E5FF;
  border-bottom-color: #00E5FF;
}

/* ============================================
   Light Mode - Futuristic Theme (Light Version)
   ============================================ */

/* Light mode color variables */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #00b8d4;
  --md-accent-fg-color: #00E5FF;
  --md-typeset-a-color: #00b8d4;
}

/* Light mode background - clean white with subtle cyan glow */
[data-md-color-scheme="default"] body,
[data-md-color-scheme="default"] .md-container {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 229, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(124, 77, 255, 0.05) 0%, transparent 40%),
    #fafafa !important;
  background-attachment: fixed !important;
}

/* Header styling - clean white like dark mode is clean dark */
[data-md-color-scheme="default"] .md-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

[data-md-color-scheme="default"] .md-header__title {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
}

[data-md-color-scheme="default"] .md-header__topic {
  color: #333 !important;
  font-weight: 600;
}

[data-md-color-scheme="default"] .md-header .md-icon {
  color: #424242 !important;
}

/* Search box styling */
[data-md-color-scheme="default"] .md-search__form {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

/* Tabs styling - clean white */
[data-md-color-scheme="default"] .md-tabs {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: rgba(0, 0, 0, 0.5) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  padding: 0 0.5rem;
  transition: color 0.2s ease;
}

[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: rgba(0, 0, 0, 0.8) !important;
}

[data-md-color-scheme="default"] .md-tabs__link--active {
  color: #333 !important;
  font-weight: 500;
}

/* Typography */
[data-md-color-scheme="default"] h1 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #5E35B1;
}

[data-md-color-scheme="default"] h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #5E35B1;
}

[data-md-color-scheme="default"] h3 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #7E57C2;
  letter-spacing: 0.5px;
}

/* Sidebar styling - clean */
[data-md-color-scheme="default"] .md-sidebar__inner {
  background: transparent !important;
}

[data-md-color-scheme="default"] .md-nav__link {
  color: rgba(0, 0, 0, 0.6);
}

[data-md-color-scheme="default"] .md-nav__link:hover {
  color: rgba(0, 0, 0, 0.9);
}

[data-md-color-scheme="default"] .md-nav__link--active {
  color: #333 !important;
  font-weight: 600;
}

[data-md-color-scheme="default"] .md-nav__item--nested > .md-nav__link {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
}

/* Content area - no card styling to match dark mode */
[data-md-color-scheme="default"] .md-content__inner {
  background: transparent !important;
}

/* Links */
[data-md-color-scheme="default"] .md-content a {
  color: #0077b6;
}

[data-md-color-scheme="default"] .md-content a:hover {
  color: #00a8e8;
}

/* Code blocks */
[data-md-color-scheme="default"] .highlight,
[data-md-color-scheme="default"] pre {
  background: #f5f5f5 !important;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none;
}

[data-md-color-scheme="default"] .md-typeset .highlight {
  position: relative;
}

[data-md-color-scheme="default"] .md-typeset .highlight::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 15px;
  width: 12px;
  height: 12px;
  background: #e57373;
  border-radius: 50%;
  box-shadow:
    20px 0 0 #ffb74d,
    40px 0 0 #81c784;
  z-index: 1;
}

[data-md-color-scheme="default"] .highlight pre {
  padding-top: 35px !important;
  border: none !important;
  box-shadow: none !important;
}

[data-md-color-scheme="default"] code {
  font-family: 'JetBrains Mono', 'Fira Code', SFMono-Regular, Consolas, monospace;
  color: #00838f;
}

[data-md-color-scheme="default"] :not(pre) > code {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 2px 6px;
  color: #00838f;
}

/* Admonitions */
[data-md-color-scheme="default"] .admonition,
[data-md-color-scheme="default"] details {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 10px !important;
  box-shadow: none;
}

[data-md-color-scheme="default"] .admonition-title,
[data-md-color-scheme="default"] summary {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Tables */
[data-md-color-scheme="default"] .md-typeset table:not([class]) {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) td {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Buttons */
[data-md-color-scheme="default"] .md-button {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px;
  color: #424242 !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

[data-md-color-scheme="default"] .md-button:hover {
  border-color: #5E35B1 !important;
  color: #5E35B1 !important;
  background: rgba(94, 53, 177, 0.1) !important;
  transform: translateY(-2px);
}

[data-md-color-scheme="default"] .md-button--primary {
  background: #5E35B1 !important;
  color: #fff !important;
  border: none !important;
}

[data-md-color-scheme="default"] .md-button--primary:hover {
  background: #7E57C2 !important;
  transform: translateY(-2px);
}

/* Footer */
[data-md-color-scheme="default"] .md-footer {
  background: #d0d0d0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

[data-md-color-scheme="default"] .md-footer-meta {
  background: #c8c8c8 !important;
}

[data-md-color-scheme="default"] .md-footer-meta__inner {
  color: #000 !important;
}

[data-md-color-scheme="default"] .md-footer * {
  color: #000 !important;
}

[data-md-color-scheme="default"] .md-footer a,
[data-md-color-scheme="default"] .md-footer a:visited {
  color: #000 !important;
}

[data-md-color-scheme="default"] .md-footer a:hover {
  color: #5E35B1 !important;
}

[data-md-color-scheme="default"] .md-footer__link {
  color: #000 !important;
}

[data-md-color-scheme="default"] .md-copyright,
[data-md-color-scheme="default"] .md-copyright * {
  color: #000 !important;
}

[data-md-color-scheme="default"] .md-copyright a,
[data-md-color-scheme="default"] .md-copyright a:visited {
  color: #000 !important;
}

[data-md-color-scheme="default"] .md-copyright a:hover {
  color: #5E35B1 !important;
}

[data-md-color-scheme="default"] .md-footer-copyright,
[data-md-color-scheme="default"] .md-footer-copyright * {
  color: #000 !important;
}

[data-md-color-scheme="default"] .md-social__link {
  color: #000 !important;
}

[data-md-color-scheme="default"] .md-social__link svg {
  fill: #000 !important;
}

/* Scrollbar */
[data-md-color-scheme="default"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-md-color-scheme="default"] ::-webkit-scrollbar-track {
  background: #f5f5f5;
}

[data-md-color-scheme="default"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00E5FF, #7C4DFF);
  border-radius: 4px;
}

/* TOC active link */
[data-md-color-scheme="default"] .md-nav--secondary .md-nav__link--active {
  color: #00E5FF;
  border-left: 2px solid #00E5FF;
  padding-left: 10px;
  margin-left: -12px;
}

/* Tabs content */
[data-md-color-scheme="default"] .tabbed-labels > label {
  color: rgba(0, 0, 0, 0.5);
}

[data-md-color-scheme="default"] .tabbed-labels > label:hover {
  color: rgba(0, 0, 0, 0.8);
}

[data-md-color-scheme="default"] .tabbed-labels > label.tabbed-set--active {
  color: #00E5FF;
  border-bottom-color: #00E5FF;
}

/* ============================================
   Animations
   ============================================ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Loading shimmer effect for images */
[data-md-color-scheme="slate"] img {
  transition: all 0.3s ease;
}

[data-md-color-scheme="slate"] img:hover {
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.3));
}

/* ============================================
   Site title lockup: IF(docs) { }
   ============================================

   The product-docs predicate per the brand grammar doc
   (docs/marketing/brand-grammar-if-predicate.md in IF.Knowledge): empty scope
   reads "the docs, open to all readers." Sibling of the general academy's
   `IF(academy) { }` CSS lockup. Implemented purely in CSS so Material's stock
   header runs unmodified (search + palette-toggle JS keep working): the first
   header-topic's original site_name text is hidden and the lockup injected via
   ::after. The second topic (current page title on scroll) is left alone.

   Set in JetBrains Mono per the grammar's typography rules (the IF product-docs
   code face, already imported above). Never placed in <title>/og:title (those
   stay plain-English, see the grammar doc's accessibility section). */
.md-header__topic:first-child .md-ellipsis {
  font-size: 0;
  letter-spacing: 0;
  position: relative;
}
.md-header__topic:first-child .md-ellipsis::after {
  content: "IF(docs) { }";
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Menlo', monospace;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Slate (dark): inherit the existing cyan -> purple gradient text-fill the
   header-topic already carries, so the lockup glows in the cyberpunk theme. */
[data-md-color-scheme="slate"] .md-header__topic:first-child .md-ellipsis::after {
  background: linear-gradient(90deg, #00E5FF, #7C4DFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Default (light): dark ink, matching the rest of the light-mode header. */
[data-md-color-scheme="default"] .md-header__topic:first-child .md-ellipsis::after {
  color: #333;
}