/**
 * Notification Center Styles
 *
 * CSS Audit (Feb 2026): KEEP — actively used throughout.
 * All major classes are referenced in base.html or created
 * dynamically by notifications.js / ui-components.js:
 *   - .notification-badge (base.html)
 *   - .notification-dropdown (base.html)
 *   - .notification-list (base.html)
 *   - #toast-container (created by JS dynamically)
 *   - .toast-notification (created by notifications.js)
 *   - @keyframes pulse, slideIn, slideOut (animation support)
 */

/* Notification Badge */
.notification-badge {
    font-size: 0.65rem;
    padding: 0.25em 0.5em;
    min-width: 1.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Notification Dropdown */
.notification-dropdown {
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.notification-dropdown .dropdown-header {
    padding: 0.75rem 1rem;
    background-color: var(--ds-color-bg-secondary);
    border-bottom: 1px solid var(--ds-border-color);
}

.notification-list {
    padding: 0;
}

.notification-list .dropdown-item {
    padding: 0;
    border-bottom: 1px solid var(--ds-color-bg-secondary);
    white-space: normal;
}

.notification-list .dropdown-item:last-child {
    border-bottom: none;
}

.notification-list .dropdown-item:hover {
    background-color: var(--ds-color-bg-secondary);
}

.notification-list .dropdown-item.bg-light {
    background-color: var(--ds-color-info-bg) !important;
}

.notification-list .dropdown-item.bg-light:hover {
    background-color: var(--ds-color-info-bg) !important;
}

.notification-list .dropdown-item > div {
    padding: 0.75rem 1rem;
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
}

.toast-notification {
    background: white;
    border: 1px solid var(--ds-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-bottom: 0.5rem;
    padding: 1rem;
    min-width: 300px;
}

.toast-notification .btn-close {
    padding: 0.5rem;
}

/* Animations */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

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

/* Notification Icons */
.notification-list .bi {
    font-size: 1.25rem;
    width: 1.5rem;
    flex-shrink: 0;
}

/* Empty State */
.notification-list .text-center {
    padding: 2rem 1rem;
}

/* Notification Bell Pulse Animation */
.nav-link .bi-bell {
    transition: transform 0.2s ease;
}

.nav-link:hover .bi-bell {
    transform: scale(1.1);
}

/* Unread Indicator */
.notification-badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% {
        box-shadow: 0 0 0 0.5rem rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .notification-dropdown {
        min-width: 320px !important;
        max-width: 100vw !important;
        left: auto !important;
        right: 0 !important;
    }

    #toast-container {
        right: 10px;
        left: 10px;
        max-width: 100%;
    }

    .toast-notification {
        min-width: auto;
    }
}

/* Dark Mode Support - Disabled in favor of site-theme.css light theme */