/*
 * extra.css: Custom styles for the VoidSign API documentation.
 *
 * This file overrides MkDocs Material defaults and provides styling for
 * the DOM enhancements applied by extra.js. Organized into sections that
 * mirror the JS file where relevant.
 *
 * COLOR PALETTE
 * -------------
 * Brand purple:  #252139 (primary), #3d3760 (light), #1a1729 (dark)
 * Brand orange:  #fb8e5b (accent)
 * Success green: #16a34a (GET badge, 2xx status)
 * Info blue:     #2563eb (POST badge)
 * Warning amber: #ea580c (PUT badge, path params)
 * Error red:     #dc2626 (DELETE badge, 5xx status)
 */

/* ==========================================================================
 * THEME OVERRIDES: Brand colors and MkDocs Material adjustments
 * ========================================================================== */

/* Override MkDocs Material's default indigo theme with VoidSign brand colors.
 * These CSS custom properties are consumed throughout Material's own styles
 * for the header, links, selections, etc. */
:root {
  --md-primary-fg-color: #252139;
  --md-primary-fg-color--light: #3d3760;
  --md-primary-fg-color--dark: #1a1729;
  --md-accent-fg-color: #fb8e5b;
  --md-accent-fg-color--transparent: rgba(251, 142, 91, 0.1);
}

/* Style the announcement banner (configured in zensical.toml) as a yellow
 * warning bar, used for "beta" or "preview API" notices. */
.md-banner {
  background-color: #fefce8;
  color: #854d0e;
  font-size: 0.8rem;
}

/* Disable dark mode entirely. MkDocs Material's "slate" scheme is the dark
 * variant, hiding it prevents the toggle from appearing and ensures the
 * docs are always rendered in light mode. */
[data-md-color-scheme="slate"] {
  display: none;
}

/* MkDocs Material reserves header space for a "View source on GitHub" link.
 * Since we don't configure a repo URL, this hides the empty container so
 * the search bar stays flush against the right edge. */
.md-header__source {
  display: none !important;
}

/* Prevent the header from showing the current page title when scrolling.
 * MkDocs Material replaces the site name with the page title on scroll.
 * This keeps the original site name visible at all times. */
.md-header__topic:nth-child(2) {
  display: none !important;
}

/* ==========================================================================
 * SIDEBAR TOC: Collapsible sections and method badges
 * ========================================================================== */

/* The API reference page has many endpoints, each with sub-sections
 * (Parameters, Request body, Responses). Showing all of them in the sidebar
 * at once would make it unusably long. These two rules collapse nested nav
 * sections by default and only expand the currently active one. */
.md-nav--secondary .md-nav__item > nav {
  display: none;
}

/* :has() selector: expand the nested nav when any child link is active.
 * This means clicking "Create request" expands its sub-nav, while all
 * other endpoint sub-navs stay collapsed. */
.md-nav--secondary .md-nav__item:has(.md-nav__link--active) > nav {
  display: block;
}

/* When the scroll-spy activates a child link (e.g. "Parameters"), the
 * .md-nav__link--active class moves from the parent endpoint link to
 * the child. This causes the parent to lose its bold styling and the
 * sub-nav to visually "flicker". This rule keeps the parent endpoint
 * link styled as active whenever ANY descendant link is active. */
.md-nav--secondary .md-nav__item:has(.md-nav__link--active) > .md-nav__link {
  font-weight: 700;
  color: var(--md-default-fg-color);
}

/* Make sidebar links use flexbox so the method badge (injected by extra.js
 * section 1) is pushed to the far right of the sidebar entry.
 * Without this, the badge would sit inline right after the link text. */
.md-nav--secondary .md-nav__link .md-ellipsis {
  display: flex;
  align-items: center;
}

/* The method badge in sidebar links is pushed right via margin-left: auto
 * (flexbox trick). flex-shrink: 0 prevents the badge from being squished
 * when the endpoint name is long. */
.md-nav--secondary .md-nav__link .md-ellipsis .method-badge {
  margin-left: auto;
  margin-right: 0;
  flex-shrink: 0;
}

/* ==========================================================================
 * METHOD BADGES: Colored GET/POST/PUT/PATCH/DELETE pills
 * ========================================================================== */

