/* Documentation-specific styles */

/* Layout */
.docs-layout {
    min-height: calc(100vh - 4rem);
}

@media (min-width: 64rem) {
    .docs-shell-row {
        min-height: calc(100dvh - 4rem);
    }
}

@media (min-width: 80rem) {
    .docs-content-row {
        min-height: calc(100dvh - 4rem);
    }
}

/* Prose overrides for dark theme */
.docs-prose {
    --tw-prose-headings: oklch(94% 0.01 260);
    --tw-prose-body: oklch(85% 0.01 260);
    --tw-prose-links: oklch(45% 0.12 250);
    --tw-prose-bold: oklch(94% 0.01 260);
    --tw-prose-code: oklch(90% 0.01 260);
    --tw-prose-pre-bg: oklch(10% 0.02 260);
    --tw-prose-pre-code: oklch(85% 0.01 260);
    --tw-prose-th-borders: oklch(30% 0.03 260);
    --tw-prose-td-borders: oklch(22% 0.03 260);
}

.docs-prose a {
    /* Brightened avionics-blue so inline links clear WCAG AA (4.5:1) on the
       navy field — the prior 55% read at ~4.18:1. Same hue, lighter value. */
    color: oklch(66% 0.15 250);
    text-decoration: none;
    transition: color 0.2s ease;
}

.docs-prose a:hover {
    color: oklch(78% 0.13 250);
    text-decoration: underline;
}

/* Compact bullet lists inside table cells */
.docs-prose td ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.docs-prose td li {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

/* Figures and images */
.docs-prose figure {
    margin: 1.5rem 0;
    text-align: center;
}

.docs-prose figure img {
    border-radius: 0.5rem;
    border: 1px solid oklch(25% 0.03 260);
    max-width: 100%;
    height: auto;
}

.docs-prose figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: oklch(60% 0.01 260);
    font-style: italic;
}

/* Details/summary (FAQ, troubleshooting) */
.docs-prose details {
    margin: 0.75rem 0;
    border: 1px solid oklch(25% 0.03 260);
    border-radius: 0.5rem;
    overflow: hidden;
}

.docs-prose details summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: oklch(16% 0.025 260);
    font-weight: 500;
    transition: background 0.2s ease;
}

.docs-prose details summary:hover {
    background: oklch(20% 0.03 260);
}

.docs-prose details[open] summary {
    border-bottom: 1px solid oklch(25% 0.03 260);
}

.docs-prose details > *:not(summary) {
    padding: 0 1rem;
}

/* Admonitions */
.docs-prose .admonition {
    border-left: 4px solid oklch(45% 0.12 250);
    background: oklch(14% 0.02 260);
    padding: 1rem 1.25rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin: 1.5rem 0;
}

.docs-prose .admonition-title {
    font-weight: 600;
    color: oklch(55% 0.15 250);
    margin-bottom: 0.5rem;
}

.docs-prose .admonition.warning {
    border-left-color: oklch(66% 0.179 58.318);
}

.docs-prose .admonition.warning .admonition-title {
    color: oklch(66% 0.179 58.318);
}

.docs-prose .admonition.danger {
    border-left-color: oklch(59% 0.249 0.584);
}

.docs-prose .admonition.danger .admonition-title {
    color: oklch(59% 0.249 0.584);
}

/* TOC right sidebar */
.docs-toc-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.docs-toc-content li {
    margin: 0;
    padding: 0;
}

.docs-toc-content a {
    display: block;
    padding: 0.25rem 0;
    color: oklch(60% 0.01 260);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.5;
    border-left: 2px solid transparent;
    padding-left: 0.75rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.docs-toc-content a:hover {
    color: oklch(55% 0.15 250);
    border-left-color: oklch(55% 0.15 250);
}

.docs-toc-content ul ul {
    padding-left: 0.75rem;
}

/* Permalink anchors */
.docs-prose .headerlink {
    color: oklch(40% 0.1 250);
    text-decoration: none;
    margin-left: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    font-size: 0.875em;
}

.docs-prose h1:hover .headerlink,
.docs-prose h2:hover .headerlink,
.docs-prose h3:hover .headerlink,
.docs-prose h4:hover .headerlink {
    opacity: 1;
}

/* Search modal — top-aligned using DaisyUI modal */
.docs-search-dialog {
    align-items: flex-start;
    padding-top: 10vh;
}

/* Stronger backdrop for dark theme */
.docs-search-dialog[open] {
    background-color: oklch(0% 0 0 / 0.7);
}

#docs-search-modal .ais-SearchBox-form {
    display: flex;
    width: 100%;
}

#docs-search-modal .ais-SearchBox-input {
    flex: 1;
    padding: 0 0.5rem;
}

#docs-search-modal .ais-SearchBox-submit,
#docs-search-modal .ais-SearchBox-reset {
    display: none;
}

#docs-search-modal .ais-Hits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.docs-search-result {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.docs-search-result:hover,
.docs-search-result.active {
    background: oklch(20% 0.03 260);
}

.docs-search-section {
    font-size: 0.75rem;
    color: oklch(55% 0.01 260);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.125rem;
}

.docs-search-title {
    font-weight: 600;
    color: oklch(94% 0.01 260);
}

.docs-search-snippet {
    font-size: 0.8125rem;
    color: oklch(70% 0.01 260);
    line-height: 1.4;
    margin-top: 0.25rem;
}

#docs-search-modal mark,
#docs-search-modal .ais-Highlight-highlighted,
#docs-search-modal .ais-Snippet-highlighted {
    background: oklch(45% 0.12 250 / 0.3);
    color: oklch(94% 0.01 260);
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
}

