/* De oorspronkelijke stijl blijft intact wanneer geen afwijkend patroon actief is. */
body.grijze-kleuren .taakbalk-windowknop.actief { background:var(--kleur-menukeuze)!important;color:#000000!important; }
.windows-menu .menu-tekst, .windows-menu .submenu-pijl { color:inherit; }
body.eigen-kleuren .windows-menu:not(.kleur-menu-voorbeeld) { background:var(--kleur-menu); }
body.eigen-kleuren .windows-menu:not(.kleur-menu-voorbeeld) .menu-item > a { color:var(--kleur-menutekst); }
body.eigen-kleuren .windows-menu:not(.kleur-menu-voorbeeld) .menu-item > a:is(:hover,:focus-visible,[aria-current="page"]),
body.eigen-kleuren .windows-menu:not(.kleur-menu-voorbeeld) .menu-item.heeft-submenu:focus-within > a { background:var(--kleur-menukeuze);color:var(--kleur-menukeuzetekst); }
.kleur-extra-voorbeeld { display:flex;gap:16px;align-items:center;margin-top:12px;flex-wrap:wrap; }
.kleur-extra-voorbeeld button { padding:12px;cursor:pointer; }
.kleur-extra-voorbeeld>button { display:flex;align-items:center; }
.kleur-extra-voorbeeld>div { display:flex;flex-direction:column; }
.functie-actie-icoon { width:28px;height:28px;vertical-align:middle;margin-right:6px; }
[data-kleuren] [role="tabpanel"][hidden] { display:none!important; }
.kleur-menu-scroll { overflow:auto; padding:8px 16px 24px 4px; }
.kleur-menu-demo .kleur-menu-scroll>.windows-menu { width:max-content; margin-right:235px; }
.kleur-menu-demo .menu-item>.windows-menu { display:block!important; }
.kleur-menu-demo [data-kleur-deel] { cursor:pointer; }
.kleur-menu-demo [data-kleur-deel]:focus-visible { outline:2px solid #325f82;outline-offset:2px; }
.kleur-menu-demo.kleur-eigen .windows-menu { background:var(--voorbeeld-menu); }
.kleur-menu-demo.kleur-eigen .menu-item>a { color:var(--voorbeeld-menutekst); }
.kleur-menu-demo.kleur-eigen .menu-item>a:is(:hover,:focus-visible,[data-menu-voorbeeld-actief]) { background:var(--voorbeeld-menukeuze);color:var(--voorbeeld-menukeuzetekst); }
@media(max-width:700px) { .kleur-menu-scroll { padding-bottom:130px; } }
body.eigen-kleuren { --venster-titelachtergrond:var(--kleur-titelbalk); }
body.eigen-kleuren .applicatie-titelbalk { background:var(--venster-titelachtergrond); color:var(--tekst-titelbalk); }
body.eigen-kleuren .applicatie-titelbalk h1 { color:inherit; }
body.eigen-kleuren .applicatie-titelbalk .window-navigatie,
body.eigen-kleuren .applicatie-titelbalk .window-navigatie-tekst,
body.eigen-kleuren .applicatie-titelbalk .window-navigatie-knop { color:var(--tekst-titelbalk); }
body.eigen-kleuren .windows-taakbalk { background:var(--kleur-taakbalk)!important; color:var(--tekst-taakbalk); }
body.eigen-kleuren.radio-neutraal .radio-paneel { background:var(--kleur-radio); color:var(--tekst-radio); }
body.eigen-kleuren.radio-neutraal .radio-inhoud h2 { background:var(--kleur-titelbalk); color:var(--tekst-titelbalk); }
body.eigen-kleuren.radio-neutraal .radio-knoppen { background:var(--kleur-taakbalk); }
body.eigen-kleuren.radio-neutraal .radio-zenders legend,
body.eigen-kleuren.radio-neutraal #radio-status { color:var(--tekst-radio); }
/* Alleen het instellingenveld krijgt ruimte; body draagt ook data-kleuren. */
fieldset[data-kleuren] { margin-top:1em; min-width:0; }
.kleur-voorbeeld { max-width:480px; background:#e9eef1 center/cover; border:1px solid #777; border-radius:6px; overflow:hidden; }
.kleur-voorbeeld button { border-radius:0; margin:0; cursor:pointer; }
.kleur-voorbeeld>[data-kleur-deel] { display:block; width:100%; min-height:36px; text-align:left; }
.kleur-voorbeeld-bureau { min-height:160px; display:flex; justify-content:flex-end; align-items:center; padding:16px; }
.kleur-voorbeeld [data-kleur-deel="radio"] { padding:12px 24px; line-height:1.7; border-radius:6px; }
[data-kleur-keuze] { margin-top:12px; }
[data-kleur-keuze][hidden] { display:none!important; }
[data-kleur-keuze] input[type="color"] { width:72px; height:40px; padding:3px; cursor:pointer; }
.kleur-vakjes { display:flex; gap:12px; flex-wrap:wrap; }
.kleur-vakjes button { display:flex; flex-direction:column; gap:6px; align-items:center; padding:10px; }
[data-kleur-staal] { display:block; width:90px; height:36px; border:1px solid #666; }
dialog.kleur-dialoog { position:fixed; inset:0; margin:auto; width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; box-sizing:border-box; padding:22px; border:1px solid #8296a2; border-radius:12px; background:#f6f9fb; color:#163c50; box-shadow:0 8px 36px #0006; }
.kleur-dialoog::backdrop { background:#0006; }
.kleur-dialoog h2 { margin:0 0 14px; font-size:20px; }
[data-kleur-monster] { height:70px; border:1px solid #777; border-radius:6px; margin-bottom:14px; }
.kleur-dialoog label { display:block; margin:8px 0; }
.kleur-dialoog input { box-sizing:border-box; min-width:0; }
.kleur-dialoog input[type="text"],.kleur-dialoog input[type="number"] { min-height:40px; padding:6px 8px; font-size:16px; }
.kleur-dialoog input[type="range"] { min-height:32px; }
.kleur-dialoog input[type="text"] { width:100%; font-family:monospace; }
.kleur-rgb { display:grid; grid-template-columns:minmax(100px,1fr) 110px; gap:14px; align-items:center; }
.kleur-rgb input[type="range"] { width:100%; padding:0; accent-color:#325f82; }
.kleur-rgb input[type="number"] { width:100%; }
.kleur-dialoog-acties { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.kleur-dialoog-acties button { padding:10px 16px; 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:6px; cursor:pointer; }
[data-kleur-fout] { color:#a12020; }
body.eigen-kleuren .applicatie-titelbalk,
body.eigen-kleuren .applicatie-titelbalk .window-navigatie,
body.eigen-kleuren .applicatie-titelbalk .window-navigatie-tekst,
body.eigen-kleuren .applicatie-titelbalk .window-navigatie-knop { color:var(--kleur-titeltekst); }
body.eigen-kleuren .windows-startknop { background:var(--kleur-startknop)!important; color:var(--kleur-starttekst)!important; }
body.eigen-kleuren .windows-startknop .windows-start-tekst { color:var(--kleur-starttekst); }
body.eigen-kleuren .taakbalk-windowknop:not(.actief) { background:var(--kleur-vensterknop); color:var(--kleur-venstertekst); }
body.eigen-kleuren .taakbalk-windowknop:not(.actief) .taakbalk-windowtitel { color:var(--kleur-venstertekst); }
body.eigen-kleuren.radio-neutraal .radio-paneel,
body.eigen-kleuren.radio-neutraal .radio-inhoud h2,
body.eigen-kleuren.radio-neutraal .radio-zenders legend,
body.eigen-kleuren.radio-neutraal #radio-status { color:var(--kleur-radiotekst); }
body.eigen-kleuren.radio-neutraal .radio-zenders label,
body.eigen-kleuren.radio-neutraal .radio-zenders label:has(input:checked) { color:var(--kleur-zendertekst); }
.kleur-voorbeeld-taakbalk { display:flex; flex-wrap:wrap; gap:6px; padding:6px; }
.kleur-voorbeeld-taakbalk button { padding:8px; min-height:38px; }
.kleur-voorbeeld>.kleur-voorbeeld-taakbalk { display:flex; cursor:pointer; min-height:62px; align-items:center; }
.kleur-voorbeeld-taakbalk [data-kleur-deel="vensterknop"] { width:65px; }
.kleur-taakbalk-uitleg { flex:1; padding:10px; font-size:12px; }
[data-kleur-staal] { width:120px; display:flex; align-items:center; justify-content:center; font-size:14px; }
body.radio-neutraal .radio-paneel { border:5px solid #777777; }
body.eigen-kleuren.radio-neutraal .radio-paneel { border-color:var(--kleur-radiorand); }
.kleur-tabs { display:flex; gap:6px; margin-top:14px; border-bottom:2px solid #8296a2; }
.kleur-tabs button { flex:1; padding:10px; border:1px solid #8296a2; border-radius:6px 6px 0 0; background:#e6ebee; color:#163c50; font:inherit; cursor:pointer; }
.kleur-tabs button[aria-selected="true"] { background:var(--bediening-achtergrond,linear-gradient(135deg,#387b98 20%,#92b6c6 40%,#234c5e 80%)); font-weight:bold;  color:var(--kleur-icoontekst,#f3df9f);  border-color:var(--kleur-icoontekst,#f3df9f); }
[data-kleur-paneel][hidden] { display:none!important; }
[data-kleur-spectrum] { height:145px; position:relative; background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent); border:1px solid #777; touch-action:none; cursor:crosshair; }
[data-kleur-punt] { position:absolute; width:12px; height:12px; border:2px solid white; box-shadow:0 0 0 1px #000; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.kleur-hsv { font-size:14px; }
.kleur-hsv output { float:right; }
.kleur-hsv input { display:block; width:100%; }
body.radio-neutraal .radio-paneel { border-radius:22px; overflow:hidden; background-clip:padding-box; }
.kleur-voorbeeld [data-kleur-deel="radio"] { border-radius:22px; background-clip:padding-box; }
[data-verloop-editor][hidden] { display:none!important; }
[data-verloop-editor] { margin:12px 0; padding:10px 18px; border:1px solid #b9c6cd; border-radius:8px; }
[data-verloop-editor] select,[data-verloop-editor] input[type="number"] { max-width:100%; }
[data-verloop-balk] { height:28px; border:1px solid #777; margin-top:10px; border-radius:4px; }
[data-verloop-punten] { position:relative; height:42px; margin:5px 0; touch-action:none; }
[data-verloop-punt] { position:absolute; transform:translateX(-50%); border:1px solid #777; border-radius:5px; width:28px; height:32px; padding:0; cursor:ew-resize; }
[data-verloop-punt][aria-pressed="true"] { outline:3px solid #325f82; outline-offset:2px; }
[data-verloop-hoekslider] { width:100%; }
dialog.kleur-dialoog { width:min(680px,calc(100vw - 24px)); padding:0; overflow:hidden; }
.kleur-dialoog-layout { display:grid; grid-template-columns:110px minmax(0,1fr); height:min(740px,calc(100dvh - 36px)); }
.kleur-dialoog-layout>[data-kleur-monster] { height:auto; margin:0; border:0; border-right:1px solid #8296a2; border-radius:0; }
.kleur-dialoog-inhoud { overflow:auto; padding:20px; min-width:0; }
.kleur-punten-acties { display:flex; align-items:center; gap:8px; white-space:nowrap; margin-top:12px; }
.kleur-punten-acties button { padding:6px 8px; font-size:13px; width:auto; min-width:0; }
.kleur-tabs button[hidden] { display:none!important; }
@media(max-width:520px){.kleur-dialoog-layout{grid-template-columns:48px minmax(0,1fr)}.kleur-dialoog-inhoud{padding:10px}.kleur-tabs button{font-size:12px;padding:8px 4px}.kleur-punten-acties{gap:4px;font-size:12px}.kleur-punten-acties button{padding:6px 4px;font-size:12px}[data-verloop-editor]{padding:8px 12px}}
body.radio-neutraal .radio-paneel { border:0; padding:14px; background-clip:border-box; }
.kleur-voorbeeld [data-kleur-deel="radio"] { position:relative; border:0; padding:16px 24px; overflow:hidden; isolation:isolate; }
body.radio-neutraal .radio-paneel::before,
.kleur-voorbeeld [data-kleur-deel="radio"]::before {
    content:""; position:absolute; inset:5px; padding:5px; border-radius:17px;
    background:var(--radio-randverloop,#777777); pointer-events:none; z-index:1;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
}
.pagina-functie-icoon { width:128px; height:128px; object-fit:contain; }

.kleur-dialoog-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.kleur-dialoog .kleur-dialoog-kop h2{margin:0;flex:1}
.kleur-dialoog-kop .kleur-dialoog-acties{margin:0;gap:6px}
.kleur-dialoog-kop .kleur-dialoog-acties button{padding:8px 10px}
.kleur-dialoog .kleur-hexregel,.kleur-dialoog [data-verloop-editor]>label:has(select),.kleur-dialoog [data-verloop-hoek]>label{display:flex;align-items:center;gap:14px}
.kleur-dialoog .kleur-hexregel input{width:10ch;flex:0 0 10ch}
.kleur-dialoog [data-verloop-type]{width:auto;min-width:0;flex:1}
.kleur-dialoog [data-verloop-hoekgetal]{width:6em;text-align:center}