/**
 * Cosmos Docusaurus Theme
 *
 * A clean, dark-first Docusaurus CSS theme.
 * Palette aligned with the Rackscope design system:
 *   - Dark  → "Void"  : Tailwind gray-950/900/800 neutral blacks
 *   - Light → "Slate" : Tailwind gray-50/white with warm brown text tones
 *
 * Brand: #465fff (indigo)
 * Font:  Outfit (display) + IBM Plex Mono (code) — self-hosted, no CDN
 *
 * Usage:
 *   themes: ['cosmos-docusaurus-theme']
 *
 * @see https://github.com/SckyzO/cosmos-docusaurus-theme
 * @license MIT
 *
 * MAINTAINER NOTE — Docusaurus upgrades.
 * Being swizzle-free, this theme styles some components by matching their
 * CSS-module class prefix, e.g. [class*='admonitionHeading'], 'cardContainer',
 * 'toggleButton', 'sidebarViewport', 'searchHintContainer', 'tocCollapsible',
 * 'tagItem', 'colorModeToggle', 'codeBlockTitle'. Those prefixes are NOT part
 * of Docusaurus's public theming API (hashed CSS-module names are excluded), so
 * re-verify these selectors on every Docusaurus major. Never pin the hash
 * suffix (e.g. codeBlockTitle_Ktv7) — always match the prefix only.
 */

/* ── Fonts — self-hosted (Outfit + IBM Plex Mono) ────────────────────────── */
/* Bundled as woff2 in ./fonts/ instead of a Google Fonts @import. This avoids
   leaking every visitor's IP to Google (GDPR), removes a render-blocking
   third-party request, and works under a strict Content-Security-Policy.
   Both families are licensed under the SIL Open Font License 1.1 — see
   ./fonts/OFL.txt. Subsets: latin + latin-ext. Outfit ships as a single
   variable file (weight axis 400-700). */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/outfit-variable-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/outfit-variable-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ── Light mode ──────────────────────────────────────────────────────────── */
:root {
  /* Brand indigo — single source of truth. Every hardcoded #465fff / #7592ff
     and their rgb() tinted variants now reference these. The *-rgb pairs feed
     rgb(var(--cosmos-brand-rgb), <alpha>) for translucent fills. */
  --cosmos-brand: #465fff;
  --cosmos-brand-rgb: 70, 95, 255;
  --cosmos-brand-light: #7592ff;
  --cosmos-brand-light-rgb: 117, 146, 255;

  /* Brand palette (indigo) — matches Rackscope accent color */
  --ifm-color-primary: var(--cosmos-brand);
  --ifm-color-primary-dark: #3641f5;
  --ifm-color-primary-darker: #2a31d8;
  --ifm-color-primary-darkest: #252dae;
  --ifm-color-primary-light: var(--cosmos-brand-light);
  --ifm-color-primary-lighter: #9cb9ff;
  --ifm-color-primary-lightest: #dde9ff;

  /* Typography — Outfit + IBM Plex Mono, same as Rackscope app */
  --ifm-font-family-base: 'Outfit', system-ui, -apple-system, sans-serif;
  --ifm-font-family-monospace: 'IBM Plex Mono', 'Fira Code', monospace;
  --ifm-font-size-base: 1.0313rem; /* ~16.5px, but rem-based so it honors the user's browser font-size */
  --ifm-font-weight-bold: 600;
  --ifm-line-height-base: 1.7;
  --ifm-code-font-size: 93%;
  --ifm-h1-font-size: 2.2rem;
  --ifm-h2-font-size: 1.6rem;
  --ifm-h3-font-size: 1.25rem;

  /* Background — Slate: Tailwind gray-50 / white */
  --ifm-background-color: #f9fafb;
  --ifm-background-surface-color: #fff;

  /* Text — Slate: warm brown tones (not cold blue-gray) */
  --ifm-font-color-base: #1a1714; /* warm near-black */
  --ifm-font-color-secondary: #5c574f; /* warm muted brown */

  /* Navbar — 72px height */
  --ifm-navbar-height: 72px;
  --ifm-navbar-background-color: #fff;
  --ifm-navbar-shadow: 0px 1px 3px 0px rgb(16, 24, 40, 0.1), 0px 1px 2px 0px rgb(16, 24, 40, 0.06);
  --ifm-navbar-link-color: #2c2822; /* warm dark text */
  --ifm-navbar-link-hover-color: var(--cosmos-brand);
  --ifm-navbar-link-active-color: var(--cosmos-brand);

  /* Sidebar. --doc-sidebar-width is the name Docusaurus reads; --ifm-sidebar-*
     never existed in Infima and was removed rather than renamed.
     The sidebar collapse button keeps theme-classic's own hover shades: it
     declares --docusaurus-collapse-button-bg* from a CSS module that loads
     after this file, so matching its selector is not enough to win and the
     theme would have to inflate specificity for a hover tint that is visually
     interchangeable with the default. */
  --doc-sidebar-width: 280px;

  /* Links */
  --ifm-link-color: var(--cosmos-brand);
  --ifm-link-hover-color: #3641f5;

  /* Borders — Slate: Tailwind gray-200 */
  --ifm-toc-border-color: #e5e7eb;
  --ifm-hr-background-color: #e5e7eb;
  --ifm-color-emphasis-300: #e5e7eb;
  --ifm-color-emphasis-600: #5c574f;

  /* Code blocks */
  --ifm-code-background: #f3f4f6; /* Tailwind gray-100 */
  --prism-background-color: #1f2937; /* Void gray-800 — dark code on light pages */
  --docusaurus-highlighted-code-line-bg: rgb(var(--cosmos-brand-rgb), 0.1);

  /* Shadows */
  --ifm-global-shadow-md:
    0px 4px 8px -2px rgb(16, 24, 40, 0.1), 0px 2px 4px -2px rgb(16, 24, 40, 0.06);
  --ifm-global-shadow-lw: 0px 1px 2px 0px rgb(16, 24, 40, 0.05);

  /* Menu item spacing */
  --ifm-menu-link-padding-horizontal: 12px;
  --ifm-menu-link-padding-vertical: 8px;

  /* Table */
  --ifm-table-border-color: #e5e7eb;
  --ifm-table-head-background: #f9fafb;
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
[data-theme='dark'] {
  /* Primary — lighter variant for readability on dark backgrounds */
  --ifm-color-primary: var(--cosmos-brand-light);
  --ifm-color-primary-dark: var(--cosmos-brand);
  --ifm-color-primary-darker: #3641f5;
  --ifm-color-primary-darkest: #2a31d8;
  --ifm-color-primary-light: #9cb9ff;
  --ifm-color-primary-lighter: #c2d6ff;
  --ifm-color-primary-lightest: #dde9ff;
  --docusaurus-highlighted-code-line-bg: rgb(var(--cosmos-brand-light-rgb), 0.15);

  /* Background — Void: Tailwind gray-950 / gray-900 neutral blacks.
     --ifm-background-color and --ifm-background-surface-color live in the
     html[data-theme='dark'] block below — see the note there. */
  --ifm-navbar-background-color: #111827;
  --ifm-footer-background-color: #030712;

  /* Text — neutral grays, no blue tint */
  --ifm-font-color-base: #e5e5e5; /* neutral light */
  --ifm-font-color-secondary: #a3a3a3; /* neutral muted */

  /* Borders — Void: Tailwind gray-800. --ifm-toc-border-color and the two
     emphasis steps live in the html[data-theme='dark'] block below. */
  --ifm-hr-background-color: #1f2937;
  --ifm-table-border-color: #1f2937;
  --ifm-table-head-background: #111827;

  /* Links */
  --ifm-link-color: var(--cosmos-brand-light);
  --ifm-link-hover-color: #9cb9ff;

  /* Navbar */
  --ifm-navbar-link-color: #e5e5e5;
  --ifm-navbar-link-hover-color: var(--cosmos-brand-light);
  --ifm-navbar-link-active-color: var(--cosmos-brand-light);
  --ifm-navbar-shadow: 0px 1px 0px 0px #1f2937;

  /* Code — --ifm-code-background lives in the html[data-theme='dark'] block. */
}

/* ── Dark mode, html-scoped ──────────────────────────────────────────────── */
/* Infima declares these six under `html[data-theme='dark']` (specificity
   0,1,1). A plain `[data-theme='dark']` block is 0,1,0, so Infima wins no
   matter where the theme is loaded, and every one of these silently fell back
   to a Docusaurus default: the page background rendered #1b1b1d instead of
   #030712, surfaces #242526 instead of #111827, inline code got a translucent
   white wash instead of gray-800.
   Matching Infima's selector puts them back on equal footing, and source order
   then favors the theme, which loads after Infima.
   Only add a variable here when Infima declares it at html[data-theme='dark'];
   anything else belongs in the block above, where user overrides written as
   `[data-theme='dark']` can still reach it. */
html[data-theme='dark'] {
  --ifm-background-color: #030712; /* gray-950 — deepest background */
  --ifm-background-surface-color: #111827; /* gray-900 — cards, sidebar, panels */
  --ifm-code-background: #1f2937;
  --ifm-color-emphasis-300: #1f2937;
  --ifm-color-emphasis-600: #a3a3a3;
  --ifm-toc-border-color: #1f2937;
}

/* ── Global body ─────────────────────────────────────────────────────────── */
html {
  /* Enable Outfit OpenType features for better number and letter rendering */
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
}

/* ── Smooth dark/light theme transition ──────────────────────────────────── */
/* Fades background, text and borders when the user toggles the color mode.  */
/* Scoped to key layout elements — avoids blanket html/body transitions that  */
/* can cause perf issues on pages with many elements.                         */
.navbar,
.theme-doc-sidebar-container,
.menu__link,
.main-wrapper,
article,
.footer,
.table-of-contents__link,
.pagination-nav__link,
.prism-code,
.alert,
.card {
  transition:
    background-color 0.25s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* ── Color mode toggle — styled tooltip ──────────────────────────────────── */
/* The toggle button has title="dark mode" | "light mode" | "system mode"    */
/* which updates to reflect the current state. We display it as a tooltip.   */
button[aria-label*='dark and light mode'] {
  position: relative;
}

button[aria-label*='dark and light mode']::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + 10px);
  /* Right-align: button sits at the far right of the navbar */
  right: 0;
  padding: 5px 10px;
  background: #111827;
  color: #e5e5e5;
  border: 1px solid #1f2937;
  border-radius: 6px;
  font-family: var(--ifm-font-family-base);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
}

