/* ============================================================
   DonorNearby V3.0 — Emergency UI Components
   Specialized components for crisis coordination.
   Calm urgency. Structured information. Fast action.
   ============================================================ */

/* ─── Emergency Alert Bar ─── */
.emergency-bar {
    background: var(--emergency);
    color: var(--text-on-emergency);
    padding: var(--space-2_5) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-lg);
}
.emergency-bar a {
    color: rgba(255,255,255,0.85);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.emergency-bar a:hover { color: #fff; }

/* Pulse indicator — ONLY for genuine emergencies */
.pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulseEmergency 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulseEmergency {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* Live status dot — subtle, steady */
.live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--success);
    display: inline-block;
    flex-shrink: 0;
    animation: livePulse 3s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ─── Urgency Indicator System ─── */
.urgency-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.urgency-dot--critical    { background: var(--urgency-critical); }
.urgency-dot--immediate   { background: var(--urgency-immediate); animation: pulseEmergency 1.5s ease-in-out infinite; }
.urgency-dot--high        { background: var(--urgency-high); }
.urgency-dot--medium      { background: var(--urgency-medium); }
.urgency-dot--low         { background: var(--urgency-low); }

/* Urgency row highlighting for tables */
.urgency-row--critical    { border-left: 3px solid var(--urgency-critical); }
.urgency-row--immediate   { border-left: 3px solid var(--urgency-immediate); background: var(--urgency-immediate-bg); }
.urgency-row--high        { border-left: 3px solid var(--urgency-high); }

/* ─── Response Timer ─── */
.response-timer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.response-timer--ok       { color: var(--success); }
.response-timer--warning  { color: var(--warning); }
.response-timer--critical { color: var(--urgency-critical); }
.response-timer--urgent   { color: var(--urgency-immediate); animation: timerFlash 2s ease-in-out infinite; }

@keyframes timerFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ─── Eligibility Countdown ─── */
.eligibility-countdown {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}
.eligibility-countdown--eligible {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--border-success);
}
.eligibility-countdown--waiting {
    background: var(--warning-light);
    color: var(--warning);
    border: 1px solid var(--border-warning);
}

/* ─── District Heat Indicator ─── */
.district-heat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.district-heat__bar {
    flex: 1;
    height: 6px;
    background: var(--bg-sunken);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.district-heat__fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
    min-width: 4px;
}
.district-heat__fill--critical { background: var(--urgency-critical); }
.district-heat__fill--low      { background: var(--urgency-high); }
.district-heat__fill--medium   { background: var(--warning); }
.district-heat__fill--adequate { background: var(--success); }

/* ─── Reliability Score Bar ─── */
.reliability-bar {
    height: 6px;
    background: var(--bg-sunken);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.reliability-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

/* ─── Blood Group Grid ─── */
.blood-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}
.blood-grid__item {
    text-align: center;
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    background: var(--bg-sunken);
    border: 1px solid var(--border-light);
    transition: background var(--transition-theme), border-color var(--transition-theme);
}
.blood-grid__group {
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.blood-grid__count {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.blood-grid__count--critical { color: var(--urgency-critical); }
.blood-grid__count--low      { color: var(--warning); }
.blood-grid__count--ok       { color: var(--success); }

/* ─── Timeline Component ─── */
.timeline {
    position: relative;
    padding-left: var(--space-6);
}
.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.timeline-item {
    position: relative;
    padding-bottom: var(--space-4);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-6) + 4px);
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-strong);
    border: 2px solid var(--bg-surface);
}
.timeline-item.active::before   { background: var(--emergency); }
.timeline-item.success::before  { background: var(--success); }
.timeline-item.warning::before  { background: var(--warning); }

/* ─── Session Timeout Warning Modal ─── */
.session-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-scrim);
    z-index: var(--z-modal-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}
.session-modal-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.session-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-xl);
    text-align: center;
    transform: scale(0.95);
    transition: transform var(--transition-normal);
}
.session-modal-overlay.is-visible .session-modal {
    transform: scale(1);
}
.session-modal__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-4);
    border-radius: 50%;
    background: var(--warning-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warning);
    font-size: var(--text-xl);
}
.session-modal__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.session-modal__text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}
.session-modal__countdown {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--warning);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--space-4);
}

/* ─── Micro-interactions (restrained) ─── */
.fade-in {
    animation: fadeIn var(--duration-slow) var(--ease-out);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.status-flash {
    animation: statusFlash 0.4s var(--ease-default);
}
@keyframes statusFlash {
    0%, 100% { background-color: transparent; }
    50% { background-color: var(--success-light); }
}

/* Subtle hover lift for interactive cards */
.card-interactive {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card-interactive:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ─── Match Score Display ─── */
.match-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    border: 2px solid;
}
.match-score--high   { color: var(--success); border-color: var(--success); background: var(--success-light); }
.match-score--medium { color: var(--warning); border-color: var(--warning); background: var(--warning-light); }
.match-score--low    { color: var(--text-muted); border-color: var(--border); background: var(--bg-sunken); }