/* notifications.css: styles for admin header notifications/messages dropdowns */

/* Use the site's light-blue palette for headers, white item backgrounds and dark text for readability */
.messages-dropdown, .notifications-dropdown {
    background-color: #ffffff;
    color: #212529;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-radius: 6px;
    width: 360px;
    max-height: 480px;
    overflow-y: auto;
}

/* Table in notifications page */
#notification-list {
    font-size: 0.95rem;
    color: #212529;
}

#notification-list tbody tr {
    background: #ffffff;
}

#notification-list thead th {
    background: linear-gradient(90deg, #e6f2ff, #d9eefc);
    color: #0d6efd;
    font-weight: 600;
}

.dropdown-header {
    font-weight: 700;
    padding: 0.6rem 1rem;
    background: linear-gradient(90deg, #e6f2ff, #d9eefc);
    color: #0d6efd; /* bootstrap primary blue */
}

.messages-dropdown .dropdown-item, .notifications-dropdown .dropdown-item {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #ffffff;
}

.messages-dropdown .text-truncate, .notifications-dropdown .text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messages-dropdown .badge, .notifications-dropdown .badge {
    font-size: 0.65rem;
    padding: 0.35rem 0.45rem;
}

.messages-dropdown .small.text-muted, .notifications-dropdown .small.text-muted {
    font-size: 0.7rem;
}

.messages-dropdown .dropdown-item:hover, .notifications-dropdown .dropdown-item:hover {
    background-color: #f1f8ff; /* subtle blue on hover */
}

/* Make sure dropdown content sits above other UI */
.messages-dropdown, .notifications-dropdown { z-index: 2000; }