/* Arrow pointing up — aligned with button center */
button[aria-label*='dark and light mode']::before {
  content: '';
  position: absolute;
  top: calc(100% + 4px);
  right: 10px;
  border: 5px solid transparent;
  border-bottom-color: #1f2937;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
}

button[aria-label*='dark and light mode']:hover::after,
button[aria-label*='dark and light mode']:hover::before {
  opacity: 1;
}

[data-theme='light'] button[aria-label*='dark and light mode']::after {
  background: #fff;
  color: #1a1714;
  border-color: #e5e7eb;
  box-shadow: 0 2px 8px rgb(0, 0, 0, 0.1);
}

[data-theme='light'] button[aria-label*='dark and light mode']::before {
  border-bottom-color: #e5e7eb;
  border-top-color: transparent;
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar {
  border-bottom: 1px solid var(--ifm-toc-border-color);
  box-shadow: none;
  padding: 0 24px;
}

.navbar__brand {
  gap: 10px;
  /* Thin vertical separator between brand area and nav items */
  margin-right: 8px;
  padding-right: 16px;
  position: relative;
}

.navbar__brand::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 18px;
  width: 1px;
  background: var(--ifm-toc-border-color);
}

/* Brand title — Outfit 700 uppercase wordmark, brand indigo */
.navbar__title {
  font-family: var(--ifm-font-family-base);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cosmos-brand);
}

.navbar__logo {
  height: 28px;
  border-radius: 6px;
}

.navbar__link {
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 6px;
  padding: 6px 10px;
  transition:
    background 0.15s,
    color 0.15s;
}

.navbar__link:hover {
  background: rgb(var(--cosmos-brand-rgb), 0.08);
  color: var(--ifm-color-primary);
}

/* Active nav item — underline indicator matching Tabs style */
.navbar__link--active {
  color: var(--cosmos-brand) !important;
  position: relative;
}

.navbar__link--active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--cosmos-brand);
  border-radius: 2px 2px 0 0;
}

[data-theme='dark'] .navbar__link:hover {
  color: var(--cosmos-brand-light);
  background: rgb(var(--cosmos-brand-light-rgb), 0.1);
}

[data-theme='dark'] .navbar__link--active {
  color: var(--cosmos-brand-light) !important;
}

[data-theme='dark'] .navbar__link--active::after {
  background: var(--cosmos-brand-light);
}

/* Force direct properties — CSS variables alone are not reliable for navbar
   in all Docusaurus deployment modes (SSG, CSR, file:// local builds). */
[data-theme='dark'] .navbar {
  background-color: #111827;
  border-bottom-color: #1f2937;
}

[data-theme='dark'] .navbar__link {
  color: #e5e5e5;
}

[data-theme='dark'] .navbar__brand {
  color: #e5e5e5;
}

[data-theme='dark'] .navbar__brand::after {
  background: #1f2937; /* Void gray-800 */
}

[data-theme='dark'] .navbar__title {
  color: var(--cosmos-brand-light);
}

[data-theme='dark'] .navbar__toggle {
  color: #e5e5e5;
}

/* ── Mobile navbar sidebar (hamburger menu) ─────────────────────────────── */
/* Infima's default .navbar-sidebar has no background, causing it to render
   white in both light and dark mode. Match the navbar background color.    */
.navbar-sidebar {
  background-color: var(--ifm-navbar-background-color);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.theme-doc-sidebar-container {
  border-right: 1px solid var(--ifm-toc-border-color) !important;
}

[data-theme='dark'] .theme-doc-sidebar-container {
  border-right-color: #1f2937 !important; /* Void gray-800 */
  background: #111827; /* Void gray-900 */
}

.theme-doc-sidebar-menu {
  padding: 12px 8px;
  font-size: 0.875rem;
}

/* Sidebar nav items — rounded, smooth transitions */
.menu__list-item--collapsed .menu__link,
.menu__list-item .menu__link {
  border-radius: 8px;
  font-weight: 500;
  transition:
    background 0.12s,
    color 0.12s;
}

/* Active sidebar link — brand tint bg + brand color text */
.menu__link--active,
.menu__link--active:hover {
  background: #ecf3ff;
  color: var(--cosmos-brand);
  font-weight: 600;
}

[data-theme='dark'] .menu__link--active,
[data-theme='dark'] .menu__link--active:hover {
  background: rgb(var(--cosmos-brand-rgb), 0.12);
  color: var(--cosmos-brand-light);
}

/* Sidebar category toggle */
.menu__list-item-collapsible {
  border-radius: 8px;
}

.menu__list-item-collapsible:hover {
  background: #f3f4f6; /* Slate gray-100 */
}

[data-theme='dark'] .menu__list-item-collapsible:hover {
  background: rgb(255, 255, 255, 0.05);
}

/* Sidebar section separator — exact Rackscope LayoutLabel pattern */
.sidebar_menu_section_title {
  font-size: 0.625rem; /* 10px — matches text-[10px] */
  font-weight: 700;
  letter-spacing: 0.12em; /* tracking-wider */
  text-transform: uppercase;
  color: #a3a3a3;
  padding: 12px 12px 4px;
}

/* ── Code blocks ─────────────────────────────────────────────────────────── */
.prism-code {
  border-radius: 12px; /* rounded-xl — matches Rackscope input/button radius */
  font-size: 0.8625rem;
  line-height: 1.65;
}

[data-theme='dark'] .prism-code {
  /* Heavier shadow in dark — matches Rackscope shadow-card pattern */
  box-shadow:
    0 1px 3px rgb(0, 0, 0, 0.4),
    0 1px 2px rgb(0, 0, 0, 0.3);
}

/* Code block title bar.
   Match on the CSS-module class substring — the hash suffix (e.g. _Ktv7) is
   build-generated and not stable across Docusaurus versions. */
[class*='codeBlockTitle'] {
  border-radius: 12px 12px 0 0;
}

/* Inline code — rounded-md, subtle bordered style */
code {
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.875em;
  border: 1px solid var(--ifm-toc-border-color);
  background: var(--ifm-code-background);
}

/* ── Content headings — tight letter-spacing (Rackscope -0.03em / -0.04em) ── */
.markdown h1 {
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 2.2rem;
}

.markdown h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.6rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ifm-toc-border-color);
  margin-top: 2.5rem;
}

