/* ============================================================
   Utility Classes – Häufige Muster ausgelagert
   ============================================================ */

/* Flexbox & Layout Utilities */
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }

/* Spacing Utilities */
.m-0 { margin: 0; }
.m-4 { margin: 4px; }
.m-6 { margin: 6px; }
.m-8 { margin: 8px; }
.m-10 { margin: 10px; }
.m-12 { margin: 12px; }
.m-14 { margin: 14px; }
.m-16 { margin: 16px; }
.m-20 { margin: 20px; }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }

.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-28 { margin-top: 28px; }

.p-8 { padding: 8px; }
.p-10 { padding: 10px; }
.p-12 { padding: 12px; }
.p-14 { padding: 14px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }
.p-32 { padding: 32px; }

.pb-0 { padding-bottom: 0; }
.pb-8 { padding-bottom: 8px; }
.pb-12 { padding-bottom: 12px; }
.pb-14 { padding-bottom: 14px; }
.pb-16 { padding-bottom: 16px; }

.pt-12 { padding-top: 12px; }
.pt-16 { padding-top: 16px; }
.pt-20 { padding-top: 20px; }

.px-10 { padding-left: 10px; padding-right: 10px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-14 { padding-left: 14px; padding-right: 14px; }

/* Size Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }

.h-full { height: 100%; }
.h-auto { height: auto; }

.min-w-34 { min-width: 34px; }
.min-w-160 { min-width: 160px; }
.min-w-240 { min-width: 240px; }
.min-w-300 { min-width: 300px; }
.min-w-320 { min-width: 320px; }
.min-w-560 { min-width: 560px; }

.min-h-44 { min-height: 44px; }
.min-h-100 { min-height: 100px; }
.min-h-300 { min-height: 300px; }
.min-h-620 { min-height: 620px; }
.min-h-800 { min-height: 800px; }

.max-w-400 { max-width: 400px; }
.max-w-560 { max-width: 560px; }

.max-h-220 { max-height: 220px; }
.max-h-320 { max-height: 320px; }

/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-10 { font-size: 10px; }
.text-11 { font-size: 13px; }
.text-12 { font-size: 14px; }
.text-13 { font-size: 13px; }
.text-14 { font-size: 14px; }
.text-15 { font-size: 15px; }
.text-16 { font-size: 16px; }
.text-18 { font-size: 18px; }
.text-20 { font-size: 20px; }
.text-24 { font-size: 24px; }
.text-28 { font-size: 28px; }
.text-36 { font-size: 36px; }

.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-primary); font-size: 0.9em; font-weight: 400; }
.text-muted { color: var(--text-primary); font-size: 0.85em; font-weight: 400; }

.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-accent { color: var(--accent); }
.text-warning { color: var(--warning); }

.line-height-tight { line-height: 1.2; }
.line-height-normal { line-height: 1.4; }
.line-height-relaxed { line-height: 1.6; }

/* Visibility Utilities */
.hidden { display: none !important; }
.visible { display: block !important; }
.inline-flex-hidden { display: none; }

/* Flex Grow/Shrink */
.flex-1 { flex: 1; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Border & Shadow */
.border-none { border: none; }
.border-top { border-top: 1px solid var(--border); }
.border-bottom { border-bottom: 1px solid var(--border); }
.border-divider { border-bottom: 1px solid var(--divider); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Background Utilities */
.bg-base { background: var(--bg-base); }
.bg-card { background: var(--bg-card); }
.bg-surface { background: var(--bg-surface); }
.bg-surface-2 { background: var(--bg-surface-2); }
.bg-hover { background: var(--bg-hover); }

.bg-danger-soft { background: var(--danger-soft); }
.bg-success-soft { background: var(--success-soft); }
.bg-warning-soft { background: var(--warning-soft); }
.bg-accent-soft { background: var(--accent-soft); }

/* Overflow & Whitespace */
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }
.whitespace-pre-wrap { white-space: pre-wrap; }

.word-break { word-break: break-word; }

/* Grid */
.grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-6col { display: grid; grid-template-columns: repeat(6, 1fr); }

/* User Select */
.select-none { -webkit-user-select: none; user-select: none; }
.select-auto { -webkit-user-select: auto; user-select: auto; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-col-resize { cursor: col-resize; }

/* Transition */
.transition { transition: all var(--transition); }
.transition-bg { transition: background var(--transition); }
.transition-color { transition: color var(--transition); }
.transition-border { transition: border-color var(--transition); }

/* Transform */
.translate-y-0 { transform: translateY(0); }
.translate-y-2 { transform: translateY(-2px); }
.translate-y-neg-1 { transform: translateY(-1px); }
.translate-x-100 { transform: translateX(100%); }
.translate-x-50 { transform: translateX(-50%); }
.translate-y-50 { transform: translateY(-50%); }

/* Letter Spacing */
.letter-normal { letter-spacing: normal; }
.letter-wide { letter-spacing: 0.05em; }
.letter-wider { letter-spacing: 0.06em; }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-85 { opacity: 0.85; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

.inset-0 { inset: 0; }
.top-0 { top: 0; }
.top-50 { top: 50%; }
.left-0 { left: 0; }
.left-50 { left: 50%; }
.right-0 { right: 0; }
.right-4 { right: 4px; }
.bottom-0 { bottom: 0; }
.bottom-20 { bottom: 20px; }

.z-index-100 { z-index: 100; }
.z-index-500 { z-index: 500; }
.z-index-1000 { z-index: 1000; }

/* Special Flex Combinations */
.flex-center-col { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.flex-between-col { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; }

/* Display Grid Combinations */
.grid-2-gap-16 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3-gap-12 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-auto-fill-140 { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }

/* Special Cases */
.pointer-events-none { pointer-events: none; }

/* Responsive Helpers */
@media (max-width: 768px) {
    .flex-col-mobile { display: flex; flex-direction: column; }
    .hidden-tablet { display: none; }
}

@media (max-width: 480px) {
    .hidden-mobile { display: none; }
    .w-full-mobile { width: 100%; }
    .flex-col-sm { display: flex; flex-direction: column; }
}

/* Additional Flex Combinations for common patterns */
.flex-row-center { display: flex; align-items: center; }
.flex-row-center-gap-8 { display: flex; align-items: center; gap: 8px; }
.flex-row-center-between { display: flex; align-items: center; justify-content: space-between; }
.flex-row-center-between-mt-28 { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; margin-bottom: 12px; }

/* Padding/Margin Combinations */
.p-20 { padding: 20px; }
.mx-auto { margin-left: auto; margin-right: auto; }