/* Notifications Dropdown - Facebook Style */
.notifications-dropdown {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

.notification-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(122, 46, 61, 0.3) transparent;
}

.notification-list::-webkit-scrollbar {
    width: 6px;
}

.notification-list::-webkit-scrollbar-track {
    background: transparent;
}

.notification-list::-webkit-scrollbar-thumb {
    background-color: rgba(122, 46, 61, 0.3);
    border-radius: 10px;
}

.notification-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(122, 46, 61, 0.5);
}

/* Notification Items */
.notification-item-wrapper {
    list-style: none;
}

.notification-item {
    padding: 0.75rem 1rem !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

/* Alternating colors - subtle */
.notification-item-wrapper:nth-child(even) .notification-item {
    background-color: #fafafa;
}

.notification-item-wrapper:nth-child(odd) .notification-item {
    background-color: #ffffff;
}

/* Unread notifications */
.notification-item.unread {
    background-color: #fff8f0 !important;
    border-left: 3px solid var(--bs-burgundy, #7A2E3D) !important;
}

.notification-item-wrapper:nth-child(even) .notification-item.unread {
    background-color: #fff5eb !important;
}

/* Hover effect - very light */
.notification-item:hover {
    background-color: #f5f5f5 !important;
    transform: translateX(2px);
}

.notification-item.unread:hover {
    background-color: #ffedd5 !important;
}

/* Icon styling */
.notification-icon {
    font-size: 1rem;
}

/* Content truncation */
.notification-content {
    overflow: hidden;
}

.notification-content>div {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.notification-content .fw-semibold {
    -webkit-line-clamp: 1;
}

.notification-content .text-muted {
    -webkit-line-clamp: 2;
}

/* Remove last border */
.notification-list .notification-item-wrapper:last-child .notification-item {
    border-bottom: none !important;
}

/* Smooth scroll */
.notification-list {
    scroll-behavior: smooth;
}