/* ===============================
   Header, Emergency bar & Metrics
   =============================== */

.medical-header {
  position: sticky;
  top: 8px;
  z-index: 100;
  background: linear-gradient(135deg, var(--surface-primary, #ffffff) 0%, var(--surface-secondary, #f8f9fa) 100%);
  border: 2px solid var(--card-border, #dee2e6);
  box-shadow: var(--shadow-elevated, 0 8px 32px rgba(0,0,0,.08));
  border-radius: 16px;
  margin: 8px 12px;
}

.primary-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 16px 16px 12px;
  gap: 16px;
  background: transparent;
}

.metrics-bar {
  padding: 12px 16px;
  border-top: 1px solid var(--card-border, #dee2e6);
  background: transparent;
}

/* Emergency Bar */
.emergency-alert-bar {
  background: linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff;
  padding:8px 16px;
  text-align:center;
  font-weight:600;
  font-size:13px;
  animation:emergencyPulse 2s ease-in-out infinite alternate;
}
@keyframes emergencyPulse {
  0%{background:linear-gradient(135deg,#dc2626,#b91c1c)}
  100%{background:linear-gradient(135deg,#b91c1c,#991b1b)}
}
.emergency-content {display:flex;align-items:center;justify-content:center;gap:12px}
.emergency-icon {font-size:16px;animation:bounce 1s ease-in-out infinite alternate}
@keyframes bounce {0%{transform:translateY(0)}100%{transform:translateY(-2px)}}
.emergency-action {font-size:11px;opacity:.9;text-transform:uppercase;letter-spacing:.5px}

/* Patient Header Info */
.patient-identity {display:flex;flex-direction:column;gap:8px;min-width:0}
.patient-primary {display:flex;flex-direction:column;gap:2px}
.patient-name {font-size:20px;font-weight:800;color:var(--text-primary,#212529);line-height:1.2;letter-spacing:-.02em}
.patient-details {font-size:13px;color:var(--text-secondary,#6c757d);font-weight:500}

.report-info {display:flex;align-items:center;gap:16px}
.report-date {
  font-size:12px;
  color:var(--text-secondary,#6c757d);
  font-weight:500;
  background:var(--surface-secondary,#f8f9fa);
  padding:4px 8px;
  border-radius:6px;
  border:1px solid var(--card-border,#dee2e6);
}

.overall-assessment {
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
  background:var(--info-blue-bg);
  color:var(--info-blue);
  border:1px solid var(--info-blue);
}
.overall-assessment.critical {background:var(--critical-red-bg);color:var(--critical-red);border-color:var(--critical-red)}
.overall-assessment.warning {background:var(--warning-amber-bg);color:var(--warning-amber);border-color:var(--warning-amber)}
.overall-assessment.stable {background:var(--success-green-bg);color:var(--success-green);border-color:var(--success-green)}

/* Risk Hub */
.risk-hub {display:flex;flex-direction:column;align-items:center;gap:8px}
.risk-visual {position:relative;width:80px;height:80px}
.risk-gauge {width:100%;height:100%;transform:rotate(-90deg)}
.gauge-bg {fill:none;stroke:var(--surface-secondary,#f8f9fa);stroke-width:3;stroke-linecap:round}
.gauge-progress {fill:none;stroke:var(--success-green);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray 1s ease-in-out,stroke .3s ease}
.gauge-progress.moderate {stroke:var(--warning-amber)}
.gauge-progress.high {stroke:var(--critical-red)}
.risk-center {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.risk-value {font-size:18px;font-weight:800;color:var(--text-primary,#212529);line-height:1}
.risk-label {font-size:9px;color:var(--text-secondary,#6c757d);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.risk-context {text-align:center}
.risk-level {font-size:12px;font-weight:700;color:var(--text-primary,#212529)}
.trend-indicator {font-size:10px;color:var(--text-secondary,#6c757d);margin-top:2px}

/* ===============================
   Metrics Bar (Always Horizontal)
   =============================== */
   .metrics-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden; /* prevent wiggle */
  }
  
  .metric-group {
    flex: 1 1 0%;  /* allows even growth but fixes overflow math */
    min-width: 120px; /* small safeguard so items don’t shrink absurdly */
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    background: var(--card-bg,#fff);
    border: 1px solid var(--card-border,#dee2e6);
    transition: transform .2s ease, box-shadow .3s ease;
  }
  
.metric-group:hover {transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.metric-group.critical {border-color:var(--critical-red);background:linear-gradient(135deg,var(--card-bg,#fff) 0,var(--critical-red-bg) 100%)}
.metric-group.warning {border-color:var(--warning-amber);background:linear-gradient(135deg,var(--card-bg,#fff) 0,var(--warning-amber-bg) 100%)}

.metric-label {font-size:10px;font-weight:700;color:var(--text-secondary,#6c757d);text-transform:uppercase;letter-spacing:.5px}
.metric-values {display:flex;flex-direction:column;gap:2px}
.metric-primary {font-size:14px;font-weight:800;color:var(--text-primary,#212529);line-height:1.1}
.metric-primary.critical {color:var(--critical-red)}
.metric-primary.warning {color:var(--warning-amber)}
.metric-primary.elevated {color:var(--info-blue)}
.metric-secondary {font-size:10px;color:var(--text-secondary,#6c757d);font-weight:500}

/* Status Indicators */
.status-indicators {display:flex;justify-content:center;gap:8px}
.status-indicators>div {display:flex;flex-direction:column;align-items:center;gap:2px}
.status-critical,.status-normal,.status-warning {
  font-size:16px;
  font-weight:800;
  width:24px;
  height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}
.status-critical {background:var(--critical-red);color:#fff}
.status-warning {background:var(--warning-amber);color:#fff}
.status-normal {background:var(--success-green);color:#fff}
.status-critical:after,.status-normal:after,.status-warning:after {
  content:attr(data-label);
  position:absolute;
  top:100%;
  font-size:8px;
  font-weight:500;
  margin-top:2px;
  white-space:nowrap;
}

/* ===============================
   Responsive Adjustments
   =============================== */
@media (max-width: 640px) {
  /* Patient Header Info adjustments */
  .report-info {
    display: flex;
    flex-direction: column; /* stack date + badge vertically */
    align-items: flex-start;
    gap: 4px;
  }

  .overall-assessment {
    align-self: flex-start; /* align badge left */
    margin-top: 4px;
  }

  .primary-header {
    grid-template-columns: 1fr auto; 
    gap: 12px;
  }

  .patient-name {font-size:18px}

  /* Metrics adjustments */
  .metrics-grid {gap:8px; flex-wrap: wrap;} /* enable wrapping */
  .alerts-group {flex:1 1 100%; max-width:100%; margin-top:8px} /* move alerts to new line */

  /* Status indicators can wrap if needed */
  .status-indicators {flex-wrap: wrap; gap:6px;}
}

@media (max-width: 480px) {
  .patient-name {font-size:16px}
  .risk-visual {width:60px; height:60px}
  .risk-value {font-size:14px}
  .metrics-grid {gap:6px}
  .metric-primary {font-size:13px}
  .metric-label {font-size:9px}
}