/* Stijl van de gedeelde hulpjes uit js/studio/util.js: tooltip, lightbox, sorteerbare koppen, dropdown. Tokens uit css/tokens.css;
   in ronde 2 (pakket A) in dezelfde taal gebracht als studio.css: plum voor de kop, plum-50 als zachte band, gekozen staat in plum,
   goud alleen op focus, afronding --r en --r2. */
.qx-tip{position:fixed;z-index:9000;max-width:280px;padding:7px 10px;border-radius:var(--r,6px);background:var(--plum,#2b1a49);color:var(--primary-ink,#fff);font:500 14px/1.4 var(--font-tekst,sans-serif);box-shadow:0 8px 24px rgba(20,10,40,.18);pointer-events:none;white-space:normal}
.qx-tip[hidden]{display:none}
.qx-tip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:inherit}
.qx-tip.onder::after{bottom:auto;top:-5px}

.qx-lightbox{position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,10,36,.72);backdrop-filter:blur(2px)}
.qx-lightbox-vlak{display:flex;flex-direction:column;width:min(1280px,100%);max-height:100%;background:var(--n0,#fff);border:1px solid var(--n200,#e6e2da);border-radius:var(--r2,8px);box-shadow:0 24px 80px rgba(10,5,30,.45);overflow:hidden}
.qx-lightbox.breed .qx-lightbox-vlak{width:min(1800px,100%)}
.qx-lightbox-vlak>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;min-height:48px;border-bottom:1px solid var(--plum-100,#ebe6f2);background:var(--plum-50,#f5f2f9);color:var(--plum,#2b1a49);font:600 16px/1.3 var(--font-kop,sans-serif);letter-spacing:-.01em}
.qx-lightbox-vlak>header .btn{font-family:var(--font-tekst,sans-serif)}
.qx-lightbox-inhoud{overflow:auto;padding:16px;display:flex;align-items:center;justify-content:center;background:var(--n50,#faf9f6)}
.qx-lightbox-inhoud>*{max-width:100%}
body.qx-lightbox-open{overflow:hidden}

table.sorteer thead th.sorteerbaar{cursor:pointer;user-select:none;position:relative;padding-right:20px;border-radius:var(--r,5px) var(--r,5px) 0 0}
table.sorteer thead th.sorteerbaar:hover{color:var(--plum,#2b1a49);background:var(--plum-50,#f5f2f9)}
table.sorteer thead th.sorteerbaar::after{content:"";position:absolute;right:8px;top:50%;width:6px;height:6px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.35}
table.sorteer thead th.sorteerbaar.op,table.sorteer thead th.sorteerbaar.af{color:var(--plum,#2b1a49)}
table.sorteer thead th.sorteerbaar.op::after{transform:rotate(-135deg);margin-top:0;opacity:1}
table.sorteer thead th.sorteerbaar.af::after{opacity:1}
table.sorteer thead th.sorteerbaar:focus-visible{outline:2px solid var(--gold,#c9a227);outline-offset:-2px}

.qx-dropdown{display:none;position:fixed;z-index:7000;min-width:260px;max-width:min(720px,calc(100vw - 16px));padding:12px;background:var(--n0,#fff);border:1px solid var(--n200,#e6e2da);border-radius:var(--r2,8px);box-shadow:0 14px 40px rgba(20,10,40,.18)}
.qx-dropdown.open{display:block}
.qx-dropdown .qx-dropdown-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.qx-dropdown .qx-dropdown-raster button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:9px 10px;border:1px solid var(--n200,#e6e2da);border-radius:var(--r,5px);background:var(--n50,#faf9f6);color:var(--n900,#1e1a15);text-align:left;cursor:pointer}
.qx-dropdown .qx-dropdown-raster button:hover{border-color:var(--plum-500,#5a4784);background:var(--n0,#fff)}
.qx-dropdown .qx-dropdown-raster button.actief{border-color:var(--plum,#2b1a49);background:var(--plum-50,#f5f2f9);color:var(--plum,#2b1a49);box-shadow:inset 0 0 0 1px var(--plum,#2b1a49)}
[data-dropdown][aria-expanded="true"]{border-color:var(--plum,#2b1a49);box-shadow:0 0 0 2px var(--plum-100,#ebe6f2)}