.markdown h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
}

.markdown h4,
.markdown h5,
.markdown h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Tables — direct overrides (CSS variables not reliably cascaded) ─────── */

/* Full-width tables on desktop; scrollable on mobile.
   Infima forces display:block which caps width — we override for desktop,
   and restore scrollable block on narrow viewports. */
.markdown table {
  display: table !important;
  width: 100% !important;
}

@media (width <= 996px) {
  .markdown table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    width: max-content !important;
  }
}

/* Dark mode — Infima applies --ifm-table-head-background directly on th,
   so we must target th explicitly (higher specificity than thead).           */
[data-theme='dark'] table {
  border-color: #374151; /* gray-700 — slightly more visible than gray-800 */
}

[data-theme='dark'] th {
  background-color: #111827; /* Void gray-900 */
  color: #e5e5e5;
  border-color: #374151;
}

[data-theme='dark'] td {
  border-color: #374151;
}

[data-theme='dark'] thead,
[data-theme='dark'] thead tr {
  background-color: #111827;
}

[data-theme='dark'] tr:nth-child(2n) {
  background-color: rgb(255, 255, 255, 0.03);
}

/* Light mode — Slate gray-200 borders, gray-50 header */
[data-theme='light'] table {
  border-color: #e5e7eb;
}

[data-theme='light'] th {
  background-color: #f9fafb;
  border-color: #e5e7eb;
}

[data-theme='light'] td {
  border-color: #e5e7eb;
}

[data-theme='light'] thead,
[data-theme='light'] thead tr {
  background-color: #f9fafb;
}

/* ── Cards — direct background override ──────────────────────────────────── */
[data-theme='dark'] .card {
  background-color: #111827;
  border-color: #1f2937;
}

/* ── Right navbar — unified ghost button style ───────────────────────────── */
/* Both the external links (GitHub, npm…) and the color mode toggle get the  */
/* same bordered ghost button treatment for visual consistency.               */

/* Add spacing between right-side navbar items */
.navbar__items--right {
  gap: 8px;
}

/* External links on the right side (GitHub, npm, etc.) */
.navbar__items--right .navbar__link {
  border: 1px solid var(--ifm-toc-border-color);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}

.navbar__items--right .navbar__link:hover {
  border-color: var(--ifm-color-primary);
  background: rgb(var(--cosmos-brand-rgb), 0.08);
  color: var(--ifm-color-primary);
}

/* Hide external navbar links on mobile — they overlap the search bar.
   They remain accessible via the hamburger menu sidebar.                   */
@media (width <= 996px) {
  .navbar__items--right > .navbar__item.navbar__link {
    display: none;
  }
}

/* Color mode toggle — match the ghost button style of external links */
button[aria-label*='dark and light mode'] {
  border: 1px solid var(--ifm-toc-border-color) !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  transition:
    border-color 0.15s,
    background 0.15s !important;
}

button[aria-label*='dark and light mode']:hover {
  border-color: var(--ifm-color-primary) !important;
  background: rgb(var(--cosmos-brand-rgb), 0.08) !important;
}

[data-theme='dark'] button[aria-label*='dark and light mode'] {
  color: #e5e5e5;
}

/* ── Table of contents (right panel) ─────────────────────────────────────── */

/* Left border line — matches Void gray-800 in dark, gray-200 in light */
.table-of-contents {
  border-left: 1px solid var(--ifm-toc-border-color) !important;
}

.table-of-contents__link {
  font-size: 0.8125rem;
  transition:
    color 0.12s,
    background 0.12s;
  border-radius: 5px;
  padding: 2px 6px;
  margin-left: -7px;
  display: block;
}

/* H2-level TOC items (direct children) — more prominent */
.table-of-contents > ul > li > .table-of-contents__link {
  font-weight: 500;
  color: var(--ifm-font-color-base);
  font-size: 0.8125rem;
}

[data-theme='dark'] .table-of-contents > ul > li > .table-of-contents__link {
  color: #d1d5db; /* gray-300 — matches Rackscope sidebar label prominence */
}

/* H3-level TOC items (nested) — muted secondary */
.table-of-contents > ul > li > ul .table-of-contents__link {
  color: var(--ifm-font-color-secondary);
  font-size: 0.8rem;
}

[data-theme='dark'] .table-of-contents > ul > li > ul .table-of-contents__link {
  color: #71717a; /* zinc-500 — subtle */
}

/* Hover state */
.table-of-contents__link:hover {
  color: var(--ifm-color-primary);
  background: rgb(var(--cosmos-brand-rgb), 0.06);
}

[data-theme='dark'] .table-of-contents__link:hover {
  background: rgb(var(--cosmos-brand-light-rgb), 0.08);
}

/* Active — bg pill, brand color */
.table-of-contents__link--active {
  color: var(--ifm-color-primary) !important;
  font-weight: 600;
  background: rgb(var(--cosmos-brand-rgb), 0.08);
}

[data-theme='dark'] .table-of-contents__link--active {
  background: rgb(var(--cosmos-brand-light-rgb), 0.1);
}

/* ── Details / Summary — SectionCard style ───────────────────────────────── */
/* Matches Rackscope: rounded-2xl border border-gray-200 bg-white p-6
   dark:border-gray-800 dark:bg-gray-900                                      */
details {
  border: 1px solid var(--ifm-toc-border-color);
  border-radius: 16px; /* rounded-2xl */
  background: var(--ifm-background-surface-color);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: border-color 0.15s;
}

[data-theme='dark'] details {
  background: #111827;
  border-color: #1f2937;
  box-shadow:
    0 1px 3px rgb(0, 0, 0, 0.4),
    0 1px 2px rgb(0, 0, 0, 0.3);
}

details > summary {
  padding: 14px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ifm-font-color-base);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s;
}

details > summary:hover {
  background: rgb(var(--cosmos-brand-rgb), 0.04);
}

[data-theme='dark'] details > summary:hover {
  background: rgb(255, 255, 255, 0.04);
}

details > summary::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23465fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")
    center / 16px no-repeat;
  transition: transform 0.2s ease;
}

[data-theme='dark'] details > summary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237592ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}

details[open] > summary::before {
  transform: rotate(90deg);
}

details > :not(summary) {
  padding: 0 20px 16px;
  border-top: 1px solid var(--ifm-toc-border-color);
  margin-top: 0;
}

[data-theme='dark'] details > :not(summary) {
  border-top-color: #1f2937;
}

/* ── Banners — Dismissible Alert style (Rackscope ui-library/alerts) ─────── */
/* flex items-start gap-3 rounded-xl bg p-4 — full border all sides,
   icon aligned with title baseline, icon = title color.                      */

/* Reset Infima's left-border-only pattern → uniform 1px border all sides */
.alert {
  border: 1px solid;
  border-radius: 12px;
  padding: 16px;
  overflow: hidden;
}

/* Heading — flex row: icon as first item, title text as second.
   align-items: center = perfect icon ↔ title baseline alignment.             */
[class*='admonitionHeading']:not(:last-child) {
  margin-bottom: 1rem;
}

[class*='admonitionIcon'] {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4em;
}

/* Body — indented under title (20px icon + 12px gap = 32px) */
[class*='admonitionContent'] {
  font-size: 0.875rem;
  padding-left: 32px;
  color: #4b5563;
}

[data-theme='dark'] [class*='admonitionContent'] {
  color: #9ca3af;
}

[class*='admonitionContent'] > p:last-child {
  margin-bottom: 0;
}

/* ── note (secondary) — gray ─────────────────── */
.alert--secondary {
  border-color: rgb(107, 114, 128, 0.25);
  background: rgb(107, 114, 128, 0.05);
}

.alert--secondary [class*='admonitionHeading'],
.alert--secondary [class*='admonitionIcon'] {
  color: #374151; /* gray-700 */
}

/* ── tip (success) — green ───────────────────── */
.alert--success {
  border-color: rgb(18, 183, 106, 0.3);
  background: rgb(18, 183, 106, 0.05);
}

.alert--success [class*='admonitionHeading'],
.alert--success [class*='admonitionIcon'] {
  color: #0b7a45; /* success-700 */
}

