/* ============================================

   NOTIFICATION SYSTEM - Toast & Alerts

   Premium notification components

   ============================================ */



/* Toast Notifications */

.toast-container {

    position: fixed;

    top: 20px;

    right: 20px;

    z-index: 10000;

    display: flex;

    flex-direction: column;

    gap: 12px;

    pointer-events: none;

}



.toast {

    min-width: 340px;

    max-width: 480px;

    background: white;

    border-radius: 16px;

    padding: 18px 24px;

    box-shadow: 

        0 20px 60px -32px rgba(17, 24, 39, 0.4),

        0 0 0 1px rgba(0, 0, 0, 0.05);

    display: flex;

    align-items: flex-start;

    gap: 14px;

    pointer-events: auto;

    animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    transform-origin: right center;

}



.toast.removing {

    animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;

}



.toast-icon {

    flex-shrink: 0;

    width: 40px;

    height: 40px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    font-weight: 600;

}



.toast-content {

    flex: 1;

    padding-top: 2px;

}



.toast-title {

    font-size: 15px;

    font-weight: 700;

    color: var(--text-primary);

    margin: 0 0 4px 0;

}



.toast-message {

    font-size: 14px;

    color: var(--text-secondary);

    line-height: 1.5;

    margin: 0;

}



.toast-close {

    flex-shrink: 0;

    width: 28px;

    height: 28px;

    border-radius: 8px;

    border: none;

    background: rgba(0, 0, 0, 0.04);

    color: var(--text-secondary);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    line-height: 1;

    transition: all 0.2s;

}



.toast-close:hover {

    background: rgba(0, 0, 0, 0.08);

    color: var(--text-primary);

}



/* Toast Variants */

.toast.success {

    border-left: 4px solid #10B981;

}



.toast.success .toast-icon {

    background: rgba(16, 185, 129, 0.12);

    color: #10B981;

}



.toast.error {

    border-left: 4px solid #EF4444;

}



.toast.error .toast-icon {

    background: rgba(239, 68, 68, 0.12);

    color: #EF4444;

}



.toast.warning {

    border-left: 4px solid #F06418;

}



.toast.warning .toast-icon {

    background: rgba(245, 158, 11, 0.12);

    color: #F06418;

}



.toast.info {

    border-left: 4px solid #3B82F6;

}



.toast.info .toast-icon {

    background: rgba(59, 130, 246, 0.12);

    color: #3B82F6;

}



/* Alert Boxes (In-page) */

.alert {

    border-radius: 16px;

    padding: 18px 20px;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 20px;

    animation: fadeInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.alert-icon {

    flex-shrink: 0;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    font-weight: 700;

}



.alert-content {

    flex: 1;

}



.alert-title {

    font-size: 15px;

    font-weight: 700;

    margin: 0 0 4px 0;

}



.alert-message {

    font-size: 14px;

    line-height: 1.6;

    margin: 0;

}



.alert-close {

    flex-shrink: 0;

    width: 24px;

    height: 24px;

    border-radius: 6px;

    border: none;

    background: transparent;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    line-height: 1;

    opacity: 0.6;

    transition: all 0.2s;

}



.alert-close:hover {

    opacity: 1;

    background: rgba(0, 0, 0, 0.05);

}



/* Alert Variants */

.alert-success {

    background: rgba(16, 185, 129, 0.08);

    border: 1px solid rgba(16, 185, 129, 0.2);

    color: #065F46;

}



.alert-success .alert-icon {

    background: #10B981;

    color: white;

}



.alert-error {

    background: rgba(239, 68, 68, 0.08);

    border: 1px solid rgba(239, 68, 68, 0.2);

    color: #991B1B;

}



.alert-error .alert-icon {

    background: #EF4444;

    color: white;

}



.alert-warning {

    background: rgba(245, 158, 11, 0.08);

    border: 1px solid rgba(245, 158, 11, 0.2);

    color: #92400E;

}



.alert-warning .alert-icon {

    background: #F06418;

    color: white;

}



.alert-info {

    background: rgba(59, 130, 246, 0.08);

    border: 1px solid rgba(59, 130, 246, 0.2);

    color: #1E40AF;

}



.alert-info .alert-icon {

    background: #3B82F6;

    color: white;

}



/* Animations */

@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(100%);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideOutRight {

    from {

        opacity: 1;

        transform: translateX(0);

    }

    to {

        opacity: 0;

        transform: translateX(120%);

    }

}



@keyframes fadeInDown {

    from {

        opacity: 0;

        transform: translateY(-12px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Responsive */

@media (max-width: 640px) {

    .toast-container {

        top: 10px;

        right: 10px;

        left: 10px;

        width: auto;

    }

    

    .toast {

        min-width: 0;

        max-width: 100%;

        width: 100%;

    }

}