/**
 * EasyMan v3.0.0 Enterprise - Panic Alarm Emergency Stylesheet
 * Full-screen red strobe perimeter border, top warning banner, and high-contrast modal.
 * CRITICAL FIX: All emergency overlays and wrappers are display: none !important by default.
 * They ONLY become visible when the .active class is explicitly applied by PanicAlarmModule.
 */

/* 1. Full-Screen Red Flashing Strobe Perimeter Overlay */
.panic-screen-strobe {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 99990 !important;
  box-shadow: inset 0 0 100px rgba(239, 68, 68, 0.85) !important;
  animation: panicStrobe 0.8s infinite alternate ease-in-out !important;
}

.panic-screen-strobe.active {
  display: block !important;
}

@keyframes panicStrobe {
  0% {
    background-color: rgba(239, 68, 68, 0.08);
    box-shadow: inset 0 0 60px rgba(239, 68, 68, 0.6);
  }
  100% {
    background-color: rgba(220, 38, 38, 0.25);
    box-shadow: inset 0 0 140px rgba(220, 38, 38, 0.95);
  }
}

/* 2. Persistent Top Emergency Warning Banner */
.panic-active-banner {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(90deg, #991b1b, #ef4444, #b91c1c) !important;
  color: #fff !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 99999 !important;
  box-shadow: 0 6px 30px rgba(239, 68, 68, 0.9) !important;
  border-bottom: 3px solid #ffedd5 !important;
}

.panic-active-banner.active {
  display: flex !important;
}

.panic-timer-badge {
  background: #0f172a !important;
  color: #ef4444 !important;
  font-family: monospace !important;
  font-size: 1.15rem !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  border: 1px solid #ef4444 !important;
  display: inline-block !important;
}

/* 3. Floating Fail-Safe Emergency Action Bar (Bottom Center) */
.panic-floating-action-bar {
  display: none !important;
  position: fixed !important;
  bottom: 25px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #7f1d1d !important;
  border: 3px solid #ef4444 !important;
  box-shadow: 0 10px 40px rgba(239, 68, 68, 0.9) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  z-index: 99998 !important;
  align-items: center !important;
  gap: 16px !important;
}

.panic-floating-action-bar.active {
  display: flex !important;
}

/* 4. Standalone High-Z-Index Modal Wrapper */
.panic-modal-wrapper {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(15, 23, 42, 0.75) !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100000 !important;
  pointer-events: auto !important;
}

.panic-modal-wrapper.active {
  display: flex !important;
}

.panic-modal-dialog {
  border: 3px solid #ef4444 !important;
  box-shadow: 0 0 50px rgba(239, 68, 68, 0.95) !important;
  max-width: 680px !important;
  width: 92% !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border-radius: 10px !important;
}

.panic-modal-header {
  background: linear-gradient(135deg, #7f1d1d, #b91c1c) !important;
  color: #fff !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 2px solid #ef4444 !important;
  border-radius: 8px 8px 0 0 !important;
}

.panic-siren-icon {
  font-size: 24px !important;
  color: #fef08a !important;
  animation: sirenWiggle 0.5s infinite alternate ease-in-out !important;
}

@keyframes sirenWiggle {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(15deg); }
}