/* ── info — brand indigo ─────────────────────── */
.alert--info {
  border-color: rgb(var(--cosmos-brand-rgb), 0.3);
  background: rgb(var(--cosmos-brand-rgb), 0.05);
}

.alert--info [class*='admonitionHeading'],
.alert--info [class*='admonitionIcon'] {
  color: #252dae; /* brand-700 */
}

/* ── warning — amber ─────────────────────────── */
.alert--warning {
  border-color: rgb(247, 144, 9, 0.3);
  background: rgb(247, 144, 9, 0.05);
}

.alert--warning [class*='admonitionHeading'],
.alert--warning [class*='admonitionIcon'] {
  color: #92400e; /* warning-700 / amber-800 */
}

/* ── danger — red ────────────────────────────── */
.alert--danger {
  border-color: rgb(240, 68, 56, 0.3);
  background: rgb(240, 68, 56, 0.05);
}

.alert--danger [class*='admonitionHeading'],
.alert--danger [class*='admonitionIcon'] {
  color: #991b1b; /* error-700 */
}

/* ── Dark mode — bg opacity up, lighter title+icon ── */
[data-theme='dark'] .alert--secondary {
  border-color: rgb(107, 114, 128, 0.2);
  background: rgb(107, 114, 128, 0.08);
}

[data-theme='dark'] .alert--secondary [class*='admonitionHeading'],
[data-theme='dark'] .alert--secondary [class*='admonitionIcon'] {
  color: #9ca3af; /* gray-400 */
}

[data-theme='dark'] .alert--success {
  border-color: rgb(18, 183, 106, 0.25);
  background: rgb(18, 183, 106, 0.08);
}

[data-theme='dark'] .alert--success [class*='admonitionHeading'],
[data-theme='dark'] .alert--success [class*='admonitionIcon'] {
  color: #34d399; /* emerald-400 */
}

[data-theme='dark'] .alert--info {
  border-color: rgb(var(--cosmos-brand-rgb), 0.25);
  background: rgb(var(--cosmos-brand-rgb), 0.08);
}

[data-theme='dark'] .alert--info [class*='admonitionHeading'],
[data-theme='dark'] .alert--info [class*='admonitionIcon'] {
  color: var(--cosmos-brand-light); /* brand-400 */
}

[data-theme='dark'] .alert--warning {
  border-color: rgb(247, 144, 9, 0.25);
  background: rgb(247, 144, 9, 0.08);
}

[data-theme='dark'] .alert--warning [class*='admonitionHeading'],
[data-theme='dark'] .alert--warning [class*='admonitionIcon'] {
  color: #fbbf24; /* amber-400 */
}

[data-theme='dark'] .alert--danger {
  border-color: rgb(240, 68, 56, 0.25);
  background: rgb(240, 68, 56, 0.08);
}

