/* ==============================================
   FamilienKiez - Utilities (ITCSS Layer: Utilities)
   Kleine Hilfsklassen
   ============================================== */

/* --- Screen Reader Only --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fallback for older implementation */
.sr-only-fallback {
    display: none;
}

/* --- Animation Delays (für gestaffelte Animationen) --- */
.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.5s;
}

/* --- Transition Utilities --- */
.transition-none {
    transition: none !important;
}

.transition-fast {
    transition: all var(--transition-fast);
}

.transition-smooth {
    transition: all var(--transition-smooth);
}

/* --- Opacity Utilities --- */
.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-100 {
    opacity: 1;
}

/* --- Visibility Utilities --- */
.invisible {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

/* --- Transform Utilities --- */
.scale-95 {
    transform: scale(0.95);
}

.scale-100 {
    transform: scale(1);
}

.scale-105 {
    transform: scale(1.05);
}

/* --- Z-Index Utilities --- */
.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-50 {
    z-index: 50;
}

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

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

.pointer-events-auto {
    pointer-events: auto;
}

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

.select-text {
    user-select: text;
}

.select-all {
    user-select: all;
}

.resize-none {
    resize: none;
}

/* --- Cursor Utilities --- */
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.cursor-wait {
    cursor: wait;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

/* --- Spacing --- */
.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-1-5 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-1-5 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 1.5rem;
}

/* --- Typography --- */
.text-muted {
    color: var(--text-muted);
}

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

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.fs-75 {
    font-size: 0.75rem;
}

.fs-85 {
    font-size: 0.85rem;
}

.fw-600 {
    font-weight: 600;
}

.text-uppercase {
    text-transform: uppercase;
}

/* --- Flexbox --- */
.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-1 {
    gap: 0.5rem;
}

.gap-1-5 {
    gap: 1rem;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.flex-1 {
    flex: 1;
}

/* --- Sizing --- */
.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.max-w-100 {
    max-width: 100%;
}

.avatar-sm {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
}

/* --- Table --- */
.table-clean {
    width: 100%;
    border-collapse: collapse;
}

/* --- Spacing Extras --- */
.mb-1-25 {
    margin-bottom: 1.25rem;
    /* ~20px */
}

.mt-1-25 {
    margin-top: 1.25rem;
    /* ~20px */
}

/* --- Typography Extras --- */
.fs-1-1 {
    font-size: 1.1rem;
}

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

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

.text-error,
.text-danger {
    color: var(--danger-color);
}

/* --- JS Helpers --- */
.checkbox-custom {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* --- Display --- */
.d-none,
.hidden {
    display: none !important;
}

.d-block {
    display: block;
}

@media (min-width: 768px) {
    .d-md-none {
        display: none !important;
    }

    .d-md-block {
        display: block !important;
    }

    .d-md-flex {
        display: flex !important;
    }

    .d-md-inline {
        display: inline !important;
    }
}

/* --- Form helpers --- */
.form-field {
    margin-bottom: 1rem;
}

.form-required-hint {
    text-align: right;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.form-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.form-hint-sm {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: 0.25rem;
}

.icon-primary {
    color: var(--primary-color);
}

.mr-1 {
    margin-right: 0.5rem;
}

/* --- Reduced Motion: Respektiere Nutzereinstellungen --- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==============================================
   GRID SYSTEM (MIGRATED FROM LAYOUT.CSS)
   ============================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.grid {
    display: grid;
    gap: var(--spacing-md);
}

.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.gap-8 {
    gap: 2rem;
}

/* --- Cards Grid (Responsive & Sidebar-safe) --- */
.cards-grid {
    display: grid;
    /* Smart grid that adapts to sidebar presence automatically */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 640px) {
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

}

/* --- Card Appear Animation --- */
@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cards-grid>* {
    animation: cardAppear 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) backwards;
}

.cards-grid>*:nth-child(1) {
    animation-delay: 0.02s;
}

.cards-grid>*:nth-child(2) {
    animation-delay: 0.04s;
}

.cards-grid>*:nth-child(3) {
    animation-delay: 0.06s;
}

.cards-grid>*:nth-child(4) {
    animation-delay: 0.08s;
}

.cards-grid>*:nth-child(5) {
    animation-delay: 0.10s;
}

.cards-grid>*:nth-child(6) {
    animation-delay: 0.12s;
}

.cards-grid>*:nth-child(7) {
    animation-delay: 0.14s;
}

.cards-grid>*:nth-child(8) {
    animation-delay: 0.16s;
}

.cards-grid>*:nth-child(9) {
    animation-delay: 0.18s;
}

@media (prefers-reduced-motion: reduce) {
    .cards-grid>* {
        animation: none;
    }
}

/* UX: Instant Tooltips */
[title]:hover::after {
    transition-delay: 0s !important;
}