/**
 * notifications.css — Dropdown de notificaciones (navbar)
 * Portal Ciudadano Sisvantec V8.3
 */

/* ──────────────────────────────────────────
   Dropdown container
   ────────────────────────────────────────── */
.notifications-dropdown {
    box-shadow: var(--shadow-lg) !important;
}

.notification-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-primary-rgb), 0.3) transparent;
    scroll-behavior: smooth;
}

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

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

.notification-list::-webkit-scrollbar-thumb {
    background-color: rgba(var(--color-primary-rgb), 0.3);
    border-radius: 10px;
}

.notification-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--color-primary-rgb), 0.5);
}

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

.notification-item {
    padding: 0.75rem 1rem !important;
    border: none !important;
    border-bottom: 1px solid var(--gray-100) !important;
    transition: all var(--transition-base);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

/* Alternating colors */
.notification-item-wrapper:nth-child(even) .notification-item {
    background-color: var(--gray-50);
}

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

/* Unread notifications */
.notification-item.unread {
    background-color: rgba(var(--color-accent-rgb), 0.06) !important;
    border-left: 3px solid var(--color-primary) !important;
}

.notification-item-wrapper:nth-child(even) .notification-item.unread {
    background-color: rgba(var(--color-accent-rgb), 0.08) !important;
}

/* Hover */
.notification-item:hover {
    background-color: var(--gray-100) !important;
    transform: translateX(2px);
}

.notification-item.unread:hover {
    background-color: rgba(var(--color-accent-rgb), 0.12) !important;
}

/* ──────────────────────────────────────────
   Icon & Content
   ────────────────────────────────────────── */
.notification-icon {
    font-size: 1rem;
}

.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;
}