/*
 * Notifications and Alerts Component Styling
 * Reusable styling for notifications and alerts across different pages
 */

/* Alert styling */
.alert {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    margin: 2rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 1200px;
    margin: 0 auto;

    &.alert-warning {
        background: #fff3cd;
        border-color: #ffeaa7;
        color: #856404;
    }

    &.alert-info {
        background: #d1ecf1;
        border-color: #bee5eb;
        color: #0c5460;
    }

    &.alert-success {
        background: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }

    &.alert-danger {
        background: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }
}

/* Notification styling */
.cmp_notification {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    &.warning {
        background: #fff3cd;
        border-color: #ffc107;
        color: #856404;
    }

    &.info {
        background: #d1ecf1;
        border-color: #17a2b8;
        color: #0c5460;
    }

    &.success {
        background: #d4edda;
        border-color: #28a745;
        color: #155724;
    }

    &.error {
        background: #f8d7da;
        border-color: #dc3545;
        color: #721c24;
    }
}

/* Responsive design for notifications */
@media (max-width: 768px) {
    .alert {
        padding: 1rem;
        margin: 1rem 0;
        font-size: 0.9rem;
    }
    
    .cmp_notification {
        padding: 0.75rem;
        margin: 0.75rem 0;
        font-size: 0.9rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .alert {
        padding: 1.25rem;
    }
    
    .cmp_notification {
        padding: 0.875rem;
    }
}

/* Large screen enhancements */
@media (min-width: 1200px) {
    .alert {
        padding: 1.75rem;
    }
    
    .cmp_notification {
        padding: 1.125rem;
    }
}