/* Aanvullingen op Tailwind */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

[data-view] { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Navigatie-onderstreping zoals in de wireframes */
.nav-link { position: relative; padding: .25rem 0; color: #5F6F71; transition: color .15s; }
.nav-link:hover { color: #1C2B2D; }
.nav-link.active { color: #1C2B2D; }
.nav-link.active::after {
  content: ""; position: absolute; left: 50%; bottom: -10px; width: 24px; height: 2px;
  transform: translateX(-50%); background: #346B6E; border-radius: 2px;
}

/* Formulier */
.field-input {
  width: 100%; border: 1px solid #CFD9DA; background: #F6F8F8; border-radius: .6rem;
  padding: .7rem .9rem; font-size: .95rem; color: #1C2B2D; transition: border-color .15s, box-shadow .15s, background .15s;
}
.field-input:focus { outline: none; border-color: #346B6E; background: #fff; box-shadow: 0 0 0 3px rgba(52,107,110,.15); }
.field-input.invalid { border-color: #7D4A42; background: #FBF5F4; }
.field-prefix { padding-left: 2rem; }
select.field-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235F6F71' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.4rem; }

/* Toggle-switch */
.switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: #E3E9EA; border: 1px solid #CFD9DA; border-radius: 999px; transition: .2s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: .2s; }
.switch input:checked + span { background: #346B6E; border-color: #346B6E; }
.switch input:checked + span::before { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(52,107,110,.25); }

/* Tooltip (?) */
.tip { position: relative; display: inline-flex; }
.tip .tip-body {
  visibility: hidden; opacity: 0; position: absolute; z-index: 30; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 240px; background: #1C2B2D; color: #fff; font-size: .75rem; line-height: 1.4; padding: .6rem .75rem; border-radius: .5rem; transition: opacity .15s;
}
.tip:hover .tip-body, .tip:focus-within .tip-body { visibility: visible; opacity: 1; }

/* Annotaties: UX-richtlijnen (ethisch) / dark patterns (onethisch) */
.anno { display: none !important; }
body.show-anno .anno { display: flex !important; }
.anno {
  align-items: flex-start; gap: .5rem; font-size: .75rem; line-height: 1.35; padding: .5rem .7rem; border-radius: .6rem;
  border: 1px dashed currentColor; margin-top: .5rem; text-align: left;
}
.anno-good { color: #28585A; background: #E4EFEC; }
.anno-bad { color: #8A3B2F; background: #FBEDEA; }
.anno b { font-weight: 600; }
body.show-anno .anno-target { outline: 2px dashed rgba(138,59,47,.35); outline-offset: 4px; border-radius: .6rem; }

/* Analyse-spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* Modal */
.modal-backdrop { background: rgba(28,43,45,.45); backdrop-filter: blur(2px); }

/* Range */
input[type=range] { accent-color: #346B6E; }

.skeleton { background: linear-gradient(90deg, #EEF2F2 0%, #F7F9F9 50%, #EEF2F2 100%); background-size: 200% 100%; animation: shimmer 1.6s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}