/**
 * Notifications Bell Icon Styles
 *
 * Minimal CSS for styles that Tailwind cannot handle:
 * - Dark mode (Wagtail .w-theme-dark, Django [data-theme="dark"])
 * - Wagtail sidebar positioning
 * - Django admin positioning
 * - Responsive adjustments
 */

/* ==========================================================================
   Dark Mode Styles
   ========================================================================== */

/* Dropdown Panel - Dark Mode */
.w-theme-dark .notification-dropdown,
[data-theme="dark"] .notification-dropdown {
    background: #1e1e1e;
    color: #e0e0e0;
}

/* Header - Dark Mode */
.w-theme-dark .notification-header,
[data-theme="dark"] .notification-header {
    border-bottom-color: #333;
}

/* Notification Item - Dark Mode */
.w-theme-dark .notification-item,
[data-theme="dark"] .notification-item {
    border-bottom-color: #333;
}

.w-theme-dark .notification-item:hover,
[data-theme="dark"] .notification-item:hover {
    background-color: #2a2a2a;
}

.w-theme-dark .notification-item.unread,
[data-theme="dark"] .notification-item.unread {
    background-color: #1a3a5c;
}

/* Notification Verb - Dark Mode */
.w-theme-dark .notification-verb,
[data-theme="dark"] .notification-verb {
    color: #e0e0e0;
}

/* Notification Description - Dark Mode */
.w-theme-dark .notification-desc,
[data-theme="dark"] .notification-desc {
    color: #999;
}

/* Notification Time - Dark Mode */
.w-theme-dark .notification-time,
[data-theme="dark"] .notification-time {
    color: #777;
}

/* ==========================================================================
   Badge Animation
   ========================================================================== */

/* Bell button - ensure badge is visible */
.notification-bell {
    overflow: visible !important;
}

/* Badge base styles (Tailwind fallback) */
.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background-color: #ef4444;
    border-radius: 9999px;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff, 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    z-index: 10;
}

/* Badge visibility states */
.notification-badge.hidden {
    display: none !important;
}

.notification-badge.flex {
    display: flex !important;
}

/* Pulse animation for unread badge */
@keyframes badge-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.notification-badge.flex {
    animation: badge-pulse 2s ease-in-out infinite;
}

/* Dark mode badge */
.w-theme-dark .notification-badge,
[data-theme="dark"] .notification-badge {
    box-shadow: 0 0 0 2px #1e1e1e;
}

/* ==========================================================================
   Wagtail Sidebar Positioning
   ========================================================================== */

.notification-container.wagtail-sidebar {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 8px 0;
    padding: 8px 4px;
}

.notification-container.wagtail-sidebar .notification-bell {
    width: 100%;
    height: auto;
    padding: 8px 16px;
    border-radius: 4px;
    justify-content: flex-start;
    color: var(--w-color-text-label-menus-default, #ddd);
}

.notification-container.wagtail-sidebar .notification-bell:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.notification-container.wagtail-sidebar .notification-bell i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Notification label - visible when sidebar is expanded */
.notification-container.wagtail-sidebar .notification-label {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

.notification-container.wagtail-sidebar .notification-badge {
    top: 2px;
    right: 8px;
    z-index: 10;
}

.notification-container.wagtail-sidebar .notification-dropdown {
    left: 100%;
    right: auto;
    top: 0;
    margin-left: 8px;
    margin-top: 0;
}

/* When sidebar is collapsed - hide label, center icon */
.sidebar--slim .notification-container.wagtail-sidebar .notification-bell {
    justify-content: center;
    padding: 8px;
}

.sidebar--slim .notification-container.wagtail-sidebar .notification-label {
    display: none;
}

.sidebar--slim .notification-container.wagtail-sidebar .notification-badge {
    top: 0;
    right: 2px;
    z-index: 10;
}

.sidebar--slim .notification-container.wagtail-sidebar .notification-dropdown {
    left: calc(100% + 8px);
}

/* ==========================================================================
   Django Admin Positioning
   ========================================================================== */

.notification-container.django-admin {
    position: absolute;
    right: 148px;
    top: 8px;
    display: inline-flex;
    overflow: visible;
}

.notification-container.django-admin .notification-bell {
    color: #fff;
    overflow: visible;
}

.notification-container.django-admin .notification-badge {
    top: -2px;
    right: -2px;
    box-shadow: none;
    z-index: 10;
}

/* Hide label in Django admin - icon only */
.notification-container.django-admin .notification-label {
    display: none;
}

.notification-container.django-admin .notification-dropdown {
    right: -50px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 480px) {
    .notification-dropdown {
        width: 300px;
        right: -100px;
    }
}