[data-theme='dark'] .alert--danger [class*='admonitionHeading'],
[data-theme='dark'] .alert--danger [class*='admonitionIcon'] {
  color: #f87171; /* red-400 */
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
/* Solid pill badges carry white text, so the background must clear WCAG AA
   (>=4.5:1). The vivid brand shades (#12b76a/#f79009/#f04438) only reach
   2.35-3.76:1 with white — darkened to the -700 design tokens below. */
.badge--success {
  background: #0b7a45; /* success-700 — 5.41:1 on white */
  color: white;
}

.badge--warning {
  background: #b54708; /* amber-800 — 5.43:1 on white */
  color: white;
}

.badge--danger {
  background: #d92d20; /* error-600 — 4.83:1 on white */
  color: white;
}

/* ── Footer — 4-column layout ────────────────────────────────────────────── */
/* Designed for sites that enable a footer in docusaurus.config.js.
   Supports 2, 3, or 4 columns — centered, max-width contained.
   The demo site has footer disabled — see docusaurus.config.js comments.    */
.footer {
  border-top: 1px solid var(--ifm-toc-border-color);
  font-size: 0.875rem;
  padding: 48px 0 32px;
}

[data-theme='dark'] .footer {
  background-color: #030712;
  border-top-color: #1f2937;
  color: #a3a3a3;
}

/* Container — centered, max-width for readability */
.footer .container {
  max-width: 960px !important;
}

/* Links grid — 4 equal columns, responsive */
.footer__links {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2rem !important;
  margin-bottom: 40px !important;
}

@media (width <= 768px) {
  .footer__links {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (width <= 480px) {
  .footer__links {
    grid-template-columns: 1fr !important;
  }
}

/* Column */
.footer__col {
  min-width: 0 !important;
}

/* Column title */
.footer__title {
  font-family: var(--ifm-font-family-monospace) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ifm-color-primary) !important;
  margin-bottom: 16px !important;
  opacity: 0.9;
}

[data-theme='dark'] .footer__title {
  color: var(--cosmos-brand-light) !important;
}

/* Footer links */
.footer__link-item {
  display: block;
  font-size: 0.875rem !important;
  color: var(--ifm-font-color-secondary) !important;
  padding: 3px 0;
  transition:
    color 0.12s,
    opacity 0.12s !important;
  opacity: 0.8;
}

.footer__link-item:hover {
  color: var(--ifm-color-primary) !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

[data-theme='dark'] .footer__link-item {
  color: #6b7280 !important;
}

[data-theme='dark'] .footer__link-item:hover {
  color: var(--cosmos-brand-light) !important;
}

/* Copyright bar */
.footer__copyright {
  font-family: var(--ifm-font-family-monospace) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
  border-top: 1px solid var(--ifm-toc-border-color) !important;
  padding-top: 20px !important;
  text-align: center;
  color: var(--ifm-font-color-secondary) !important;
  opacity: 0.5;
}

[data-theme='dark'] .footer__copyright {
  border-top-color: #1f2937 !important;
}

/* Force dark background on main page body — mirrors AppLayout dark:bg-gray-950 */
[data-theme='dark'] .main-wrapper {
  background-color: #030712;
}

/* Doc article area — keep surface color consistent */
[data-theme='dark'] article {
  color: #e5e5e5;
}

/* ── Pagination nav ───────────────────────────────────────────────────────── */
/* Matches Rackscope PageActionButton style — rounded-lg, brand hover ring.   */
.pagination-nav__link {
  border-color: var(--ifm-toc-border-color);
  border-radius: 8px; /* rounded-lg */
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}

.pagination-nav__link:hover {
  border-color: var(--ifm-color-primary);
  background: rgb(var(--cosmos-brand-rgb), 0.04);
  box-shadow: 0 0 0 3px rgb(var(--cosmos-brand-rgb), 0.1);
}

[data-theme='dark'] .pagination-nav__link:hover {
  background: rgb(var(--cosmos-brand-light-rgb), 0.06);
  box-shadow:
    0 4px 12px rgb(0, 0, 0, 0.3),
    0 0 0 2px rgb(var(--cosmos-brand-light-rgb), 0.15);
}

/* Sublabel — monospace uppercase like sidebar section labels */
.pagination-nav__sublabel {
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ifm-color-primary);
  opacity: 0.8;
  margin-bottom: 4px;
}

.pagination-nav__label {
  font-weight: 600;
  font-size: 0.9375rem;
}

/* ── Progress bar (page loading indicator) ───────────────────────────────── */
:root {
  --docusaurus-progress-bar-color: var(--cosmos-brand);
}

[data-theme='dark'] {
  --docusaurus-progress-bar-color: var(--cosmos-brand-light);
}

/* ── Announcement bar ─────────────────────────────────────────────────────── */
.announcement {
  /* Dark band with subtle gradient — more refined than flat indigo */
  background: linear-gradient(135deg, #2a31d8 0%, var(--cosmos-brand) 60%, #3641f5 100%);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgb(255, 255, 255, 0.1);
}

.announcement a {
  color: #c2d6ff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgb(194, 214, 255, 0.4);
  transition:
    color 0.12s,
    border-color 0.12s;
}

.announcement a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.announcement-close {
  color: rgb(255, 255, 255, 0.6);
}

.announcement-close:hover {
  color: #fff;
}

[data-theme='dark'] .announcement {
  background: linear-gradient(135deg, #1e2a6e 0%, #2a31d8 60%, #252dae 100%);
  border-bottom-color: rgb(255, 255, 255, 0.08);
}

/* ── Breadcrumbs — rewritten from scratch ────────────────────────────────── */
/* ul flex container → no HTML whitespace between items.
   Text separator › always vertically aligned (no SVG alignment hell).
   Active item: brand color. Inactive: muted gray. Hover: brand.              */
:root {
  --ifm-breadcrumb-color-active: var(--cosmos-brand);
  --ifm-breadcrumb-item-background-active: transparent;
  --ifm-breadcrumb-border-radius: 4px;
  --ifm-breadcrumb-padding-horizontal: 0;
  --ifm-breadcrumb-padding-vertical: 2px;
  --ifm-breadcrumb-separator: none;
  --ifm-breadcrumb-separator-size-multiplier: 0;
}

ul.breadcrumbs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 0;
}

.breadcrumbs__item {
  display: flex !important;
  align-items: center !important;
}

/* Infima injects ::after { content: ' ' } on breadcrumb items — kills it */
.breadcrumbs__item::after {
  content: none !important;
  display: none !important;
}

.breadcrumbs__link {
  font-size: 0.8125rem;
  color: #6b7280;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.12s;
}

.breadcrumbs__link:hover {
  background: transparent;
  color: var(--ifm-color-primary);
}

/* Active breadcrumb — brand color, no background */
.breadcrumbs__link--active,
.breadcrumbs__item--active .breadcrumbs__link {
  color: var(--ifm-color-primary);
  background: none;
}

/* Separator — ChevronRight SVG, flex item inside flex li → perfectly centered */
.breadcrumbs__item + .breadcrumbs__item::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

/* Dark mode */
[data-theme='dark'] .breadcrumbs__link {
  color: #6b7280;
}

[data-theme='dark'] .breadcrumbs__link:hover {
  color: var(--cosmos-brand-light);
}

[data-theme='dark'] .breadcrumbs__link--active,
[data-theme='dark'] .breadcrumbs__item--active .breadcrumbs__link {
  color: var(--cosmos-brand-light);
}

[data-theme='dark'] .breadcrumbs__item + .breadcrumbs__item::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
/* Matches Rackscope Tabs component — flat underline, brand active,
   no background fill on hover (clean underline-only style).                  */
:root {
  --ifm-tabs-color: #6b7280; /* gray-500 — inactive */
  --ifm-tabs-color-active: var(--cosmos-brand);
  --ifm-tabs-color-active-border: var(--cosmos-brand);
  --ifm-tabs-padding-horizontal: 16px;
  --ifm-tabs-padding-vertical: 10px;
}

[data-theme='dark'] {
  --ifm-tabs-color: #6b7280;
  --ifm-tabs-color-active: var(--cosmos-brand-light);
  --ifm-tabs-color-active-border: var(--cosmos-brand-light);
}

/* Tab strip — bottom border as container */
.tabs {
  border-bottom: 1px solid var(--ifm-toc-border-color);
  gap: 0;
}

.tabs__item {
  border-radius: 0; /* flat underline — no top radius */
  border-bottom: 2px solid transparent;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ifm-tabs-color);
  transition:
    color 0.12s,
    border-color 0.12s;
}

.tabs__item--active {
  border-bottom-color: var(--ifm-tabs-color-active-border);
  color: var(--ifm-tabs-color-active);
}

.tabs__item:hover:not(.tabs__item--active) {
  background: transparent; /* no fill — clean underline style */
  color: var(--ifm-font-color-base);
  border-bottom-color: var(--ifm-toc-border-color);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
:root {
  --ifm-card-background-color: #fff;
  --ifm-card-border-radius: 16px; /* rounded-2xl — matches Rackscope SectionCard */
}

[data-theme='dark'] {
  --ifm-card-background-color: #111827; /* Void gray-900 */
}

.card {
  border: 1px solid var(--ifm-toc-border-color);
  border-radius: var(--ifm-card-border-radius);
  box-shadow: var(--ifm-global-shadow-lw);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

/* Dark mode: heavier shadow — matches Rackscope shadow-card pattern */
[data-theme='dark'] .card {
  box-shadow:
    0 1px 3px rgb(0, 0, 0, 0.4),
    0 1px 2px rgb(0, 0, 0, 0.3);
}

.card:hover {
  border-color: var(--ifm-color-primary);
  box-shadow: var(--ifm-global-shadow-md);
}

[data-theme='dark'] .card:hover {
  box-shadow:
    0 10px 25px rgb(0, 0, 0, 0.5),
    0 4px 6px rgb(0, 0, 0, 0.2);
}

/* ── Tags ────────────────────────────────────────────────────────────────── */
/* Infima has no --ifm-tag-* variables, so the six that used to sit here were
   read by nothing. Tag colors come from the [class*='tagItem'] rules further
   down, which set the properties directly. */
.tag {
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 10px;
  transition:
    background 0.12s,
    color 0.12s;
}

/* ── Back-to-top button ──────────────────────────────────────────────────── */
.theme-back-to-top-button {
  background-color: var(--cosmos-brand);
  border-radius: 8px;
}

.theme-back-to-top-button:hover {
  background-color: #3641f5;
}

[data-theme='dark'] .theme-back-to-top-button {
  background-color: var(--cosmos-brand-light);
}

[data-theme='dark'] .theme-back-to-top-button:hover {
  background-color: #9cb9ff;
}

/* ── @easyops-cn/docusaurus-search-local ────────────────────────────────── */
/* Palette overrides for the local search plugin.                            */
/* https://github.com/easyops-cn/docusaurus-search-local                     */
/* All values mirror Void (dark) / Slate (light) design tokens.              */

/* Light mode (Slate) */
:root {
  /* Modal dropdown */
  --search-local-modal-background: #fff;
  --search-local-modal-shadow:
    0 8px 24px rgb(0, 0, 0, 0.12), inset 1px 1px 0 0 rgb(255, 255, 255, 0.8);
  /* Result items */
  --search-local-hit-background: #fff;
  --search-local-hit-shadow: 0 1px 3px rgb(0, 0, 0, 0.08);
  --search-local-hit-color: #1a1714;
  /* Muted text (paths, icons) */
  --search-local-muted-color: #8a8479;
  /* Brand highlight */
  --search-local-highlight-color: var(--cosmos-brand);
  --search-local-input-active-border-color: var(--cosmos-brand);
  /* Navbar search input */
  --ifm-navbar-search-input-background-color: #f3f4f6;
  --ifm-navbar-search-input-color: #1a1714;
  --ifm-navbar-search-input-placeholder-color: #8a8479;
}

/* Dark mode (Void) */
[data-theme='dark'] {
  --search-local-modal-background: #111827; /* Void gray-900 */
  --search-local-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 8px 32px rgb(0, 0, 0, 0.5);
  --search-local-hit-background: #1f2937; /* Void gray-800 */
  --search-local-hit-shadow: none;
  --search-local-hit-color: #e5e5e5;
  --search-local-muted-color: #71717a;
  --search-local-highlight-color: var(--cosmos-brand-light);
  --search-local-input-active-border-color: var(--cosmos-brand-light);
  /* Navbar search input */
  --ifm-navbar-search-input-background-color: #1f2937;
  --ifm-navbar-search-input-color: #e5e5e5;
  --ifm-navbar-search-input-placeholder-color: #a3a3a3;
  /* Fix: SVG background-image can't use currentColor — hardcode a light fill */
  --ifm-navbar-search-input-icon: url("data:image/svg+xml;utf8,<svg fill='%23a3a3a3' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='16px' width='16px'><path d='M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z' /></svg>");
}

/* ── Navbar search — input styling ───────────────────────────────────────── */
/* The easyops search plugin renders: navbarSearchContainer > searchBarContainer
   > input.navbar__search-input.searchInput_xxx (CSS module).
   We need !important on background/color to beat the CSS module specificity.  */

/* Search input — wider, Outfit font, consistent with Rackscope AppSearch */
.navbar__search-input {
  height: 38px !important;
  min-width: 300px !important;
  border-radius: 8px !important;
  border: 1px solid var(--ifm-toc-border-color) !important;
  font-family: var(--ifm-font-family-base) !important;
  font-size: 0.875rem !important;
  background-color: #f3f4f6 !important;
  color: #1a1714 !important;
  transition:
    border-color 0.15s,
    background-color 0.15s,
    box-shadow 0.15s !important;
}

.navbar__search-input::placeholder {
  color: #8a8479 !important;
  font-family: var(--ifm-font-family-base) !important;
}

[data-theme='dark'] .navbar__search-input {
  background-color: #1f2937 !important;
  color: #e5e5e5 !important;
}

[data-theme='dark'] .navbar__search-input::placeholder {
  color: #6b7280 !important;
}

.navbar__search-input:focus {
  border-color: var(--ifm-color-primary) !important;
  background-color: var(--ifm-background-surface-color) !important;
  box-shadow: 0 0 0 3px rgb(var(--cosmos-brand-rgb), 0.1) !important;
  outline: none !important;
}

[data-theme='dark'] .navbar__search-input:focus {
  background-color: #111827 !important;
  box-shadow: 0 0 0 3px rgb(var(--cosmos-brand-light-rgb), 0.12) !important;
}

/* Ctrl+K hint — ghost style: transparent, blends into the input surface.
   Uses currentColor border so it adapts to both Void and Slate automatically. */

/* Inner hint wrapper: flex row for the two keys */
[class*='searchHint']:not([class*='Container']) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Each key: ghost chip, no fill, hairline border */
[class*='searchHintContainer'] kbd {
  background: transparent !important;
  border: 1px solid var(--ifm-toc-border-color) !important;
  border-radius: 4px !important;
  color: var(--ifm-font-color-secondary) !important;
  font-family: var(--ifm-font-family-monospace) !important;
  font-size: 0.6rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  padding: 1px 5px !important;
  line-height: 1.6 !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
}

/* "+" separator between the two kbd elements */
[class*='searchHintContainer'] kbd + kbd {
  margin-left: 2px !important;
}

[class*='searchHintContainer'] kbd + kbd::before {
  content: '+';
  font-family: var(--ifm-font-family-monospace) !important;
  font-size: 0.6rem !important;
  color: var(--ifm-font-color-secondary) !important;
  opacity: 0.5 !important;
  margin-right: 2px !important;
}

/* Whole hint brightens on input focus — discovery moment */
.navbar__search-input:focus ~ [class*='searchHintContainer'],
.navbar__search-input:focus + [class*='searchHintContainer'] {
  opacity: 0.9 !important;
}

/* ── Right-side navbar order: Search | GitHub/npm | Theme ────────────────── */
/* Real DOM structure: navbarSearchContainer | a.navbar__link | colorModeToggle
   All are direct children of .navbar__items--right (flex container).
   Use !important to beat any default ordering.                                */

/* Search container (class contains 'navbarSearch') — leftmost */
[class*='navbarSearch'],
[class*='navbarSearchContainer'] {
  order: -1 !important;
}

/* External links (GitHub, npm…) — middle */
.navbar__items--right .navbar__link {
  order: 0 !important;
}

/* Color mode toggle wrapper — rightmost */
[class*='colorModeToggle'] {
  order: 1 !important;
}

/* ── Algolia DocSearch ───────────────────────────────────────────────────── */
/* Applied when Algolia search is configured in themeConfig.algolia.         */
[data-theme='light'] .DocSearch {
  --docsearch-primary-color: var(--cosmos-brand);
  --docsearch-text-color: #1a1714;
  --docsearch-muted-color: #5c574f;
  --docsearch-container-background: rgb(26, 23, 20, 0.6);
  --docsearch-modal-background: #fff;
  --docsearch-modal-shadow: 0px 8px 24px rgb(0, 0, 0, 0.12);
  --docsearch-searchbox-background: #f9fafb;
  --docsearch-searchbox-focus-background: #fff;
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--cosmos-brand);
  --docsearch-hit-color: #1a1714;
  --docsearch-hit-active-color: #fff;
  --docsearch-hit-background: #fff;
  --docsearch-hit-shadow: 0 1px 3px rgb(0, 0, 0, 0.08);
  --docsearch-footer-background: #f9fafb;
  --docsearch-logo-color: var(--cosmos-brand);
}

[data-theme='dark'] .DocSearch {
  --docsearch-primary-color: var(--cosmos-brand-light);
  --docsearch-text-color: #e5e5e5;
  --docsearch-muted-color: #a3a3a3;
  --docsearch-container-background: rgb(3, 7, 18, 0.8);
  --docsearch-modal-background: #111827;
  --docsearch-modal-shadow: 0px 8px 24px rgb(0, 0, 0, 0.4);
  --docsearch-searchbox-background: #030712;
  --docsearch-searchbox-focus-background: #030712;
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--cosmos-brand-light);
  --docsearch-hit-color: #e5e5e5;
  --docsearch-hit-active-color: #fff;
  --docsearch-hit-background: #1f2937;
  --docsearch-hit-shadow: none;
  --docsearch-footer-background: #030712;
  --docsearch-key-gradient: linear-gradient(-26.5deg, #1f2937 0%, #111827 100%);
  --docsearch-logo-color: var(--cosmos-brand-light);
}

/* ── Scrollbar — 4px, matches Rackscope index.css ───────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d0d5dd;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3; /* neutral gray-400 */
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: #374151; /* Void gray-700 */
}

[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
  background: #475467;
}

/* =============================================================================
   SIDEBAR — RACKSCOPE STYLE
   Vertical line for nested items + icon system via className + version footer.
   ============================================================================= */

/* ── Nested items — vertical left border ─────────────────────────────────── */
/* Like Rackscope: [Category Title]                                           */
/*                   │ sub item                                                */
/*                   │ sub item                                                */

/* Nested list: border-left aligned under title text (after icon).
   Measured: title text at x=51.3, sub-list default at x=16.3 → need +35px.
   !important required to override Infima's margin reset.                     */
/* Nested sub-menu: border-left aligned under title text (after icon 15px+8px gap).
   Selector uses direct child (>) to match the DOM: ul>li>ul structure.
   margin-left: 35px !important needed to override Infima's margin reset.    */
.menu__list > .menu__list-item > .menu__list {
  margin-left: 35px !important;
  padding-left: 8px;
  border-left: 1.5px solid var(--ifm-toc-border-color);
}

[data-theme='dark'] .menu__list > .menu__list-item > .menu__list {
  border-left-color: #374151;
}

/* Sub-items — normal menu color (not muted), slightly smaller font */
.menu__list > .menu__list-item > .menu__list > .menu__list-item > .menu__link {
  font-size: 0.8375rem;
  padding-left: 8px;
  color: var(--ifm-menu-color);
}

/* ── Category icons — via className in sidebars.js ───────────────────────── */
/* Usage: { type: 'category', label: '...', className: 'sidebar-cat-rocket'} */
/* Icon = black SVG via ::before — inverted in dark mode with filter:invert   */

[class*='sidebar-cat-'] > .menu__list-item-collapsible > .menu__link {
  display: flex;
  align-items: center;
}

[class*='sidebar-cat-'] > .menu__list-item-collapsible > .menu__link::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.6;
  transition: opacity 0.12s;
}

/* Dark mode — invert the black SVG to white */
[data-theme='dark'] [class*='sidebar-cat-'] > .menu__list-item-collapsible > .menu__link::before {
  filter: invert(1);
}

/* Hover + active state — full opacity */
[class*='sidebar-cat-'] > .menu__list-item-collapsible > .menu__link--active::before,
[class*='sidebar-cat-'] > .menu__list-item-collapsible:hover > .menu__link::before {
  opacity: 1;
}

/* ── Icon definitions (Lucide-style SVG, black stroke, 24×24) ───────────── */

/* Rocket — Getting Started, Deployment */
.sidebar-cat-rocket > .menu__list-item-collapsible > .menu__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
}

