html { scroll-behavior: smooth; }

.no-select { user-select: none; -webkit-user-select: none; }
.view-section { display: none; animation: fadeIn 0.2s ease-in-out; }
.view-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Protocol styling */
.cms-content h1, .cms-content h2 { font-size: 1.25rem; font-weight: bold; margin-top: 1rem; margin-bottom: 0.5rem; color: #005f73; scroll-margin-top: 5rem; }
.cms-content p { margin-bottom: 0.75rem; line-height: 1.6; }
.cms-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.cms-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }

/* Sublevels in lijsten (Quill indents) */
.cms-content li.ql-indent-1 { margin-left: 1.5em; list-style-type: circle; }
.cms-content li.ql-indent-2 { margin-left: 3.0em; list-style-type: square; }
.cms-content li.ql-indent-3 { margin-left: 4.5em; }
.cms-content li.ql-indent-4 { margin-left: 6.0em; }
.cms-content li.ql-indent-5 { margin-left: 7.5em; }

/* Tabel Styling (voor geplakte tabellen) */
.cms-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.875rem; overflow-x: auto; display: block; }
.cms-content th, .cms-content td { padding: 0.5rem 0.75rem; text-align: left; min-width: 100px; border-bottom: 1px solid #e5e7eb; border-top: none; border-left: none; border-right: none; }
.cms-content th { background-color: #f3f4f6; font-weight: 600; color: #374151; }
.cms-content td { background-color: #ffffff; }
.cms-content table p { margin: 0; } 

.cms-content img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1rem 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); cursor: pointer; transition: opacity 0.2s; }
.cms-content img:hover { opacity: 0.9; }

/* Fluo Highlight */
mark { background-color: #fef08a; color: #854d0e; padding: 0 2px; border-radius: 2px; font-weight: 500; }

/* Quill editor fixes */
.ql-editor { min-height: 250px; font-family: inherit; font-size: 1rem; background-color: white; border-radius: 0 0 0.5rem 0.5rem; }
.ql-toolbar { background-color: #f9fafb; border-radius: 0.5rem 0.5rem 0 0; }

/* Toasts */
@keyframes slideInUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideOutDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
.toast-enter { animation: slideInUp 0.3s forwards; }
.toast-leave { animation: slideOutDown 0.3s forwards; }