/**
 * ============================================================================
 * SMART NOTIFICATION MANAGER - CSS (Bootstrap 3 Compatible)
 * ============================================================================
 * 
 * Version: 1.0.0 (Bootstrap 3)
 * Source: RMS Phase 17.3.3 - Tenant Readings Management
 * Created: October 2025
 * 
 * Features:
 * - Priority-based notifications (ERROR > WARNING > INFO > SUCCESS)
 * - Visual stacking with depth indicators
 * - Smart suppression logic
 * - Smooth slide animations (300ms)
 * - Warning count badge ("2 Issues")
 * - Responsive and mobile-friendly
 * 
 * Usage:
 * <link rel="stylesheet" href="path/to/notification-system-bs3.css">
 * 
 * Dependencies:
 * - Font Awesome 4.x or 5.x (for notification icons)
 * - Bootstrap 3 (optional, for utility classes)
 * ============================================================================
 */

/* ===== NOTIFICATION BASE STYLES ===== */

.notification-base {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 24px;
    border-radius: 8px;
    z-index: 10000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    max-width: 400px;
    color: white;
    box-shadow: rgb(62 37 0 / 30%) 0px 4px 20px;
    animation: slideDownNotification 0.3s ease-out;
    /* Hardware acceleration for smooth animations */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* ===== CONTENT WRAPPER (Bootstrap 3 Compatible) ===== */

.notification-content-wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.notification-content-wrapper > * {
    display: table-cell;
    vertical-align: middle;
}

.notification-text-wrapper {
    text-align: center;
    padding-left: 12px;
    width: 100%;
}

.notification-title {
    font-weight: bold;
    line-height: 1.4;
}

.notification-subtitle {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 4px;
    line-height: 1.4;
}

/* ===== STACKED NOTIFICATIONS ===== */

.notification-stack-position-1 {
    /* First notification - primary position */
    top: 20px !important;
    z-index: 10001 !important;
    box-shadow: rgb(62 37 0 / 30%) 0px 4px 20px !important;
    transition: top 0.3s ease-out, box-shadow 0.3s ease-out;
}

.notification-stack-position-2 {
    /* Second notification - stacked below first */
    top: 90px !important; /* 70px offset from position-1 */
    z-index: 10000 !important;
    box-shadow: rgb(62 37 0 / 30%) 0px 4px 20px !important;
    transition: top 0.3s ease-out, box-shadow 0.3s ease-out;
}

.notification-stack-position-2::before {
    /* Visual indicator of stacking - subtle shadow line */
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: 4px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent);
    border-radius: 8px 8px 0 0;
    z-index: -1;
}

/* ===== WARNING COUNT BADGE ===== */

.notification-warning-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    animation: pulseWarning 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes pulseWarning {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6);
    }
}

/* ===== ANIMATIONS ===== */

@keyframes slideDownNotification {
    from { 
        transform: translateX(-50%) translateY(-20px); 
        opacity: 0; 
    }
    to { 
        transform: translateX(-50%) translateY(0); 
        opacity: 1; 
    }
}

@keyframes slideUpNotification {
    from {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
    }
}

/* Notification dismiss animation class */
.notification-dismissing {
    animation: slideUpNotification 0.3s ease-out forwards !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 767px) {
    .notification-base {
        max-width: 90%;
        padding: 14px 20px;
        font-size: 13px;
    }
    
    .notification-stack-position-2 {
        top: 85px !important; /* Slightly tighter on mobile */
    }
}

/* ===== ICON SUPPORT (Font Awesome) ===== */

.notification-base .fa {
    font-size: 18px;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
    width: 20px;
    text-align: center;
}

/* Font Awesome 5.x support (fas, far, fal, fab prefixes) */
.notification-base [class^="fa-"],
.notification-base [class*=" fa-"] {
    font-size: 18px;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
    width: 20px;
    text-align: center;
}

/* Success Checkmark */
.notification-success-checkmark {
    display: table-cell;
    vertical-align: middle;
    width: 20px;
    text-align: center;
}

.notification-success-checkmark .fa-check-circle {
    font-size: 20px;
    color: white;
}

/* Spinner support (Font Awesome spinner) */
.notification-base .fa-spinner {
    font-size: 16px;
    vertical-align: middle;
}

/* Icon container alignment */
.notification-content-wrapper > *:first-child {
    width: 20px;
    text-align: center;
}

/* ===== ACCESSIBILITY ===== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .notification-base,
    .notification-dismissing,
    .notification-stack-position-1,
    .notification-stack-position-2 {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    
    .notification-warning-count {
        animation: none !important;
    }
    
    .notification-base .fa-spinner {
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .notification-base {
        border: 2px solid currentColor;
    }
}

/* ===== CUSTOMIZATION VARIABLES ===== */

/* 
 * To customize colors, positioning, or timing, override these in your main CSS:
 * 
 * :root {
 *     --notification-top-offset: 20px;
 *     --notification-stack-offset: 70px;
 *     --notification-max-width: 400px;
 *     --notification-z-index: 10000;
 * }
 */