/* stylelint-disable selector-id-pattern */

/* ========================================
   NOTIFICATION SYSTEM
   ======================================== */

#notificationContainer {
    position: fixed;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: var(--z-notification);
    max-width: 400px;
    pointer-events: none;
}

.notification {
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px var(--shadow-medium);
    font-family: inherit;
    font-size: var(--font-base);
    line-height: 1.4;
    transform: translateX(100%);
    transition: all var(--transition-normal);
    opacity: 0;
    cursor: pointer;
    pointer-events: all;
    position: relative;
    overflow: hidden;
}

.notification::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: currentcolor;
}

.notification-success {
    background: linear-gradient(135deg, #d4edda 0%, #e8f5e8 100%);
    color: #155724;
    border: 1px solid #c3e6cb;
}

.notification-error {
    background: linear-gradient(135deg, #f8d7da 0%, #fdeaea 100%);
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.notification-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #fffadb 100%);
    color: #856404;
    border: 1px solid #ffeaa7;
}

.notification-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #e2f3f5 100%);
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Tablets */
@media (width <= 768px) {
    #notificationContainer {
        top: var(--spacing-md);
        right: var(--spacing-md);
        left: var(--spacing-md);
        max-width: none;
    }
}

/* Print Styles */
@media print {
    #notificationContainer {
        display: none !important;
    }
}