:root{--sidebar-text:#d1d5db;--topbar:#ffffff;--topbar-text:#17202a;--accent-contrast:#ffffff}
:root{--sidebar2:color-mix(in srgb,var(--sidebar-text) 13%,var(--sidebar));--accent-soft:color-mix(in srgb,var(--accent) 11%,var(--panel));--border:color-mix(in srgb,var(--text) 15%,var(--panel));--muted:color-mix(in srgb,var(--text) 69%,var(--panel))}
.sidebar,.sidebar .brand,.sidebar .brand small,.sidebar .nav-item{color:var(--sidebar-text)}
.sidebar .nav-item:hover,.sidebar .nav-item.active{background:var(--sidebar2);color:var(--sidebar-text)}
.topbar{background:var(--topbar);color:var(--topbar-text)}
.topbar .crumb,.topbar .user-name,.topbar .user-meta{color:var(--topbar-text)}
.btn.primary,.manage-tab.selected,.quick-menu>summary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.btn:not(.primary),.manage-tab:not(.selected){background:var(--panel);color:var(--text)}
.content label,.content legend{color:var(--text)}
.content input:not([type=color]),.content select,.content textarea{background:var(--panel);color:var(--text);border-color:var(--border)}
.content a:not(.btn):not(.manage-tab):not(.nav-item){accent-color:var(--accent)}
.quick-filter,.sf-filter-tile{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,var(--panel));color:var(--text)}
.quick-filter-edit,.sf-filter-tile__edit{background:var(--panel)!important;border-color:color-mix(in srgb,var(--accent) 30%,var(--panel))!important;color:var(--accent)!important}
.quick-filter-edit:hover,.sf-filter-tile__edit:hover{background:var(--accent-soft)!important}
.sf-filter-tile.selected{background:color-mix(in srgb,var(--accent) 16%,var(--panel));border-color:var(--accent)}
.sort-control{color:var(--accent)!important}
.col-tools button.on,.calendar-grid>button:hover{color:var(--accent);background:var(--accent-soft)}
.calendar-grid>button.selected{color:var(--accent-contrast);background:var(--accent)}
.dashboard-tab{background:var(--panel);color:var(--text)}
.dashboard-tab.active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.dashboard-widget,.dashboard-welcome{background:var(--panel)}
:focus-visible{outline-color:var(--accent)}
.sidebar :focus-visible{outline-color:var(--sidebar-text)}
.theme-settings-layout{display:grid;grid-template-columns:minmax(390px,1.2fr) minmax(320px,1fr);gap:16px;align-items:start}
.theme-settings-layout .theme-group{border:1px solid var(--border);border-radius:10px;margin:15px 0;padding:12px}
.theme-group legend{font-size:14px;font-weight:800;padding:0 6px}
.theme-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.theme-color-control{display:flex;align-items:center;gap:10px;margin-top:5px}
.theme-color-control input[type=color]{width:54px;height:38px;padding:2px;cursor:pointer;border:1px solid var(--border);border-radius:7px;background:var(--panel)}
.theme-color-control output{font:600 13px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--text)}
.theme-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.theme-sample-app{display:grid;grid-template-columns:125px 1fr;min-height:230px;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:14px 0}
.theme-sample-sidebar{background:var(--sidebar);color:var(--sidebar-text);display:flex;flex-direction:column;gap:12px;padding:17px 12px;font-size:12px}
.theme-sample-sidebar strong{font-size:16px}.theme-sample-sidebar span{border-radius:6px;padding:7px;background:var(--sidebar2)}
.theme-sample-main{min-width:0;background:var(--bg)}
.theme-sample-topbar{display:flex;justify-content:space-between;gap:8px;padding:14px;background:var(--topbar);color:var(--topbar-text);font-weight:700;font-size:13px}
.theme-sample-topbar small{font-weight:400}
.theme-sample-body{padding:14px}.theme-sample-card{padding:13px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text)}
.theme-sample-card p{margin:8px 0 14px}
@media(max-width:900px){.theme-settings-layout{grid-template-columns:1fr}}
@media(max-width:560px){.theme-fields{grid-template-columns:1fr}.theme-sample-topbar small{display:none}}

/* Compact beheerformulier; uitsluitend Uiterlijk. */
.theme-settings-layout{max-width:1300px;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:18px}
.theme-settings-layout>.card{margin:0;min-width:0}
.theme-settings-layout h2{font-size:16px;font-weight:600;margin:0 0 10px}
.theme-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.theme-settings-layout .theme-group{min-width:0;border:0;border-radius:0;padding:0;margin:0}
.theme-group legend{padding:0 0 8px;width:100%;font-size:13px;font-weight:600;border-bottom:1px solid var(--border);margin-bottom:10px}
.theme-fields{display:grid;grid-template-columns:1fr;gap:12px}
.theme-fields>label{margin:0;font-weight:500;font-size:12px}
.theme-color-control{margin-top:5px;gap:8px}
.theme-color-control input[type=color]{width:38px;height:32px;margin:0;border-radius:6px;flex-shrink:0}
.theme-color-control output{font-size:12px;font-weight:400}
.theme-guidance{margin:18px 0 0;line-height:1.5}
.theme-actions{border-top:1px solid var(--border);padding-top:14px;margin-top:14px;justify-content:flex-end;gap:8px}
.theme-actions .btn{font-size:12px;font-weight:500;padding:8px 10px;min-height:34px}
.theme-actions .theme-reset{margin-right:auto}
.theme-sample-app{grid-template-columns:90px minmax(0,1fr);min-height:190px;margin:14px 0}
.theme-sample-sidebar{padding:14px 8px;gap:9px}
.theme-sample-sidebar strong{font-size:14px}
.theme-sample-topbar{padding:12px;font-size:12px}
.theme-sample-topbar small{display:none}
.theme-sample-body{padding:10px}
.theme-sample-card{padding:12px;font-size:12px}
.theme-sample-card .btn{font-size:12px;padding:8px 10px}
@media(max-width:1200px){.theme-settings-layout{grid-template-columns:1fr}.theme-sample{max-width:520px}}
@media(max-width:650px){.theme-groups{grid-template-columns:1fr}.theme-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-actions{justify-content:flex-start}.theme-actions .theme-reset{margin-right:0}}
@media(max-width:380px){.theme-fields{grid-template-columns:1fr}}