/**
 * NOTIFICATIONS - Централізована система повідомлень
 * Замінює всі toast/message системи з різних компонентів
 */

/* === CONTAINER === */
.app-notifications {
    position: fixed;
    top: calc(var(--layout-nav-height, 80px) + 20px);
    right: var(--spacing-lg, 1.5rem);
    z-index: var(--z-toast, 1100);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    pointer-events: none;
    max-width: 400px;
}

/* === INDIVIDUAL NOTIFICATION === */
.notification {
    background: var(--silver-white);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-md, 1rem);
    min-width: 300px;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.2));
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    pointer-events: auto;
    animation: slideInRight var(--transition-base, 0.3s ease);
    border-left: 4px solid var(--color-primary);
}

/* === TYPE VARIANTS === */
.notification--success {
    border-left-color: var(--color-success, #4caf50);
}

.notification--error {
    border-left-color: var(--color-error, #f44336);
}

.notification--warning {
    border-left-color: var(--color-warning, #ff9800);
}

.notification--info {
    border-left-color: var(--color-primary, #ff6b35);
}

/* === REMOVING STATE === */
.notification--removing {
    animation: slideOutRight var(--transition-base, 0.3s ease);
}

/* === CONTENT === */
.notification__message {
    flex: 1;
    line-height: 1.5;
    color: var(--color-text, #333);
    font-size: 0.9375rem;
    font-family: 'Roboto', sans-serif;
}

/* === CLOSE BUTTON === */
.notification__close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--color-text-light, #666);
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 4px);
    transition: var(--transition-fast, 0.15s ease);
    flex-shrink: 0;
}

.notification__close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text, #333);
}

.notification__close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 767px) {
    .app-notifications {
        left: var(--spacing-md, 1rem);
        right: var(--spacing-md, 1rem);
        max-width: none;
    }

    .notification {
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .app-notifications {
        left: var(--spacing-sm, 0.5rem);
        right: var(--spacing-sm, 0.5rem);
        top: calc(var(--layout-nav-height, 80px) + 10px);
    }

    .notification {
        padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
        font-size: 0.875rem;
        font-family: 'Roboto', sans-serif;
    }
}

/* === iOS SAFARI SPECIFIC === */
@supports (-webkit-touch-callout: none) {
    .app-notifications {
        top: calc(var(--layout-nav-height, 80px) + env(safe-area-inset-top, 20px));
    }
}

/* === DARK MODE SUPPORT === */
@media (prefers-color-scheme: dark) {
    .notification {
        background: #171717;
        border-color: #404040;
    }

    .notification__message {
        color: #e0e0e0;
    }

    .notification__close {
        color: #a0a0a0;
    }

    .notification__close:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #e0e0e0;
    }
}