/* Base style for all method badges. Used in two contexts:
 *   1. Sidebar TOC links (small, injected by extra.js section 1)
 *   2. Endpoint headings (larger --lg variant, emitted by endpoint.md.j2) */
.method-badge {
  display: inline-block;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.65em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  vertical-align: middle;
  margin-right: 0.3em;
  letter-spacing: 0.02em;
}

/* Per-method colors: industry-standard conventions:
 *   GET    = green  (safe, read-only)
 *   POST   = blue   (create)
 *   PUT    = orange  (full update)
 *   PATCH  = purple  (partial update)
 *   DELETE = red     (destructive) */
.method-badge--get {
  background-color: #16a34a;
}
.method-badge--post {
  background-color: #2563eb;
}
.method-badge--put {
  background-color: #ea580c;
}
.method-badge--patch {
  background-color: #9333ea;
}
.method-badge--delete {
  background-color: #dc2626;
}

/* Larger variant used in content headings (h2). The --lg modifier makes the
 * badge slightly bigger and more padded since it's in the main content area
 * rather than the compact sidebar. Applied via the endpoint.md.j2 template:
 *   <span class="method-badge method-badge--post method-badge--lg">POST</span> */
.method-badge--lg {
  font-size: 0.55em;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  vertical-align: middle;
}

/* ==========================================================================
 * ENDPOINT PATH: The "POST /api/v1/requests" line below each heading
 * ========================================================================== */

/* Pulls the path line closer to the h2 heading above it (negative top margin)
 * and adds breathing room before the description paragraph below. */
.endpoint-path {
  margin-top: -0.5em;
  margin-bottom: 1em;
}

/* Subtle code styling for the path itself. The <code> contains the full
 * path like /api/v1/requests/{request_id}. */
