/* Critical CSS: sidebar zichtbaar op desktop vóór CDN-load */
.drawer-side { display: none; }
@media (min-width: 1024px) {
  .drawer { display: grid; grid-auto-columns: max-content auto; width: 100%; }
  .drawer-side { display: block; position: sticky; visibility: visible; pointer-events: auto; width: auto; overflow-y: auto; height: 100dvh; top: 0; z-index: 10; }
  .drawer-side > *:not(.drawer-overlay) { transform: translateX(0); }
  .drawer-overlay { display: none; }
}
[data-m2m-item] { border: 1px solid oklch(var(--bc) / 0.2); border-radius: var(--rounded-box, 0.25rem); padding: 0.25rem; }

a,
.link {
  text-decoration: none;
}
a:hover,
a:focus-visible,
.link:hover,
.link:focus-visible {
  text-decoration: underline;
}

/*
  Theme overrides — oklch waarden: lichtheid% verzadiging hue
  p=primary, s=secondary, a=accent, n=neutral, b1/b2/b3=achtergrond, bc=tekst
  pc/sc/ac/nc = content (tekst op die kleur)
*/
[data-theme="aqua"] {
  color-scheme: dark;
  --p: 85.6617% 0.14498 198.6458;
  --pc: 40.1249% 0.068266 197.603872;
  --s: 60.6827% 0.108752 309.782946;
  --sc: 12.1365% 0.02175 309.782946;
  --a: 93.4269% 0.102225 94.555431;
  --ac: 18.6854% 0.020445 94.555431;
  --n: 61.0622% 0.117009 243.760661;
  --nc: 12.2124% 0.023402 243.760661;
  --b1: 48.7596% 0.127539 261.181672;
  --b2: 45.3464% 0.118611 261.181672;
  --b3: 41.9333% 0.109683 261.181672;
  --bc: 89.7519% 0.025508 261.181672;
  --in: 54.615% 0.215208 262.880917;
  --inc: 90.923% 0.043042 262.880917;
  --su: 62.7052% 0.169912 149.213788;
  --suc: 12.541% 0.033982 149.213788;
  --wa: 66.584% 0.157422 58.31834;
  --wac: 13.3168% 0.031484 58.31834;
  --er: 73.95% 0.19 27.33;
  --erc: 14.79% 0.038 27.33;
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: .2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}
[data-theme="bumblebee"] {
  color-scheme: light;
  --p: 89.51% 0.2132 96.61;
  --pc: 38.92% 0.046 96.61;
  --s: 80.39% 0.194 70.76;
  --sc: 39.38% 0.068 70.76;
  --a: 81.27% 0.157 56.52;
  --ac: 16.254% 0.0314 56.52;
  --n: 12.75% 0.075 281.99;
  --nc: 82.55% 0.015 281.99;
  --b1: 100% 0 0;
  --b2: 93% 0 0;
  --b3: 86% 0 0;
  --bc: 20% 0 0;
  --in: 72.06% 0.191 231.6;
  --inc: 0% 0 0;
  --su: 64.8% 0.150 160;
  --suc: 0% 0 0;
  --wa: 84.71% 0.199 83.87;
  --wac: 0% 0 0;
  --er: 71.76% 0.221 22.18;
  --erc: 0% 0 0;
  --rounded-box: 1rem;
  --rounded-btn: 1.9rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: .2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}
