/* =========================================================
   Captain's Toolkit
   Emergency Module
   ========================================================= */

/* =========================================================
   EMERGENCY SCREEN LAYOUT
========================================================= */

.emergency-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.emergency-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: var(--space-5);
  align-items: start;
}

.emergency-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.emergency-side {
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* =========================================================
   MAYDAY CARD
========================================================= */

.mayday-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(220, 38, 38, 0.18);

  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 14rem),
    linear-gradient(
      135deg,
      #7f1d1d 0%,
      #991b1b 40%,
      #dc2626 100%
    );

  color: #ffffff;

  box-shadow:
    0 20px 48px rgba(127, 29, 29, 0.28);
}

.mayday-card::after {
  content: "";
  position: absolute;
  inset: auto -80px -80px auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

.mayday-header {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.mayday-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  padding: 0.55rem 0.9rem;

  border-radius: var(--radius-full);

  background: rgba(255, 255, 255, 0.14);

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mayday-title {
  margin-top: var(--space-5);

  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.06em;
}

.mayday-subtitle {
  margin-top: var(--space-3);

  max-width: 720px;

  font-size: var(--text-base);
  line-height: var(--leading-relaxed);

  color: rgba(255, 255, 255, 0.82);
}

.mayday-actions {
  position: relative;
  z-index: 1;

  margin-top: var(--space-6);

  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.mayday-button {
  min-height: 52px;

  padding: 0 var(--space-5);

  border: 0;
  border-radius: var(--radius-lg);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 0.01em;

  cursor: pointer;

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

.mayday-button:hover {
  transform: translateY(-2px);
}

.mayday-button-primary {
  background: #ffffff;
  color: #991b1b;

  box-shadow:
    0 12px 30px rgba(255, 255, 255, 0.18);
}

.mayday-button-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* =========================================================
   SOS PANEL
========================================================= */

.sos-panel {
  padding: var(--space-5);

  border-radius: var(--radius-xl);

  background:
    linear-gradient(
      135deg,
      rgba(220, 38, 38, 0.08),
      rgba(127, 29, 29, 0.06)
    );

  border: 1px solid rgba(220, 38, 38, 0.14);

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sos-title {
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: -0.03em;

  color: var(--theme-danger);
}

.sos-sequence {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.sos-dot {
  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: var(--theme-danger);

  box-shadow:
    0 0 0 6px rgba(220, 38, 38, 0.08);
}

.sos-dash {
  width: 44px;
  height: 14px;

  border-radius: var(--radius-full);

  background: var(--theme-danger);
}

/* =========================================================
   EMERGENCY CONTACTS
========================================================= */

.emergency-contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.emergency-contact-card {
  padding: var(--space-4);

  border-radius: var(--radius-xl);

  border: 1px solid var(--theme-border);

  background: var(--theme-surface);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.emergency-contact-card:hover {
  transform: translateY(-2px);

  border-color: rgba(220, 38, 38, 0.2);

  box-shadow: var(--theme-card-shadow);
}

.emergency-contact-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.emergency-contact-icon {
  width: 48px;
  height: 48px;

  border-radius: var(--radius-lg);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(220, 38, 38, 0.08);

  color: var(--theme-danger);

  font-size: 1.3rem;
}

.emergency-contact-name {
  font-size: var(--text-base);
  font-weight: 800;

  color: var(--theme-text);
}

.emergency-contact-role {
  margin-top: 0.2rem;

  font-size: var(--text-xs);

  color: var(--theme-muted);
}

.emergency-contact-phone {
  font-size: var(--text-sm);
  font-weight: 900;

  color: var(--theme-danger);
}

/* =========================================================
   PROCEDURE CARDS
========================================================= */

.procedure-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.procedure-card {
  overflow: hidden;

  border: 1px solid var(--theme-border);
  border-radius: var(--radius-xl);

  background: var(--theme-surface);

  box-shadow: var(--theme-card-shadow);
}

.procedure-header {
  padding: var(--space-5);

  border-bottom: 1px solid var(--theme-border);

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.procedure-title {
  font-size: var(--text-lg);
  font-weight: 900;

  color: var(--theme-text);
}

.procedure-risk {
  margin-top: var(--space-2);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  padding: 0.35rem 0.65rem;

  border-radius: var(--radius-full);

  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.procedure-risk.low {
  background: rgba(22, 163, 74, 0.12);
  color: var(--theme-success);
}

.procedure-risk.medium {
  background: rgba(245, 158, 11, 0.12);
  color: var(--theme-warning);
}

.procedure-risk.high {
  background: rgba(220, 38, 38, 0.12);
  color: var(--theme-danger);
}

.procedure-body {
  padding: var(--space-5);

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.procedure-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.procedure-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.procedure-step-number {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(37, 99, 235, 0.08);

  color: var(--theme-primary);

  font-size: 0.8rem;
  font-weight: 900;
}

.procedure-step-content {
  min-width: 0;
}

.procedure-step-title {
  font-size: var(--text-sm);
  font-weight: 800;

  color: var(--theme-text);
}

.procedure-step-text {
  margin-top: 0.35rem;

  color: var(--theme-muted);

  line-height: var(--leading-relaxed);

  font-size: var(--text-sm);
}

/* =========================================================
   DANGER ALERTS
========================================================= */

.danger-alert {
  padding: var(--space-4);

  border-radius: var(--radius-lg);

  display: flex;
  align-items: flex-start;
  gap: var(--space-3);

  border: 1px solid transparent;
}

.danger-alert-icon {
  width: 42px;
  height: 42px;

  border-radius: var(--radius-md);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  font-size: 1.2rem;
}

.danger-alert-danger {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.14);
}

.danger-alert-danger .danger-alert-icon {
  background: rgba(220, 38, 38, 0.12);
  color: var(--theme-danger);
}

.danger-alert-warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.14);
}

.danger-alert-warning .danger-alert-icon {
  background: rgba(245, 158, 11, 0.12);
  color: var(--theme-warning);
}

.danger-alert-info {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.14);
}

.danger-alert-info .danger-alert-icon {
  background: rgba(37, 99, 235, 0.12);
  color: var(--theme-primary);
}

.danger-alert-title {
  font-size: var(--text-sm);
  font-weight: 900;

  color: var(--theme-text);
}

.danger-alert-text {
  margin-top: 0.3rem;

  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);

  color: var(--theme-muted);
}

/* =========================================================
   GPS / POSITION PANEL
========================================================= */

.emergency-position {
  padding: var(--space-5);

  border-radius: var(--radius-xl);

  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.08),
      rgba(14, 165, 233, 0.06)
    );

  border: 1px solid rgba(37, 99, 235, 0.12);

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.position-title {
  font-size: var(--text-lg);
  font-weight: 900;

  color: var(--theme-text);
}

.position-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.position-item {
  padding: var(--space-3);

  border-radius: var(--radius-lg);

  background: rgba(255, 255, 255, 0.5);
}

.position-label {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  color: var(--theme-muted);
}

.position-value {
  margin-top: 0.35rem;

  font-size: var(--text-sm);
  font-weight: 900;

  color: var(--theme-text);
}

/* =========================================================
   EMERGENCY CHECKLIST
========================================================= */

.emergency-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.emergency-check-item {
  padding: var(--space-4);

  border-radius: var(--radius-lg);

  border: 1px solid var(--theme-border);

  background: var(--theme-surface);

  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.emergency-check-item input[type="checkbox"] {
  width: 20px;
  height: 20px;

  accent-color: var(--theme-danger);

  flex: 0 0 auto;
}

.emergency-check-label {
  flex: 1;

  font-size: var(--text-sm);
  font-weight: 700;

  color: var(--theme-text);
}

/* =========================================================
   QUICK EMERGENCY ACTIONS
========================================================= */

.emergency-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.emergency-action-card {
  min-height: 110px;

  padding: var(--space-4);

  border-radius: var(--radius-xl);

  background:
    linear-gradient(
      135deg,
      rgba(220, 38, 38, 0.06),
      rgba(127, 29, 29, 0.03)
    );

  border: 1px solid rgba(220, 38, 38, 0.12);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);

  text-decoration: none;

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.emergency-action-card:hover {
  transform: translateY(-2px);

  border-color: rgba(220, 38, 38, 0.22);

  box-shadow:
    0 14px 34px rgba(127, 29, 29, 0.14);
}

.emergency-action-icon {
  width: 46px;
  height: 46px;

  border-radius: var(--radius-lg);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(220, 38, 38, 0.12);

  color: var(--theme-danger);

  font-size: 1.35rem;
}

.emergency-action-title {
  font-size: var(--text-sm);
  font-weight: 900;

  color: var(--theme-text);
}

.emergency-action-text {
  font-size: var(--text-xs);
  line-height: 1.5;

  color: var(--theme-muted);
}

/* =========================================================
   PRINT MODE
========================================================= */

@media print {
  .mayday-actions,
  .emergency-actions-grid,
  .bottom-nav,
  .app-sidebar,
  .app-header {
    display: none !important;
  }

  .emergency-screen,
  .emergency-grid,
  .procedure-list,
  .procedure-card {
    display: block;
  }

  .procedure-card,
  .danger-alert,
  .emergency-position,
  .mayday-card {
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .mayday-card {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #dc2626 !important;
  }

  .mayday-title,
  .procedure-title,
  .position-title {
    color: #000000 !important;
  }
}

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

@media (max-width: 1200px) {
  .emergency-grid {
    grid-template-columns: 1fr;
  }

  .emergency-side {
    position: static;
  }
}

@media (max-width: 720px) {
  .emergency-screen {
    gap: var(--space-4);
  }

  .mayday-card,
  .procedure-header,
  .procedure-body,
  .emergency-position,
  .sos-panel {
    padding: var(--space-4);
  }

  .mayday-title {
    font-size: 2.2rem;
  }

  .mayday-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .emergency-actions-grid,
  .position-grid {
    grid-template-columns: 1fr;
  }

  .emergency-contact-card,
  .maintenance-item,
  .procedure-header {
    flex-direction: column;
    align-items: stretch;
  }

  .procedure-step {
    align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .mayday-card,
  .procedure-header,
  .procedure-body,
  .emergency-position,
  .sos-panel,
  .danger-alert,
  .emergency-contact-card {
    padding: var(--space-3);
  }

  .mayday-title {
    font-size: 1.9rem;
  }

  .mayday-subtitle {
    font-size: var(--text-sm);
  }
}