/* Emergency Panel Styles for Quick Care Connect */

/* Emergency trigger button animations */
@keyframes pulse-danger {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

#qcc-emergency-trigger {
    transition: all 0.3s ease;
}

#qcc-emergency-trigger:hover {
    transform: scale(1.1);
    animation: none;
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.8);
}

/* Modal styling */
#qcc-emergency-modal .modal-content {
    border: 3px solid #dc3545;
}

#qcc-emergency-modal .modal-header {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

/* Active emergency state */
.qcc-emergency-active #qcc-emergency-trigger {
    animation: pulse-danger 0.5s infinite;
    background-color: #721c24 !important;
}

/* Emergency type buttons */
.emergency-type-btn {
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.emergency-type-btn:hover {
    border-color: #dc3545;
    transform: translateY(-2px);
}

.emergency-type-btn.active {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

/* Emergency form styling */
.emergency-details {
    background-color: rgba(248, 249, 250, 0.5);
}

.emergency-actions {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.emergency-status {
    background-color: #fff3cd;
    border-top: 2px solid #ffc107;
}

/* Emergency contacts section */
.emergency-contacts {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-top: 2px solid #6c757d;
}

.emergency-contacts a {
    text-decoration: none;
    transition: all 0.3s ease;
}

.emergency-contacts a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Responsive design */
@media (max-width: 768px) {
    #qcc-emergency-trigger {
        bottom: 10px;
        right: 10px;
        width: 50px;
        height: 50px;
    }
    
    #qcc-emergency-trigger i {
        font-size: 1rem;
    }
    
    #qcc-emergency-modal .modal-dialog {
        margin: 10px;
    }
    
    .emergency-type-btn {
        font-size: 0.875rem;
    }
    
    .emergency-type-btn .fa-2x {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 576px) {
    .emergency-contacts .btn {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }
    
    .row.g-3 {
        --bs-gutter-x: 0.75rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    #qcc-emergency-trigger {
        animation: none;
    }
    
    #qcc-emergency-trigger:hover {
        animation: none;
        transform: none;
    }
    
    .emergency-type-btn:hover {
        transform: none;
    }
    
    .emergency-contacts a:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    #qcc-emergency-trigger {
        border: 2px solid #ffffff;
    }
    
    #qcc-emergency-modal .modal-content {
        border-width: 4px;
    }
    
    .emergency-type-btn {
        border-width: 3px;
    }
}

/* Focus styles for keyboard navigation */
#qcc-emergency-trigger:focus {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

.emergency-type-btn:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

#qcc-emergency-modal .btn-close:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Loading and status indicators */
.emergency-status .spinner-border {
    width: 1rem;
    height: 1rem;
}

.emergency-status .progress {
    height: 6px;
    border-radius: 3px;
}

/* Alert progress list styling */
#alert-progress {
    max-height: 200px;
    overflow-y: auto;
}

#alert-progress li {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

#alert-progress li:last-child {
    border-bottom: none;
}

/* Emergency type icons */
.emergency-type-btn i.fa-heartbeat {
    color: #dc3545;
}

.emergency-type-btn i.fa-shield-alt {
    color: #ffc107;
}

.emergency-type-btn i.fa-fire {
    color: #fd7e14;
}

.emergency-type-btn i.fa-server {
    color: #17a2b8;
}