/* GRIP: het designsysteem in css (B-079, feature #15714). Vier bestanden in vaste lagen, elk alleen op de tokens uit
   tokens.css (gegenereerd uit src/UI/Design/tokens.json):
   - basis.css: de reset, de letter, de schil (zijbalk en werkblad), de focus;
   - componenten.css: knop, chip, stand, groep, regel, veld, venster, en de bouwstenen van de Linear-vorm (#15817);
   - schermen.css: wat bij één scherm hoort (Mijn werk, dossier, planning, Vandaag, Inbox, vastleggen);
   - telefoon.css: de telefoon, tot en met 720 px en buiten AFAS InSite (B-074, B-080 punt 1).
   Regels: geen kleur buiten de tokens, de letter per rol (font: var(--rol-…)), één breedtegrens (720 px), het paarse accent
   alleen voor de ene volgende stap, status als stip plus woord. Een stijltest in test/Api.Tests bewaakt dit. De keuzes en de
   catalogus staan in de vault: projects/grip/04-ux/grip-designsysteem.md (B-079, B-080, B-081, B-095). */

/* Inter, de letter van het referentiebeeld (B-095, B-097): lokaal geleverd uit fonts/, geen CDN. Eén variabel bestand
   voor alle gewichten; zolang het laadt staat de systeemletter er (swap). Licentie: fonts/Inter-LICENSE.txt (SIL OFL 1.1). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

@layer basis, componenten, schermen, telefoon;

@layer basis {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body { font: var(--rol-tekst); }
    body {
        /* viewport-fit=cover (#15264): in liggende stand blijft de inhoud uit de inkeping. */
        padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
        background: var(--vlak-achtergrond);
        color: var(--tekst);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        letter-spacing: -.003em;
    }
    h1, h2, h3, h4, h5, h6 { font: var(--rol-kop); color: var(--tekst); }
    /* Links grijs, zoals Linear (B-097, #15817): onderstreept bij hover; in lopende tekst altijd onderstreept. */
    a { color: var(--tekst-link); text-decoration: none; }
    a:hover { text-decoration: underline; text-underline-offset: 2px; }
    :is(p, li, dd) > a:not([class]) { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--lijn-hover); }
    button, input, select, textarea { font: inherit; color: inherit; }
    /* Cijfers van gelijke breedte (B-080, 20 A): uren en datums lijnen uit. */
    table, .getal { font-variant-numeric: tabular-nums; }

    /* De focusring: 2 px in het paarse accent (B-079, B-095). */
    :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    :focus:not(:focus-visible) { outline: none; }

    .visually-hidden {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .text-caption { font: var(--rol-klein); color: var(--tekst-zacht); }
    .text-body-sm { font: var(--rol-klein); }
    .tekst-bewaard { white-space: pre-wrap; overflow-wrap: anywhere; }
    .opvuller { flex: 1 1 auto; }

    /* ── De schil: de zijbalk op de getinte rand, de groepen wit (B-080, 22 B) ── */
    .skip-link {
        position: fixed; top: var(--ruimte-2); left: var(--ruimte-2); z-index: 2000;
        padding: var(--ruimte-2) var(--ruimte-4); border-radius: var(--hoek-rond);
        background: var(--nadruk); color: var(--tekst-op-donker); font-weight: 600;
        transform: translateY(-160%); transition: transform var(--duur-kort) var(--beweging-standaard);
    }
    .skip-link:focus { transform: none; }

    /* 100dvh (#15264): 100vh is op de telefoon de hoogte zonder browserbalken. */
    .app-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
    .app-main { flex: 1; min-width: 0; height: 100%; overflow-y: auto; }
    /* Het werkblad (B-095, B-097, #15817): op de laptop wit, met een lijn, een hoek van 10 px en 8 px marge op het grijze
       canvas, zoals het referentiebeeld. Bovenaan staat de schermbalk van het scherm. In InSite zonder marge. */
    @media (min-width: 721px) {
        .app-main {
            height: calc(100% - 2 * var(--ruimte-2)); margin: var(--ruimte-2) var(--ruimte-2) var(--ruimte-2) 0;
            border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-groep); background: var(--vlak-blad);
            box-shadow: var(--schaduw-uitklap);
        }
    }
    html.embedded .app-main { height: 100%; margin: 0; border: 0; border-left: var(--lijn-dikte) solid var(--lijn); border-radius: 0; background: var(--vlak-blad); box-shadow: none; }
    .app-main:focus { outline: none; }
    .app-page { padding: var(--ruimte-6) var(--marge) var(--ruimte-12); }
    /* Het werkblad is een container (#15975): een scherm reageert op zijn eigen breedte, ook als het paneel van Rixsi
       het smaller maakt. */
    .content-bounded { width: 100%; max-width: var(--blad); margin-inline: auto; container: werkblad / inline-size; }

    /* De zijbalk in de Linear-vorm (#15832, B-097), zoals demo-linear-paars: 236 px op het canvas, regels van 28 px, de
       letter van 13 px, iconen van 16 px in een dunne lijn, grijs voor actief en hover. Geen paars: dat is de hoofdactie. */
    .sidebar {
        width: var(--zijbalk); flex-shrink: 0;
        display: flex; flex-direction: column; gap: 1px;
        height: 100%; overflow-y: auto;
        padding: 10px var(--ruimte-2);
    }
    /* Een zijbalk die scrolt, krimpt geen regel (#16216): anders werd een sectieknop van 28 px er 16 zodra de projecten niet
       meer pasten, te klein om aan te tikken (WCAG 2.2, 2.5.8). */
    .sidebar > * { flex-shrink: 0; }
    .sidebar .icon { width: 16px; height: 16px; flex: none; stroke-width: 1.5; color: var(--tekst-zacht); }

    /* Alleen buiten AFAS InSite, zoals Afmelden (#15077). */
    html.embedded .alleen-los { display: none; }

    /* In AFAS InSite (een iframe): een omkaderde module op de InSite-pagina. Schaduw verdwijnt daar op wit, dus de
       achtergrond binnen het kader blijft getint (22 B, *Tegen*). */
    html.embedded body { padding: 6px; background: var(--vlak-blad); }
    html.embedded .app-shell {
        height: calc(100vh - 12px); height: calc(100dvh - 12px);
        border: 1px solid var(--lijn-sterk); border-radius: var(--hoek-groep); background: var(--vlak-achtergrond); overflow: hidden;
    }
    html.embedded .app-page { padding: var(--ruimte-4) var(--ruimte-6) var(--ruimte-8); }

    /* Smal scherm in InSite: het menu boven de inhoud, de pagina scrolt als geheel. Buiten InSite regelt telefoon.css het. */
    @media (max-width: 720px) {
        html.embedded .app-shell { flex-direction: column; height: auto; overflow: visible; }
        html.embedded .sidebar { width: 100%; height: auto; overflow: visible; }
        html.embedded .app-main { height: auto; }
    }

    @media (prefers-reduced-motion: reduce) {
        .sidebar-item, .skip-link, .sidebar .sidebar-sectie .icon { transition: none; }
        .icon.is-bezig { animation: none; }
    }

    #blazor-error-ui {
        display: none; position: fixed; left: 0; bottom: 0; z-index: 1000; width: 100%;
        padding: var(--ruimte-3) var(--ruimte-6); background: var(--fout-zacht); color: var(--tekst);
        box-shadow: var(--schaduw-venster);
    }
    #blazor-error-ui .dismiss { position: absolute; right: var(--ruimte-3); top: var(--ruimte-2); cursor: pointer; }
}