/* =============================================================================
   UIkit Notification – JUJU Design-System Overrides
   Gilt seitenübergreifend für alle UIkit.notification() Aufrufe.
   Tokens: var(--juju-*) aus style.css
   ============================================================================= */

/* ── Container ────────────────────────────────────────────────────────────── */
.uk-notification {
    z-index: 10500;
}

/* ── Nachrichten-Box ──────────────────────────────────────────────────────── */
.uk-notification-message {
    background: var(--juju-dark);
    color: var(--juju-color);
    border-radius: var(--juju-radius);
    padding: 16px 42px 16px 20px;
    font-family: var(--juju-font-family);
    font-size: var(--juju-font-size);
    font-weight: var(--juju-body-font-weight);
    letter-spacing: var(--juju-secondary-letter-spacing);
    line-height: var(--juju-line-height);
    min-width: 220px;
    max-width: 380px;
}


/* ── Status-Varianten ─────────────────────────────────────────────────────── */

/* Success */
.uk-notification-message-success {
}

/* Danger */
.uk-notification-message-danger {
    border-left: 3px solid var(--juju-danger-background);
}

/* Warning */
.uk-notification-message-warning {
    border-left: 3px solid var(--juju-warning-background);
}

/* Primary */
.uk-notification-message-primary {
    border-left: 3px solid var(--juju-selection-background);
}


/* ── Close-Button ─────────────────────────────────────────────────────────── */
.uk-notification-message .uk-notification-close {
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--juju-color);
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.uk-notification-message .uk-notification-close:hover {
    opacity: 1;
}

/* Close-Icon SVG Stroke-Farbe */
.uk-notification-message .uk-notification-close svg line {
    stroke: var(--juju-color);
}


/* ── Anti-Spam: Brightness-Flash ─────────────────────────────────────────── */
/* Wird statt einer Duplikat-Notification getriggert                          */
.uk-notification-message.aro-notify-flash {
    animation: aro-notify-flash 0.35s ease;
}

@keyframes aro-notify-flash {
    0%   { filter: brightness(1);   }
    40%  { filter: brightness(1.35); }
    100% { filter: brightness(1);   }
}