/* css/utilities.css - Helper classes (v206 - Opgeschoond: Duplicaten verwijderd) */
.flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .inline-flex { display: inline-flex; }

.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; }
.m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .ml-1 { margin-left: 4px; } .ml-2 { margin-left: 8px; } .ml-auto { margin-left: auto; } .mr-1 { margin-right: 4px; } .mr-2 { margin-right: 8px; }
.p-0 { padding: 0; } .p-1 { padding: 4px; } .p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .pt-3 { padding-top: 12px; } .pt-4 { padding-top: 16px; } .pb-2 { padding-bottom: 8px; } .px-2 { padding-left: 8px; padding-right: 8px; } .px-3 { padding-left: 12px; padding-right: 12px; } .px-4 { padding-left: 16px; padding-right: 16px; } .py-1 { padding-top: 4px; padding-bottom: 4px; } .py-2 { padding-top: 8px; padding-bottom: 8px; }

.text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .text-muted { color: var(--text-muted); } .text-primary { color: var(--primary-color); } .text-main { color: var(--text-main); } .text-danger { color: var(--danger-color); } .text-success { color: var(--success-color); } .text-warning { color: var(--warning-color); } .text-danger-light { color: #fca5a5; }
.font-bold { font-weight: 700; } .font-mono { font-family: monospace; } .text-xs { font-size: 0.7rem; } .text-sm { font-size: 0.85rem; } .text-base { font-size: 0.95rem; } .text-lg { font-size: 1.1rem; } .no-underline { text-decoration: none !important; } .uppercase { text-transform: uppercase; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whitespace-nowrap { white-space: nowrap; }

.cursor-pointer { cursor: pointer; } .select-none { user-select: none; } .pointer-events-none { pointer-events: none; }
.w-full { width: 100%; } .max-w-xs { max-width: 220px; } .max-w-180 { max-width: 180px; } .max-w-md { max-width: 480px; }

.w-60 { width: 60px; } .w-70 { width: 70px; } .w-75 { width: 75px; } .w-85 { width: 85px; } .w-90 { width: 90px; } .w-100 { width: 100px; } .w-110 { width: 110px; } .w-120 { width: 120px; } .w-130 { width: 130px; } .w-140 { width: 140px; } .w-160 { width: 160px; } .w-170 { width: 170px; } .w-220 { width: 220px; } .w-250 { width: 250px; } .w-330 { width: 330px; }
.min-w-90 { min-width: 90px; } .min-w-100 { min-width: 100px; } .min-w-110 { min-width: 110px; } .min-w-140 { min-width: 140px; } .min-w-180 { min-width: 180px; } .min-w-200 { min-width: 200px; } .min-w-240 { min-width: 240px; } .min-w-sm { min-width: 170px; }

.rounded-md { border-radius: 8px; } .bg-th { background: var(--table-th-bg); } .border-input { border: 1px solid var(--input-border); } .border-top { border-top: 1px solid var(--table-border); } .border-right { border-right: 1px solid var(--table-border); } .border-bottom { border-bottom: 1px solid var(--table-border); } .opacity-50 { opacity: 0.5; } .opacity-100 { opacity: 1 !important; }
.min-h-screen { min-height: 100vh; } .w-90pct { width: 90%; } .max-w-400 { max-width: 400px; } .max-w-580 { max-width: 580px; } .max-w-850 { max-width: 850px; } .max-w-900 { max-width: 900px; } .max-w-1100 { max-width: 1100px; } .mx-auto { margin-left: auto; margin-right: auto; } .relative { position: relative; } .absolute { position: absolute; } .top-3 { top: 12px; } .right-3 { right: 12px; } .shadow-lg { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4); }
.border-2 { border-width: 2px; } .border-l-4 { border-left-width: 4px; } .border-primary { border-color: var(--primary-color); }
.d-none { display: none !important; } .transition-opacity { transition: opacity 0.2s ease; }