/* QuantaTrade AI docs — visual polish on top of Material for MkDocs.
   Keep additions targeted: each rule has a comment explaining what it
   improves, so a future maintainer can drop anything that no longer
   serves the look. */

/* ────────────────────────────────────────────────────────────────
   GitHub-style palette. Maximum visibility — near-black body text on
   white, single vivid blue accent for links and chrome. WCAG AAA
   contrast on body text in both light and dark modes.
   ──────────────────────────────────────────────────────────────── */
:root {
  --md-primary-fg-color:        #0a0a0a;  /* near-black header */
  --md-primary-fg-color--light: #24292f;  /* GH fg-default */
  --md-primary-fg-color--dark:  #000000;
  --md-accent-fg-color:         #0969da;  /* GH accent-fg blue */
  --md-accent-fg-color--transparent: hsla(212, 92%, 45%, 0.1);

  --md-default-fg-color:        #0a0a0a;  /* WCAG AAA on white */
  --md-default-bg-color:        #ffffff;
  --md-typeset-color:           #0a0a0a;
  --md-typeset-a-color:         #0969da;  /* link = accent */
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #f0f6fc;  /* GH dark fg-default */
  --md-primary-fg-color--light: #ffffff;
  --md-accent-fg-color:         #58a6ff;  /* GH dark accent-fg */
  --md-accent-fg-color--transparent: hsla(212, 100%, 67%, 0.14);

  --md-default-bg-color:        #0d1117;  /* GH dark canvas-default */
  --md-default-fg-color:        #f0f6fc;
  --md-typeset-color:           #f0f6fc;
  --md-typeset-a-color:         #58a6ff;
}

/* ────────────────────────────────────────────────────────────────
   Typography. Material's default Roboto is fine but Inter renders
   crisper at the sizes we use, especially for inline code in tables.
   We declare it here as a fallback in case the mkdocs.yml google-font
   fetch fails or the user is offline.
   ──────────────────────────────────────────────────────────────── */
:root {
  --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --md-code-font: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Body copy a touch larger; default 16px feels cramped for long-form docs. */
.md-typeset {
  font-size: 0.82rem;
  line-height: 1.7;
}

/* ────────────────────────────────────────────────────────────────
   Content width. Material defaults to a narrow content column that
   forces our wide reference tables (12+ columns) into horizontal
   scroll. Widen it on large viewports so the most common screen size
   for engineers (laptop) shows whole tables.
   ──────────────────────────────────────────────────────────────── */
@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 78rem;
  }
}

/* ────────────────────────────────────────────────────────────────
   Code blocks. Tighter borders, modest top/bottom margin, monospace
   font matches the inline-code font.
   ──────────────────────────────────────────────────────────────── */
.md-typeset pre > code,
.md-typeset code {
  font-feature-settings: "calt" 0;  /* disable ligatures for legibility in code samples */
}

.md-typeset .highlight pre,
.md-typeset > pre > code {
  border-radius: 6px;
  border: 1px solid var(--md-default-fg-color--lightest);
}

/* Inline code: pill shape, brand-tinted background. */
.md-typeset code {
  border-radius: 3px;
  padding: 0.05em 0.4em;
  background-color: var(--md-code-bg-color);
}

/* ────────────────────────────────────────────────────────────────
   Tables. Our docs are table-heavy (FINDINGS triage, services
   reference, etc.) — make them readable.
   ──────────────────────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest);
  font-size: 0.92em;
}

.md-typeset table:not([class]) th {
  background: #f6f8fa;             /* GH canvas-subtle */
  color: #0a0a0a;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 2px solid #0969da; /* blue underline — single accent */
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: #161b22;             /* GH dark canvas-subtle */
  color: #f0f6fc;
  border-bottom: 2px solid #58a6ff;
}

/* Zebra striping — subtle but it helps in wide tables. */
.md-typeset table:not([class]) tbody tr:nth-child(2n) {
  background-color: #f6f8fa;       /* GH canvas-subtle */
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr:nth-child(2n) {
  background-color: #161b22;       /* GH dark canvas-subtle */
}

/* ────────────────────────────────────────────────────────────────
   Mermaid diagrams. Give them a card-style container so they read
   as distinct visual blocks rather than blending into the body copy.
   The in-diagram theme (set per-block by scripts/theme-mermaid.py)
   handles the canvas itself; this rule is about the surrounding frame.
   ──────────────────────────────────────────────────────────────── */
.md-typeset .mermaid {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  padding: 1.5rem 1rem;
  margin: 1.5rem 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  text-align: center;
}

[data-md-color-scheme="slate"] .md-typeset .mermaid {
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

/* ────────────────────────────────────────────────────────────────
   Admonitions (note / warning / tip blocks). Slimmer left border,
   warmer colors — looks less institutional than the Material default.
   ──────────────────────────────────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 6px;
  border-left-width: 4px;
  font-size: 0.85rem;
}

/* ────────────────────────────────────────────────────────────────
   Navigation density. Tighten sidebar so more nav items are visible
   without scrolling; reduce footer height; pull the header logo in.
   ──────────────────────────────────────────────────────────────── */
.md-nav__item .md-nav__link {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

.md-nav__title {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Header brand a touch denser. */
.md-header__title {
  font-weight: 700;
}

/* ────────────────────────────────────────────────────────────────
   Headerlink anchor (¶). Default placement is awkward — move closer
   to the heading and de-emphasise until hover.
   ──────────────────────────────────────────────────────────────── */
.md-typeset .headerlink {
  margin-left: 0.4em;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink {
  opacity: 0.6;
}

/* ────────────────────────────────────────────────────────────────
   Status emoji (🟢 🟡 🔴 ✅ 🚨 etc.). Native emoji rendering varies
   by OS; nudge them up a touch so they baseline-align with body copy.
   ──────────────────────────────────────────────────────────────── */
.md-typeset table:not([class]) td {
  vertical-align: middle;
}

/* ────────────────────────────────────────────────────────────────
   Search. Default Material search is fine but the result rendering
   can feel cramped on small screens — bump padding a bit.
   ──────────────────────────────────────────────────────────────── */
.md-search-result__item {
  padding: 0.4rem 0.8rem;
}