@tailwind base;
@tailwind components;
@tailwind utilities;

/* Benutzerdefinierte Stile für die Navigationspunkte */
.filament-sidebar-nav-item-status-warning {
    background-color: rgba(253, 186, 116, 0.1);
    border-left: 3px solid rgb(253, 186, 116);
}

.filament-sidebar-nav-item-status-info {
    background-color: rgba(96, 165, 250, 0.1);
    border-left: 3px solid rgb(96, 165, 250);
}

.filament-sidebar-nav-item-status-success {
    background-color: rgba(74, 222, 128, 0.1);
    border-left: 3px solid rgb(74, 222, 128);
}

.filament-sidebar-nav-item-status-primary {
    background-color: rgba(79, 70, 229, 0.1);
    border-left: 3px solid rgb(79, 70, 229);
}

.filament-sidebar-nav-item-status-gray {
    background-color: rgba(156, 163, 175, 0.1);
    border-left: 3px solid rgb(156, 163, 175);
}

.filament-sidebar-nav-item-status-danger {
    background-color: rgba(248, 113, 113, 0.1);
    border-left: 3px solid rgb(248, 113, 113);
}

/* Dashboard Pulsierendes Warning-Icon (Orange zu Rot) */
.dashboard-warning-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background: linear-gradient(135deg, #f97316, #ef4444);
    animation: pulse-warning 2s ease-in-out infinite;
}

.dashboard-warning-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

/* Pulsierende Animation von Orange zu Rot */
@keyframes pulse-warning {
    0% {
        background: linear-gradient(135deg, #f97316, #ef4444);
        transform: scale(1);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    50% {
        background: linear-gradient(135deg, #ea580c, #dc2626);
        transform: scale(1.05);
        box-shadow: 0 8px 15px -3px rgba(239, 68, 68, 0.4), 0 4px 6px -2px rgba(239, 68, 68, 0.2);
    }
    100% {
        background: linear-gradient(135deg, #f97316, #ef4444);
        transform: scale(1);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
}