.endpoint-path code {
  font-size: 0.85em;
  background: rgba(0, 0, 0, 0.06);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

/* ==========================================================================
 * PATH PARAMETER HIGHLIGHTING: Orange {param} segments
 * ========================================================================== */

/* Applied by extra.js sections 2 and 7. Dynamic path segments like
 * {request_id} are wrapped in <span class="path-param"> to stand out
 * in orange against the gray code background. Used in both the main
 * content area and the sidebar TOC. */
.path-param {
  color: #ea580c;
  background: rgba(234, 88, 12, 0.08);
  border-radius: 2px;
  padding: 0 0.1em;
}

/* ==========================================================================
 * ENDPOINT CARDS: Bordered containers grouping each endpoint's content
 * ========================================================================== */

/* Created by extra.js section 3. Each endpoint (h2 + its params, request
 * body, responses) is wrapped in a card div. The card provides visual
 * grouping with a border, rounded corners, and a subtle shadow. */
.endpoint-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.5em 1.5em 1em;
  margin-bottom: 1.5em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Colored top border matches the HTTP method, provides an instant visual
 * cue about the endpoint type even when scrolling quickly. Colors match
 * the method badge colors above. */
.endpoint-card--get {
  border-top: 3px solid #16a34a;
}
.endpoint-card--post {
  border-top: 3px solid #2563eb;
}
.endpoint-card--put {
  border-top: 3px solid #ea580c;
}
.endpoint-card--patch {
  border-top: 3px solid #9333ea;
}
.endpoint-card--delete {
  border-top: 3px solid #dc2626;
}

/* ==========================================================================
 * STATUS CODE BADGES: Colored pills in response tables
 * ========================================================================== */

/* Applied by extra.js section 4 to <code> elements in the "Status" column
 * of response tables. !important is needed to override MkDocs Material's
 * default <code> background/color styling. */

/* 2xx success: green pill */
.status-badge--success {
  background: #dcfce7 !important;
  color: #166534 !important;
  padding: 0.15em 0.5em;
  border-radius: 10px;
  font-weight: 600;
}

/* 4xx client error: amber pill */
.status-badge--client-error {
  background: #fef3c7 !important;
  color: #92400e !important;
  padding: 0.15em 0.5em;
  border-radius: 10px;
  font-weight: 600;
}

/* 5xx server error: red pill */
.status-badge--server-error {
  background: #fee2e2 !important;
  color: #991b1b !important;
  padding: 0.15em 0.5em;
  border-radius: 10px;
  font-weight: 600;
}

/* ==========================================================================
 * REQUIRED / OPTIONAL FIELD BADGES: Pills in parameter & body tables
 * ========================================================================== */

/* Applied by extra.js section 5. The "Required" column in parameter and
 * request body tables gets its text replaced with styled pill badges.
 * Much easier to scan than plain "Required" / empty text. */

/* Red pill: field must be provided */
.required-badge {
  display: inline-block;
  background: #fee2e2;
  color: #991b1b;
  font-size: 0.8em;
  font-weight: 600;
  padding: 0.1em 0.5em;
  border-radius: 10px;
  white-space: nowrap;
}

/* Gray pill: field can be omitted */
.optional-badge {
  display: inline-block;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.8em;
  font-weight: 600;
  padding: 0.1em 0.5em;
  border-radius: 10px;
  white-space: nowrap;
}

/* ==========================================================================
 * SCHEMA CARDS: Gray containers for schema definitions
 * ========================================================================== */

/* Created by extra.js section 6. Schema definitions (e.g. CreateRequestBody,
 * Signer) are wrapped in gray cards to visually separate them from endpoint
 * cards and signal "these are reusable data types, not endpoints". */
.schema-card {
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.5em 1.5em 1em;
  margin-bottom: 1.5em;
}

/* Schema names are rendered in monospace to reinforce that they're
 * programmatic type names (matching how they appear in JSON payloads). */
.schema-card h3 {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* "Used by" line below each schema, shows which endpoints reference it.
 * Rendered by schema_object.md.j2 as:
 *   <p class="schema-used-by">Used by: <a href="#create-request">Create request</a></p> */
.schema-used-by {
  font-size: 0.85em;
  color: #64748b;
  margin-top: 0.5em;
}

.schema-used-by a {
  color: var(--md-accent-fg-color);
  text-decoration: none;
}

.schema-used-by a:hover {
  text-decoration: underline;
}

/* ==========================================================================
 * TABLE ENHANCEMENTS: Dark headers, zebra stripes, compact layout
 * ========================================================================== */

/* Override MkDocs Material's default light-gray table headers with the brand
 * dark purple. Two selectors cover both plain Markdown tables (table:not([class]))
 * and Material's wrapped tables (.md-typeset__table). */
.md-typeset table:not([class]) thead th,
.md-typeset .md-typeset__table table thead th {
  background: var(--md-primary-fg-color);
  color: #fff;
  font-weight: 600;
  padding: 0.6em 1em;
}

/* Zebra striping on even rows for easier horizontal scanning across
 * wide tables (Type, Required, Description columns can be far apart). */
.md-typeset table:not([class]) tbody tr:nth-child(even),
.md-typeset .md-typeset__table table tbody tr:nth-child(even) {
  background: #f8fafc;
}

/* Consistent cell padding across all tables. */
.md-typeset table:not([class]) td,
.md-typeset .md-typeset__table table td {
  padding: 0.5em 1em;
}

/* Prevent the first column (field names, parameter names, status codes)
 * from wrapping. These are short identifiers that look broken if split
 * across lines. */
.md-typeset table:not([class]) td:first-child,
.md-typeset .md-typeset__table table td:first-child {
  white-space: nowrap;
}

/* Prevent inline code inside table cells from breaking mid-word.
 * Values like `2025-01-15T14:30:00+00:00` or `string (date-time) | null`
 * should stay on a single line. */
.md-typeset table:not([class]) td code,
.md-typeset .md-typeset__table table td code {
  white-space: nowrap;
}

/* ==========================================================================
 * LANDING PAGE: Hero, prose intro, and documentation structure
 * ========================================================================== */

.hero {
  max-width: 48rem;
  margin: 4rem auto 2rem;
  padding: 0 1rem;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero h1 .headerlink {
  display: none;
}

.hero p {
  font-size: 1.15rem;
  color: #64748b;
  margin-bottom: 0;
}

/* Compact hero variant: less vertical space, smaller title */
.hero--compact {
  margin: 2rem auto 1rem;
}

.hero--compact h1 {
  font-size: 2rem;
}

/* Prose introduction below the hero */
.landing-prose {
  max-width: 48rem;
  margin: 0 auto 2rem;
  padding: 0 1rem;
  color: #64748b;
  line-height: 1.7;
}

.landing-prose p {
  margin-bottom: 0.75rem;
}

/* Scale down hero text and spacing on small screens to prevent
 * "Documentation" from overflowing on 320 px viewports. */
@media (max-width: 600px) {
  .hero {
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .hero--compact h1 {
    font-size: 1.5rem;
  }

  .hero p {
    font-size: 1rem;
  }
}

/* ==========================================================================
 * QUICK LINKS: Card row between prose intro and documentation structure
 * ========================================================================== */

.quick-links {
  max-width: 48rem;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

.quick-links__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.quick-link {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem 1.15rem;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.quick-link:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.quick-link h3 {
  font-size: 0.95rem;
  margin: 0 0 0.4rem;
}

.quick-link h3 .headerlink {
  display: none;
}

/* Stretch the h3 link to cover the entire card, making it fully clickable. */
.quick-link h3 a {
  text-decoration: none;
  color: inherit;
}

.quick-link h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.quick-link > p {
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
  flex-grow: 1;
}

.quick-link__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.quick-link-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15em 0.55em;
  border-radius: 10px;
  line-height: 1.4;
  white-space: nowrap;
}

.quick-link-tag--comprendre {
  background: #dbeafe;
  color: #1e40af;
}
.quick-link-tag--demarrer {
  background: #fef3c7;
  color: #92400e;
}

.quick-link-tag--integrer {
  background: #dcfce7;
  color: #166534;
}

@media (max-width: 600px) {
  .quick-links__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
 * 404 PAGE: Centered error message with icon and back link
 * ========================================================================== */

.not-found {
  text-align: center;
  max-width: 32rem;
  margin: 6rem auto;
  padding: 0 1rem;
}

.not-found__icon {
  color: var(--md-accent-fg-color);
  margin-bottom: 1rem;
}

.not-found__icon svg {
  width: 4rem;
  height: 4rem;
}

.not-found__title {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 0.5rem;
  color: var(--md-primary-fg-color);
}

.not-found__message {
  font-size: 1.15rem;
  color: #64748b;
  margin-bottom: 2rem;
}

.md-typeset .not-found__link {
  display: inline-block;
  background: var(--md-accent-fg-color);
  color: #fff;
  font-weight: 600;
  padding: 0.6em 1.5em;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.md-typeset .not-found__link:hover,
.md-typeset .not-found__link:focus {
  color: #fff;
  opacity: 0.85;
}

/* ==========================================================================
 * CONTENT FOOTER: Wrapper for related links + prev/next
 * ========================================================================== */

.md-content-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

/* ==========================================================================
 * CONTENT: "Voir aussi" related-page links (end of article)
 * ========================================================================== */

.md-content-related {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

.md-content-related__title {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.md-content-related__list {
  list-style: disc;
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.md-content-related__list a {
  color: var(--md-typeset-a-color);
}

.md-content-related__list a:hover {
  color: var(--md-accent-fg-color);
}

/* ==========================================================================
 * CONTENT: Prev/next navigation (end of article)
 * ========================================================================== */

.md-content-prevnext {
  display: flex;
  margin-top: 1rem;
}

.md-typeset .md-content-prevnext__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 45%;
  padding: 0.6rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-decoration: none;
  color: var(--md-default-fg-color);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.md-typeset .md-content-prevnext__link:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

.md-content-prevnext__link--next {
  margin-left: auto;
}

.md-content-prevnext__link--next .md-content-prevnext__text {
  text-align: right;
}

.md-content-prevnext__chevron {
  font-size: 1.5rem;
  line-height: 1;
  color: #94a3b8;
  flex-shrink: 0;
}

.md-content-prevnext__link:hover .md-content-prevnext__chevron {
  color: var(--md-accent-fg-color);
}

.md-content-prevnext__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.md-content-prevnext__direction {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.md-content-prevnext__title {
  font-size: 0.85rem;
  font-weight: 600;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}