/* ──────────────────────────────────────────────────────────────────
   handbook.getfinops.cloud — brand parity overrides for Material.

   Material exposes a wide set of CSS custom properties (--md-*) for
   theming. We override them here so the visitor reads the handbook
   as the same brand as getfinops.cloud + tools.getfinops.cloud:

     * Dark base oklch(0.145 0 0) ≈ #0a0a0a (matches apex --background)
     * Near-white foreground oklch(0.985 0 0)
     * Indigo primary + emerald accent for CTAs
     * 0.625rem border-radius across cards/buttons/code blocks
     * Inter font (loaded by `theme.font.text` in mkdocs.yml)

   This is a *port* — Material is not Tailwind/React, so we are not
   attempting a pixel clone of the apex layout. A docs sidebar/TOC
   layout is correct here. What we match is the brand *language*.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* Apex radius token. Surfaces below override every Material-styled
     element (cards, buttons, code blocks, admonitions, search) to
     this radius so the visitor reads a consistent corner geometry. */
  --gf-radius: 0.625rem;

  /* Brand accent palette — kept identical to metronic/styles/globals.css.
     Material consumes them via `--md-primary-fg-color` /
     `--md-accent-fg-color` (set further down). */
  --gf-indigo: #4f46e5;
  --gf-indigo-hover: #4338ca;
  --gf-indigo-fg: #e0e7ff;
  --gf-emerald: #10b981;
  --gf-emerald-hover: #059669;
}

/* ──────────────────────────────────────────────────────────────────
   Slate scheme = our default. Material's slate is already a dark
   theme; we just push the surfaces to the exact apex colors.
   ────────────────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0a0a0a;             /* apex --background */
  --md-default-bg-color--light: #111111;
  --md-default-bg-color--lighter: #1a1a1a;
  --md-default-bg-color--lightest: #222222;
  --md-default-fg-color: rgba(255, 255, 255, 0.95);  /* apex --foreground */
  --md-default-fg-color--light: rgba(255, 255, 255, 0.78);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.58);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.12);

  --md-primary-fg-color: var(--gf-indigo);
  --md-primary-fg-color--light: #6366f1;
  --md-primary-fg-color--dark: var(--gf-indigo-hover);

  --md-accent-fg-color: var(--gf-emerald);
  --md-accent-fg-color--transparent: rgba(16, 185, 129, 0.15);

  /* Code surfaces */
  --md-code-bg-color: rgba(255, 255, 255, 0.04);
  --md-code-fg-color: #e2e8f0;

  /* Footer */
  --md-footer-bg-color: #050505;
  --md-footer-bg-color--dark: #050505;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--gf-indigo);
  --md-accent-fg-color: var(--gf-emerald);
}

/* ──────────────────────────────────────────────────────────────────
   Typography — Inter is loaded by Material via mkdocs.yml. Tighten
   the headline hierarchy to match the apex
   (CustomTitle = text-3xl md:text-5xl font-bold).
   ────────────────────────────────────────────────────────────────── */
.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.md-content h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0.5em;
}
.md-content h2 {
  font-size: 1.75rem;
  margin-top: 2.5rem;
}

/* ──────────────────────────────────────────────────────────────────
   Buttons — port the shadcn primary button to Material's
   `.md-button.md-button--primary` selector. Indigo fill, white text,
   0.625rem radius, semibold weight, subtle hover.
   ────────────────────────────────────────────────────────────────── */
.md-typeset .md-button {
  border-radius: var(--gf-radius);
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.05s ease;
}
.md-typeset .md-button:hover {
  transform: translateY(-1px);
}
.md-typeset .md-button--primary {
  background-color: var(--gf-indigo);
  border-color: var(--gf-indigo);
  color: #ffffff;
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--gf-indigo-hover);
  border-color: var(--gf-indigo-hover);
  color: #ffffff;
}

/* ──────────────────────────────────────────────────────────────────
   Code blocks + admonitions + tables — apex-style rounding.
   ────────────────────────────────────────────────────────────────── */
.highlight pre,
.md-typeset code,
.md-typeset pre > code,
.md-typeset .codehilite {
  border-radius: var(--gf-radius);
}
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--gf-radius);
}
.md-typeset table:not([class]) {
  border-radius: var(--gf-radius);
  overflow: hidden;
}

/* Brand-tinted admonitions for note / tip / warning. */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-left: 0.2rem solid var(--gf-indigo);
}
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-left: 0.2rem solid var(--gf-emerald);
}

/* ──────────────────────────────────────────────────────────────────
   Header back-links — the chips rendered by overrides/main.html.
   ────────────────────────────────────────────────────────────────── */
.gf-nav-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.gf-nav-link {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 0.4rem 0.65rem;
  border-radius: var(--gf-radius);
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.gf-nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
}
.gf-nav-link--primary {
  background-color: var(--gf-indigo);
  color: #ffffff;
  font-weight: 600;
}
.gf-nav-link--primary:hover {
  background-color: var(--gf-indigo-hover);
  color: #ffffff;
}
@media (max-width: 76.1875em) {
  .gf-nav-links {
    display: none;
  }
}

/* Audit-CTA callout that closes each guide. */
.gf-audit-cta {
  margin-top: 3rem;
  padding: 1.5rem;
  border-radius: var(--gf-radius);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(16, 185, 129, 0.08));
  border: 1px solid rgba(79, 70, 229, 0.4);
}
.gf-audit-cta h3 {
  margin-top: 0;
}