/* Monitor — Views */
.sidebar-cat-monitor > .menu__list-item-collapsible > .menu__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");
}

/* Pencil — Editors */
.sidebar-cat-pencil > .menu__list-item-collapsible > .menu__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z'/%3E%3C/svg%3E");
}

/* Puzzle — Plugins & Features */
.sidebar-cat-puzzle > .menu__list-item-collapsible > .menu__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h4a2 2 0 0 1 2 2v1a2 2 0 0 0 4 0v-1a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M14 2v4a2 2 0 0 1-2 2h-1a2 2 0 0 0 0 4h1a2 2 0 0 1 2 2v4'/%3E%3C/svg%3E");
}

/* SlidersHorizontal — Interface, Core, Settings */
.sidebar-cat-sliders > .menu__list-item-collapsible > .menu__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='4' x2='14' y2='4'/%3E%3Cline x1='10' y1='4' x2='3' y2='4'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Cline x1='21' y1='12' x2='12' y2='12'/%3E%3Cline x1='8' y1='12' x2='3' y2='12'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Cline x1='21' y1='20' x2='16' y2='20'/%3E%3Cline x1='12' y1='20' x2='3' y2='20'/%3E%3Ccircle cx='14' cy='20' r='2'/%3E%3C/svg%3E");
}

