/**
 * Notifications CSS
 * Bildirim dropdown stilleri
 */

/* Badge Styles - Kırmızı nokta CSS ::before ile kontrol ediliyor */
/* .badge class'ı JavaScript ile dinamik olarak eklenir/çıkarılır */

/* Dropdown Size */
.notifications.noti .dropdown-menu {
    max-height: 500px;
}

.max-h-400 {
    max-height: 400px;
    overflow-y: auto;
}

/* Notification Item */
.notification-menu {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.notification-menu:last-child {
    border-bottom: none;
}

.notification-menu:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Unread Notification */
.notification-menu.unseen {
    background: rgba(200, 44, 106, 0.05);
    border-left: 3px solid #c82c6a;
}

.notification-menu.unseen:hover {
    background: rgba(200, 44, 106, 0.08);
}

/* Notification Link */
.notification-item {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

/* Delete Button */
.delete-notification {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.notification-menu:hover .delete-notification {
    opacity: 1;
}

.delete-notification:hover i {
    color: #dc3545 !important;
}

/* Icon Colors */
.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.notification-icon.text-primary {
    background: rgba(200, 44, 106, 0.1);
}

.notification-icon.text-success {
    background: rgba(25, 135, 84, 0.1);
}

.notification-icon.text-warning {
    background: rgba(255, 193, 7, 0.1);
}

.notification-icon.text-danger {
    background: rgba(220, 53, 69, 0.1);
}

.notification-icon.text-info {
    background: rgba(13, 202, 240, 0.1);
}

/* Loading & Empty States */
#notificationLoading,
#notificationEmpty {
    padding: 3rem 1rem;
}

#notificationEmpty i {
    font-size: 48px;
    opacity: 0.5;
}

/* Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-menu {
    animation: slideIn 0.3s ease;
}

/* Responsive */
@media (max-width: 576px) {
    .notifications.noti .dropdown-menu {
        width: 95vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}