/*
 * Opmaak van de Help-pagina (App\Filament\Pages\Help): de kolomindeling en de
 * leesopmaak van het handboek. De HTML komt uit markdown en heeft dus geen
 * eigen klassen: vandaar dat hier op elementen wordt gestyled, binnen
 * `.qontrol-handbook`.
 *
 * Bewust een los CSS-bestand (geen Vite-thema): de productieserver bouwt geen
 * frontend-assets; publicatie loopt via `filament:assets` bij elke deploy.
 *
 * Het bestand is een asset van het beheerpaneel (AdminPanelProvider) en staat
 * dus altijd naast het thema van dat paneel. Lettergrootte, gewicht, radius
 * en de kleur van een link komen daarom uit de tokens van qontrol.css: de
 * vier tekstmaten, de drie gewichten, --radius-knop en --accent-text. De
 * koppen van het handboek volgen dezelfde schaal: h1 is de titel, h2 en h3
 * de kop (h2 met een lijn eronder), h4 gewone tekst in het nadrukgewicht.
 * VormArchitectuurTest bewaakt dat hier geen andere maat of ander gewicht
 * staat.
 */

/* Drie kolommen: hoofdstukken, tekst, inhoudsopgave. Onder 1280px vallen de
   inhoudsopgave en daarna het zijmenu boven de tekst. */
.qontrol-help {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr) 15rem;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1280px) {
    .qontrol-help {
        grid-template-columns: 17rem minmax(0, 1fr);
    }

    .qontrol-help-toc {
        display: none;
    }
}