/* FolderOpen — Configuration */
.sidebar-cat-folder > .menu__list-item-collapsible > .menu__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* Server — Infrastructure */
.sidebar-cat-server > .menu__list-item-collapsible > .menu__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2' ry='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2' ry='2'/%3E%3Cline x1='6' y1='6' x2='6.01' y2='6'/%3E%3Cline x1='6' y1='18' x2='6.01' y2='18'/%3E%3C/svg%3E");
}

/* Database — Data & Plugins */
.sidebar-cat-database > .menu__list-item-collapsible > .menu__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E");
}

/* Layers — Component Reference */
.sidebar-cat-layers > .menu__list-item-collapsible > .menu__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M22 17.65l-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='M22 12.65l-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E");
}

/* Grid2x2 — Showcase */
.sidebar-cat-grid > .menu__list-item-collapsible > .menu__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

/* Code2 — API, Development, Architecture features */
.sidebar-cat-code > .menu__list-item-collapsible > .menu__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}

/* ── Sidebar version badge — always at the very bottom ───────────────────── */
/* Architecture: .theme-doc-sidebar is the sticky viewport with fixed height.
   Converting it to flex-column + making the scrollable nav flex:1 means the
   ::after pseudo-element is a flex-child OUTSIDE the scroll area — always
   pinned to the bottom regardless of content height or scroll position. */
/* Sidebar viewport — flex column so version badge is always pinned at the bottom.
   Targets the CSS-module class via attribute substring match (Docusaurus 3). */
[class*='sidebarViewport'] {
  display: flex !important;
  flex-direction: column !important;
}

/* The scrollable menu fills the available space */
[class*='sidebarViewport'] > .menu {
  flex: 1 !important;
  min-height: 0 !important;
}

/* Version badge — flex child OUTSIDE the scroll area, always at the very bottom */
[class*='sidebarViewport']::after {
  content: var(--cosmos-version);
  flex-shrink: 0;
  display: block;
  padding: 8px 0 12px;
  text-align: center;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ca3af;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

[data-theme='dark'] [class*='sidebarViewport']::after {
  color: #374151;
  background: #111827;
  border-top-color: #1f2937;
}

/* =============================================================================
   NATIVE DOCUSAURUS COMPONENTS
   ============================================================================= */

/* ── 1. Color mode toggle icons ──────────────────────────────────────────── */
/* Sun = amber shown in dark mode (hints "switch to light").
   Moon = brand indigo shown in light mode (hints "switch to dark").
   Uses CSS filter to colorize since Docusaurus SVG paths use hardcoded fill. */

/* Dark mode shows the sun icon */
[data-theme='dark'] [class*='toggleButton'] [class*='lightToggleIcon'],
[data-theme='dark'] [class*='toggleButton'] svg {
  filter: drop-shadow(0 0 0 #fbbf24) sepia(1) saturate(4) hue-rotate(5deg) brightness(1.1);
}

/* Light mode shows the moon icon */
[data-theme='light'] [class*='toggleButton'] [class*='darkToggleIcon'],
[data-theme='light'] [class*='toggleButton'] svg {
  filter: drop-shadow(0 0 0 var(--cosmos-brand-light)) sepia(1) saturate(6) hue-rotate(190deg)
    brightness(0.9);
}

/* ── 2. TOCCollapsible (mobile table of contents) ────────────────────────── */
[class*='tocCollapsible'] {
  border: 1px solid var(--ifm-toc-border-color);
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
}

[class*='tocCollapsibleButton'] {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ifm-font-color-secondary);
  transition:
    color 0.12s,
    background 0.12s;
}

[class*='tocCollapsibleButton']:hover {
  color: var(--ifm-color-primary);
  background: rgb(var(--cosmos-brand-rgb), 0.04);
}

[class*='tocCollapsibleContent'] {
  border-top: 1px solid var(--ifm-toc-border-color);
  padding: 8px 0;
}

/* ── 3. DocCard / DocCardList (auto-generated category index pages) ─────── */
[class*='cardContainer'] > article.card {
  height: 100%;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}

[class*='cardContainer'] > article.card:hover {
  transform: translateY(-2px);
}

[class*='cardContainer'] a {
  text-decoration: none;
}

/* Category card title */
[class*='cardContainer'] h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Category card description */
[class*='cardContainer'] p {
  font-size: 0.875rem;
  color: var(--ifm-font-color-secondary);
  margin: 0;
}

/* ── 4. Announcement bar close button ────────────────────────────────────── */
.announcement-close,
[class*='announcementBarClose'] {
  color: rgb(255, 255, 255, 0.65) !important;
  border-radius: 6px !important;
  padding: 4px 6px !important;
  transition:
    color 0.15s,
    background 0.15s !important;
}

.announcement-close:hover,
[class*='announcementBarClose']:hover {
  color: #fff !important;
  background: rgb(255, 255, 255, 0.12) !important;
}

/* ── 5. Tag pages (/docs/tags/...) ───────────────────────────────────────── */
[class*='tagList'] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

[class*='tagItem'] a,
[class*='tag_'] {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ifm-toc-border-color);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ifm-font-color-base);
  text-decoration: none;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}

[class*='tagItem'] a:hover,
[class*='tag_']:hover {
  border-color: var(--ifm-color-primary);
  background: rgb(var(--cosmos-brand-rgb), 0.06);
  color: var(--ifm-color-primary);
}

/* ── 6. Responsive search ─────────────────────────────────────────────────── */
/* On mobile the input collapses — restore sizing on focus */
@media (width <= 576px) {
  .navbar__search-input {
    min-width: 0 !important;
    width: 2rem !important;
    padding-left: 2rem !important;
    transition:
      width 0.25s ease,
      background-color 0.15s !important;
  }

  .navbar__search-input:focus {
    width: 220px !important;
  }
}

/* ── 7. prefers-reduced-motion ───────────────────────────────────────────── */
/* Respects the OS-level "reduce motion" accessibility setting by
   disabling all transitions and animations. */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .theme-doc-sidebar-container,
  .menu__link,
  .main-wrapper,
  article,
  .footer,
  .table-of-contents__link,
  .pagination-nav__link,
  .prism-code,
  .alert,
  .card,
  [class*='sidebar-cat-'] > .menu__list-item-collapsible > .menu__link,
  [class*='toggleIcon'],
  button[aria-label*='dark and light mode'] {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Blockquote ──────────────────────────────────────────────────────────── */
/* Left-border accent + subtle tint — used for callouts, pull-quotes, notes. */
.markdown blockquote {
  border-left: 3px solid var(--ifm-color-primary);
  background: rgb(var(--cosmos-brand-rgb), 0.04);
  border-radius: 0 8px 8px 0;
  padding: 12px 20px;
  margin: 1rem 0;
  color: var(--ifm-font-color-secondary);
  font-style: italic;
}

[data-theme='dark'] .markdown blockquote {
  background: rgb(var(--cosmos-brand-rgb), 0.07);
  border-left-color: var(--cosmos-brand-light);
}

.markdown blockquote p:last-child {
  margin-bottom: 0;
}

/* ── Keyboard key <kbd> ──────────────────────────────────────────────────── */
/* Chip-style keyboard key — matches Rackscope monospace chip design.        */
kbd {
  background: var(--ifm-background-surface-color);
  border: 1px solid var(--ifm-toc-border-color);
  border-bottom-width: 2px; /* subtle 3D shadow effect */
  border-radius: 5px;
  color: var(--ifm-font-color-base);
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 1px 7px;
  white-space: nowrap;
}

[data-theme='dark'] kbd {
  background: #1f2937; /* Void gray-800 */
  border-color: #374151; /* gray-700 */
}

/* ── Markdown images ─────────────────────────────────────────────────────── */
/* Rounded corners + shadow — consistent with Rackscope card aesthetics.     */
.markdown img {
  border-radius: 12px;
  box-shadow: var(--ifm-global-shadow-md);
  max-width: 100%;
}

[data-theme='dark'] .markdown img {
  box-shadow:
    0 4px 16px rgb(0, 0, 0, 0.4),
    0 1px 4px rgb(0, 0, 0, 0.3);
}

/* ── Horizontal rule ─────────────────────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--ifm-toc-border-color);
  margin: 2rem 0;
}

/* ── Tooltip — abbr[title] + .tooltip utility ────────────────────────────── */
/* Styled tooltip for abbreviations and .tooltip utility class.
   Design: dark chip (Void gray-900), brand arrow, smooth fade.              */
abbr[title] {
  position: relative;
  cursor: help;
  text-decoration: underline dotted rgb(var(--cosmos-brand-rgb), 0.5);
  text-underline-offset: 3px;
}

abbr[title]::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #111827; /* Void gray-900 */
  color: #e5e5e5;
  font-family: var(--ifm-font-family-base);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 200;
  box-shadow: 0 4px 12px rgb(0, 0, 0, 0.3);
}