[data-theme="dark"] {
  color-scheme: dark;
  --p: 65.69% 0.196 275.75;
  --pc: 13.138% 0.0392 275.75;
  --s: 74.8% 0.26 342.55;
  --sc: 14.96% 0.052 342.55;
  --a: 74.51% 0.167 183.61;
  --ac: 14.902% 0.0334 183.61;
  --n: 31.3815% 0.021108 254.139175;
  --nc: 74.6477% 0.0216 264.435964;
  --b1: 25.3267% 0.015896 252.417568;
  --b2: 23.2607% 0.013807 253.100675;
  --b3: 21.1484% 0.01165 254.087939;
  --bc: 74.6477% 0.0216 264.435964;
  --in: 72.06% 0.191 231.6;
  --inc: 0% 0 0;
  --su: 64.8% 0.150 160;
  --suc: 0% 0 0;
  --wa: 84.71% 0.199 83.87;
  --wac: 0% 0 0;
  --er: 71.76% 0.221 22.18;
  --erc: 0% 0 0;
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: .2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}
[data-theme="garden"] {
  color-scheme: light;
  --p: 72% 0.18 132;
  --pc: 12% 0.03 136;
  --s: 64% 0.13 136;
  --sc: 11% 0.03 148;
  --a: 77% 0.13 108;
  --ac: 14% 0.03 92;
  --n: 34% 0.03 126;
  --nc: 92% 0.01 126;
  --b1: 96% 0.045 118;
  --b2: 91% 0.055 120;
  --b3: 85% 0.065 122;
  --bc: 22% 0.025 126;
  --in: 72.06% 0.191 231.6;
  --inc: 0% 0 0;
  --su: 64.8% 0.150 160;
  --suc: 0% 0 0;
  --wa: 84.71% 0.199 83.87;
  --wac: 0% 0 0;
  --er: 71.76% 0.221 22.18;
  --erc: 0% 0 0;
  --rounded-box: 1rem;
  --rounded-btn: 1.9rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: .2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}
[data-theme="winter"] {
  color-scheme: light;
  --p: 56.86% 0.255 257.57;
  --pc: 91.372% 0.051 257.57;
  --s: 42.5516% 0.161098 282.339433;
  --sc: 88.5103% 0.03222 282.339433;
  --a: 59.9398% 0.191515 335.171434;
  --ac: 11.988% 0.038303 335.171434;
  --n: 19.6166% 0.063518 257.651965;
  --nc: 83.9233% 0.012704 257.651965;
  --b1: 100% 0 0;
  --b2: 97.4663% 0.011947 259.822565;
  --b3: 93.2686% 0.016223 262.751375;
  --bc: 41.8869% 0.053885 255.824911;
  --in: 88.1275% 0.085888 214.515264;
  --inc: 17.6255% 0.017178 214.515264;
  --su: 80.4941% 0.077019 197.823719;
  --suc: 16.0988% 0.015404 197.823719;
  --wa: 89.1725% 0.045833 71.47031;
  --wac: 17.8345% 0.009167 71.47031;
  --er: 73.0926% 0.110185 20.076293;
  --erc: 14.6185% 0.022037 20.076293;
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: .2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

[data-theme="light"] {
  color-scheme: light;
  --p: 62% 0.18 250;
  --pc: 98% 0.01 250;
  --s: 58% 0.12 210;
  --sc: 98% 0.01 210;
  --a: 72% 0.11 105;
  --ac: 16% 0.03 105;
  --n: 96% 0.005 250;
  --nc: 20% 0.015 250;
  --b1: 99.5% 0.003 250;
  --b2: 97.5% 0.006 250;
  --b3: 94.5% 0.01 250;
  --bc: 18% 0.015 250;
  --in: 72.06% 0.191 231.6;
  --inc: 0% 0 0;
  --su: 64.8% 0.150 160;
  --suc: 0% 0 0;
  --wa: 84.71% 0.199 83.87;
  --wac: 0% 0 0;
  --er: 71.76% 0.221 22.18;
  --erc: 0% 0 0;
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: .2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

/* Winter: lichtere outline-randen op kaarten/knoppen */
[data-theme="winter"] .btn-outline {
  border-color: oklch(var(--bc) / 0.22);
}

[data-theme="light"] a,
[data-theme="light"] .link,
[data-theme="winter"] a,
[data-theme="winter"] .link {
  text-decoration: underline;
}

/* Accessibility: keep low-opacity body text readable across themes */
.text-base-content\/50 {
  color: var(--fallback-bc, oklch(var(--bc) / 0.78)) !important;
}
.text-base-content\/60 {
  color: var(--fallback-bc, oklch(var(--bc) / 0.84)) !important;
}