/* Nav group auto-open for active sections */
.docs-nav-group[open] > summary {
    margin-bottom: 0;
}

/* ============================================================================
   Components rendered from runtime markdown (renderer.py) — Tailwind's @source
   scan never sees this HTML, so the daisyUI .tabs/.tab/.table* utilities are
   purged from output.css. Style them here (a plain served stylesheet) so they
   are build-proof and apply to every current AND future aircraft page with no
   per-page work. Keep this in lockstep with renderer.py's emitted classes.
   ============================================================================ */

/* Aircraft sub-navigation: Overview / Commands / Status Queries */
.docs-prose .tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 1.5rem 0;
    padding: 0.25rem;
    background: oklch(16% 0.025 260);      /* base-200 console navy */
    border: 1px solid oklch(22% 0.03 260); /* base-300 bezel navy */
    border-radius: 0.375rem;
}

.docs-prose .tabs a {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    color: oklch(72% 0.02 260);            /* muted readout, ~6:1 on the bezel */
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.docs-prose .tabs a:hover {
    color: oklch(94% 0.01 260);
    background: oklch(94% 0.01 260 / 0.06);
    text-decoration: none;
}

.docs-prose .tabs a.tab-active,
.docs-prose .tabs a.tab-active:hover {
    color: oklch(98% 0.01 250);            /* near-white on accent ≈ 7.4:1 */
    background: oklch(45% 0.12 250);       /* avionics-blue accent fill */
    font-weight: 600;
}

/* Command / status reference tables: zebra striping + a clear header. (We
   intentionally do not pin the header row — these tables sit inside an
   overflow-x wrapper on the page scroll, where a sticky <th> can't anchor
   reliably; zebra striping carries scanability on the long command tables.) */
.docs-prose table.table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
}

.docs-prose table.table thead th {
    background: oklch(18% 0.025 260);
    color: oklch(94% 0.01 260);
    font-weight: 600;
    text-align: left;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid oklch(30% 0.03 260);
}

.docs-prose table.table tbody td {
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid oklch(22% 0.03 260);
    vertical-align: top;
}

.docs-prose table.table tbody tr:nth-child(even) {
    background: oklch(94% 0.01 260 / 0.03);
}

.docs-prose table.table tbody tr:hover {
    background: oklch(45% 0.12 250 / 0.08);
}

/* Active sidebar item: keep the "lit accent" identity but at a legible
   brightness — the 45% accent text on accent/10 measured ~2.5:1. Scoped to
   docs (this stylesheet only loads on /docs/). */
.menu a.active {
    color: oklch(74% 0.13 250);
    background-color: oklch(45% 0.12 250 / 0.16);
}

/* Cap text measure (~70ch) for readability; tables, figures and the tab bar
   still break out to the full content column. */
.docs-prose p,
.docs-prose ul,
.docs-prose ol,
.docs-prose blockquote {
    max-width: 72ch;
}

.docs-prose td ul,
.docs-prose td ol {
    max-width: none;
}

/* Breadcrumb is sticky only on large screens; on mobile, navbar + menu bar +
   breadcrumb stacked to ~21% of the viewport. */
@media (max-width: 63.999rem) {
    .docs-breadcrumb-bar {
        position: static;
    }
}

/* Honor reduced-motion for the transitions defined in this stylesheet. */
@media (prefers-reduced-motion: reduce) {
    .docs-prose a,
    .docs-prose .tabs a,
    .docs-prose details summary,
    .docs-toc-content a,
    .docs-search-result,
    .menu a.active {
        transition: none;
    }
}

/* --- More generated-overview components (renderer.py emits daisyUI classes
   that Tailwind purges; styled here for the same reason as the tabs/tables) --- */

/* Sim / aircraft pills (badge badge-outline). */
.docs-prose .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: oklch(80% 0.02 260);
    background: transparent;
    border: 1px solid oklch(30% 0.03 260);
    border-radius: 0.375rem;
}

/* Commands / Status-Queries count panel (stats stats-vertical lg:stats-horizontal):
   vertical stack on small screens, a divided row from lg up. */
.docs-prose .stats {
    display: flex;
    flex-direction: column;
    margin: 1.5rem 0;
    background: oklch(16% 0.025 260);
    border: 1px solid oklch(22% 0.03 260);
    border-radius: 0.375rem;
    overflow: hidden;
}

.docs-prose .stat {
    padding: 0.875rem 1.25rem;
}

.docs-prose .stat + .stat {
    border-top: 1px solid oklch(22% 0.03 260);
}

.docs-prose .stat-title {
    font-size: 0.8125rem;
    color: oklch(72% 0.02 260);
    margin-bottom: 0.15rem;
}

.docs-prose .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: oklch(94% 0.01 260);
}

@media (min-width: 64rem) {
    .docs-prose .stats {
        flex-direction: row;
    }

    .docs-prose .stat {
        flex: 1;
    }

    .docs-prose .stat + .stat {
        border-top: 0;
        border-left: 1px solid oklch(22% 0.03 260);
    }
}

/* Info note (alert alert-info) — e.g. the MSFS coverage note. Layout is set
   here too so it does not depend on daisyUI's .alert surviving the purge. */
.docs-prose .alert {
    display: flex;
    gap: 0.6rem;
    margin: 1.5rem 0;
    padding: 0.875rem 1.1rem;
    border-radius: 0.375rem;
}

.docs-prose .alert-info {
    background: oklch(45% 0.12 250 / 0.12);
    border: 1px solid oklch(45% 0.12 250 / 0.4);
    color: oklch(88% 0.04 250);
}