/**
 * Utility CSS Classes
 * =====================================================
 * Wiederverwendbare Utility-Klassen für das Projekt
 * Ersetzt häufig verwendete Inline-Styles
 * =====================================================
 */

/* ==========================================================================
   CSS VARIABLES - Häufig verwendete Werte
   ========================================================================== */
:root {
    /* Spacing */
    --sticky-top-offset: 100px;
    --sticky-top-offset-sm: 20px;
    
    /* Sizes */
    --avatar-size-lg: 100px;
    --avatar-size-md: 80px;
    --avatar-size-sm: 40px;
    --avatar-size-xs: 24px;
    
    /* Heights */
    --scroll-container-height: 500px;
    --scroll-container-height-sm: 300px;
    --scroll-container-height-md: 400px;
    --terminal-height: 200px;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-md: 0.9rem;
    --font-size-lg: 1.5rem;
    
    /* Brand Colors (already in custom.css but repeated for clarity) */
    --color-dark: #1e2022;
    --color-dark-hover: #2d3436;
}

/* ==========================================================================
   POSITIONING UTILITIES
   ========================================================================== */
.sticky-top-100 {
    position: sticky !important;
    top: var(--sticky-top-offset) !important;
}

.sticky-top-20 {
    position: sticky !important;
    top: var(--sticky-top-offset-sm) !important;
}

/* ==========================================================================
   SIZE UTILITIES
   ========================================================================== */

/* Avatar Sizes */
.avatar-lg {
    width: var(--avatar-size-lg) !important;
    height: var(--avatar-size-lg) !important;
}

.avatar-md {
    width: var(--avatar-size-md) !important;
    height: var(--avatar-size-md) !important;
}

.avatar-sm {
    width: var(--avatar-size-sm) !important;
    height: var(--avatar-size-sm) !important;
}

.avatar-xs {
    width: var(--avatar-size-xs) !important;
    height: var(--avatar-size-xs) !important;
}

