/* =============================================
   PHASE 6: SKELETON SCREENS
   =============================================
   Platzhalter-UI für Kategorien während Berechnung
   ============================================= */

/* Skeleton-Animation */
@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Skeleton-Basis-Styles */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--gray-100) 0%,
        var(--gray-200) 50%,
        var(--gray-100) 100%
    );
    background-size: 1000px 100%;
    animation: skeleton-shimmer 2s infinite;
    border-radius: 4px;
}

.skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Kategorie-Skeleton */
.category-skeleton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.category-skeleton-icon {
    width: 16px;
    height: 16px;
    background: var(--gray-200);
    border-radius: 2px;
}

.category-skeleton-label {
    width: 120px;
    height: 16px;
    background: var(--gray-200);
    border-radius: 4px;
}

/* Kategorie-Item-Skeleton */
.category-item-skeleton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    padding-left: 48px;
}

.category-item-skeleton-icon {
    width: 12px;
    height: 12px;
    background: var(--gray-200);
    border-radius: 2px;
}

.category-item-skeleton-name {
    width: 150px;
    height: 14px;
    background: var(--gray-200);
    border-radius: 4px;
}

/* Monats-Werte-Skeleton */
.month-skeleton {
    width: 60px;
    height: 20px;
    background: var(--gray-200);
    border-radius: 4px;
    margin: 2px auto;
}

.month-skeleton-small {
    width: 50px;
    height: 16px;
}

/* Berechnungs-Badge */
.calculating-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--blue-50);
    color: var(--blue-700);
    border: 1px solid var(--blue-200);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 8px;
}

.calculating-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue-500);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Skeleton für gesamte Kategorie-Gruppe */
.category-group-skeleton {
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-200);
}

.category-group-skeleton:last-child {
    border-bottom: none;
}

/* Skeleton für Kategorie-Header */
.category-header-skeleton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 8px;
}

.category-header-skeleton-label {
    width: 200px;
    height: 18px;
    background: var(--gray-200);
    border-radius: 4px;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .category-skeleton-label,
    .category-item-skeleton-name {
        width: 100px;
    }
    
    .month-skeleton {
        width: 50px;
    }
}