/* Supplementary CSS for fumadocs-openapi 9.5.1 — fills the gap left when
 * fumadocs-ui@15.8 ships a Tailwind v4 precompiled bundle that was generated
 * from fumadocs-ui sources only. The fumadocs-openapi UI components (in a
 * separate package) ship JSX with these classes, but the corresponding
 * utility CSS isn't in the prebuilt bundle.
 *
 * Without these rules:
 *  - The API info column (request body, response schemas) and the example
 *    column (cURL / JS / Python code samples) stack vertically at every
 *    width instead of splitting two-up at xl (≥1280px).
 *  - The right-rail example panel doesn't get its 400px width or sticky
 *    behaviour.
 *
 * Breakpoints follow Tailwind v3 defaults (sm 640, md 768, lg 1024, xl 1280)
 * which match the Tailwind v3 setup elsewhere in apps/web.
 *
 * Long-term fix: migrate apps/web to Tailwind v4 + import
 * fumadocs-openapi/css/preset.css. Until then, this file is the smallest
 * surgical patch that makes the layout match
 * https://www.fumadocs.dev/docs/openapi.
 */

@media (min-width: 640px) {
  .sm\:text-start { text-align: start; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:justify-end { justify-content: flex-end; }
  .sm\:gap-2 { gap: calc(var(--spacing, 0.25rem) * 2); }
}

@media (min-width: 768px) {
  .md\:top-\(--fd-api-info-top\) { top: var(--fd-api-info-top); }
}

@media (min-width: 1280px) {
  .xl\:flex-row { flex-direction: row; }
  .xl\:items-start { align-items: flex-start; }
  .xl\:w-\[400px\] { width: 400px; }
}

/* Row-container gap between left (APIInfo) and right (APIExample) columns.
 * Fumadocs-openapi's outer container is
 *   `flex flex-col gap-x-6 gap-y-4 xl:flex-row xl:items-start`
 * but gap-x-6 / gap-y-4 are not in fumadocs-ui's precompiled bundle. Without
 * these the columns sit flush against each other (0px horizontal gap at xl+,
 * 0px vertical gap below xl). */
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-4 { row-gap: 1rem; }

/* =========================================================================
 * Phase 16 — Stripe-spacious density + dark-mode polish (D-A4-13, D-A4-14,
 * D-A4-15, D-A4-16, D-A4-18). Both themes get density; only dark gets the
 * palette overrides. All selectors are gated to /docs/* by virtue of
 * Fumadocs's RootProvider being the only mounter of class="dark" — the
 * homepage and dashboard layouts do not mount RootProvider, so html.dark
 * never fires there.
 *
 * Pitfall 8: Fumadocs's precompiled .prose CSS already sets padding on
 * `.prose table td/th` and `.prose pre`. We raise specificity below by
 * scoping selectors with `article` (the Fumadocs DocsBody article wrapper)
 * AND adding `!important` on the few rules where the precompiled bundle
 * wins on cascade order alone.
 *
 * B-05 PROBE RESULT (run 2026-05-18 against
 * http://localhost:3002/docs/api/charts and
 * http://localhost:3002/docs/api/charts/ChartsController_create):
 *   - data-method="…" attribute hits: 0
 *   - class names containing "method": 0
 *   - .fd-method-… class hits: 0
 *   - Actual method-badge shape: plain <span> with Tailwind utilities
 *     `font-mono font-medium text-{verb-color}-600 dark:text-{verb-color}-400`
 *     where verb-color is green (GET), blue (POST), orange (PATCH), red
 *     (DELETE). Badges ALREADY ship with `dark:` variants in the precompiled
 *     fumadocs-style.css bundle, so they self-handle dark-mode color flip.
 *   - Outcome: D (fallback) — no override needed for color contrast; we
 *     instead add a forward-compatible defensive selector pair so that if
 *     Fumadocs ever ships [data-method] attributes or .fd-method-* classes
 *     (e.g. on upgrade), this CSS still polishes the chrome.
 *   - See Implementation Notes in 16-03 PLAN for full probe output.
 * ========================================================================= */

/* ---------- Stripe-spacious density (both themes) ---------- */

/* Heading rules are scoped with `:not(.prose-no-margin *)` so they do NOT
 * fire inside the fumadocs-openapi right column (which wraps its content in
 * `prose-no-margin md:sticky xl:w-[400px]`). Without this scoping the right
 * column's first heading or paragraph picks up our 32-40px margin-top while
 * the left column starts with a non-heading method/route badge — visually
 * mis-aligning the two columns by ~32-40px. */

/* Headings: H1 32px top, H2 40px top + 16px bottom (D-A4-14 starting point) */
article.prose h1:not(.prose-no-margin *),
.prose h1:not(.prose-no-margin *) {
  margin-top: 32px;
}
article.prose h2:not(.prose-no-margin *),
.prose h2:not(.prose-no-margin *) {
  margin-top: 40px;
  margin-bottom: 16px;
}
article.prose h3:not(.prose-no-margin *),
.prose h3:not(.prose-no-margin *) {
  margin-top: 24px;
  margin-bottom: 12px;
}

/* Tables: 16-20px row padding */
article.prose table th,
article.prose table td,
.prose table th,
.prose table td {
  padding: 16px 20px !important;
}

/* Code blocks: 16-20px internal padding + 8px border-radius */
article.prose pre,
.prose pre,
pre[data-language] {
  padding: 16px 20px !important;
  border-radius: 8px;
}

/* Paragraph rhythm — also scoped out of the right column. */
article.prose p:not(.prose-no-margin *),
.prose p:not(.prose-no-margin *) {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* Belt-and-suspenders: kill any residual top margin on the right column's
 * first child so the two columns top-align even if a future Fumadocs upgrade
 * stops emitting `prose-no-margin` on the example panel. */
.xl\:w-\[400px\] > :first-child,
.xl\:w-\[400px\] > :first-child > :first-child {
  margin-top: 0;
}

/* ---------- Dark-mode polish (html.dark only) ---------- */

/* Sidebar — separators + group labels */
html.dark aside {
  border-color: var(--color-fd-border, #2a2a2a);
}
html.dark aside hr,
html.dark aside [role="separator"] {
  border-color: var(--color-fd-border, #2a2a2a);
  background-color: var(--color-fd-border, #2a2a2a);
}

/* Tables — border palette + light text in dark mode */
html.dark article.prose table,
html.dark .prose table {
  border-color: var(--color-fd-border, #2a2a2a);
}
html.dark article.prose table th,
html.dark article.prose table td,
html.dark .prose table th,
html.dark .prose table td {
  border-color: var(--color-fd-border, #2a2a2a);
  color: var(--color-fd-foreground, #fafafa);
}
html.dark article.prose table thead th,
html.dark .prose table thead th {
  background-color: var(--color-fd-muted, #111);
}

/* Right-rail example panel (xl: 400px column from above) — card surface */
html.dark .xl\:w-\[400px\] {
  background-color: var(--color-fd-card, #0f0f0f);
  border-color: var(--color-fd-border, #2a2a2a);
  color: var(--color-fd-card-foreground, #fafafa);
}

/* Pre / code chrome (Shiki sets data-theme; Phase 16 only paints the chrome) */
html.dark article.prose pre,
html.dark .prose pre,
html.dark pre[data-language] {
  background-color: var(--color-fd-muted, #0f0f0f);
  border: 1px solid var(--color-fd-border, #2a2a2a);
  color: var(--color-fd-foreground, #fafafa);
}

/* Inline code (not the <pre> block — the `<code>` inside running text) */
html.dark article.prose :not(pre) > code,
html.dark .prose :not(pre) > code {
  background-color: var(--color-fd-muted, #1a1a1a);
  color: var(--color-fd-foreground, #fafafa);
  border-color: var(--color-fd-border, #2a2a2a);
}

/* OpenAPI method badges (Phase 15 commit 40e7c72) — chrome polish in dark
 * mode. B-05: PROBE found that Fumadocs's actual badge shape is a plain
 * <span class="font-mono font-medium text-{color}-600 dark:text-{color}-400">,
 * NOT a [data-method] attribute or .fd-method-* class. The Tailwind `dark:`
 * variant already handles color contrast; this rule pairing is FORWARD-
 * COMPATIBLE — if a future Fumadocs upgrade introduces [data-method=…] or
 * a .fd-method-* class prefix, the chrome polish below will engage; today
 * it is a no-op against the rendered DOM. See Implementation Notes in
 * 16-03 PLAN for the empirical probe transcript. */
html.dark [data-method="GET"],
html.dark [data-method="POST"],
html.dark [data-method="PATCH"],
html.dark [data-method="PUT"],
html.dark [data-method="DELETE"],
html.dark [class*="fd-method-"] {
  color: var(--color-fd-foreground, #fafafa);
  border: 1px solid var(--color-fd-border, #2a2a2a);
}

/* Active sidebar item — preserve visibility against the dark card surface */
html.dark aside a[aria-current="page"],
html.dark aside [aria-current="true"] {
  background-color: var(--color-fd-accent, #1f2937);
  color: var(--color-fd-accent-foreground, #fafafa);
}