/* Icon Container Sizes */
.icon-container-lg {
    width: var(--avatar-size-lg) !important;
    height: var(--avatar-size-lg) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon-container-md {
    width: var(--avatar-size-md) !important;
    height: var(--avatar-size-md) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon-container-sm {
    width: var(--avatar-size-sm) !important;
    height: var(--avatar-size-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fixed Widths */
.w-10 { width: 10px !important; }
.w-35 { width: 35px !important; }
.w-40 { width: 40px !important; }
.w-50 { width: 50px !important; }
.w-60 { width: 60px !important; }
.w-80 { width: 80px !important; }
.w-100px { width: 100px !important; }
.w-120 { width: 120px !important; }
.w-140 { width: 140px !important; }
.w-150 { width: 150px !important; }
.w-200 { width: 200px !important; }
.w-280 { width: 280px !important; }
.w-300 { width: 300px !important; }

/* Min/Max Widths */
.min-w-140 { min-width: 140px !important; }
.min-w-150 { min-width: 150px !important; }
.min-w-200 { min-width: 200px !important; }
.min-w-300 { min-width: 300px !important; }
.max-w-150 { max-width: 150px !important; }
.max-w-200 { max-width: 200px !important; }
.max-w-250 { max-width: 250px !important; }
.max-w-300 { max-width: 300px !important; }
.max-w-400 { max-width: 400px !important; }
.max-w-1140 { max-width: 1140px !important; }

/* Fixed Heights */
.h-8 { height: 8px !important; }
.h-20 { height: 20px !important; }
.h-24 { height: 24px !important; }
.h-25 { height: 25px !important; }
.h-31 { height: 31px !important; }
.h-32 { height: 32px !important; }
.h-38 { height: 38px !important; }
.h-40 { height: 40px !important; }
.h-48 { height: 48px !important; }
.h-50 { height: 50px !important; }
.h-64 { height: 64px !important; }
.h-80 { height: 80px !important; }
.h-200 { height: 200px !important; }
.h-300 { height: 300px !important; }
.h-400 { height: 400px !important; }

/* Square Sizes (width = height) */
.size-24 { width: 24px !important; height: 24px !important; }
.size-31 { width: 31px !important; height: 31px !important; }
.size-32 { width: 32px !important; height: 32px !important; }
.size-38 { width: 38px !important; height: 38px !important; }
.size-40 { width: 40px !important; height: 40px !important; }
.size-48 { width: 48px !important; height: 48px !important; }
.size-60 { width: 60px !important; height: 60px !important; }
.size-64 { width: 64px !important; height: 64px !important; }
.size-80 { width: 80px !important; height: 80px !important; }
.size-100 { width: 100px !important; height: 100px !important; }
.size-200 { width: 200px !important; height: 200px !important; }
.size-250 { width: 250px !important; height: 250px !important; }

/* ==========================================================================
   SCROLLABLE CONTAINERS
   ========================================================================== */
.scrollable-lg {
    max-height: var(--scroll-container-height) !important;
    overflow-y: auto !important;
}

.scrollable-md {
    max-height: var(--scroll-container-height-md) !important;
    overflow-y: auto !important;
}

.scrollable-sm {
    max-height: var(--scroll-container-height-sm) !important;
    overflow-y: auto !important;
}

.scrollable-terminal {
    height: var(--terminal-height) !important;
    overflow-y: auto !important;
}

.scrollable-350 {
    max-height: 350px !important;
    overflow-y: auto !important;
}

/* ==========================================================================
   FONT SIZE UTILITIES
   ========================================================================== */
.fs-xs { font-size: var(--font-size-xs) !important; }
.fs-sm { font-size: var(--font-size-sm) !important; }
.fs-md { font-size: var(--font-size-md) !important; }
.fs-lg { font-size: var(--font-size-lg) !important; }

/* Specific font sizes */
.fs-0-65 { font-size: 0.65rem !important; }
.fs-0-7 { font-size: 0.7rem !important; }
.fs-0-75 { font-size: 0.75rem !important; }
.fs-0-8 { font-size: 0.8rem !important; }
.fs-0-8125 { font-size: 0.8125rem !important; }
.fs-0-85 { font-size: 0.85rem !important; }
.fs-0-875 { font-size: 0.875rem !important; }
.fs-0-9 { font-size: 0.9rem !important; }
.fs-0-95 { font-size: 0.95rem !important; }
.fs-1-5 { font-size: 1.5rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3rem { font-size: 3rem !important; }
.fs-4rem { font-size: 4rem !important; }
.fs-32px { font-size: 32px !important; }

/* ==========================================================================
   CURSOR UTILITIES
   ========================================================================== */
.cursor-pointer { cursor: pointer !important; }
.cursor-grab { cursor: grab !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* ==========================================================================
   DISPLAY UTILITIES
   ========================================================================== */
.d-none-important { display: none !important; }
.d-inline-important { display: inline !important; }

/* ==========================================================================
   OBJECT FIT
   ========================================================================== */
.object-cover { object-fit: cover !important; }

/* ==========================================================================
   LETTER SPACING
   ========================================================================== */
.letter-spacing-wide { letter-spacing: 0.5em !important; }

/* ==========================================================================
   FONT FAMILY
   ========================================================================== */
.font-monospace { font-family: monospace !important; }

/* ==========================================================================
   BACKGROUND GRADIENTS
   ========================================================================== */
.bg-gradient-dark {
    background: linear-gradient(135deg, #1e2022 0%, #2d3436 100%) !important;
}

.bg-gradient-dark-alt {
    background: linear-gradient(135deg, #1e2022 0%, #2d3436 50%, #1e2022 100%) !important;
}

/* ==========================================================================
   BORDER UTILITIES
   ========================================================================== */
.border-soft-light {
    border-color: rgba(255,255,255,0.1) !important;
}

.border-soft-dark {
    border-color: rgba(255,255,255,0.2) !important;
}

.border-soft-medium {
    border-color: rgba(255,255,255,0.3) !important;
}

/* ==========================================================================
   GAP UTILITIES
   ========================================================================== */
.gap-0-25 { gap: 0.25rem !important; }
.gap-0-5 { gap: 0.5rem !important; }
.gap-1-5 { gap: 1.5rem !important; }

/* ==========================================================================
   PADDING UTILITIES
   ========================================================================== */
.p-0-15em-0-45em {
    padding: 0.15em 0.45em !important;
}

.pr-50 {
    padding-right: 50px !important;
}

/* ==========================================================================
   MARGIN UTILITIES
   ========================================================================== */
.ml-4rem {
    margin-left: 4rem !important;
}

/* ==========================================================================
   MISC UTILITIES
   ========================================================================== */
.filter-invert {
    filter: brightness(0) invert(1) !important;
}

.opacity-75 {
    opacity: 0.75 !important;
}

.opacity-80 {
    opacity: 0.8 !important;
}

.word-wrap-break {
    word-wrap: break-word !important;
}

/* Form styles */
.form-select-inline {
    min-width: 300px !important;
    width: auto !important;
}

/* Progress bar specific heights */
.progress-6 { height: 6px !important; }
.progress-8 { height: 8px !important; }
.progress-20 { height: 20px !important; }
.progress-24 { height: 24px !important; }
.progress-25 { height: 25px !important; }

/* Pointer events */
.pointer-events-none { pointer-events: none !important; }

/* Z-index utilities */
.z-1030 { z-index: 1030 !important; }
.z-1080 { z-index: 1080 !important; }

/* Vertical align */
.va-middle { vertical-align: middle !important; }
.va-m2 { vertical-align: -2px !important; }

/* Border radius for images/flags */
.rounded-circle-sm {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Max width percentage */
.mw-65 { max-width: 65% !important; }
.mw-80 { max-width: 80% !important; }

/* Border radius specific */
.br-14 { border-radius: 14px !important; }
.br-20 { border-radius: 20px !important; }

/* Padding specific */
.p-8-12 { padding: 8px 12px !important; }

/* Resize */
.resize-none { resize: none !important; }

/* Additional utility classes for remaining inline styles */
.min-h-300 { min-height: 300px !important; }
.mr-6 { margin-right: 6px !important; }

/* Table column widths */
.w-col-10 { width: 10% !important; }
.w-col-15 { width: 15% !important; }
.w-col-30 { width: 30% !important; }
.w-col-35 { width: 35% !important; }
.w-col-40 { width: 40% !important; }
.w-col-45 { width: 45% !important; }

/* Text decoration */
.text-decoration-underline { text-decoration: underline !important; }

/* Background with opacity */
.bg-white-15 { background: rgba(255,255,255,0.15) !important; }
.bg-white-50-opacity { color: rgba(255,255,255,0.5) !important; }
.border-white-20 { border: 1px solid rgba(255,255,255,0.2) !important; }
.border-white-30 { border: 1px solid rgba(255,255,255,0.3) !important; }