@media (max-width: 900px) {
    .qontrol-help {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* De lijst hoofdstukken links schuift met de pagina mee. Ze is langer dan
   een venster (ruim 1100 pixels), dus in een eigen vak met een schuifbalk
   was meer dan de helft van de hoofdstukken alleen te bereiken door binnen
   het menu te schuiven; de eigenaar wil in een menu geen schuifbalk zien.
   De inhoudsopgave rechts is kort en blijft staan tijdens het lezen; is ze
   op een laag venster toch te lang, dan schuift ze zonder zichtbare balk. */
@media (min-width: 901px) {
    .qontrol-help-toc {
        position: sticky;
        top: 5rem;
    }

    .qontrol-help-toc .fi-section-content {
        max-height: calc(100vh - 9rem);
        overflow-y: auto;
        scrollbar-width: none;
    }
}

.qontrol-help-part {
    margin-top: 1rem;
    font-size: var(--tekst-klein);
    font-weight: var(--gewicht-nadruk);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.qontrol-help-part:first-child {
    margin-top: 0;
}

.qontrol-help-chapters {
    margin-top: 0.25rem;
}

.qontrol-help-chapters button,
.qontrol-help-results button,
.qontrol-help-toc a {
    display: block;
    width: 100%;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-knop);
    text-align: start;
    font-size: var(--tekst);
    line-height: 1.25rem;
}

.qontrol-help-chapters button:hover,
.qontrol-help-results button:hover,
.qontrol-help-toc a:hover {
    background-color: rgb(128 128 128 / 0.1);
}

.qontrol-help-chapters .qontrol-help-current {
    background-color: var(--accent-soft);
    font-weight: var(--gewicht-nadruk);
}

.qontrol-help-number {
    display: inline-block;
    min-width: 1.25rem;
    opacity: 0.5;
    font-variant-numeric: tabular-nums;
}

.qontrol-help-results {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.qontrol-help-results-title {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: var(--gewicht-nadruk);
}

.qontrol-help-results-count,
.qontrol-help-results-excerpt {
    font-weight: var(--gewicht);
    opacity: 0.6;
}

.qontrol-help-results-excerpt {
    display: block;
    font-size: var(--tekst-klein);
    line-height: 1.1rem;
}

.qontrol-help-empty {
    margin-top: 0.75rem;
    font-size: var(--tekst);
    opacity: 0.7;
}

.qontrol-help-toc ul {
    margin-top: 0.25rem;
}

.qontrol-help-toc-sub a {
    padding-inline-start: 1.25rem;
    opacity: 0.75;
}

/* De doorverwijzing in het "?"-venster moet er als link uitzien: het is de
   enige klikbare regel daar. De kleur is de accenttekst van het thema, die in
   beide modi 4,5 op 1 haalt en met het accent van de gebruiker meegaat. */
.qontrol-help-more {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.qontrol-help-more:hover {
    color: var(--ink);
}

/* De "?"-knop rechtsboven in het paneel heeft geen eigen opmaak meer: hij is
   sinds 10 augustus 2026 Filaments eigen icoonknop (zie
   resources/views/filament/help/topbar-link.blade.php) en volgt daarmee vanzelf
   de maat, kleur en hover van de knoppen ernaast. */

/* --- Leesopmaak van het handboek zelf ------------------------------------ */

.qontrol-handbook {
    max-width: 60rem;
    font-size: var(--tekst);
    line-height: 1.7;
}

.qontrol-handbook > :first-child {
    margin-top: 0;
}

.qontrol-handbook h1 {
    font-size: var(--tekst-titel);
    font-weight: var(--gewicht-titel);
    margin-block: 1.5rem 0.75rem;
}

.qontrol-handbook h2 {
    font-size: var(--tekst-kop);
    font-weight: var(--gewicht-nadruk);
    margin-block: 2rem 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgb(128 128 128 / 0.2);
}

.qontrol-handbook h3 {
    font-size: var(--tekst-kop);
    font-weight: var(--gewicht-nadruk);
    margin-block: 1.5rem 0.5rem;
}

.qontrol-handbook h4 {
    font-size: var(--tekst);
    font-weight: var(--gewicht-nadruk);
    margin-block: 1.25rem 0.5rem;
}

/* Een anker mag niet onder de vaste kopregel van het paneel verdwijnen. */
.qontrol-handbook :is(h1, h2, h3, h4)[id] {
    scroll-margin-top: 6rem;
}

.qontrol-handbook p,
.qontrol-handbook ul,
.qontrol-handbook ol,
.qontrol-handbook table,
.qontrol-handbook blockquote,
.qontrol-handbook pre {
    margin-block: 0.75rem;
}

.qontrol-handbook ul,
.qontrol-handbook ol {
    padding-inline-start: 1.5rem;
}

.qontrol-handbook ul {
    list-style: disc;
}

.qontrol-handbook ol {
    list-style: decimal;
}

.qontrol-handbook li {
    margin-block: 0.25rem;
}

/* Een link in het handboek stond in de lichte modus op 2,94 op 1. Hij
   gebruikt de accenttekst van het thema (ThemaBronTest rekent die na op elk
   vlak, voor elk accent en in beide modi). */
.qontrol-handbook a {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Verwijzingen naar ontwikkeldocumentatie zijn in het paneel niet te openen
   en worden daarom als gewone tekst getoond (zie Handbook::rewriteLinks). */
.qontrol-handbook a.qontrol-handbook-plain {
    color: inherit;
    text-decoration: none;
}

.qontrol-handbook strong {
    font-weight: var(--gewicht-nadruk);
}

.qontrol-handbook code {
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    background-color: rgb(128 128 128 / 0.14);
    font-size: var(--tekst-klein);
}

.qontrol-handbook pre {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-knop);
    background-color: rgb(128 128 128 / 0.12);
    overflow-x: auto;
}

.qontrol-handbook pre code {
    padding: 0;
    background: none;
}

.qontrol-handbook blockquote {
    padding: 0.5rem 1rem;
    border-inline-start: 3px solid rgb(255 169 0 / 0.7);
    background-color: rgb(255 169 0 / 0.07);
    border-radius: 0 var(--radius-knop) var(--radius-knop) 0;
}

.qontrol-handbook blockquote > :first-child {
    margin-top: 0;
}

.qontrol-handbook blockquote > :last-child {
    margin-bottom: 0;
}

.qontrol-handbook table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tekst);
    display: block;
    overflow-x: auto;
}

.qontrol-handbook th,
.qontrol-handbook td {
    padding: 0.4rem 0.75rem;
    border: 1px solid rgb(128 128 128 / 0.22);
    text-align: start;
    vertical-align: top;
}

.qontrol-handbook th {
    font-weight: var(--gewicht-nadruk);
    background-color: rgb(128 128 128 / 0.08);
}

.qontrol-handbook hr {
    margin-block: 1.5rem;
    border-top: 1px solid rgb(128 128 128 / 0.2);
}