.window-navigatie[data-menu-pad] .window-navigatie-pulldown{top:100%;max-width:calc(100vw - 32px);min-width:min(210px,calc(100vw - 32px));overflow:auto;box-sizing:border-box}
.window-navigatie-pulldown summary{padding:8px 10px;cursor:pointer;min-height:34px;box-sizing:border-box;color:#111;font-weight:normal}
.window-navigatie-pulldown details>div{padding-left:12px}
.window-navigatie[data-menu-pad] .window-navigatie-pulldown a{white-space:normal}
/* Volledige menupaden mogen op smalle schermen doorlopen op een volgende regel. */
.applicatie-titelbalk:has(.window-navigatie[data-menu-pad]){height:auto;flex-basis:auto}
.window-navigatie[data-menu-pad]{flex-wrap:wrap;height:auto}
.window-navigatie[data-menu-pad] .window-navigatie-niveau{max-width:100%;height:auto;min-height:32px}
.window-navigatie[data-menu-pad] .window-navigatie-tekst{min-width:0;height:auto;min-height:32px;white-space:normal;overflow-wrap:anywhere}

/*=========================================================
  CENTRALE INSTELLINGEN
=========================================================*/

:root {

    /* Hoogte van de taakbalk onderaan */
    --taakbalk-hoogte: 48px;

    /* Hoogte van de titelbalk van een window */
    --titelbalk-hoogte: 44px;
    --venster-titelachtergrond: linear-gradient(to bottom,#f5f5f5 0%,#dddddd 45%,#bcbcbc 100%);

    /* Ruimte tussen window en rand van bureaublad */
    --window-afstand: 20px;
}


/*=========================================================
  ALGEMENE BOX-SIZING
=========================================================*/

*,
*::before,
*::after {

    box-sizing: border-box;
}


/*=========================================================
  HTML
=========================================================*/

html {

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #000000;
}


/*=========================================================
  BUREAUBLAD

  De achtergrond staat op BODY en blijft altijd over het
  volledige scherm aanwezig.

  Het applicatiewindow wordt hier later bovenop geplaatst.

  Daardoor blijft Achtergronden/Standaard.jpg zichtbaar:
  - links van het window;
  - rechts van het window;
  - boven het window;
  - onder het window;
  - wanneer het window wordt geminimaliseerd.
=========================================================*/

body {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 0;

    overflow: hidden;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color: #222222;

    background-color: #000000;

    background-image:
        url('/achtergrond.php');

    background-size: cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    background-attachment:
        fixed;
}


.bureaublad-uitlogtimer { align-self:flex-end; max-width:100%; margin:0; font:12px/1.4 "Segoe UI",Arial,sans-serif; font-variant-numeric:tabular-nums; text-align:right; overflow-wrap:anywhere; pointer-events:none; }
.bureaublad-uitlogtimer[hidden] { display:none; }

.systeem-pagina { width:min(100%,800px); margin:0 auto; text-align:center; color:#23465e; }
.systeem-afbeelding { display:block; width:min(100%,280px); max-height:220px; object-fit:contain; margin:0 auto 20px; }
.systeem-pagina:has([data-gebruikersoverzicht]) { width:min(100%,1100px); }
.gebruikersoverzicht { margin-top:24px; text-align:left; }
.gebruikers-zoeken { display:block; max-width:480px; font-weight:600; }
.gebruikers-zoeken input { display:block; width:100%; padding:10px 12px; min-height:44px; margin-top:8px; border:1px solid #91a9b7; border-radius:8px; font:inherit; }
.gebruikers-aantal { margin:12px 0; font-size:14px; }
.gebruikers-tabelvak { overflow:auto; border:1px solid #bbcdd7; border-radius:10px; }
.gebruikers-tabel { width:100%; min-width:650px; border-collapse:collapse; font-size:14px; }
.gebruikers-tabel th { background:#203f50; color:#fff0b9; text-align:left; }
.gebruikers-tabel th,.gebruikers-tabel td { padding:12px; border-bottom:1px solid #d7e0e6; vertical-align:middle; }
.gebruikers-tabel td:first-child,.gebruikers-tabel td:nth-child(2) { overflow-wrap:anywhere; max-width:260px; }
.gebruikers-tabel tbody tr:nth-child(even) { background:#f3f7f9; }
.gebruikers-tabel tr[hidden] { display:none; }
.gebruikers-acties { display:flex; flex-wrap:wrap; gap:8px; }
.gebruikers-acties button { min-height:40px; padding:7px 12px; border:1px solid #91a9b7; border-radius:6px; background:#f6f9fb; color:#203f50; font:inherit; cursor:pointer; }
.gebruikers-acties button:disabled { opacity:.5; cursor:default; }
.gebruikers-beheerstatus { margin:16px 0; }
.gebruiker-bewerkdialog input[type="hidden"] { display:none; }
.gebruiker-bewerkdialog .gebruiker-accountopties input[type="checkbox"] { display:inline-block; flex:0 0 20px; width:20px; min-height:20px; height:20px; margin:2px 0 0; padding:0; }
.gebruiker-registratie { font-size:13px; color:#c7d8e1; }
.gebruiker-dialogstatus { color:#fff0b9; }
.gebruiker-bewerkdialog button:disabled,.gebruiker-resetdialog button:disabled { opacity:.6; cursor:wait; }
.gebruiker-toevoegen { max-width:640px; margin:20px auto; text-align:left; }
.gebruiker-accountopties { margin:20px 0; padding:12px 16px; border:1px solid #bbcdd7; border-radius:8px; }
.gebruiker-accountopties legend { padding:0 6px; font-weight:600; }
.gebruiker-accountopties label { display:flex; align-items:flex-start; gap:10px; }
.instellingen-kaart .gebruiker-accountopties input[type="checkbox"] { display:inline-block; flex:0 0 20px; width:20px; height:20px; min-height:20px; margin:2px 0 0; padding:0; accent-color:#325f82; }
.gebruikersinstellingen { width:min(100%,680px); margin:0 auto; padding-bottom:24px; }
.gebruikersinstellingen-kop { text-align:center; margin-bottom:20px; }
.gebruikersinstellingen-afbeelding { display:block; width:min(100%,280px); max-height:220px; object-fit:contain; margin:0 auto 12px; }
.gebruikersinstellingen h1 { color:#23465e; font-size:28px; margin:0; }
.instellingen-kaart { background:#f6f9fb; border:1px solid #bbcdd7; border-radius:12px; padding:clamp(16px,3vw,24px); margin:0 0 20px; }
.instellingen-kaart h2 { color:#23465e; margin:0 0 18px; font-size:20px; }
.instellingen-kaart label { display:block; margin:14px 0; color:#203f50; }
.instellingen-kaart input:not([type="hidden"]) { display:block; width:100%; min-width:0; min-height:44px; margin-top:6px; padding:10px 12px; border:1px solid #91a9b7; border-radius:6px; background:#fff; color:#163c50; font:inherit; }
.instellingen-kaart button { min-height:44px; padding:10px 18px; border:1px solid var(--kleur-icoontekst,#f3df9f); border-radius:8px; background:var(--bediening-achtergrond,linear-gradient(135deg,#387b98 20%,#92b6c6 40%,#234c5e 80%)); color:var(--kleur-icoontekst,#f3df9f); font:inherit; font-weight:600; cursor:pointer; }
.instellingen-kaart button:disabled { opacity:.6; cursor:wait; }
.apparaat-installatieknop { display:inline-block; padding:10px 18px; border:1px solid var(--kleur-icoontekst,#f3df9f); border-radius:8px; background:var(--bediening-achtergrond,linear-gradient(135deg,#387b98 20%,#92b6c6 40%,#234c5e 80%)); color:var(--kleur-icoontekst,#f3df9f); font-weight:600; text-decoration:none; }
.apparaat-installatieknop:focus-visible { outline:2px solid #325f82; outline-offset:2px; }
/* Zoek- en filtervelden gebruiken dezelfde kleur als de bedieningsknoppen. */
.radio-beheer select:is([name="filter_taal"],[name="filter_nationaliteit"],[name="keuze_taal"],[name="keuze_nationaliteit"],[name="onderdeel"]),
.gebruikersoverzicht :is([data-gebruikerszoek],[data-organisatiefilter]),
[data-radio-instellingen] select[data-radio-organisatie] {
    background:var(--bediening-achtergrond,linear-gradient(135deg,#387b98 20%,#92b6c6 40%,#234c5e 80%));
    color:var(--kleur-icoontekst,#f3df9f);
    border:1px solid var(--kleur-icoontekst,#f3df9f);
    border-radius:8px;
}
.radio-beheer select:focus-visible,
.gebruikersoverzicht :is([data-gebruikerszoek],[data-organisatiefilter]):focus-visible,
[data-radio-instellingen] select[data-radio-organisatie]:focus-visible {
    outline:2px solid #325f82;
    outline-offset:2px;
}
.aanmeld-organisatie { margin:12px 0; padding:16px; background:#fff; border:1px solid #91a9b7; border-radius:8px; color:#163c50; }
.aanmeld-organisatie label { display:block; font-weight:600; }
.aanmeld-organisatie select,.aanmeld-organisatie button { box-sizing:border-box; padding:10px; min-height:44px; background:var(--bediening-achtergrond,linear-gradient(135deg,#387b98 20%,#92b6c6 40%,#234c5e 80%)); color:var(--kleur-icoontekst,#f3df9f); border:1px solid var(--kleur-icoontekst,#f3df9f); border-radius:8px; font:inherit; margin-top:8px; max-width:100%; }
.aanmeld-organisatie select { display:block; width:100%; }
/* Een geopende native keuzelijst ondersteunt niet overal kleurverlopen. */
.radio-beheer select:is([name="filter_taal"],[name="filter_nationaliteit"],[name="keuze_taal"],[name="keuze_nationaliteit"],[name="onderdeel"]) :is(option,optgroup),
.gebruikersoverzicht [data-organisatiefilter] :is(option,optgroup),
[data-radio-instellingen] select[data-radio-organisatie] :is(option,optgroup),
.aanmeld-organisatie select :is(option,optgroup) {
    background:var(--kleur-icoon,#387b98);color:var(--kleur-icoontekst,#f3df9f);
}
.gebruikersoverzicht [data-gebruikerszoek]::placeholder {color:var(--kleur-icoontekst,#f3df9f);opacity:.8;}
.gebruikers-importdialog { width:min(1700px,94vw); max-width:94vw; max-height:88vh; box-sizing:border-box; border:1px solid #91a9b7; border-radius:10px; padding:20px; overflow:auto; margin:auto; }
.gebruikers-importdialog::backdrop { background:#163c5080; }
.import-tabelvak { overflow:auto; max-height:55vh; }
.import-tabelvak table { width:100%; border-collapse:collapse; }
.import-tabelvak th,.import-tabelvak td { text-align:left; vertical-align:top; padding:8px; border-bottom:1px solid #ced8df; }
.import-tabelvak th { background:#e5edf3; position:sticky; top:0; }
.gebruikers-importdialog .import-tabelvak input:not([type="hidden"]),.import-tabelvak select { box-sizing:border-box; width:170px; min-width:170px; min-height:40px; padding:6px; font:inherit; }
.import-tabelvak td:nth-child(3) input { min-width:230px; }
.import-tabelvak td:last-child { min-width:145px; }
.import-tabelvak td:nth-child(7) { min-width:220px; }
.gebruikers-importdialog [hidden] { display:none; }
.instellingen-kaart input:focus-visible,.instellingen-kaart button:focus-visible { outline:2px solid #325f82; outline-offset:2px; }
.instellingen-status { margin:12px 0 0; color:#23465e; overflow-wrap:anywhere; }
.instellingen-opslaanrij { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.instellingen-wachtwoordfout { color:#b42318; font-size:14px; }
.instellingen-wachtwoordfout[hidden] { display:none; }
.instellingen-bevestiging { width:min(460px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:24px; border:2px solid #e8d394; border-radius:16px; background:#203f50; color:#fff; box-shadow:0 12px 36px #071d2b88; font-family:"Segoe UI",Arial,sans-serif; }
.instellingen-bevestiging::backdrop { background:#10293788; }
.instellingen-bevestiging h2 { margin:0 0 12px; color:#fff0b9; font-size:22px; }
.instellingen-bevestiging p { line-height:1.5; overflow-wrap:anywhere; }
.instellingen-bevestiging label { display:block; margin-top:20px; }
.instellingen-bevestiging input { box-sizing:border-box; display:block; width:100%; min-height:44px; margin-top:8px; padding:10px; border:1px solid #91a9b7; border-radius:6px; font:inherit; }
.instellingen-bevestiging-knoppen { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; margin-top:24px; }
.instellingen-bevestiging button { min-height:44px; padding:10px 18px; border:1px solid var(--kleur-icoontekst,#f3df9f); border-radius:8px; background:var(--bediening-achtergrond,linear-gradient(135deg,#387b98 20%,#92b6c6 40%,#234c5e 80%)); color:var(--kleur-icoontekst,#f3df9f); font:inherit; cursor:pointer; }
.instellingen-bevestiging button[type="button"] { background:transparent; color:#fff0b9; }
.instellingen-bevestiging input:focus-visible,.instellingen-bevestiging button:focus-visible { outline:2px solid #fff0b9; outline-offset:3px; }

.bureaublad-informatie {
    position: fixed;
    z-index: 0;
    top: calc(var(--window-afstand) + 12px);
    left: calc(var(--window-afstand) + 12px);
    right: calc(var(--window-afstand) + 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    pointer-events: none;
}

.bureaublad-tekstkader {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    padding: 18px 24px;
    background: rgba(255,255,255,.8);
    color: #000;
    text-shadow: none;
    border-radius: 18px;
}
.bureaublad-tekstkader::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 2px solid var(--kleur-radiorand, #777777);
    border-radius: 12px;
    pointer-events: none;
}

.bureaublad-titels {
    --websitetitel-grootte: clamp(22px, 2.5vw, 40px);
    width: fit-content;
    max-width: min(1200px, 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    overflow-wrap: anywhere;
    pointer-events: none;
    font-family: "Segoe Print", "Segoe UI", sans-serif;
}

.bureaublad-gebruikersnaam {
    margin: 0;
    font-size: calc(var(--websitetitel-grootte) * 2);
    color: #000;
    text-shadow: none;
    line-height: 1.2;
}

.bureaublad-gebruikersnaam[hidden] { display: none; }
.bureaublad-titels:not(:has(> p:not([hidden]))) { display: none; }
.bureaublad-uitlogtimer:empty { display: none; }
.bureaublad-gebruikersnaam span { white-space: normal; }

.bureaublad-websitetitel {
    margin: 0;
    color: #000;
    font-size: var(--websitetitel-grootte);
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
    pointer-events: none;
}

/*=========================================================
  APPLICATIEWINDOW

  Het window vult bewust NIET het hele bureaublad.

  Hierdoor blijft rondom het window de desktopachtergrond
  zichtbaar.

  Boven:
      20 px

  Links:
      20 px

  Rechts:
      20 px

  Onder:
      taakbalk + 20 px
=========================================================*/

.applicatie-window {

    position: fixed;

    top:
        var(--window-afstand);

    left:
        var(--window-afstand);

    right:
        var(--window-afstand);

    bottom:
        calc(
            var(--taakbalk-hoogte)
            + var(--window-afstand)
        );

    display: flex;

    flex-direction: column;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #555555;

    border-radius:
        8px;

    box-shadow:
        0
        7px
        24px
        rgba(0, 0, 0, 0.50);

    z-index: 100;
}


/*=========================================================
  GEMINIMALISEERD WINDOW

  Het window verdwijnt van het bureaublad.

  De knop op de taakbalk blijft staan zodat het window
  weer kan worden geopend.
=========================================================*/

.applicatie-window.geminimaliseerd {

    display: none;
}


/*=========================================================
  TITELBALK VAN HET WINDOW
=========================================================*/

.applicatie-titelbalk {

    position: relative;

    flex:
        0
        0
        var(--titelbalk-hoogte);

    width: 100%;

    height:
        var(--titelbalk-hoogte);

    min-height:
        var(--titelbalk-hoogte);

    display: flex;

    align-items: center;

    padding:
        0
        4px
        0
        10px;

    overflow: visible;

    background: var(--venster-titelachtergrond);

    border-bottom:
        1px solid #777777;

    border-radius:
        7px
        7px
        0
        0;

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.95);

    z-index: 200;
}


/*=========================================================
  NAVIGATIE IN TITELBALK

  Bijvoorbeeld:

  Opleidingen ▼   Excel ▼   Basis

  Er staat bewust GEEN > of › tussen de onderdelen.
=========================================================*/

.window-navigatie {

    position: relative;

    flex:
        1
        1
        auto;

    display: flex;

    align-items: center;

    min-width: 0;

    height: 100%;

    overflow: visible;

    font-size: 16px;

    color: #111111;
}


/*=========================================================
  ÉÉN NAVIGATIENIVEAU

  Een kleine marge zorgt ervoor dat bijvoorbeeld:

  Opleidingen ▼ Excel ▼ Basis

  niet tegen elkaar aan komt te staan.
=========================================================*/

.window-navigatie-niveau {

    position: relative;

    display: flex;

    align-items: center;

    height: 100%;

    margin-right: 8px;

    white-space: nowrap;
}


/*=========================================================
  NAVIGATIETEKST
=========================================================*/

.window-navigatie-tekst {

    display: inline-flex;

    align-items: center;

    height: 32px;

    padding:
        0
        4px;

    color: #222222;

    font-size: 16px;

    font-weight: 600;
}


/*=========================================================
  PULLDOWNKNOP IN NAVIGATIE
=========================================================*/

.window-navigatie-knop {

    width: 25px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin:
        0
        0
        0
        1px;

    padding: 0;

    border:
        1px solid transparent;

    border-radius: 3px;

    background: transparent;

    color: #333333;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 15px;

    cursor: pointer;
}


/*=========================================================
  NAVIGATIEKNOP HOVER
=========================================================*/

.window-navigatie-knop:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.60
        );

    border-color:
        #999999;
}


/*=========================================================
  NAVIGATIEKNOP ACTIEF
=========================================================*/

.window-navigatie-knop.actief {

    background:
        rgba(
            255,
            255,
            255,
            0.80
        );

    border-color:
        #888888;
}


/*=========================================================
  NAVIGATIEPULLDOWN
=========================================================*/

.window-navigatie-pulldown {

    position: absolute;

    top:
        calc(
            var(--titelbalk-hoogte)
            - 4px
        );

    left: 0;

    min-width: 210px;

    display: none;

    margin: 0;
    padding: 4px;

    background:
        linear-gradient(
            to right,
            #fafafa 0%,
            #e9e9e9 100%
        );

    border:
        1px solid #777777;

    border-radius: 4px;

    box-shadow:
        2px
        4px
        10px
        rgba(0, 0, 0, 0.35);

    z-index: 5000;
}


/*=========================================================
  NAVIGATIEPULLDOWN OPEN
=========================================================*/

.window-navigatie-niveau.open
> .window-navigatie-pulldown {

    display: block;
}


/*=========================================================
  LINKS IN NAVIGATIEPULLDOWN
=========================================================*/

.window-navigatie-pulldown a {

    display: block;

    min-height: 34px;

    padding:
        6px
        10px;

    border:
        1px solid transparent;

    border-radius: 3px;

    color: #111111;

    font-size: 15px;

    font-weight: normal;

    line-height: 20px;

    text-decoration: none;

    white-space: nowrap;
}


/*=========================================================
  LINKS IN NAVIGATIEPULLDOWN HOVER
=========================================================*/

.window-navigatie-pulldown a:hover {

    background:
        linear-gradient(
            to bottom,
            #eeeeee 0%,
            #d4d4d4 100%
        );

    border-color:
        #aaaaaa;
}


/*=========================================================
  WINDOWKNOPPEN RECHTSBOVEN

  Bevat:
  - minimaliseren
  - sluiten
=========================================================*/

.window-knoppen {

    position: relative;

    flex:
        0
        0
        auto;

    height: 100%;

    display: flex;

    align-items: flex-start;

    margin-left: 10px;
}


/*=========================================================
  ALGEMENE WINDOWKNOP
=========================================================*/

.window-knop {

    width: 46px;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;

    border-left:
        1px solid
        rgba(0, 0, 0, 0.15);

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    color: #222222;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 18px;

    line-height: 1;

    cursor: pointer;

    user-select: none;
}


/*=========================================================
  ALGEMENE WINDOWKNOP HOVER
=========================================================*/

.window-knop:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.60
        );
}


/*=========================================================
  MINIMALISEERKNOP
=========================================================*/

.window-knop-minimaliseren {

    font-size: 18px;
}


/*=========================================================
  SLUITKNOP
=========================================================*/

.window-knop-sluiten {

    border-radius:
        0
        7px
        0
        0;

    font-size: 24px;
}


/*=========================================================
  SLUITKNOP HOVER

  Windows-achtig rood bij aanwijzen.
=========================================================*/

.window-knop-sluiten:hover {

    background: #c42b1c;

    color: #ffffff;
}


/*=========================================================
  INHOUD VAN HET WINDOW

  Alleen dit gedeelte mag scrollen.

  Het window zelf en de titelbalk blijven op hun plaats.
=========================================================*/

.applicatie-inhoud {

    position: relative;

    flex:
        1
        1
        auto;

    min-width: 0;
    min-height: 0;

    padding: 20px;

    overflow-x: auto;
    overflow-y: auto;

    background: #ffffff;

    border-radius:
        0
        0
        7px
        7px;
}


/*=========================================================
  ALGEMENE PAGINAMELDING

  Wordt momenteel gebruikt voor:
  - normale pagina;
  - menugroep;
  - 404.
=========================================================*/

.pagina-melding {

    width:
        min(
            800px,
            100%
        );

    margin:
        30px
        auto;

    padding: 25px;

    background: #f7f7f7;

    border:
        1px solid #cccccc;

    border-radius: 5px;

    box-shadow:
        1px
        2px
        7px
        rgba(0, 0, 0, 0.15);
}


/*=========================================================
  PAGINATITEL
=========================================================*/

.pagina-melding h1 {

    margin:
        0
        0
        15px
        0;

    padding: 0;

    font-size: 26px;

    font-weight: 600;
}


/*=========================================================
  PAGINATEKST
=========================================================*/

.pagina-melding p {

    margin:
        8px
        0;

    padding: 0;

    font-size: 16px;

    line-height: 1.5;
}


/*=========================================================
  TAAKBALK

  De taakbalk ligt bovenop het bureaublad en blijft
  altijd onderaan het scherm staan.
=========================================================*/

.windows-taakbalk {

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;

    height:
        var(--taakbalk-hoogte);

    min-height:
        var(--taakbalk-hoogte);

    display: flex;

    align-items: center;

    gap: 6px;

    margin: 0;

    padding:
        0
        6px;

    background:
        linear-gradient(
            to bottom,
            #eeeeee 0%,
            #d4d4d4 45%,
            #b5b5b5 100%
        ) !important;

    border-top:
        1px solid #ffffff;

    box-shadow:
        0
        -1px
        4px
        rgba(0, 0, 0, 0.35);

    z-index: 10000;
}


/*=========================================================
  STARTKNOP
=========================================================*/

.windows-startknop {

    height: 40px;

    display: flex;

    align-items: center;

    gap: 7px;

    margin: 0;

    padding:
        3px
        14px
        3px
        7px;

    border:
        1px solid #777777;

    border-radius: 6px;

    background:
        linear-gradient(
            to bottom,
            #fafafa 0%,
            #dddddd 48%,
            #bbbbbb 100%
        ) !important;

    box-shadow:
        inset
        0
        1px
        1px
        rgba(255, 255, 255, 0.95),

        1px
        1px
        3px
        rgba(0, 0, 0, 0.30);

    color:
        #111111 !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 17px;

    font-weight: 600;

    cursor: pointer;

    user-select: none;
}


/*=========================================================
  STARTKNOP HOVER
=========================================================*/

.windows-startknop:hover {

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #eeeeee 48%,
            #cccccc 100%
        ) !important;
}


/*=========================================================
  STARTKNOP ACTIEF
=========================================================*/

.windows-startknop.actief {

    background:
        linear-gradient(
            to bottom,
            #aaaaaa 0%,
            #c2c2c2 50%,
            #d8d8d8 100%
        ) !important;

    box-shadow:
        inset
        1px
        1px
        4px
        rgba(0, 0, 0, 0.35);
}


/*=========================================================
  STARTICOON
=========================================================*/

.windows-start-icoon {

    display: block;

    width: 30px;
    height: 30px;

    flex:
        0
        0
        30px;

    object-fit: contain;

    margin: 0;
    padding: 0;

    border: 0;

    background:
        transparent !important;
}


/*=========================================================
  STARTTEKST
=========================================================*/

.windows-start-tekst {

    display: inline-block;

    color: #111111;

    white-space: nowrap;

    text-shadow:
        1px
        1px
        0
        rgba(255, 255, 255, 0.90);
}


/*=========================================================
  KNOP VAN HET GEOPENDE WINDOW OP DE TAAKBALK

  Bijvoorbeeld:

  Start | Basis
=========================================================*/

.taakbalk-windowknop {

    height: 38px;

    min-width: 120px;
    max-width: 220px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 5px;

    margin: 0;

    padding:
        0
        8px;

    overflow: hidden;

    border:
        1px solid #888888;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            #eeeeee 0%,
            #c7c7c7 100%
        );

    color: #222222;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 14px;

    text-align: left;

    cursor: pointer;
}


/*=========================================================
  WINDOWKNOP OP TAAKBALK HOVER
=========================================================*/

.taakbalk-windowknop:hover {

    background:
        linear-gradient(
            to bottom,
            #f5f5f5 0%,
            #d5d5d5 100%
        );
}


/*=========================================================
  ACTIEF WINDOW OP TAAKBALK
=========================================================*/

.taakbalk-windowknop.actief {
    background: linear-gradient(to bottom, #effaff 0%, #bde6ff 48%, #83c9f4 100%);
    border-color: #287eb8;
    color: #12364e;
    box-shadow: inset 0 0 0 1px #ffffffcc, inset 0 -3px 0 #1979b8, 0 0 5px #62c6ff99;
}
.taakbalk-windowknop.actief .taakbalk-windowtitel {
    color: #12364e;
    font-weight: 700;
}
.taakbalk-windowknop:focus-visible {
    outline: 2px solid #164d73;
    outline-offset: -3px;
}


/*=========================================================
  WINDOWTITEL OP TAAKBALK
=========================================================*/

.taakbalk-windowicoon {

    width: 27px;

    height: 27px;

    min-width: 27px;

    flex:
        0
        0
        27px;

    object-fit:
        contain;

    display:
        block;
}



.taakbalk-windowtitel {

    display: block;

    flex:
        1
        1
        auto;

    min-width:
        0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    text-align:
        left;
}


/*=========================================================
  STARTMENU

  Staat boven de taakbalk.
=========================================================*/

.windows-startmenu {

    position: fixed;

    left: 6px;

    bottom:
        calc(
            var(--taakbalk-hoogte)
            + 4px
        );

    min-width: 220px;

    display: none;

    margin: 0;
    padding: 0;

    z-index: 11000;
}


/*=========================================================
  STARTMENU OPEN
=========================================================*/

.windows-startmenu.open {

    display: block;
}


/*=========================================================
  MENULIJST
=========================================================*/

.windows-menu {

    list-style: none;

    min-width: 220px;

    margin: 0;

    padding: 4px;

    background:
        linear-gradient(
            to right,
            rgba(249, 249, 249, 0.98),
            rgba(235, 235, 235, 0.98)
        );

    border:
        1px solid #777777;

    border-radius: 5px;

    box-shadow:
        3px
        4px
        14px
        rgba(0, 0, 0, 0.40);
}


/*=========================================================
  MENU-ITEM
=========================================================*/

.windows-menu
.menu-item {

    position: relative;

    margin: 0;
    padding: 0;
}


/*=========================================================
  MENU-LINK
=========================================================*/

.windows-menu
.menu-item
> a {

    min-height: 44px;

    display: flex;

    align-items: center;

    gap: 5px;

    margin: 0;

    padding:
        0
        4px;

    border:
        1px solid transparent;

    border-radius: 3px;

    color: #111111;

    text-decoration: none;

    white-space: nowrap;
}


/*=========================================================
  MENU-LINK HOVER
=========================================================*/

.windows-menu
.menu-item
> a:is(:hover,[data-menu-voorbeeld-actief]) {

    background:
        linear-gradient(
            to bottom,
            #eeeeee 0%,
            #d4d4d4 100%
        );

    border-color:
        #aaaaaa;
}


/*=========================================================
  MENUGROEP

  Een groep opent zelf geen pagina.
=========================================================*/

.windows-menu
.menu-groep {

    cursor: default;
}


/*=========================================================
  MENU-ICOONHOUDER
=========================================================*/

.menu-pictogram {

    width: 44px;
    height: 44px;

    flex:
        0
        0
        44px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0;
    padding: 0;
}


/*=========================================================
  MENU-AFBEELDING
=========================================================*/

.menu-pictogram img {

    display: block;

    width: 44px;
    height: 44px;

    max-width: 44px;
    max-height: 44px;

    object-fit: contain;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;
}


/*=========================================================
  MENUTEKST
=========================================================*/

.menu-tekst {

    flex:
        1
        1
        auto;

    min-width: 0;

    overflow: hidden;

    color: #111111;

    font-size: 15px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/*=========================================================
  SUBMENU-PIJL
=========================================================*/

.submenu-pijl {

    flex:
        0
        0
        auto;

    margin-left: auto;

    padding-left: 8px;

    color: #333333;

    font-size: 22px;
}


/*=========================================================
  MENUSCHEIDING
=========================================================*/

.menu-scheiding {

    height: 1px;

    margin:
        4px
        5px;

    padding: 0;

    list-style: none;

    background: #aaaaaa;

    border-bottom:
        1px solid #ffffff;
}


/*=========================================================
  SUBMENU
=========================================================*/

.windows-menu
.menu-item
> .windows-menu {

    position: absolute;

    display: none;

    left:
        calc(
            100%
            + 3px
        );

    top: -4px;

    min-width: 220px;

    z-index: 11001;
}


/*=========================================================
  SUBMENU TONEN

  Voor het gewone Startmenu gebruiken we momenteel
  hover voor de onderliggende menu's.
=========================================================*/

.windows-menu
.menu-item.heeft-submenu:hover
> .windows-menu {

    display: block;
}


/*=========================================================
  ONZICHTBARE OVERBRUGGING NAAR SUBMENU

  Hiermee voorkomen we dat het submenu dichtklapt wanneer
  de muis de kleine ruimte tussen beide menu's passeert.
=========================================================*/

.windows-menu
.menu-item.heeft-submenu::after {

    content: "";

    position: absolute;

    top: 0;

    right: -5px;

    width: 6px;

    height: 100%;
}


/*=========================================================
  TABLET / KLEIN SCHERM
=========================================================*/

@media (max-width: 700px) {


    /*-----------------------------------------------------
      Op kleinere schermen houden we iets minder ruimte
      rondom het window over.
    -----------------------------------------------------*/

    :root {

        --window-afstand: 8px;
    }


    /*-----------------------------------------------------
      TITELBALK
    -----------------------------------------------------*/

    .applicatie-titelbalk {

        padding-left: 5px;
    }


    /*-----------------------------------------------------
      NAVIGATIE
    -----------------------------------------------------*/

    .window-navigatie {

        font-size: 14px;
    }


    .window-navigatie-niveau {

        margin-right: 4px;
    }


    .window-navigatie-tekst {

        padding:
            0
            2px;

        font-size: 14px;
    }


    /*-----------------------------------------------------
      WINDOWKNOPPEN
    -----------------------------------------------------*/

    .window-knop {

        width: 40px;
    }


    /*-----------------------------------------------------
      WINDOWINHOUD
    -----------------------------------------------------*/

    .applicatie-inhoud {

        padding: 10px;
    }


    .pagina-melding {

        margin:
            15px
            auto;

        padding: 15px;
    }


    /*-----------------------------------------------------
      STARTMENU
    -----------------------------------------------------*/

    .windows-startmenu {

        left: 5px;
        right: 5px;

        min-width: 0;
    }


    .windows-startmenu
    > .windows-menu {

        width: 100%;

        min-width: 0;
    }


    /*-----------------------------------------------------
      SUBMENU OP KLEIN SCHERM

      Onder het betreffende item in plaats van volledig
      rechts ernaast.
    -----------------------------------------------------*/

    .windows-menu
    .menu-item
    > .windows-menu {

        left: 15px;
        right: 0;

        top: 100%;

        min-width: 0;
    }


    /*-----------------------------------------------------
      WINDOWKNOP OP TAAKBALK
    -----------------------------------------------------*/

    .taakbalk-windowknop {

        min-width: 80px;
        max-width: 150px;
    }
}

/*=========================================================
  GEDEELDE 404-PAGINA: TELEFOON, TABLET EN DESKTOP
=========================================================*/

.applicatie-inhoud-404 {
    padding: clamp(8px, 2vw, 20px);
    overscroll-behavior: contain;
}

.foutmelding-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 800px;
    min-width: 0;
    margin: clamp(8px, 2vw, 30px) auto;
    padding: clamp(12px, 3vw, 28px);
    text-align: center;
    overflow-wrap: anywhere;
}

.foutmelding-404 > * {
    min-width: 0;
    max-width: 100%;
    flex-shrink: 0;
}

.foutmelding-404 h1 {
    margin: 0;
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.625rem);
    line-height: 1.3;
}

.foutmelding-tekst-404 {
    width: 100%;
    max-width: 65ch;
}

.foutmelding-404 p {
    font-size: 1rem;
    line-height: 1.6;
}

.foutmelding-404 .foutmelding-mail {
    margin: 0;
    width: 100%;
}

.foutmelding-mail button {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px;
    color: #0000ee;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: 4px;
}

.foutmelding-mail button:focus-visible {
    outline: 3px solid #0000ee;
    outline-offset: 2px;
}
.foutmelding-mail button:disabled { cursor:default; opacity:0.7; }
.foutmelding-verzendstatus { margin:0; text-align:center; }

@media (max-height: 500px) {
    .foutmelding-404 { gap:8px; margin:0 auto; }
}

/* Grote navigatieknoppen binnen een menugroep. */
.groep-opties {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
    gap:14px;
    margin-top:22px;
}
.groep-optie {
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
    min-height:104px;
    padding:20px;
    border:1px solid #aebcc6;
    border-radius:8px;
    background:linear-gradient(#ffffff,#e8eef3);
    box-shadow:0 2px 4px #20344218;
    color:#23465e;
    text-decoration:none;
}
.groep-optie:hover { background:#ddebf6; border-color:#6b94b3; }
.groep-optie:active { background:#cfdfec; }
.groep-optie:focus-visible { outline:3px solid #245f93; outline-offset:3px; }
.groep-optie-icoon { width:48px; height:48px; flex:0 0 48px; object-fit:contain; }
.groep-optie-naam { flex:1; min-width:0; overflow-wrap:anywhere; font-size:1.125rem; font-weight:600; line-height:1.4; }
.groep-optie-pijl { flex:0 0 auto; font-size:28px; }
@media (max-width:480px) {
    .groep-opties { gap:10px; }
    .groep-optie { min-height:88px; padding:14px; gap:12px; }
    .groep-optie-icoon { width:40px; height:40px; flex-basis:40px; }
}
/* Meerdere onafhankelijke vensters boven hetzelfde bureaublad. */
.venster-actief { border-color:#325f82; }
.taakbalk-vensters { display:flex; gap:6px; flex:1; min-width:0; overflow-x:auto; align-items:center; height:100%; }
.taakbalk-vensters .taakbalk-windowknop { flex:0 0 auto; max-width:220px; }
.windows-taakbalk { z-index:10000; }
.windows-startmenu { z-index:10001; }
.venster-status { position:fixed; bottom:60px; left:20px; right:20px; width:fit-content; max-width:calc(100% - 40px); padding:12px 18px; background:#fff; color:#23465e; border:1px solid #91a6b6; border-radius:6px; z-index:10002; }
@media(max-width:700px) { .taakbalk-vensters .taakbalk-windowknop { max-width:150px; } }


/* Originele PNG, zonder kleurfilters of nagetekende onderdelen. */
:root { color-scheme:only light; }
.aanmeld-scherm { position:relative; width:min(100%,640px); margin:20px auto; }
.aanmeld-foutpopup { position:absolute; z-index:10; left:50%; top:50%; transform:translate(-50%,-50%); width:min(360px,calc(100% - 24px)); padding:20px; border:2px solid #e8d394; border-radius:16px; background:#203f50; color:#fff; box-shadow:0 12px 36px #071d2b88; font-size:16px; line-height:1.5; }
.aanmeld-foutpopup[hidden] { display:none; }
.aanmeld-foutpopup strong { color:#fff0b9; font-size:18px; }
.aanmeld-fouttekst { margin:12px 0 18px; overflow-wrap:anywhere; }
.aanmeld-foutsluiten { display:block; margin-left:auto; min-height:40px; padding:8px 20px; border:1px solid var(--kleur-icoontekst,#f3df9f); border-radius:8px; background:var(--bediening-achtergrond,linear-gradient(135deg,#387b98 20%,#92b6c6 40%,#234c5e 80%)); color:var(--kleur-icoontekst,#f3df9f); font:inherit; font-weight:600; cursor:pointer; }
.aanmeld-foutsluiten:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.aanmeld-scherm h1 { color:#23465e; font-size:28px; margin:0 0 16px; }
.aanmeld-kaart { position:relative; margin:0; padding:0; border:0; background:transparent; overflow:hidden; }
.aanmeld-tekening { position:relative; width:100%; aspect-ratio:1381/1139; container-type:inline-size; }
.aanmeld-scherm .aanmeld-welkom { position:absolute; left:32%; top:34.5%; width:47%; margin:0; color:#fff0b9; font-size:clamp(22px,6.8cqw,44px); line-height:1.15; text-align:center; }
.aanmeld-uitleg { position:absolute; left:30%; top:43%; width:51%; margin:0; color:#fff; font-size:clamp(12px,3cqw,20px); line-height:1.25; text-align:center; }
.aanmeld-achtergrond { display:block; width:100%; height:100%; filter:none; opacity:1; }
.aanmeld-veld { position:absolute; left:44.5%; width:33%; height:6.4%; }
.aanmeld-naam { top:52.2%; }
.aanmeld-wachtwoord { top:65.2%; }
.aanmeld-veldnaam { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.aanmeld-veld input { box-sizing:border-box; display:block; width:100%; height:100%; min-width:0; padding:0 4px; border:0; border-radius:4px; background:transparent; color:#163c50; -webkit-text-fill-color:#163c50; caret-color:#163c50; font:inherit; font-size:clamp(16px,3cqw,20px); }
.aanmeld-veld input::placeholder { color:#163c50; -webkit-text-fill-color:#163c50; opacity:1; }
.aanmeld-veld input:focus-visible { outline:2px solid #fff0a2; outline-offset:2px; }
.aanmeld-versturen { position:absolute; left:33%; top:77.5%; width:45.5%; height:10.6%; border:0; padding:0 8px; border-radius:24px; background:transparent; color:#163c50; font:inherit; font-size:clamp(18px,4cqw,27px); font-weight:600; appearance:none; cursor:pointer; }
.aanmeld-versturen:disabled { cursor:wait; }
.aanmeld-vergeten { display:block; width:fit-content; max-width:100%; min-height:40px; margin:8px auto 0; padding:8px 12px; border:0; background:transparent; color:#163c50; font:inherit; font-size:16px; text-decoration:underline; cursor:pointer; }
.aanmeld-vergeten:focus-visible { outline:2px solid #163c50; outline-offset:2px; }
.aanmeld-vergeten:disabled { cursor:wait; }
.herstel-kaart { position:relative; width:min(440px,calc(100% - 32px)); max-height:calc(100vh - 48px); overflow:auto; margin:24px auto; padding:24px; background:#203f50; color:#fff; border:2px solid #e8d394; border-radius:16px; box-shadow:0 12px 36px #071d2b88; }
.herstel-kaart h1 { margin-top:0; font-size:24px; color:#fff0b9; }
.herstel-kaart label { display:block; margin:16px 0; }
.herstel-kaart input:not([type="hidden"]) { display:block; width:100%; min-height:44px; margin-top:6px; padding:10px; border:1px solid #aec6d1; border-radius:6px; font:inherit; }
.herstel-kaart button { padding:12px 18px; margin-bottom:20px; background:var(--bediening-achtergrond,linear-gradient(135deg,#387b98 20%,#92b6c6 40%,#234c5e 80%)); color:var(--kleur-icoontekst,#f3df9f); border:1px solid var(--kleur-icoontekst,#f3df9f); border-radius:8px; font:inherit; cursor:pointer; }
.herstel-kaart a { display:block; color:#fff0b9; }
.aanmeld-versturen:focus-visible { outline:3px solid #fff; outline-offset:-8px; }
.aanmeld-status { color:#23465e; line-height:1.5; }
/* Het hele huisje blijft ook op smalle schermen zichtbaar. */
@media(max-width:600px) {
 .aanmeld-scherm { margin:10px auto; }
 .aanmeld-veld input { font-size:16px; }
}
/* Alle tekst is HTML; de afbeelding blijft door de invoervakken zichtbaar. */
.aanmeld-veld input,
.aanmeld-veld input:hover,
.aanmeld-veld input:focus {
    background-color:transparent;
    background-image:none;
    box-shadow:none;
    appearance:none;
    -webkit-appearance:none;
}
.aanmeld-veld input:autofill {
    background-color:transparent;
    -webkit-text-fill-color:#163c50;
    caret-color:#163c50;
    transition:background-color 999999s ease-out 0s;
}
.aanmeld-veld input:-webkit-autofill,
.aanmeld-veld input:-webkit-autofill:hover,
.aanmeld-veld input:-webkit-autofill:focus {
    -webkit-text-fill-color:#163c50;
    caret-color:#163c50;
    transition:background-color 999999s ease-out 0s;
}
.windows-menu .account-menu:focus-within > .windows-menu { display:block; }

/* Aanmelden is een bureaubladvlak; de interne navigatie blijft behouden. */
.bureaublad-informatie { --aanmeld-breedte:480px; }
.bureaublad-titels.heeft-gebruiker { width:var(--aanmeld-breedte); max-width:100%; }
.bureaublad-titels [hidden] { display:none !important; }
.bureaublad-titels #bureaublad-organisatie { margin:0; font-size:clamp(18px,2vw,26px); line-height:1.35; }
.bureaublad-titels.heeft-gebruiker .bureaublad-gebruikersnaam { font-size:clamp(26px,3vw,40px); }
.bureaublad-informatie:has(.aanmeld-bureaublad:not(.geminimaliseerd)) { bottom:calc(var(--taakbalk-hoogte,48px) + 20px); overflow-y:auto; }
.bureaublad-informatie > * { flex-shrink:0; }
.applicatie-window.aanmeld-bureaublad { position:relative; inset:auto; transform:none; width:var(--aanmeld-breedte,480px); max-width:100%; height:auto; min-height:0; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; pointer-events:auto; }
.aanmeld-bureaublad > .applicatie-titelbalk { display:none; }
.aanmeld-bureaublad > .applicatie-inhoud { padding:0; background:transparent; overflow:visible; }
.taakbalk-vensters > [hidden],.aanmeld-bureaublad.geminimaliseerd { display:none !important; }
.aanmeld-scherm[data-aanmeld-vlak] { box-sizing:border-box; width:100%; margin:0; padding:24px; font:16px/1.4 "Segoe UI",sans-serif; color:#000; }
[data-aanmeld-vlak] .aanmeld-kop { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
[data-aanmeld-vlak] .aanmeld-kop h1 { margin:0; color:#000; font-size:26px; }
[data-aanmeld-vlak] button { min-height:40px; padding:8px 14px; border:1px solid var(--kleur-icoontekst,#f3df9f); border-radius:8px; background:var(--bediening-achtergrond,linear-gradient(135deg,#387b98 20%,#92b6c6 40%,#234c5e 80%)); color:var(--kleur-icoontekst,#f3df9f); font:inherit; cursor:pointer; }
[data-aanmeld-vlak] button:focus-visible,[data-aanmeld-vlak] input:focus-visible,[data-aanmeld-vlak] select:focus-visible { outline:2px solid #155eaa; outline-offset:2px; }
[data-aanmeld-vlak] .aanmeld-kaart { overflow:visible; }
:is([data-aanmeld-vlak],.sessie-heraanmelden) .aanmeld-invoer { display:block; margin-bottom:16px; font-weight:600; }
:is([data-aanmeld-vlak],.sessie-heraanmelden) .aanmeld-invoer input { box-sizing:border-box; display:block; width:100%; min-width:0; min-height:44px; margin-top:6px; padding:8px 12px; border:1px solid #888; border-radius:7px; background:#fff; color:#000; font:400 16px "Segoe UI",sans-serif; }
[data-aanmeld-vlak] .aanmeld-doorgaan { display:block; width:100%; font-weight:600; }
[data-aanmeld-vlak] .aanmeld-vergeten { background:transparent; border:0; box-shadow:none; color:#000; text-decoration:underline; border-radius:0; }
[data-aanmeld-vlak] .aanmeld-alternatieven { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:16px; }
[data-aanmeld-vlak] .aanmeld-alternatieven:empty { display:none; }
[data-aanmeld-vlak] .aanmeld-andere-methode { margin:18px 0 0; text-align:center; color:#000; }
[data-aanmeld-vlak] .aanmeld-alternatieven button { display:flex; align-items:center; gap:8px; }
[data-aanmeld-vlak] .aanmeld-alternatieven img { width:28px; height:28px; object-fit:contain; }
[data-aanmeld-vlak] .aanmeld-status { color:#000; margin:12px 0 0; }
[data-aanmeld-vlak] .aanmeld-status:empty { display:none; }
[data-aanmeld-vlak] .aanmeld-organisatie { margin:0 0 16px; padding:0; border:0; background:transparent; color:#000; }
[data-aanmeld-vlak] .aanmeld-organisatie p { display:none; }
[data-aanmeld-vlak] .aanmeld-foutpopup { box-sizing:border-box; }


/* Organisatiekeuze en aanmelden staan op dezelfde regel. */
[data-aanmeld-vlak] .aanmeld-organisatie-rij { display:flex; align-items:flex-end; gap:12px; margin-bottom:8px; }
[data-aanmeld-vlak] .aanmeld-organisatie-rij [data-aanmeld-organisatie-plek] { flex:1; min-width:0; }
[data-aanmeld-vlak] .aanmeld-organisatie-rij [data-aanmeld-organisatie-plek]:not(:has(.aanmeld-organisatie:not([hidden]))) { display:none; }
[data-aanmeld-vlak] .aanmeld-organisatie-rij .aanmeld-organisatie { margin:0; }
[data-aanmeld-vlak] .aanmeld-organisatie-rij .aanmeld-organisatie label { display:block; }
[data-aanmeld-vlak] .aanmeld-organisatie-rij select { display:block; width:100%; min-width:0; min-height:44px; margin:6px 0 0; }
[data-aanmeld-vlak] .aanmeld-organisatie-rij .aanmeld-doorgaan { flex:0 0 auto; width:auto; min-height:44px; margin:0; }
[data-aanmeld-vlak] .aanmeld-organisatie-rij:not(:has(.aanmeld-organisatie:not([hidden]))) .aanmeld-doorgaan { flex:1; }

/* Lange startmenu's blijven bereikbaar binnen de schermhoogte. Vaste submenu's
   kunnen buiten hun scrollende ouder verschijnen zonder te worden afgeknipt. */
#windows-startmenu .windows-menu { box-sizing:border-box; max-height:calc(100dvh - var(--taakbalk-hoogte,48px) - 16px); overflow:auto; overscroll-behavior:contain; }
#windows-startmenu .menu-item.heeft-submenu:focus-within > .windows-menu { display:block; }

/* De oude muisoverbrugging stak buiten de lijst en veroorzaakte een scrollbar.
   Gepositioneerde submenu’s sluiten al direct op hun bovenliggende menu aan. */
#windows-startmenu .menu-item.heeft-submenu::after{right:0;width:1px}
#windows-startmenu .windows-menu{overflow-x:hidden;overflow-y:auto}

/* De hoofdinterface blijft op schermgrootte. Scrollen blijft mogelijk;
   inhoudelijke zoom (zoals de PDF-knoppen) staat hier los van. */
html, body { touch-action: pan-x pan-y; }

/* Aanmelden: taal rechtsboven, annuleren links naast aanmelden. */
[data-aanmeld-vlak] .aanmeld-taalkeuze{display:flex;align-items:center;gap:10px;min-width:0;margin-left:auto}
[data-aanmeld-vlak] .aanmeld-taalkeuze select{max-width:190px;min-height:44px;font:inherit}
[data-aanmeld-vlak] .aanmeld-knoppen{display:flex;align-items:stretch;gap:12px;flex:1}
[data-aanmeld-vlak] .aanmeld-knoppen>button{flex:1!important;width:auto;min-height:44px;margin:0;white-space:normal}
[data-aanmeld-vlak] .aanmeld-organisatie-rij{flex-wrap:wrap}
[data-aanmeld-vlak] .aanmeld-organisatie-rij [data-aanmeld-organisatie-plek]{flex-basis:100%}
@media(max-width:480px){[data-aanmeld-vlak] .aanmeld-kop{flex-wrap:wrap}[data-aanmeld-vlak] .aanmeld-taalkeuze{max-width:100%}}

/* Proefpagina Gebruiker toevoegen: gelijke vakken en vaste checkboxkolom. */
[data-beheer-pagina]:has([data-gebruiker-toevoegen]){max-width:640px;width:100%;margin-inline:auto;box-sizing:border-box}
[data-gebruiker-toevoegen]{width:100%;max-width:none;margin:0;box-sizing:border-box}
[data-gebruiker-toevoegen]>.instellingen-kaart{box-sizing:border-box;width:100%}
body [data-gebruiker-toevoegen] label.gebruiker-vinkregel{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:12px}
body [data-gebruiker-toevoegen] label.gebruiker-vinkregel input[type=checkbox]{width:20px;height:20px;min-height:20px;margin:0;padding:0;align-self:center}
[data-gebruiker-toevoegen] [data-afdeling-voorwaardelijk][hidden]{display:none!important}

body :is([data-gebruiker-toevoegen],[data-gebruiker-bewerkformulier]) label.gebruiker-rolregel{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
body .gebruiker-rolregel :is(select,.zoekkeuze){width:260px;flex:0 1 260px;max-width:calc(100% - 55px);min-width:0;margin:0}
body [data-gebruiker-bewerkformulier] label.gebruiker-vinkregel{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:12px}
body [data-gebruiker-bewerkformulier] label.gebruiker-vinkregel input[type=checkbox]{width:20px;height:20px;min-height:20px;margin:0;padding:0;align-self:center}
[data-afdeling-voorwaardelijk][hidden]{display:none!important}
body .gebruiker-bewerkdialog{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto}
body .gebruiker-bewerkdialog form{max-width:100%;min-width:0}
body .gebruiker-bewerkdialog .instellingen-kaart{min-width:0;text-align:left}

/* Organisatie- en gebruikersbeheer: vaste bediening en uitgelijnde filters. */
[data-beheer-overzicht]{display:flex;flex-direction:column;min-height:0;max-height:100%;overflow:hidden}
[data-beheer-overzicht] .gebruikers-tabelvak{flex:1 1 auto;min-height:0;overflow:auto}
[data-beheer-overzicht] .scherm-acties{flex:0 0 auto;position:sticky;bottom:0;z-index:2}
[data-beheer-overzicht] .scherm-acties [role=status]{flex-basis:100%;margin:0}
.overzicht-filterblok{flex:0 0 auto}.overzicht-filterblok h2{margin-top:0}
.overzicht-filterblok .gebruikers-filters{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1fr);align-items:center}
.overzicht-filterblok .gebruikers-filters>label:first-child{grid-row:1 / span 3;align-self:start}
.overzicht-filterblok .overzicht-filterregel{grid-column:2;display:grid;grid-template-columns:110px auto;align-items:center;gap:16px;margin:0}
.overzicht-filterregel .overzicht-filterlabel{margin:0}
[data-organisatie-formulier] .organisatie-actief{display:flex;justify-content:center;align-items:center;gap:12px}
[data-emailbeleid]>label:not([data-lokale-organisatie]){display:grid;grid-template-columns:minmax(180px,1fr) 110px;align-items:center;gap:16px}
[data-afdeling-form]>.afdeling-acties{margin-top:20px;display:flex;align-items:center;gap:12px}
@media(max-width:540px){.overzicht-filterblok .gebruikers-filters{grid-template-columns:1fr}.overzicht-filterblok .gebruikers-filters>label:first-child{grid-row:auto}.overzicht-filterblok .overzicht-filterregel{grid-column:1}}

.kleur-keuzeregel{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.kleur-keuzeregel>label{margin:0;display:flex;align-items:center;gap:12px}[data-kleuren]{border:0;padding:0;min-width:0}[data-kleuren]>legend{display:none}