/**
 * Dalia Notifications Styles
 * Vizualno stimulirajući notification sistem u skladu s Dalia dizajnom
 */

:root {
    /* Success: muted sage (not neon green) */
    --dalia-success: #7d8570;
    --dalia-success-bg: rgba(125, 133, 112, 0.04);
    --dalia-success-accent: rgba(125, 133, 112, 0.3);

    /* Error: oxidized rose (not alarm red) */
    --dalia-error: #a67c7c;
    --dalia-error-bg: rgba(166, 124, 124, 0.04);
    --dalia-error-accent: rgba(166, 124, 124, 0.3);

    /* Warning: amber patina (not construction yellow) */
    --dalia-warning: #b89968;
    --dalia-warning-bg: rgba(184, 153, 104, 0.04);
    --dalia-warning-accent: rgba(184, 153, 104, 0.3);

    /* Info: slate wash (not primary blue) */
    --dalia-info: #7a8491;
    --dalia-info-bg: rgba(122, 132, 145, 0.04);
    --dalia-info-accent: rgba(122, 132, 145, 0.3);

    /* Loading: amber tone with subtlety */
    --dalia-loading: #8b7355;
    --dalia-loading-bg: rgba(139, 115, 85, 0.04);
    --dalia-loading-accent: rgba(139, 115, 85, 0.3);
}

/* Container */
.dalia-notifications-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 420px;
    width: calc(100vw - 48px);
}

@media (max-width: 640px) {
    .dalia-notifications-container {
        top: 16px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}

/* Notification Card */
.dalia-notification {
    position: relative;
    background: linear-gradient(to bottom,
        rgba(253, 250, 239, 0.98) 0%,
        rgba(253, 250, 239, 0.96) 100%);
    border-radius: 8px;
    padding: 18px 22px;

    /* Depth through shadow hierarchy, not border */
    box-shadow:
        0 0 0 1px rgba(45, 34, 56, 0.04),          /* hairline rim */
        0 2px 8px -2px rgba(45, 34, 56, 0.08),     /* close soft lift */
        0 8px 24px -4px rgba(45, 34, 56, 0.12);    /* distant ambient */

    display: flex;
    align-items: flex-start;
    gap: 14px;
    pointer-events: auto;

    /* No left border - accent comes from backdrop wash */
    opacity: 0;
    transform: translateY(-12px);  /* Subtle drop from top, not game slide */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);  /* Spring ease */
    backdrop-filter: blur(16px) saturate(1.2);
    max-width: 100%;
}

.dalia-notification-show {
    opacity: 1;
    transform: translateY(0);
}

.dalia-notification-hide {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
}

/* Type variants: subtle backdrop wash, not colored cards */
.dalia-notification-success::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--dalia-success-bg);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

.dalia-notification-error::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--dalia-error-bg);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

.dalia-notification-warning::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--dalia-warning-bg);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

.dalia-notification-info::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--dalia-info-bg);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

.dalia-notification-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--dalia-loading-bg);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

/* Content */
.dalia-notification-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

/* Icon */
.dalia-notification-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.dalia-notification-success .dalia-notification-icon {
    color: var(--dalia-success);
    opacity: 0.7;  /* De-emphasize, not shout */
}

.dalia-notification-error .dalia-notification-icon {
    color: var(--dalia-error);
    opacity: 0.8;  /* Slightly stronger for errors */
}

.dalia-notification-warning .dalia-notification-icon {
    color: var(--dalia-warning);
    opacity: 0.7;
}

.dalia-notification-info .dalia-notification-icon {
    color: var(--dalia-info);
    opacity: 0.7;
}

.dalia-notification-loading .dalia-notification-icon {
    color: var(--dalia-loading);
    opacity: 0.7;
}

/* Spinner animation */
.dalia-notification-spinner {
    animation: dalia-spin 1s linear infinite;
}

@keyframes dalia-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Text */
.dalia-notification-text {
    flex: 1;
    min-width: 0;
}

.dalia-notification-title {
    font-family: 'Cormorant Garamond', serif;  /* Match editorial rebrand */
    font-size: 17px;
    font-weight: 500;  /* Not 600 - lighter serif feels more premium */
    line-height: 1.25;
    margin-bottom: 4px;
    color: #2d2238;  /* Ink from dalia-portal tokens */
    letter-spacing: -0.02em;
}

.dalia-notification-message {
    font-family: 'Manrope', -apple-system, sans-serif;  /* Match editorial body */
    font-size: 14px;
    line-height: 1.6;
    color: #4b4556;  /* Ink-soft */
    font-weight: 450;  /* Subtle variable weight */
    word-wrap: break-word;
}

/* Action Button */
.dalia-notification-action {
    background: linear-gradient(135deg, #e8cf9a 0%, #c9a84c 100%);
    color: #1f2937;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

.dalia-notification-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(201, 168, 76, 0.3);
}

.dalia-notification-action:active {
    transform: translateY(0);
}

/* Close Button */
.dalia-notification-close {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.dalia-notification-close:hover {
    color: #4b5563;
    background: rgba(0, 0, 0, 0.05);
}

.dalia-notification-close svg {
    width: 16px;
    height: 16px;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    .dalia-notification {
        background: rgba(31, 41, 55, 0.95);
    }

    .dalia-notification-title {
        color: #f9fafb;
    }

    .dalia-notification-message {
        color: #d1d5db;
    }

    .dalia-notification-close {
        color: #9ca3af;
    }

    .dalia-notification-close:hover {
        color: #f3f4f6;
        background: rgba(255, 255, 255, 0.1);
    }
}

/* Accessibility */
.dalia-notification:focus-within {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Responsive */
@media (max-width: 640px) {
    .dalia-notification {
        padding: 14px 16px;
    }

    .dalia-notification-title {
        font-size: 15px;
    }

    .dalia-notification-message {
        font-size: 13px;
    }

    .dalia-notification-action {
        font-size: 11px;
        padding: 6px 12px;
    }
}