/* ═══════════════════════════════════════════════════════════════════════════
   VPP TOAST NOTIFICATIONS — Premium Glassmorphic Override for Radzen v10
   Targets the ACTUAL Radzen v10 CSS classes & variables:
     .rz-notification, .rz-notification-item-wrapper, .rz-notification-item,
     .rz-notification-warn, .rz-notification-success, .rz-notification-error,
     .rz-notification-info
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Override Radzen CSS Variables (the correct approach) ─────── */
html:root {
    /* Notification container */
    --rz-notification-container-background-color: transparent;
    --rz-notification-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    --rz-notification-border-radius: 12px;
    --rz-notification-padding: 16px 18px;
    --rz-notification-gap: 10px;

    /* Success */
    --rz-notification-success-background-color: rgba(240, 253, 250, 0.95);
    --rz-notification-success-color: #065f46;
    --rz-notification-success-icon-color: #10b981;

    /* Warning */
    --rz-notification-warning-background-color: rgba(255, 251, 235, 0.95);
    --rz-notification-warning-color: #78350f;
    --rz-notification-warning-icon-color: #d97706;

    /* Error/Danger */
    --rz-notification-error-background-color: rgba(254, 242, 242, 0.95);
    --rz-notification-error-color: #991b1b;
    --rz-notification-error-icon-color: #ef4444;

    /* Info */
    --rz-notification-info-background-color: rgba(240, 249, 255, 0.95);
    --rz-notification-info-color: #075985;
    --rz-notification-info-icon-color: #0ea5e9;
}

/* Dark mode overrides */
.rz-theme-dark {
    --rz-notification-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Success */
    --rz-notification-success-background-color: rgba(6, 78, 59, 0.85);
    --rz-notification-success-color: #a7f3d0;
    --rz-notification-success-icon-color: #34d399;

    /* Warning */
    --rz-notification-warning-background-color: rgba(120, 53, 4, 0.85);
    --rz-notification-warning-color: #fde68a;
    --rz-notification-warning-icon-color: #fbbf24;

    /* Error/Danger */
    --rz-notification-error-background-color: rgba(127, 29, 29, 0.85);
    --rz-notification-error-color: #fecaca;
    --rz-notification-error-icon-color: #f87171;

    /* Info */
    --rz-notification-info-background-color: rgba(7, 89, 133, 0.85);
    --rz-notification-info-color: #bae6fd;
    --rz-notification-info-icon-color: #38bdf8;
}

/* ── Notification Container Position ─────────────────────────── */
.rz-notification {
    z-index: 10000 !important;
}

/* ── Item Wrapper ────────────────────────────────────────────── */
.rz-notification-item-wrapper {
    backdrop-filter: blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
    animation: vpp-toast-in var(--vpp-transition-base) forwards !important;
    border-radius: 12px !important;
    overflow: hidden;
}

@keyframes vpp-toast-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Item (the colored card) ─────────────────────────────────── */
.rz-notification-item {
    border-radius: 12px !important;
    font-family: var(--vpp-font-body) !important;
}

/* Add subtle borders per severity */
.rz-notification-success .rz-notification-item {
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.rz-notification-warn .rz-notification-item {
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
}

.rz-notification-error .rz-notification-item {
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.rz-notification-info .rz-notification-item {
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
}

/* Dark mode borders */
.rz-theme-dark .rz-notification-success .rz-notification-item {
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
}

.rz-theme-dark .rz-notification-warn .rz-notification-item {
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

.rz-theme-dark .rz-notification-error .rz-notification-item {
    border: 1px solid rgba(248, 113, 113, 0.3) !important;
}

.rz-theme-dark .rz-notification-info .rz-notification-item {
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

/* ── Typography ──────────────────────────────────────────────── */
.rz-notification-title {
    font-family: var(--vpp-font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.rz-notification-message {
    font-family: var(--vpp-font-body) !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    opacity: 0.9;
}

/* ── Icon ────────────────────────────────────────────────────── */
.rz-notification-icon {
    font-size: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── Close Button ────────────────────────────────────────────── */
.rz-notification-close {
    opacity: 0.5 !important;
    transition: opacity 0.15s ease !important;
    font-size: 18px !important;
}

.rz-notification-close:hover {
    opacity: 1 !important;
}