/**
 * Notification Styles - Compact Design
 */

/* Icon Circle in Header */
.icon-circle {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f8f9fa;
    color: #6c757d;
}

[data-bs-theme="dark"] .icon-circle {
    background: #2b3035;
    color: #adb5bd;
}

/* Notification Card */
.notification-item {
    transition: background-color 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 12px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--card-bg) !important;
}

.notification-item:hover {
    background-color: var(--bs-tertiary-bg) !important;
    transform: translateX(2px);
}

/* Card with open dropdown - bring to front and disable transform */
.notification-item.dropdown-open {
    z-index: 1050;
    position: relative;
    transform: none !important;
}

.notification-item.notification-unread {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(147, 51, 234, 0.03) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    border-left: 3px solid #3b82f6 !important;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.1);
}

/* Invalid/Old notifications - dashed border, grayed out content */
.notification-item.notification-invalid {
    background: var(--bs-tertiary-bg) !important;
    border-style: dashed !important;
    cursor: default;
    pointer-events: none;
}

/* Invalid + unread — keep the blue left border */
.notification-item.notification-invalid.notification-unread {
    border-left: 3px solid #3b82f6 !important;
}

/* Re-enable pointer events for buttons and dropdown */
.notification-item.notification-invalid .dropdown,
.notification-item.notification-invalid .dropdown-item,
.notification-item.notification-invalid .btn-notifications-dropdown,
.notification-item.notification-invalid .delete-notification {
    pointer-events: auto;
    cursor: pointer;
}

/* Gray out only title and message, not buttons */
.notification-item.notification-invalid .notification-title,
.notification-item.notification-invalid .notification-message {
    filter: saturate(0.3);
    color: var(--text-secondary) !important;
}

.notification-item.notification-invalid:hover {
    background: var(--bs-tertiary-bg) !important;
    transform: none;
}

.notification-item.notification-unread:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(147, 51, 234, 0.06) 100%) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
    transform: translateX(4px);
}

/* Card with open dropdown - disable transform for unread too */
.notification-item.notification-unread.dropdown-open {
    transform: none !important;
}

/* Badge for unread */
.notification-item .badge.rounded-pill {
    min-width: 6px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mark all read button - smooth transition */
.mark-all-read-form {
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align: top;
    max-width: 200px;
    opacity: 1;
    visibility: visible;
}

.mark-all-read-form.invisible {
    opacity: 0;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0.5s; /* visibility меняется после анимации */
    visibility: hidden;
}