abbr[title]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #111827;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 200;
}

abbr[title]:hover::after,
abbr[title]:hover::before {
  opacity: 1;
}

[data-theme='light'] abbr[title]::after {
  background: #1f2937;
}

[data-theme='light'] abbr[title]::before {
  border-top-color: #1f2937;
}

/* =============================================================================
   OPTIONAL UTILITY CLASSES
   The following classes are not required for the theme to work.
   Include them when building API reference or status documentation.
   ============================================================================= */

/* HTTP method badges — useful for API reference pages */
.method-get {
  color: #12b76a;
  font-weight: 700;
  font-family: var(--ifm-font-family-monospace);
}

.method-post {
  color: var(--cosmos-brand);
  font-weight: 700;
  font-family: var(--ifm-font-family-monospace);
}

.method-put {
  color: #f79009;
  font-weight: 700;
  font-family: var(--ifm-font-family-monospace);
}

.method-delete {
  color: #f04438;
  font-weight: 700;
  font-family: var(--ifm-font-family-monospace);
}

.method-patch {
  color: #9b59b6;
  font-weight: 700;
  font-family: var(--ifm-font-family-monospace);
}

/* Status / health state labels — useful for operational docs */
.status-ok {
  color: #12b76a;
  font-weight: 600;
}

.status-warn {
  color: #f79009;
  font-weight: 600;
}

.status-crit {
  color: #f04438;
  font-weight: 600;
}

.status-unknown {
  color: #6b7280; /* neutral gray-500 */
  font-weight: 600;
}

/* Aliases for projects that use .state-* naming (e.g. Rackscope docs) */
.state-ok {
  color: #12b76a;
  font-weight: 600;
}

.state-warn {
  color: #f79009;
  font-weight: 600;
}

.state-crit {
  color: #f04438;
  font-weight: 600;
}

.state-unknown {
  color: #6b7280;
  font-weight: 600;
}

/* ── Release / version badges ─────────────────────────────────────────────── */
/* Inline pill badges for marking feature lifecycle state in documentation.   */
/* Usage: <span class="badge-new">New</span>                                  */

.badge-new,
.badge-beta,
.badge-deprecated,
.badge-experimental {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 6px;
  vertical-align: middle;
  border: 1px solid;
}

.badge-new {
  background: rgb(var(--cosmos-brand-rgb), 0.1);
  color: var(--cosmos-brand);
  border-color: rgb(var(--cosmos-brand-rgb), 0.25);
}

.badge-beta {
  background: rgb(247, 144, 9, 0.1);
  color: #f79009;
  border-color: rgb(247, 144, 9, 0.25);
}

.badge-deprecated {
  background: rgb(107, 114, 128, 0.1);
  color: #6b7280;
  border-color: rgb(107, 114, 128, 0.25);
}

.badge-experimental {
  background: rgb(155, 89, 182, 0.1);
  color: #9b59b6;
  border-color: rgb(155, 89, 182, 0.25);
}

/* Dark mode — slightly brighter colors for readability on Void surface */
[data-theme='dark'] .badge-new {
  background: rgb(var(--cosmos-brand-rgb), 0.15);
  color: var(--cosmos-brand-light);
  border-color: rgb(var(--cosmos-brand-rgb), 0.3);
}

[data-theme='dark'] .badge-beta {
  background: rgb(247, 144, 9, 0.12);
  color: #fbbf24;
  border-color: rgb(247, 144, 9, 0.3);
}

[data-theme='dark'] .badge-deprecated {
  background: rgb(107, 114, 128, 0.12);
  color: #9ca3af;
  border-color: rgb(107, 114, 128, 0.3);
}

[data-theme='dark'] .badge-experimental {
  background: rgb(155, 89, 182, 0.12);
  color: #c084fc;
  border-color: rgb(155, 89, 182, 0.3);
}

/* ── Buttons (.btn-*) ─────────────────────────────────────────────────────── */
/* Utility button classes for use in MDX docs pages and landing sections.     */
/* Usage: <a class="btn btn-primary" href="/docs/getting-started">Start</a>   */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s,
    color 0.15s;
}

.btn-primary {
  background: var(--cosmos-brand);
  color: #fff !important;
  border-color: var(--cosmos-brand);
}

.btn-primary:hover {
  background: #3641f5;
  border-color: #3641f5;
  box-shadow: 0 0 0 3px rgb(var(--cosmos-brand-rgb), 0.2);
}

.btn-secondary {
  background: transparent;
  color: var(--ifm-font-color-base) !important;
  border-color: var(--ifm-toc-border-color);
}

.btn-secondary:hover {
  border-color: var(--ifm-color-primary);
  background: rgb(var(--cosmos-brand-rgb), 0.05);
  color: var(--ifm-color-primary) !important;
}

.btn-danger {
  background: rgb(240, 68, 56, 0.07);
  color: #f04438 !important;
  border-color: rgb(240, 68, 56, 0.3);
}

.btn-danger:hover {
  background: rgb(240, 68, 56, 0.12);
  border-color: #f04438;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 1rem;
}

/* ── Numbered steps (.steps) ──────────────────────────────────────────────── */
/* For multi-step guides, install sequences, and how-to procedures.           */
/* Usage: <ol class="steps"><li>Step one</li><li>Step two</li></ol>            */

ol.steps {
  counter-reset: step-counter;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

ol.steps > li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 3rem;
  padding-bottom: 1.5rem;
  border-left: 2px solid var(--ifm-toc-border-color);
  margin-left: 1rem;
}

ol.steps > li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

ol.steps > li::before {
  content: counter(step-counter);
  position: absolute;
  left: -1.1rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  background: var(--cosmos-brand);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--ifm-background-color);
}

[data-theme='dark'] ol.steps > li::before {
  background: var(--cosmos-brand-light);
}

/* ── Timeline (.timeline) ─────────────────────────────────────────────────── */
/* For changelogs, roadmaps, and versioned event sequences.                   */
/* Usage: <ul class="timeline"><li><strong>v1.0</strong> Released</li></ul>   */

ul.timeline {
  position: relative;
  list-style: none;
  padding: 0 0 0 1.5rem;
  margin: 1.5rem 0;
}

ul.timeline::before {
  content: '';
  position: absolute;
  left: 0.4rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--ifm-toc-border-color);
}

ul.timeline > li {
  position: relative;
  padding-bottom: 1.25rem;
  padding-left: 1rem;
}

ul.timeline > li:last-child {
  padding-bottom: 0;
}

ul.timeline > li::before {
  content: '';
  position: absolute;
  left: -1.37rem;
  top: 0.35rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--ifm-color-primary);
  border: 2px solid var(--ifm-background-color);
  box-shadow: 0 0 0 2px var(--ifm-color-primary);
}

/* ── Check list (.list-check) ─────────────────────────────────────────────── */
/* Checkmark list — useful for feature lists, requirements, and prerequisites. */
/* Usage: <ul class="list-check"><li>Feature one</li><li>Feature two</li></ul> */

ul.list-check {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

ul.list-check > li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.5rem;
}

ul.list-check > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312b76a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 16px;
  background-repeat: no-repeat;
}