:root { --navy:#0a2a5e; --orange:#0a6cf5; --orange-h:#0856c4; --blue:#0a2a5e; --bg:#e8e8e8; --ink:#323232; --mut:#6b7280; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Lato", "Segoe UI", system-ui, sans-serif; background:var(--bg); color:var(--ink); }
a { color:inherit; text-decoration:none; }

.top { display:flex; align-items:center; gap:24px; background:var(--head, var(--navy)); color:var(--captext,var(--headtext,#fff)); padding:10px 24px; box-shadow:0 1px 6px rgba(0,0,0,.12); position:sticky; top:0; z-index:5; }
.brand { font-weight:700; font-size:20px; min-width:140px; display:flex; align-items:center; gap:10px; }
.brand img { display:block; }
.welcome { font-size:28px; font-weight:900; margin:0 0 20px; color:var(--welcome, var(--captext, #323232)); }
.welcome[hidden] { display:none; }
.wtoggle { margin-left:16px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.toplink { background:none; border:0; padding:0; color:inherit; font:inherit; font-weight:700; display:inline-flex; align-items:center; gap:5px; height:34px; line-height:1; cursor:pointer; }
.toplink:hover { color:var(--hover, var(--orange)); }
.top input { flex:1; max-width:320px; margin:0 auto; padding:10px 14px; border:1px solid #d6dae3; background:#fff; color:#323232; border-radius:8px; font-size:14px; }
.user { display:flex; align-items:center; gap:12px; font-size:13px; } .user a { font-weight:700; display:inline-flex; align-items:center; gap:5px; height:34px; line-height:1; } .user a:hover { color:var(--hover, var(--orange)); }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--wlink, var(--orange)); color:var(--head, #fff); display:grid; place-items:center; font-weight:600; font-size:13px; border:0; padding:0; font-family:inherit; cursor:pointer; }
.avatar:focus-visible { outline:2px solid var(--captext, var(--headtext, #fff)); outline-offset:2px; }
.usermenu { position:relative; flex:none; }
.umenu { position:absolute; right:0; top:calc(100% + 10px); min-width:220px; background:#fff; color:#323232; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.22); padding:6px; z-index:30; }
.umenu .uinfo { display:flex; flex-direction:column; padding:8px 12px 10px; border-bottom:1px solid #eee; margin-bottom:4px; font-size:12px; color:var(--mut); overflow-wrap:anywhere; }
.umenu .uinfo b { font-size:14px; color:#323232; }
.umenu a { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:6px; font-weight:700; font-size:13px; color:#323232; }
.umenu a:hover, .umenu a:focus-visible { background:color-mix(in srgb, var(--hover, var(--orange)) 12%, #fff); color:var(--hover, var(--orange)); outline:0; }

.page { padding:24px 16px; max-width:1800px; margin:0 auto; }
.profsel, .profbar select { font:inherit; font-size:13px; font-weight:700; padding:5px 8px; border:1px solid #cfd4da; border-radius:8px; background:#fff; color:#323232; max-width:180px; }
.profsel[hidden] { display:none; }
.profbar { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; }
.profbar .btn { padding:5px 10px; }
#profdlg { width:min(520px, 94vw); }
#profdlg .row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#profdlg .row label { min-width:0; }
body[data-cols="4"] .page { max-width:none; }   /* 4 kolommen: over de volle schermbreedte */
.greet { display:flex; justify-content:space-between; align-items:center; }
.greet h1 { font-size:28px; font-weight:900; margin:0 0 20px; color:#323232; }
.cols { display:block; }

[hidden] { display:none !important; }

/* Widgets: raster van 6 kolommen, rijen van 40 px */
.colpick { display:inline-flex; align-items:center; gap:4px; margin-left:12px; font-size:13px; font-weight:700; }
.colpick span { margin-right:4px; }
.colpick button { width:30px; height:30px; border:1px solid #cfd4da; background:#fff; border-radius:8px; font:inherit; font-weight:700; cursor:pointer; }
.colpick button:hover { border-color:var(--hover, var(--orange)); color:var(--hover, var(--orange)); }
.colpick button.on { background:var(--hover, var(--orange)); border-color:var(--hover, var(--orange)); color:#fff; }
.wrow { display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0, 1fr)); gap:12px; margin-bottom:12px; }
.wcol { display:flex; flex-direction:column; gap:12px; min-width:0; min-height:60px; }
.widgets > .widget { margin-bottom:12px; }
.widgets.editing .wcol { outline:1px dashed rgba(128,128,128,.35); outline-offset:4px; border-radius:8px; }
.widget { flex:none; display:flex; flex-direction:column; min-height:0; position:relative; background:rgba(255,255,255,var(--wop,1)); backdrop-filter:blur(6px); border-radius:8px; overflow:hidden; box-shadow:0 8px 40px -6px rgba(79,79,79,.19); }
.widget h2 { margin:0; flex:none; height:40px; padding:0 8px 0 16px; background:var(--head, var(--navy)); color:var(--captext,var(--headtext,#fff)); font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:3px solid var(--wline, transparent); font-weight:900; }
.wtitle { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wtools { display:flex; align-items:center; gap:2px; flex:none; }
.wlink { font-weight:400; font-size:12px; opacity:.95; color:var(--wlink, inherit); font-weight:700; margin-right:6px; }
.wbtn { background:none; border:0; color:inherit; font:inherit; font-size:16px; line-height:1; width:26px; height:26px; border-radius:6px; cursor:pointer; opacity:.85; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.wbtn svg { display:block; }
.wbtn:hover { background:rgba(128,128,128,.3); opacity:1; }
.wbtn.on { background:rgba(128,128,128,.35); opacity:1; }
.wbtn.active { background:color-mix(in srgb, var(--hover, #0a6cf5) 35%, transparent); opacity:1; }
.wbody { flex:1; min-height:0; overflow:auto; container-type:size; }
.widget.collapsed .wbody, .widget.collapsed .rz { display:none; }
.widgets.editing .widget { outline:2px dashed rgba(128,128,128,.55); outline-offset:-2px; }
.widgets.editing .widget h2 { cursor:grab; }
.widget.dragging { opacity:.4; }
/* Tijdens het slepen reageert de inhoud niet: scrollende lijsten en ingesloten pagina's slokken anders de sleepgebeurtenissen op. */
.widgets.drag .wbody { pointer-events:none; }
.rz { position:absolute; right:0; bottom:0; width:22px; height:22px; cursor:nwse-resize; touch-action:none; background:linear-gradient(135deg, transparent 50%, var(--hover, var(--orange)) 50%); border-bottom-right-radius:12px; }
.wbar { display:flex; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.hint { font-size:12px; color:var(--mut); }
.list { list-style:none; margin:0; padding:0; }

/* Klok */
.clock { height:100cqh; width:100cqw; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px; }
.clock .ctime { font-weight:900; font-size:min(17cqw, 52cqh); line-height:1; font-variant-numeric:tabular-nums; }
.clock .cdate { font-size:min(6cqw, 12cqh); color:var(--mut); text-transform:capitalize; }
.clock .face { flex:1 1 0; min-height:0; max-width:100%; aspect-ratio:1 / 1; }
.clocks { height:100cqh; width:100cqw; display:flex; }
.clocks .clock { flex:1 1 0; min-width:0; width:auto; height:100%; }
.clocks.two .clock + .clock { border-left:1px solid var(--line, #e3e6ec); }
.clock .cname { font-weight:700; font-size:min(5cqw, 10cqh); color:var(--ink); }
.clocks.two .ctime { font-size:min(8.5cqw, 40cqh); }
.clocks.two .cdate { font-size:min(3.4cqw, 10cqh); text-align:center; }
.clock .rim { fill:#fff; stroke:var(--head, var(--navy)); stroke-width:3; }
.clock .ticks line { stroke:var(--ink); }
.clock .hh, .clock .mh { stroke:var(--ink); stroke-linecap:round; }
.clock .hh { stroke-width:4; } .clock .mh { stroke-width:2.6; }
.clock .sh { stroke:var(--orange); stroke-width:1.2; stroke-linecap:round; }
.clock .pin { fill:var(--orange); }
dialog select { display:block; width:100%; margin-top:4px; padding:9px 10px; border:1px solid #cfd4da; border-radius:6px; font:inherit; background:#fff; }
.list li > a, .list li > div { display:flex; gap:12px; padding:10px 16px; border-bottom:1px solid #eee; }
.list li > a { flex-direction:column; gap:2px; }
.list li > a:hover { background:color-mix(in srgb, var(--hover, #0a6cf5) 9%, #fff); }
.list li.muted { padding:14px 16px; color:var(--mut); font-size:13px; }
.line1 { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.line1.unread { font-weight:700; }
.line2 { font-size:12px; color:var(--mut); display:flex; justify-content:space-between; gap:12px; }
.line2 span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list li > a:has(.when) { flex-direction:row; gap:14px; }
.when { min-width:64px; display:flex; flex-direction:column; }
.when small { color:var(--mut); font-size:11px; }

.tiles-area h2 { font-size:18px; font-weight:600; margin:0 0 12px; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap:10px; margin-bottom:28px; }
.tile { position:relative; aspect-ratio:1.15; border:0; border-radius:10px; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:8px; text-align:center; font:inherit; cursor:pointer; transition:transform .1s, filter .1s; }
.tile:hover { transform:translateY(-2px); filter:brightness(1.07); }
.tile .ico { font-size:30px; line-height:1; font-weight:600; }
.tile .ttl { font-size:12px; line-height:1.2; overflow-wrap:anywhere; }
.tile.add { background:transparent; border:2px dashed #c3c8d0; color:#9aa1ad; font-size:32px; }
.tile .del { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; line-height:1; }

.btn { border:1px solid #cfd4da; background:#fff; border-radius:8px; font-weight:700; padding:8px 16px; font:inherit; font-size:13px; cursor:pointer; display:inline-block; }
.btn.primary { background:var(--hover, var(--orange)); color:#fff; border-color:var(--hover, var(--orange)); }
.btn.primary:hover { background:color-mix(in srgb, var(--hover, var(--orange)) 88%, #000); border-color:color-mix(in srgb, var(--hover, var(--orange)) 88%, #000); }

dialog { border:0; border-radius:12px; padding:24px; width:min(420px, 92vw); box-shadow:0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(0,0,0,.4); }
dialog h3 { margin:0 0 12px; }
dialog label { display:block; font-size:13px; margin-bottom:12px; }
dialog input:not([type=checkbox]):not([type=color]) { display:block; width:100%; margin-top:4px; padding:9px 10px; border:1px solid #cfd4da; border-radius:6px; font:inherit; }
dialog input[type=color] { display:block; margin-top:4px; height:38px; width:70px; }
dialog .row { display:flex; gap:16px; } dialog .row label:first-child { flex:1; }
dialog .check { display:flex; gap:8px; align-items:center; }
.actions { display:flex; justify-content:flex-end; gap:8px; }
.err { color:#b00020; font-size:13px; min-height:1em; }

.login { display:grid; place-items:center; min-height:100vh; background:var(--bg); }
.login-card { background:#fff; padding:40px; border-radius:14px; box-shadow:0 8px 30px rgba(23,64,107,.15); border-top:4px solid var(--hover, var(--orange)); text-align:center; width:min(380px, 92vw); }
.login-card h1 { margin:0 0 8px; }

@media (max-width: 900px) { .cols { grid-template-columns:1fr; } .top input { display:none; } .page { padding:16px; } .wrow { grid-template-columns:1fr; } .colpick { display:none; } }

/* Achtergronden (skin): de kleur komt uit --c */
.skin-effen { background:var(--c); }
.skin-verloop { background:linear-gradient(135deg, var(--c), var(--c2, color-mix(in srgb, var(--c) 55%, #fff))) fixed; }
.skin-stippen { background-color:var(--c); background-image:radial-gradient(var(--p, color-mix(in srgb, var(--c) 82%, #000)) 1.5px, transparent 1.6px); background-size:18px 18px; }
.skin-raster { background-color:var(--c); background-image:linear-gradient(var(--p, color-mix(in srgb, var(--c) 85%, #000)) 1px, transparent 1px), linear-gradient(90deg, var(--p, color-mix(in srgb, var(--c) 85%, #000)) 1px, transparent 1px); background-size:28px 28px; }
.skin-cirkels { background-color:var(--c); background-image:radial-gradient(circle at 18% 22%, var(--p, color-mix(in srgb, var(--c) 65%, #fff)) 0 140px, transparent 141px), radial-gradient(circle at 82% 70%, var(--p, color-mix(in srgb, var(--c) 85%, #000)) 0 200px, transparent 201px); background-attachment:fixed; }
.skin-netwerk { background-color:var(--c); background-image:var(--net, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='rgba(70,135,205,.35)' stroke-width='1' fill='none'%3E%3Cline x1='31' y1='60' x2='15' y2='99'/%3E%3Cline x1='31' y1='60' x2='95' y2='86'/%3E%3Cline x1='15' y1='99' x2='123' y2='61'/%3E%3Cline x1='12' y1='420' x2='47' y2='512'/%3E%3Cline x1='47' y1='512' x2='165' y2='530'/%3E%3Cline x1='123' y1='61' x2='95' y2='86'/%3E%3Cline x1='123' y1='61' x2='206' y2='72'/%3E%3Cline x1='123' y1='61' x2='170' y2='165'/%3E%3Cline x1='95' y1='86' x2='206' y2='72'/%3E%3Cline x1='95' y1='86' x2='198' y2='116'/%3E%3Cline x1='95' y1='86' x2='170' y2='165'/%3E%3Cline x1='151' y1='312' x2='215' y2='301'/%3E%3Cline x1='143' y1='590' x2='228' y2='634'/%3E%3Cline x1='143' y1='590' x2='219' y2='690'/%3E%3Cline x1='143' y1='590' x2='271' y2='616'/%3E%3Cline x1='206' y1='72' x2='198' y2='116'/%3E%3Cline x1='206' y1='72' x2='170' y2='165'/%3E%3Cline x1='206' y1='72' x2='281' y2='69'/%3E%3Cline x1='198' y1='116' x2='281' y2='69'/%3E%3Cline x1='198' y1='116' x2='297' y2='207'/%3E%3Cline x1='170' y1='165' x2='259' y2='101'/%3E%3Cline x1='170' y1='165' x2='297' y2='207'/%3E%3Cline x1='215' y1='301' x2='297' y2='207'/%3E%3Cline x1='215' y1='301' x2='294' y2='269'/%3E%3Cline x1='180' y1='384' x2='209' y2='455'/%3E%3Cline x1='209' y1='455' x2='287' y2='473'/%3E%3Cline x1='209' y1='455' x2='284' y2='545'/%3E%3Cline x1='165' y1='530' x2='228' y2='634'/%3E%3Cline x1='165' y1='530' x2='287' y2='473'/%3E%3Cline x1='165' y1='530' x2='284' y2='545'/%3E%3Cline x1='228' y1='634' x2='219' y2='690'/%3E%3Cline x1='228' y1='634' x2='186' y2='749'/%3E%3Cline x1='228' y1='634' x2='284' y2='545'/%3E%3Cline x1='219' y1='690' x2='186' y2='749'/%3E%3Cline x1='219' y1='690' x2='271' y2='616'/%3E%3Cline x1='281' y1='69' x2='331' y2='33'/%3E%3Cline x1='281' y1='69' x2='355' y2='86'/%3E%3Cline x1='259' y1='101' x2='297' y2='207'/%3E%3Cline x1='297' y1='207' x2='355' y2='86'/%3E%3Cline x1='297' y1='207' x2='364' y2='300'/%3E%3Cline x1='294' y1='269' x2='364' y2='300'/%3E%3Cline x1='294' y1='269' x2='363' y2='349'/%3E%3Cline x1='287' y1='473' x2='284' y2='545'/%3E%3Cline x1='287' y1='473' x2='387' y2='445'/%3E%3Cline x1='271' y1='616' x2='377' y2='684'/%3E%3Cline x1='331' y1='33' x2='355' y2='86'/%3E%3Cline x1='331' y1='33' x2='465' y2='15'/%3E%3Cline x1='355' y1='86' x2='465' y2='15'/%3E%3Cline x1='355' y1='86' x2='443' y2='119'/%3E%3Cline x1='364' y1='300' x2='363' y2='349'/%3E%3Cline x1='364' y1='300' x2='451' y2='208'/%3E%3Cline x1='363' y1='349' x2='387' y2='445'/%3E%3Cline x1='363' y1='349' x2='490' y2='360'/%3E%3Cline x1='387' y1='445' x2='458' y2='471'/%3E%3Cline x1='387' y1='445' x2='438' y2='494'/%3E%3Cline x1='387' y1='445' x2='490' y2='360'/%3E%3Cline x1='377' y1='684' x2='431' y2='734'/%3E%3Cline x1='443' y1='119' x2='466' y2='252'/%3E%3Cline x1='443' y1='119' x2='496' y2='71'/%3E%3Cline x1='443' y1='119' x2='554' y2='116'/%3E%3Cline x1='451' y1='208' x2='466' y2='252'/%3E%3Cline x1='451' y1='208' x2='487' y2='228'/%3E%3Cline x1='451' y1='208' x2='573' y2='167'/%3E%3Cline x1='466' y1='252' x2='487' y2='228'/%3E%3Cline x1='466' y1='252' x2='490' y2='360'/%3E%3Cline x1='458' y1='471' x2='438' y2='494'/%3E%3Cline x1='458' y1='471' x2='490' y2='360'/%3E%3Cline x1='458' y1='471' x2='542' y2='511'/%3E%3Cline x1='438' y1='494' x2='542' y2='511'/%3E%3Cline x1='496' y1='71' x2='554' y2='116'/%3E%3Cline x1='496' y1='71' x2='601' y2='22'/%3E%3Cline x1='496' y1='71' x2='573' y2='167'/%3E%3Cline x1='554' y1='116' x2='487' y2='228'/%3E%3Cline x1='554' y1='116' x2='573' y2='167'/%3E%3Cline x1='554' y1='116' x2='657' y2='122'/%3E%3Cline x1='487' y1='228' x2='490' y2='360'/%3E%3Cline x1='487' y1='228' x2='573' y2='167'/%3E%3Cline x1='487' y1='228' x2='575' y2='280'/%3E%3Cline x1='490' y1='360' x2='575' y2='280'/%3E%3Cline x1='490' y1='360' x2='604' y2='391'/%3E%3Cline x1='542' y1='511' x2='551' y2='603'/%3E%3Cline x1='542' y1='511' x2='604' y2='391'/%3E%3Cline x1='542' y1='511' x2='634' y2='568'/%3E%3Cline x1='551' y1='603' x2='634' y2='568'/%3E%3Cline x1='601' y1='22' x2='680' y2='15'/%3E%3Cline x1='601' y1='22' x2='657' y2='122'/%3E%3Cline x1='598' y1='117' x2='573' y2='167'/%3E%3Cline x1='598' y1='117' x2='657' y2='122'/%3E%3Cline x1='573' y1='167' x2='575' y2='280'/%3E%3Cline x1='573' y1='167' x2='657' y2='122'/%3E%3Cline x1='573' y1='167' x2='669' y2='212'/%3E%3Cline x1='575' y1='280' x2='604' y2='391'/%3E%3Cline x1='575' y1='280' x2='652' y2='277'/%3E%3Cline x1='634' y1='568' x2='756' y2='520'/%3E%3Cline x1='680' y1='15' x2='657' y2='122'/%3E%3Cline x1='680' y1='15' x2='778' y2='20'/%3E%3Cline x1='657' y1='122' x2='769' y2='182'/%3E%3Cline x1='669' y1='212' x2='652' y2='277'/%3E%3Cline x1='669' y1='212' x2='762' y2='126'/%3E%3Cline x1='669' y1='212' x2='769' y2='182'/%3E%3Cline x1='652' y1='277' x2='713' y2='355'/%3E%3Cline x1='652' y1='277' x2='725' y2='254'/%3E%3Cline x1='652' y1='277' x2='754' y2='354'/%3E%3Cline x1='713' y1='355' x2='710' y2='437'/%3E%3Cline x1='713' y1='355' x2='725' y2='254'/%3E%3Cline x1='713' y1='355' x2='754' y2='354'/%3E%3Cline x1='710' y1='437' x2='756' y2='520'/%3E%3Cline x1='703' y1='689' x2='666' y2='748'/%3E%3Cline x1='703' y1='689' x2='772' y2='690'/%3E%3Cline x1='666' y1='748' x2='772' y2='690'/%3E%3Cline x1='778' y1='20' x2='762' y2='126'/%3E%3Cline x1='778' y1='20' x2='823' y2='68'/%3E%3Cline x1='778' y1='20' x2='831' y2='127'/%3E%3Cline x1='762' y1='126' x2='769' y2='182'/%3E%3Cline x1='762' y1='126' x2='823' y2='68'/%3E%3Cline x1='762' y1='126' x2='809' y2='184'/%3E%3Cline x1='769' y1='182' x2='725' y2='254'/%3E%3Cline x1='769' y1='182' x2='831' y2='127'/%3E%3Cline x1='769' y1='182' x2='900' y2='167'/%3E%3Cline x1='725' y1='254' x2='754' y2='354'/%3E%3Cline x1='793' y1='454' x2='756' y2='520'/%3E%3Cline x1='793' y1='454' x2='844' y2='501'/%3E%3Cline x1='756' y1='520' x2='844' y2='501'/%3E%3Cline x1='823' y1='68' x2='831' y2='127'/%3E%3Cline x1='823' y1='68' x2='919' y2='50'/%3E%3Cline x1='823' y1='68' x2='903' y2='137'/%3E%3Cline x1='831' y1='127' x2='809' y2='184'/%3E%3Cline x1='831' y1='127' x2='919' y2='50'/%3E%3Cline x1='831' y1='127' x2='903' y2='137'/%3E%3Cline x1='809' y1='184' x2='903' y2='137'/%3E%3Cline x1='844' y1='501' x2='901' y2='584'/%3E%3Cline x1='919' y1='50' x2='903' y2='137'/%3E%3Cline x1='919' y1='50' x2='900' y2='167'/%3E%3Cline x1='919' y1='50' x2='996' y2='129'/%3E%3Cline x1='903' y1='137' x2='900' y2='167'/%3E%3Cline x1='903' y1='137' x2='1015' y2='74'/%3E%3Cline x1='903' y1='137' x2='996' y2='129'/%3E%3Cline x1='900' y1='167' x2='996' y2='129'/%3E%3Cline x1='900' y1='167' x2='1000' y2='215'/%3E%3Cline x1='942' y1='305' x2='917' y2='342'/%3E%3Cline x1='942' y1='305' x2='1023' y2='349'/%3E%3Cline x1='942' y1='305' x2='1046' y2='289'/%3E%3Cline x1='917' y1='342' x2='970' y2='314'/%3E%3Cline x1='930' y1='497' x2='901' y2='584'/%3E%3Cline x1='930' y1='497' x2='1015' y2='456'/%3E%3Cline x1='930' y1='497' x2='974' y2='545'/%3E%3Cline x1='921' y1='670' x2='1004' y2='773'/%3E%3Cline x1='1015' y1='74' x2='996' y2='129'/%3E%3Cline x1='1015' y1='74' x2='1063' y2='56'/%3E%3Cline x1='1015' y1='74' x2='1047' y2='118'/%3E%3Cline x1='996' y1='129' x2='1000' y2='215'/%3E%3Cline x1='996' y1='129' x2='1047' y2='118'/%3E%3Cline x1='1000' y1='215' x2='970' y2='314'/%3E%3Cline x1='1000' y1='215' x2='1047' y2='118'/%3E%3Cline x1='1000' y1='215' x2='1081' y2='199'/%3E%3Cline x1='970' y1='314' x2='1046' y2='289'/%3E%3Cline x1='1023' y1='349' x2='1046' y2='289'/%3E%3Cline x1='1023' y1='349' x2='1064' y2='423'/%3E%3Cline x1='1015' y1='456' x2='974' y2='545'/%3E%3Cline x1='1015' y1='456' x2='1064' y2='423'/%3E%3Cline x1='1015' y1='456' x2='1087' y2='528'/%3E%3Cline x1='1063' y1='56' x2='1047' y2='118'/%3E%3Cline x1='1063' y1='56' x2='1157' y2='37'/%3E%3Cline x1='1047' y1='118' x2='1145' y2='211'/%3E%3Cline x1='1081' y1='199' x2='1046' y2='289'/%3E%3Cline x1='1081' y1='199' x2='1145' y2='211'/%3E%3Cline x1='1046' y1='289' x2='1145' y2='211'/%3E%3Cline x1='1064' y1='423' x2='1087' y2='528'/%3E%3Cline x1='1064' y1='423' x2='1158' y2='496'/%3E%3Cline x1='1087' y1='528' x2='1158' y2='496'/%3E%3Cline x1='1087' y1='528' x2='1140' y2='634'/%3E%3Cline x1='1112' y1='646' x2='1053' y2='757'/%3E%3Cline x1='1112' y1='646' x2='1166' y2='668'/%3E%3Cline x1='1157' y1='37' x2='1273' y2='24'/%3E%3Cline x1='1157' y1='37' x2='1239' y2='105'/%3E%3Cline x1='1145' y1='211' x2='1233' y2='185'/%3E%3Cline x1='1186' y1='267' x2='1192' y2='356'/%3E%3Cline x1='1192' y1='356' x2='1259' y2='295'/%3E%3Cline x1='1192' y1='356' x2='1263' y2='425'/%3E%3Cline x1='1192' y1='356' x2='1317' y2='371'/%3E%3Cline x1='1158' y1='496' x2='1263' y2='425'/%3E%3Cline x1='1140' y1='634' x2='1166' y2='668'/%3E%3Cline x1='1273' y1='24' x2='1239' y2='105'/%3E%3Cline x1='1273' y1='24' x2='1301' y2='57'/%3E%3Cline x1='1273' y1='24' x2='1388' y2='40'/%3E%3Cline x1='1239' y1='105' x2='1301' y2='57'/%3E%3Cline x1='1239' y1='105' x2='1303' y2='119'/%3E%3Cline x1='1239' y1='105' x2='1317' y2='198'/%3E%3Cline x1='1233' y1='185' x2='1259' y2='295'/%3E%3Cline x1='1233' y1='185' x2='1303' y2='119'/%3E%3Cline x1='1233' y1='185' x2='1317' y2='198'/%3E%3Cline x1='1259' y1='295' x2='1263' y2='425'/%3E%3Cline x1='1263' y1='425' x2='1317' y2='371'/%3E%3Cline x1='1263' y1='425' x2='1334' y2='415'/%3E%3Cline x1='1301' y1='57' x2='1303' y2='119'/%3E%3Cline x1='1301' y1='57' x2='1375' y2='141'/%3E%3Cline x1='1303' y1='119' x2='1375' y2='141'/%3E%3Cline x1='1317' y1='198' x2='1375' y2='141'/%3E%3Cline x1='1317' y1='371' x2='1334' y2='415'/%3E%3Cline x1='1334' y1='415' x2='1416' y2='467'/%3E%3Cline x1='1334' y1='415' x2='1389' y2='532'/%3E%3Cline x1='1334' y1='415' x2='1450' y2='447'/%3E%3Cline x1='1305' y1='589' x2='1389' y2='532'/%3E%3Cline x1='1305' y1='589' x2='1375' y2='593'/%3E%3Cline x1='1388' y1='40' x2='1375' y2='141'/%3E%3Cline x1='1388' y1='40' x2='1496' y2='43'/%3E%3Cline x1='1375' y1='141' x2='1495' y2='131'/%3E%3Cline x1='1375' y1='141' x2='1468' y2='234'/%3E%3Cline x1='1433' y1='168' x2='1495' y2='131'/%3E%3Cline x1='1433' y1='168' x2='1468' y2='234'/%3E%3Cline x1='1404' y1='367' x2='1450' y2='447'/%3E%3Cline x1='1416' y1='467' x2='1375' y2='593'/%3E%3Cline x1='1416' y1='467' x2='1450' y2='447'/%3E%3Cline x1='1416' y1='467' x2='1543' y2='497'/%3E%3Cline x1='1375' y1='593' x2='1420' y2='696'/%3E%3Cline x1='1375' y1='593' x2='1491' y2='662'/%3E%3Cline x1='1420' y1='696' x2='1491' y2='662'/%3E%3Cline x1='1496' y1='43' x2='1571' y2='128'/%3E%3Cline x1='1495' y1='131' x2='1569' y2='60'/%3E%3Cline x1='1495' y1='131' x2='1571' y2='128'/%3E%3Cline x1='1495' y1='131' x2='1570' y2='166'/%3E%3Cline x1='1468' y1='234' x2='1507' y2='355'/%3E%3Cline x1='1468' y1='234' x2='1570' y2='166'/%3E%3Cline x1='1468' y1='234' x2='1529' y2='304'/%3E%3Cline x1='1507' y1='355' x2='1547' y2='353'/%3E%3Cline x1='1450' y1='447' x2='1543' y2='497'/%3E%3Cline x1='1491' y1='662' x2='1574' y2='590'/%3E%3Cline x1='1529' y1='304' x2='1547' y2='353'/%3E%3Cline x1='1529' y1='304' x2='1535' y2='425'/%3E%3Cline x1='1547' y1='353' x2='1535' y2='425'/%3E%3Cline x1='1535' y1='425' x2='1543' y2='497'/%3E%3Cline x1='1543' y1='497' x2='1574' y2='590'/%3E%3C/g%3E%3Cg fill='rgba(70,135,205,.35)'%3E%3Ccircle cx='31' cy='60' r='3.4'/%3E%3Ccircle cx='15' cy='99' r='3.6'/%3E%3Ccircle cx='17' cy='282' r='3.5'/%3E%3Ccircle cx='12' cy='420' r='2.2'/%3E%3Ccircle cx='47' cy='512' r='2.1'/%3E%3Ccircle cx='14' cy='573' r='3.6'/%3E%3Ccircle cx='123' cy='61' r='3.2'/%3E%3Ccircle cx='95' cy='86' r='2.4'/%3E%3Ccircle cx='151' cy='312' r='3.1'/%3E%3Ccircle cx='143' cy='590' r='2.1'/%3E%3Ccircle cx='206' cy='72' r='2.2'/%3E%3Ccircle cx='198' cy='116' r='3.6'/%3E%3Ccircle cx='170' cy='165' r='3.4'/%3E%3Ccircle cx='215' cy='301' r='3.3'/%3E%3Ccircle cx='180' cy='384' r='2.9'/%3E%3Ccircle cx='209' cy='455' r='2.6'/%3E%3Ccircle cx='165' cy='530' r='2.3'/%3E%3Ccircle cx='228' cy='634' r='3.1'/%3E%3Ccircle cx='219' cy='690' r='2.4'/%3E%3Ccircle cx='186' cy='749' r='2.8'/%3E%3Ccircle cx='281' cy='69' r='3.3'/%3E%3Ccircle cx='259' cy='101' r='2.5'/%3E%3Ccircle cx='297' cy='207' r='2.8'/%3E%3Ccircle cx='294' cy='269' r='2.9'/%3E%3Ccircle cx='287' cy='473' r='3.0'/%3E%3Ccircle cx='284' cy='545' r='2.1'/%3E%3Ccircle cx='271' cy='616' r='3.0'/%3E%3Ccircle cx='331' cy='33' r='2.2'/%3E%3Ccircle cx='355' cy='86' r='2.1'/%3E%3Ccircle cx='364' cy='300' r='2.5'/%3E%3Ccircle cx='363' cy='349' r='2.3'/%3E%3Ccircle cx='387' cy='445' r='2.1'/%3E%3Ccircle cx='377' cy='684' r='3.0'/%3E%3Ccircle cx='465' cy='15' r='2.1'/%3E%3Ccircle cx='443' cy='119' r='3.4'/%3E%3Ccircle cx='451' cy='208' r='2.9'/%3E%3Ccircle cx='466' cy='252' r='3.2'/%3E%3Ccircle cx='458' cy='471' r='2.9'/%3E%3Ccircle cx='438' cy='494' r='3.2'/%3E%3Ccircle cx='431' cy='734' r='3.3'/%3E%3Ccircle cx='496' cy='71' r='3.3'/%3E%3Ccircle cx='554' cy='116' r='3.3'/%3E%3Ccircle cx='487' cy='228' r='2.7'/%3E%3Ccircle cx='490' cy='360' r='3.3'/%3E%3Ccircle cx='542' cy='511' r='3.5'/%3E%3Ccircle cx='551' cy='603' r='2.8'/%3E%3Ccircle cx='601' cy='22' r='2.1'/%3E%3Ccircle cx='598' cy='117' r='2.4'/%3E%3Ccircle cx='573' cy='167' r='2.5'/%3E%3Ccircle cx='575' cy='280' r='2.3'/%3E%3Ccircle cx='604' cy='391' r='3.3'/%3E%3Ccircle cx='634' cy='568' r='2.1'/%3E%3Ccircle cx='680' cy='15' r='2.2'/%3E%3Ccircle cx='657' cy='122' r='2.7'/%3E%3Ccircle cx='669' cy='212' r='2.3'/%3E%3Ccircle cx='652' cy='277' r='3.6'/%3E%3Ccircle cx='713' cy='355' r='2.5'/%3E%3Ccircle cx='710' cy='437' r='3.0'/%3E%3Ccircle cx='703' cy='689' r='2.3'/%3E%3Ccircle cx='666' cy='748' r='2.2'/%3E%3Ccircle cx='778' cy='20' r='2.9'/%3E%3Ccircle cx='762' cy='126' r='2.1'/%3E%3Ccircle cx='769' cy='182' r='2.6'/%3E%3Ccircle cx='725' cy='254' r='2.1'/%3E%3Ccircle cx='754' cy='354' r='2.8'/%3E%3Ccircle cx='793' cy='454' r='3.3'/%3E%3Ccircle cx='756' cy='520' r='3.4'/%3E%3Ccircle cx='772' cy='690' r='2.9'/%3E%3Ccircle cx='823' cy='68' r='3.2'/%3E%3Ccircle cx='831' cy='127' r='3.0'/%3E%3Ccircle cx='809' cy='184' r='3.2'/%3E%3Ccircle cx='844' cy='501' r='2.5'/%3E%3Ccircle cx='919' cy='50' r='3.5'/%3E%3Ccircle cx='903' cy='137' r='2.3'/%3E%3Ccircle cx='900' cy='167' r='2.6'/%3E%3Ccircle cx='942' cy='305' r='2.3'/%3E%3Ccircle cx='917' cy='342' r='3.4'/%3E%3Ccircle cx='930' cy='497' r='3.3'/%3E%3Ccircle cx='901' cy='584' r='3.2'/%3E%3Ccircle cx='921' cy='670' r='2.6'/%3E%3Ccircle cx='1015' cy='74' r='2.4'/%3E%3Ccircle cx='996' cy='129' r='2.1'/%3E%3Ccircle cx='1000' cy='215' r='3.2'/%3E%3Ccircle cx='970' cy='314' r='2.8'/%3E%3Ccircle cx='1023' cy='349' r='3.0'/%3E%3Ccircle cx='1015' cy='456' r='2.6'/%3E%3Ccircle cx='974' cy='545' r='2.9'/%3E%3Ccircle cx='1004' cy='773' r='2.5'/%3E%3Ccircle cx='1063' cy='56' r='3.5'/%3E%3Ccircle cx='1047' cy='118' r='2.8'/%3E%3Ccircle cx='1081' cy='199' r='3.3'/%3E%3Ccircle cx='1046' cy='289' r='3.5'/%3E%3Ccircle cx='1064' cy='423' r='3.3'/%3E%3Ccircle cx='1087' cy='528' r='2.2'/%3E%3Ccircle cx='1112' cy='646' r='2.4'/%3E%3Ccircle cx='1053' cy='757' r='3.3'/%3E%3Ccircle cx='1157' cy='37' r='3.5'/%3E%3Ccircle cx='1145' cy='211' r='2.9'/%3E%3Ccircle cx='1186' cy='267' r='2.6'/%3E%3Ccircle cx='1192' cy='356' r='3.5'/%3E%3Ccircle cx='1158' cy='496' r='3.0'/%3E%3Ccircle cx='1140' cy='634' r='3.3'/%3E%3Ccircle cx='1166' cy='668' r='3.4'/%3E%3Ccircle cx='1273' cy='24' r='3.4'/%3E%3Ccircle cx='1239' cy='105' r='2.8'/%3E%3Ccircle cx='1233' cy='185' r='2.1'/%3E%3Ccircle cx='1259' cy='295' r='3.3'/%3E%3Ccircle cx='1263' cy='425' r='3.3'/%3E%3Ccircle cx='1301' cy='57' r='3.1'/%3E%3Ccircle cx='1303' cy='119' r='2.1'/%3E%3Ccircle cx='1317' cy='198' r='3.1'/%3E%3Ccircle cx='1317' cy='371' r='2.5'/%3E%3Ccircle cx='1334' cy='415' r='3.4'/%3E%3Ccircle cx='1305' cy='589' r='2.2'/%3E%3Ccircle cx='1388' cy='40' r='3.4'/%3E%3Ccircle cx='1375' cy='141' r='2.0'/%3E%3Ccircle cx='1433' cy='168' r='2.4'/%3E%3Ccircle cx='1404' cy='367' r='2.5'/%3E%3Ccircle cx='1416' cy='467' r='3.3'/%3E%3Ccircle cx='1389' cy='532' r='2.9'/%3E%3Ccircle cx='1375' cy='593' r='2.6'/%3E%3Ccircle cx='1420' cy='696' r='2.1'/%3E%3Ccircle cx='1496' cy='43' r='3.3'/%3E%3Ccircle cx='1495' cy='131' r='3.1'/%3E%3Ccircle cx='1468' cy='234' r='2.8'/%3E%3Ccircle cx='1507' cy='355' r='3.4'/%3E%3Ccircle cx='1450' cy='447' r='3.2'/%3E%3Ccircle cx='1491' cy='662' r='2.6'/%3E%3Ccircle cx='1569' cy='60' r='3.1'/%3E%3Ccircle cx='1571' cy='128' r='2.1'/%3E%3Ccircle cx='1570' cy='166' r='3.5'/%3E%3Ccircle cx='1529' cy='304' r='2.0'/%3E%3Ccircle cx='1547' cy='353' r='2.5'/%3E%3Ccircle cx='1535' cy='425' r='3.4'/%3E%3Ccircle cx='1543' cy='497' r='2.2'/%3E%3Ccircle cx='1574' cy='590' r='3.1'/%3E%3C/g%3E%3C/svg%3E")), linear-gradient(155deg, color-mix(in srgb, var(--c) 60%, #8fbdea) 0%, var(--c) 50%, color-mix(in srgb, var(--c) 45%, #fff) 100%); background-size:cover, cover; background-position:center, center; background-attachment:fixed, fixed; background-repeat:no-repeat; }
.skin-traanplaat { background-color:var(--c); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.5'/%3E%3C/linearGradient%3E%3Cg id='b'%3E%3Cellipse rx='18' ry='6.2' cx='2.2' cy='2.8' fill='%23000' fill-opacity='.28'/%3E%3Cellipse rx='18' ry='6.2' fill='url(%23g)'/%3E%3Cellipse rx='18' ry='6.2' fill='none' stroke='%23000' stroke-opacity='.25' stroke-width='.7'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23b' transform='translate(20 20) rotate(-45)'/%3E%3Cuse href='%23b' transform='translate(60 60) rotate(-45)'/%3E%3Cuse href='%23b' transform='translate(60 20) rotate(45)'/%3E%3Cuse href='%23b' transform='translate(20 60) rotate(45)'/%3E%3C/svg%3E"); background-repeat:repeat; }   /* vector: wordt herhaald op de eigen grootte en blijft scherp */

/* Skin-editor */
.skin-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:10px; padding:16px; }
.swatch { height:70px; border-radius:8px; border:2px solid transparent; cursor:pointer; position:relative; display:flex; align-items:flex-end; padding:4px 6px; font-size:12px; color:#000; }
.swatch span { background:rgba(255,255,255,.8); border-radius:4px; padding:1px 5px; }
.swatch.sel { border-color:var(--navy); box-shadow:0 0 0 2px #fff inset; }
.skin-form { padding:16px; display:grid; gap:14px; }
.skin-form label { font-size:13px; display:block; }
.skin-form input[type=text] { display:block; width:100%; margin-top:4px; padding:9px 10px; border:1px solid #cfd4da; border-radius:6px; font:inherit; }
.skin-form input[type=color] { display:block; margin-top:4px; height:38px; width:80px; }
.skin-row { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end; }
.preview { height:200px; border-radius:10px; overflow:hidden; border:1px solid #d8dce2; }
.preview .pbar { height:34px; background:var(--head); color:#fff; display:flex; align-items:center; padding:0 12px; font-weight:700; gap:8px; }
.preview .pcard { background:rgba(255,255,255,var(--wop,1)); margin:14px 16px; width:min(320px,70%); border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.15); overflow:hidden; }
.preview .ph { height:32px; background:var(--head); color:var(--captext,var(--headtext,#fff)); display:flex; justify-content:space-between; align-items:center; padding:0 10px; font-size:13px; font-weight:700; }
.preview .pl { color:var(--wlink,inherit); font-size:12px; }
.preview .pbody { padding:10px; display:grid; gap:7px; }
.preview .pbody i { display:block; height:8px; border-radius:4px; background:#d9dde3; }
.ok { color:#14803c; font-size:13px; }
.appgrid { padding:12px; margin:0; align-content:start; min-height:72px; }
.widget.autoh:not(.collapsed) .wbody { flex:none; container-type:normal; overflow:visible; }
.widget.autoh:not(.collapsed) .rz { display:none; }
.appgrid .muted { grid-column:1 / -1; color:var(--mut); font-size:13px; }
/* Tegels van twee formaten naast elkaar: groot = 2x2 cellen, klein = 1 cel (een kwart van het oppervlak) */
.appgrid { grid-template-columns:repeat(auto-fill, minmax(51px, 1fr)); grid-auto-rows:48px; grid-auto-flow:dense; }
.appgrid .tile { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; min-width:0; }
.appgrid .tile.sm, .appgrid .tile.add { grid-column:span 1; grid-row:span 1; padding:3px; gap:2px; border-radius:7px; }
.appgrid .tile.sm .ico { font-size:15px; }
.appgrid .tile.sm .ttl { font-size:9px; line-height:1.1; }
.appgrid .tile.add { font-size:20px; }
.appgrid .tilestack { grid-column:span 1; grid-row:span 2; display:grid; grid-template-rows:1fr 1fr; gap:10px; min-width:0; min-height:0; }   /* twee kleine tegels boven elkaar */
.tile.hint-above { box-shadow:inset 0 5px 0 0 var(--hover, var(--orange)); }
.tile.hint-below { box-shadow:inset 0 -5px 0 0 var(--hover, var(--orange)); }
.tile.hint-before { box-shadow:inset 5px 0 0 0 var(--hover, var(--orange)); }
.tile.hint-after { box-shadow:inset -5px 0 0 0 var(--hover, var(--orange)); }
.appgrid .tilestack .tile.sm { grid-column:auto; grid-row:auto; }
.appgrid .tile.sm .del { width:16px; height:16px; font-size:11px; top:2px; right:2px; }
.audit { width:100%; border-collapse:collapse; font-size:12px; }
.audit th, .audit td { text-align:left; padding:7px 12px; border-bottom:1px solid #eee; white-space:nowrap; }
.audit th { position:sticky; top:0; background:#fafbfc; color:var(--mut); }
.audit td:nth-child(5) { white-space:normal; max-width:320px; overflow-wrap:anywhere; }
#uTable td:nth-child(5) { white-space:nowrap; }
.uvbanner { background:#c0261d; color:#fff; border-radius:8px; padding:12px 16px; margin-bottom:12px; font-size:14px; line-height:1.4; }
.uvrow { display:grid; grid-template-columns:repeat(var(--cols,3), minmax(0,1fr)); gap:12px; align-items:start; margin-bottom:12px; }
.uvcol { display:flex; flex-direction:column; gap:12px; min-width:0; }
.uvfull { margin-bottom:12px; }
.widget.uv { margin-bottom:0; }
.uvtype { font-size:11px; font-weight:400; opacity:.75; }
.uvhint { margin:0 0 8px; font-size:13px; color:var(--mut); overflow-wrap:anywhere; }
.uvtiles { display:flex; flex-wrap:wrap; gap:6px; }
.uvtile { color:#fff; border-radius:8px; padding:6px 10px; font-size:13px; font-weight:700; }
#uTable thead { position:sticky; top:0; z-index:1; background:#fafbfc; }
#uTable thead th { position:static; }
#uTable .frow td { padding:4px 8px 8px; }
.fbox { display:flex; align-items:center; gap:4px; min-width:110px; background:#fff; border:2px solid #cfd4da; border-radius:8px; padding:2px 4px 2px 6px; }
.fbox.on { border-color:var(--hover, var(--orange)); }
.fbox input, .fbox select { flex:1; min-width:0; width:100%; border:0; outline:0; background:transparent; font:inherit; font-size:12px; color:#323232; padding:4px 0; }
.fbox .fclr { display:none; flex:none; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:var(--hover, var(--orange)); color:#fff; font-size:14px; line-height:1; cursor:pointer; }
.fbox.on .fclr { display:inline-flex; align-items:center; justify-content:center; }
.audit th.sortable { cursor:pointer; user-select:none; }
.audit th.sortable:hover { color:var(--navy); }
.audit th.sortable::after { content:" " attr(data-dir); font-size:10px; }
.tile:hover { outline:3px solid var(--hover, var(--orange)); outline-offset:-3px; }
.tiles-title, .page h2 { color:#323232; }
.page .widget > h2 { color:var(--captext, var(--headtext, #323232)); }   /* widgetbalken op de beheerpagina: ook hier de gekozen titelkleur */
.widget .wbtn:hover { background:color-mix(in srgb, var(--hover, #0a6cf5) 15%, transparent); }
.btn:hover { border-color:var(--hover, var(--orange)); color:var(--hover, var(--orange)); }
.btn.primary:hover { color:#fff; }
.preview .ph { border-bottom:3px solid var(--wline, transparent); }
.widgets.editing .tile:not(.add)[draggable="true"] { cursor:grab; }
.tile.dragging { opacity:.35; }
.appgrid.dropok { outline:2px dashed var(--hover, var(--orange)); outline-offset:-4px; border-radius:8px; }
.login-form { display:grid; gap:10px; text-align:left; margin-top:8px; }
.login-form label { font-size:13px; color:var(--mut); }
.login-form input { width:100%; padding:11px 12px; border:1px solid #cfd4da; border-radius:8px; font:inherit; }
.login-form input:focus { outline:2px solid var(--hover, var(--orange)); outline-offset:-1px; }
.login-form .btn { width:100%; padding:11px; }
.login-card .err { margin:8px 0; }

/* Inklapbare secties (beheerpagina's) */
.fold-bar { display:inline-flex; gap:8px; margin-left:14px; vertical-align:middle; }
.fold-bar .btn { padding:4px 12px; }
.widget h2.foldable { cursor:pointer; user-select:none; }
.fold-arrow { display:inline-block; width:1.2em; flex:none; }
.widget.folded > :not(h2) { display:none !important; }
.widget h2.foldable { justify-content:flex-start; }
[hidden] { display:none !important; }
.fold-bar .fold-btn { width:48px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color:#fff; }
.fold-bar .fold-btn:hover { color:#fff; }

/* Afbeelding op een blok */
.tile .timg { width:54%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:rgba(255,255,255,.15); pointer-events:none; }
.imgrow { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.imgrow .btn { margin:0; }
.imgprev { width:52px; height:45px; border-radius:8px; border:1px dashed #c3c8d0; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; flex:none; }
.imgprev img { width:100%; height:100%; object-fit:cover; display:block; }
#cropCv, .cropcv { background-image:linear-gradient(45deg,#d9d9d9 25%,transparent 25%,transparent 75%,#d9d9d9 75%),linear-gradient(45deg,#d9d9d9 25%,transparent 25%,transparent 75%,#d9d9d9 75%); background-size:20px 20px; background-position:0 0,10px 10px; display:block; margin:0 auto 12px; width:322px; max-width:100%; height:auto; border-radius:10px; background-color:#f4f4f4; cursor:grab; touch-action:none; box-shadow:0 0 0 2px var(--orange); }
#cropCv:active, .cropcv:active { cursor:grabbing; }
#cropdlg input[type=range] { width:100%; margin-top:4px; }
/* Afbeelding vult de hele tegel; de titel staat eroverheen op een donkere verloop */
.tile.has-img { padding:0; justify-content:flex-end; overflow:hidden; }
.tile .timg { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; border-radius:inherit; background:none; }
.tile.has-img .ttl { position:relative; width:100%; padding:16px 8px 6px; background:linear-gradient(transparent, rgba(0,0,0,.65)); text-shadow:0 1px 2px rgba(0,0,0,.6); }
.widget .btn[aria-label="Kopieer IP-adres"]:hover { background:#4b5563 !important; border-color:#4b5563 !important; color:#fff; }

/* Radio: de zender naast de titel als de widget is ingeklapt */
.widget .wsub { display:none; margin-left:8px; font-weight:400; opacity:.85; }
.widget.collapsed .wtitle { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.widget.collapsed .wsub { display:inline; }
#appName::placeholder { color:#b3b8bf; opacity:1; }
.lang-pick { width:auto; margin:0 8px 0 0; padding:5px 8px; border:1px solid rgba(128,128,128,.4); border-radius:6px; font:inherit; font-size:13px; color:#323232; background:#fff; color-scheme:light; cursor:pointer; }
.site-foot { text-align:center; padding:6px 12px 22px; font-size:12px; }
.site-foot span { display:inline-block; padding:4px 14px; border-radius:999px; background:rgba(255,255,255,.75); color:#555; }
.site-foot a { color:#323232; font-weight:700; }
.site-foot a:hover { color:var(--hover, var(--orange)); }
.login .site-foot { position:fixed; left:0; right:0; bottom:0; padding:0 12px 14px; }
.site-foot span { display:inline-flex; align-items:center; gap:8px; }
.site-foot img { display:block; }
.preview { position:relative; }
.preview .ptile { position:absolute; right:16px; top:52px; width:76px; height:62px; border-radius:8px; background:#fff; outline:3px solid var(--hover, #0a6cf5); outline-offset:-3px; }
.helpbody { padding:6px 18px 16px; color:#323232; line-height:1.55; font-size:14px; }
.helpbody p { margin:10px 0; }
.helpbody dl { margin:8px 0 0; display:grid; grid-template-columns:minmax(120px, 190px) 1fr; gap:8px 18px; }
.helpbody dt { font-weight:700; }
.helpbody dd { margin:0; }
@media (max-width:640px) { .helpbody dl { grid-template-columns:1fr; gap:2px; } .helpbody dd { margin-bottom:10px; } }
/* Mededelingen */
.annlist { padding:8px 0; }
.ann { position:relative; border-left:4px solid #2563eb; background:#f1f5fd; border-radius:6px; padding:8px 12px; margin:8px 12px; color:#323232; }
.ann-warning { border-color:#d97706; background:#fff6e5; }
.ann-storing { border-color:#dc2626; background:#fdeded; }
.ann-t { font-weight:700; }
.ann-b { white-space:pre-wrap; margin-top:3px; font-size:13px; }
.ann-m { color:#6b7280; font-size:11px; margin-top:4px; }
.ann-banner { margin:0 0 10px; padding-right:38px; }
.ann-x { position:absolute; top:6px; right:8px; border:0; background:transparent; font-size:20px; line-height:1; cursor:pointer; color:#6b7280; }
.ann-x:hover { color:#111827; }
/* Recente bestanden */
.fico { flex:none; width:34px; height:34px; border-radius:6px; color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
/* Rondleiding */
.tour-hl { position:fixed; z-index:2000; border-radius:10px; box-shadow:0 0 0 9999px rgba(0,0,0,.58); pointer-events:none; transition:all .2s ease; }
.tour-pop { position:fixed; z-index:2001; background:#fff; color:#323232; border-radius:12px; padding:16px 18px; box-shadow:0 12px 40px rgba(0,0,0,.35); max-width:calc(100vw - 24px); box-sizing:border-box; }
.tour-pop h3 { margin:2px 0 6px; font-size:17px; }
.tour-pop p { margin:0 0 14px; font-size:14px; line-height:1.5; }
.tour-step { font-size:11px; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; }
.tour-btns { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
/* Aanmeldscherm: deze pc vertrouwen */
.trust { display:flex; gap:8px; align-items:center; justify-content:center; font-size:14px; margin:12px 0 2px; cursor:pointer; }
.trust-hint { margin:0 0 6px; font-size:11px; }
/* Webpagina-widget: de pagina vult de hele widget */
.wbody.webbody { position:relative; padding:0; overflow:hidden; }
.zoomval { font-size:11px; font-weight:700; min-width:34px; text-align:center; opacity:.9; }
.webframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; background:#fff; }
.widget.uv .tile { cursor:default; }
.widget.uv .tile:hover { transform:none; filter:none; outline:0; }
/* Tegel met een afbeelding over de hele tegel: de afbeelding ligt boven de outline, dus het selectiekader tekenen we er bovenop */
.tile.has-img:hover, .tile.has-img:focus-visible { outline:0; }
.tile.has-img:hover::after, .tile.has-img:focus-visible::after { content:''; position:absolute; inset:0; z-index:2; border:3px solid var(--hover, var(--orange)); border-radius:inherit; pointer-events:none; }
.widget.uv .tile.has-img:hover::after { display:none; }
/* Taken-widget */
.tasks-scroll { padding:0 0 8px; }
.tasktbl thead { position:sticky; top:0; z-index:1; background:#fafbfc; }
.tasktbl thead th { position:static; }
.tasktbl .frow td { padding:4px 8px 8px; }
.audit.tasktbl td:nth-child(n) { white-space:normal; max-width:none; overflow-wrap:anywhere; }
.audit.tasktbl td { font-size:13px; vertical-align:middle; }
.tasktbl td.ttitle { min-width:140px; }
.tasktbl tr.t-green td { background:var(--tg, rgba(34,160,80,.17)); }
.tasktbl tr.t-yellow td { background:var(--ty, rgba(245,190,20,.30)); }
.tasktbl tr.t-red td { background:var(--tr, rgba(222,52,40,.20)); }
.tasktbl select.tstat { font:inherit; font-size:12px; padding:4px 6px; border:1px solid #cfd4da; border-radius:6px; background:#fff; color:#323232; }
.tasktbl .tby { font-size:11px; color:var(--mut); margin-top:2px; }
.tnote { border-top:1px solid #eee; padding:6px 0; font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; }
.tnote-h { font-size:11px; font-weight:700; color:var(--mut); margin-bottom:2px; }
#taskNotes { max-height:180px; overflow:auto; margin:6px 0 10px; }
/* Taakvenster: ruim, met een groot memoveld */
#taskdlg { width:min(620px, 94vw); max-height:94vh; overflow:auto; }
#contactdlg { width:min(560px, 94vw); max-height:94vh; overflow:auto; }
#contactdlg textarea { display:block; width:100%; box-sizing:border-box; resize:vertical; }
.tasktbl td a { color:var(--navy); }
.tasktbl .frow[hidden] { display:none; }
#taskdlg textarea { display:block; width:100%; box-sizing:border-box; resize:vertical; }   /* memo: 5 regels hoog (rows="5") */
/* Statusfilter met vinkjes */
.msel { flex:1; min-width:0; display:block; }
.msel-btn { display:block; width:100%; min-width:0; border:0; background:transparent; font:inherit; font-size:12px; color:#323232; text-align:left; padding:4px 0; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msel-panel { position:fixed; z-index:2000; background:#fff; border:2px solid var(--hover, var(--orange)); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.2); padding:6px 12px; min-width:170px; }
.msel-panel label { display:flex; align-items:center; gap:8px; font-size:13px; color:#323232; margin:0; padding:5px 0; cursor:pointer; }
.msel-panel input { width:16px; height:16px; margin:0; accent-color:var(--hover, var(--orange)); }
/* Persoonlijke taken: past precies in een kolom, zonder (horizontaal) scrollen; een klik op de regel opent de taak */
.tasktbl.fit { table-layout:fixed; width:100%; }
.tasktbl.fit th, .tasktbl.fit td { padding-left:8px; padding-right:8px; }
.tasktbl.fit th:nth-child(1) { width:34%; }
.tasktbl.fit th:nth-child(2) { width:28%; }
.tasktbl.fit th:nth-child(3) { width:19%; }
.tasktbl.fit th:nth-child(4) { width:19%; }
.tasktbl.fit .fbox { min-width:0; }
.tasktbl.fit select.tstat { width:100%; min-width:0; }
.tasktbl tr.clickable { cursor:pointer; }
.tasktbl tr.clickable:hover td { filter:brightness(.96); }
.tasks-scroll { overflow-x:hidden; }
/* Wisknop (prullenbak) in de vensters voor profiel, contact en taak: vierkant, even hoog als de andere knoppen */
#profDel, #contactDel, #taskDel { width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:var(--orange); border-color:var(--orange); }
#contactDel, #taskDel { margin-right:auto; }
#profDel[hidden], #contactDel[hidden], #taskDel[hidden] { display:none; }
/* Link onderaan de pagina om een wens of idee in te sturen */
.site-foot { position:relative; }
/* uiterst links op de pagina, op dezelfde hoogte (28 px) en in dezelfde pil-stijl als de regel "powered by" */
.linkbtn { position:absolute; left:16px; top:6px; height:28px; box-sizing:border-box; display:inline-flex; align-items:center; background:rgba(255,255,255,.75); border:0; border-radius:999px; padding:0 14px; font:inherit; font-size:12px; font-weight:700; color:#323232; cursor:pointer; }
@media (max-width:820px) { .linkbtn { position:static; margin:8px auto 0; } }
.linkbtn:hover { color:var(--hover, var(--orange)); }
.linkbtn[hidden] { display:none; }
#reqdlg { width:min(560px, 94vw); }
#reqdlg textarea { display:block; width:100%; box-sizing:border-box; margin-top:4px; padding:9px 10px; border:1px solid #cfd4da; border-radius:6px; font:inherit; resize:vertical; }
#reqdlg .ok { color:#14803c; font-weight:700; margin:0 0 8px; min-height:1em; }
/* Afdelingstaken heeft een kolom extra (Door): de breedtes verdelen we dan anders */
.tasktbl.fit.five th:nth-child(1) { width:30%; }
.tasktbl.fit.five th:nth-child(2) { width:22%; }
.tasktbl.fit.five th:nth-child(3) { width:16%; }
.tasktbl.fit.five th:nth-child(4) { width:16%; }
.tasktbl.fit.five th:nth-child(5) { width:16%; }
/* Melding als een taak bijna verloopt: lichtrood, bovenaan het dashboard */
.ann-task { border-color:#e5534b; background:#fdecea; }
#taskWarn:empty { display:none; }
/* Chat-assistent: knop rechtsonder en het chatvenster */
.chat-btn { position:fixed; right:20px; bottom:20px; z-index:40; width:52px; height:52px; border-radius:50%; border:0; background:var(--wlink, var(--orange)); color:var(--head, #fff); font-size:24px; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.28); }
.chat-btn:hover { background:var(--hover, var(--orange-h)); }
.chat-panel { position:fixed; right:20px; bottom:84px; z-index:41; width:min(390px, calc(100vw - 24px)); height:min(540px, calc(100vh - 110px)); display:flex; flex-direction:column; background:#fff; color:#323232; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.3); overflow:hidden; }
.chat-panel[hidden] { display:none; }
.chat-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:var(--head, var(--navy)); color:var(--captext, var(--headtext, #fff)); font-weight:900; }
.chat-x { background:none; border:0; color:inherit; font-size:22px; line-height:1; cursor:pointer; }
.chat-log { flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:8px; background:#f5f7fa; }
.chat-msg { max-width:88%; padding:8px 11px; border-radius:12px; font-size:13px; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-msg.me { align-self:flex-end; background:var(--wlink, var(--orange)); color:var(--head, #fff); border-bottom-right-radius:3px; }
.chat-msg.bot { align-self:flex-start; background:#fff; border:1px solid #e3e6ec; border-bottom-left-radius:3px; }
.chat-msg.err { border-color:#e5534b; background:#fdecea; }
.chat-msg.wait { opacity:.6; }
.chat-note { font-size:12px; color:var(--mut); margin-bottom:4px; }
.chat-item { padding:6px 0; border-top:1px solid #eee; white-space:normal; }
.chat-item:first-of-type { border-top:0; }
.chat-more { border-top:1px solid #eee; padding:4px 0; white-space:normal; }
.chat-more summary { cursor:pointer; font-weight:700; }
.chat-more div { padding:4px 0 2px; }
.chat-fwd { margin-top:8px; font-size:12px; }
.chat-link { display:inline-block; margin-top:6px; font-weight:700; color:#323232; }
.chat-chips { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.chat-chip { border:1px solid #cfd4da; background:#fff; border-radius:999px; padding:6px 12px; font:inherit; font-size:12px; cursor:pointer; text-align:left; }
.chat-chip:hover { border-color:var(--hover, var(--orange)); color:var(--hover, var(--orange)); }
.chat-foot { display:flex; gap:8px; align-items:flex-end; padding:10px; border-top:1px solid #e3e6ec; background:#fff; }
.chat-in { flex:1; resize:none; box-sizing:border-box; padding:8px 10px; border:1px solid #cfd4da; border-radius:8px; font:inherit; font-size:13px; max-height:110px; }
.chat-send { padding:8px 12px; }

/* ---------- Donkere modus (body.dark): de kleuren van menubalk, achtergrond en titels komen uit de skin van de organisatie; hier de rest ---------- */
body.dark { --ink:#e5e7eb; --mut:#9aa3b2; color-scheme:dark; }
body.dark .widget { background:rgba(24,30,41,var(--wop,1)); color:var(--ink); }
body.dark .welcome { color:var(--welcome, var(--captext, #f1f5f9)); }
body.dark .greet h1, body.dark .tiles-title, body.dark .page h2 { color:#f1f5f9; }
body.dark .helpbody, body.dark .ann { color:#e5e7eb; }
body.dark .umenu { background:#1e2530; color:#e5e7eb; }
body.dark .umenu .uinfo b, body.dark .umenu a { color:#e5e7eb; }
body.dark .umenu a:hover, body.dark .umenu a:focus-visible { background:color-mix(in srgb, var(--hover, var(--orange)) 22%, #1e2530); color:#fff; }
body.dark .top input, body.dark .profsel, body.dark .profbar select, body.dark .btn, body.dark dialog select, body.dark dialog input:not([type=checkbox]):not([type=color]),
body.dark .skin-form input[type=text], body.dark .login-form input, body.dark .fbox, body.dark .tasktbl select.tstat, body.dark .msel-panel, body.dark .lang-pick, body.dark .colpick button,
body.dark #reqdlg textarea, body.dark .chat-in, body.dark .chat-chip, body.dark dialog textarea, body.dark .page select, body.dark .page input[type=text], body.dark .page input[type=search], body.dark .page input[type=date], body.dark .page input[type=email], body.dark .page textarea {
  background:#252d3b; color:#e5e7eb; border-color:#3a4555; color-scheme:dark;
}
body.dark .btn.primary, body.dark .colpick button.on { background:var(--hover, var(--orange)); border-color:var(--hover, var(--orange)); color:#fff; }
body.dark .fbox input, body.dark .fbox select, body.dark .msel-btn, body.dark .msel-panel label { background:transparent; color:#e5e7eb; }
body.dark .msel-panel { background:#1e2530; }
body.dark dialog, body.dark .tour-pop { background:#1e2530; color:#e5e7eb; }
body.dark .audit th, body.dark #uTable thead, body.dark .tasktbl thead { background:#232b38; color:var(--mut); }
body.dark .audit th, body.dark .audit td, body.dark .list li > a, body.dark .list li > div, body.dark .tnote, body.dark .chat-item, body.dark .chat-more { border-color:#2c3544; }
body.dark .list li > a:hover { background:color-mix(in srgb, var(--hover, #0a6cf5) 18%, #18202c); }
body.dark .clocks.two .clock + .clock { border-left-color:#2c3544; }
body.dark .clock .rim { fill:#1e2530; }
body.dark .tile.add { border-color:#465063; color:#7d8799; }
body.dark .imgprev { border-color:#465063; }
body.dark .ann { background:#1d2a44; }
body.dark .ann-warning { background:#3a2c12; }
body.dark .ann-storing, body.dark .ann-task { background:#3d1c1c; }
body.dark .site-foot span, body.dark .linkbtn { background:rgba(24,30,41,.8); color:#cbd5e1; }
body.dark .site-foot a, body.dark .chat-link { color:#e5e7eb; }
body.dark .chat-panel, body.dark .chat-foot, body.dark .chat-msg.bot { background:#1e2530; color:#e5e7eb; border-color:#2c3544; }
body.dark .chat-log { background:#161c26; }
body.dark .chat-msg.err { background:#3d1c1c; }
body.dark .login-card { background:#1e2530; color:#e5e7eb; }
body.dark .preview .pcard, body.dark .preview.dark .pcard { background:rgba(24,30,41,var(--wop,1)); }
body.dark .preview .pbody i { background:#3a4555; }
body.dark .webframe { color-scheme:light; }
/* het voorbeeld in het beheerscherm toont altijd de donkere widgetkleur, ook als de beheerder zelf op licht staat */
.preview.dark .pcard { background:rgba(24,30,41,var(--wop,1)); }
.preview.dark .pbody i { background:#3a4555; }
/* de titels in de widgetbalken houden de gekozen kleur voor titels en menu (ook in donker) */
body.dark .widget h2, body.dark .page .widget > h2 { color:var(--captext, var(--headtext, #fff)); }