/* Reanitimer - CSS Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --orange-400: #fb923c;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-400: #f87171;
    --red-500: #ef4444;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-400: #4ade80;
    --green-900: #14532d;
    --green-500: #22c55e;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-900: #78350f;
    --purple-700: #7c3aed;
    --purple-400: #a78bfa;
    --purple-500: #8b5cf6;
    --emerald-700: #047857;
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --rose-600: #e11d48;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--slate-900);
    color: white;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes blink-red {
    0%, 100% { 
        background: var(--red-600); 
        box-shadow: 0 0 20px var(--red-600);
    }
    50% { 
        background: var(--red-800); 
        box-shadow: 0 0 5px var(--red-800);
    }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-pulse { animation: pulse 1s ease-in-out infinite; }
.animate-bounce { animation: bounce 1s ease-in-out infinite; }
.animate-fadeIn { animation: fadeIn 0.3s ease-out forwards; }
.blink-red { animation: blink-red 0.5s ease-in-out infinite; }

.container {
    max-width: 32rem;
    margin: 0 auto;
    padding: 1rem;
}

@media (min-width: 768px) {
    .container { padding: 1.5rem; }
}

/* Home Page */
.home-page {
    min-height: 100vh;
    background: linear-gradient(to bottom, var(--slate-900), var(--slate-800));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.home-logo {
    width: 5rem;
    height: 5rem;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.home-logo i { font-size: 2.5rem; color: #ef4444; }

.home-title {
    font-size: 1.875rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .home-title { font-size: 2.25rem; }
}

.home-subtitle {
    color: var(--slate-400);
    font-size: 1.125rem;
    margin-bottom: 3rem;
}

.home-buttons {
    width: 100%;
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.start-btn {
    width: 100%;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    border: none;
    color: white;
    font-weight: bold;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.start-btn:active { transform: scale(0.98); }
.start-btn.bls { background: var(--blue-600); box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); }
.start-btn.bls:hover { background: var(--blue-700); }
.start-btn.als { background: var(--orange-600); box-shadow: 0 10px 15px -3px rgba(234, 88, 12, 0.3); }
.start-btn.als:hover { background: var(--orange-700); }
.start-btn i { font-size: 2rem; }
.start-btn-text { text-align: left; }
.start-btn-text .subtitle { font-size: 0.875rem; font-weight: normal; opacity: 0.8; }

.home-footer {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 28rem;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
}

.status-badge.online { background: rgba(20, 83, 45, 0.3); color: var(--green-400); }
.status-badge.offline { background: rgba(120, 53, 15, 0.3); color: var(--amber-400); }

/* Status Dot */
.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.online {
    background: var(--green-500);
    box-shadow: 0 0 8px var(--green-500);
}

.status-dot.offline {
    background: var(--red-500);
    box-shadow: 0 0 8px var(--red-500);
}

.home-disclaimer { color: var(--slate-500); font-size: 0.875rem; }

/* Recent Sessions */
.recent-sessions {
    width: 100%;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 0.5rem;
}

.recent-sessions-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--slate-400);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.session-item {
    background: rgba(51, 65, 85, 0.5);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.session-item:last-child { margin-bottom: 0; }
.session-mode { font-weight: 500; }
.session-mode.bls { color: var(--blue-400); }
.session-mode.als { color: var(--orange-400); }
.session-date { color: var(--slate-500); margin-left: 0.5rem; }
.session-duration { color: var(--slate-400); font-size: 0.75rem; }

/* Reanimation Page */
.reanimation-page {
    min-height: 100vh;
    background: var(--slate-900);
    padding: 1rem;
}

@media (min-width: 768px) {
    .reanimation-page { padding: 1.5rem; }
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mode-badge {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: bold;
    font-size: 0.875rem;
}

.mode-badge.bls { background: var(--blue-600); }
.mode-badge.als { background: var(--orange-600); }

.ecpr-badge {
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: bold;
    background: var(--red-600);
}

.rhythm-badge {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.rhythm-badge.shockable { background: rgba(220, 38, 38, 0.2); color: var(--red-400); }
.rhythm-badge.non-shockable { background: rgba(217, 119, 6, 0.2); color: var(--amber-400); }

.mute-btn {
    padding: 0.5rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.mute-btn.muted { background: rgba(220, 38, 38, 0.2); color: var(--red-400); }
.mute-btn.unmuted { background: var(--slate-700); color: var(--slate-300); }

/* Sync Status */
.sync-status {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sync-status.online { background: rgba(20, 83, 45, 0.4); }
.sync-status.online i, .sync-status.online .sync-label { color: var(--green-400); }
.sync-status.offline { background: rgba(120, 53, 15, 0.4); }
.sync-status.offline i, .sync-status.offline .sync-label { color: var(--amber-400); }
.sync-info { flex: 1; }
.sync-label { font-weight: 500; font-size: 0.875rem; }
.sync-sublabel { font-size: 0.75rem; color: var(--slate-500); }

/* Timer Grid */
.timer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.timer-display {
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s;
}

@media (min-width: 768px) {
    .timer-display { padding: 1.5rem; }
}

.timer-display.normal { background: var(--slate-700); }
.timer-display.warning { background: var(--amber-600); }
.timer-display.expired { background: var(--red-600); }
.timer-display.clickable { cursor: pointer; }
.timer-display.clickable:active { opacity: 0.8; }
.timer-label { color: var(--slate-300); font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; }
.timer-value { font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; font-size: 2.25rem; font-weight: bold; }

@media (min-width: 768px) {
    .timer-value { font-size: 3rem; }
}

/* Action Buttons */
.actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.action-btn {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: white;
}

.action-btn:active { transform: scale(0.97); }
.action-btn.small { padding: 0.75rem 1rem; font-size: 0.875rem; }
.action-btn.default { background: var(--slate-700); }
.action-btn.default:hover { background: var(--slate-600); }
.action-btn.primary { background: var(--blue-600); }
.action-btn.primary:hover { background: var(--blue-700); }
.action-btn.success { background: var(--green-600); }
.action-btn.success:hover { background: var(--green-700); }
.action-btn.danger { background: var(--red-600); }
.action-btn.danger:hover { background: var(--red-700); }
.action-btn.warning { background: var(--amber-600); }
.action-btn.warning:hover { background: var(--amber-700); }
.action-btn.outline { background: transparent; border: 2px solid var(--slate-500); }
.action-btn.outline:hover { background: var(--slate-700); }
.action-btn i { font-size: 1.25rem; flex-shrink: 0; }
.action-btn-text { text-align: left; }
.action-btn-text .sublabel { font-size: 0.75rem; opacity: 0.7; font-weight: normal; }

.action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

/* Medication Section */
.medication-section { padding-top: 0.5rem; }
.medication-title { color: var(--slate-400); font-size: 0.875rem; font-weight: 500; margin-bottom: 0.75rem; }

.medication-timer {
    width: 100%;
    border-radius: 0.75rem;
    padding: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.75rem;
}

.medication-timer:active { transform: scale(0.97); }
.medication-timer.adrenalin.normal { background: var(--emerald-700); }
.medication-timer.adrenalin.warning { background: var(--amber-600); }
.medication-timer.adrenalin.expired { background: var(--red-600); }
.medication-timer.amiodaron.normal { background: var(--purple-700); }
.medication-timer.amiodaron.warning { background: var(--amber-600); }
.medication-timer.amiodaron.expired { background: var(--red-600); }

.medication-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.medication-info { display: flex; align-items: center; gap: 0.75rem; }
.medication-info i { font-size: 1.5rem; }
.medication-name { font-weight: bold; }
.medication-dose { font-size: 0.875rem; opacity: 0.8; }
.medication-time { text-align: right; }
.medication-countdown { font-family: monospace; font-size: 1.5rem; font-weight: bold; }
.medication-count { font-size: 0.75rem; opacity: 0.7; }

.amiodaron-info {
    background: rgba(51, 65, 85, 0.5);
    border-radius: 0.75rem;
    padding: 1rem;
    color: var(--slate-400);
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 0.75rem;
}

/* Event Log */
.event-log {
    background: var(--slate-800);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

.event-log-header {
    width: 100%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.event-log-header:hover { background: var(--slate-700); }
.event-log-header-left { display: flex; align-items: center; gap: 0.5rem; }
.event-log-header i { color: var(--slate-400); }
.event-log-title { font-weight: 600; }
.event-log-count { color: var(--slate-400); font-size: 0.875rem; }

.event-log-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.event-log-content.expanded { max-height: 16rem; }

.event-log-list {
    padding: 0 1rem 1rem;
    max-height: 16rem;
    overflow-y: auto;
}

.event-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    animation: fadeIn 0.2s ease-out;
}

.event-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.event-dot.start { background: var(--blue-500); }
.event-dot.rhythm { background: var(--amber-500); }
.event-dot.medication { background: var(--emerald-500); }
.event-dot.action { background: var(--slate-500); }
.event-dot.rosc { background: var(--green-500); }
.event-dot.mode { background: var(--purple-500); }
.event-dot.shock { background: var(--red-500); }

.event-content { flex: 1; min-width: 0; }
.event-message { color: white; font-size: 0.875rem; }
.event-time { color: var(--slate-500); font-size: 0.75rem; font-family: monospace; }
.event-empty { color: var(--slate-500); text-align: center; padding: 1rem; }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.2s ease-out;
}

.modal {
    background: var(--slate-800);
    border-radius: 1.5rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 24rem;
    animation: fadeIn 0.2s ease-out;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.5rem;
}

.modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rhythm-btn {
    width: 100%;
    padding: 1.25rem;
    border-radius: 1rem;
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rhythm-btn:hover { opacity: 0.9; }
.rhythm-btn:active { opacity: 0.8; }
.rhythm-btn.vf { background: var(--red-600); }
.rhythm-btn.tdp { background: var(--rose-600); }
.rhythm-btn.pea { background: var(--amber-600); }
.rhythm-btn.asystole { background: var(--slate-600); }
.rhythm-btn.rosc { background: var(--green-600); margin-top: 1.5rem; }
.rhythm-btn i { font-size: 2rem; }
.rhythm-btn-text { text-align: left; }
.rhythm-btn-label { font-weight: bold; font-size: 1.25rem; }
.rhythm-btn-desc { font-size: 0.875rem; opacity: 0.8; }

/* eCPR Modal */
.ecpr-icon {
    width: 4rem;
    height: 4rem;
    background: rgba(245, 158, 11, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.ecpr-icon i { font-size: 2rem; color: var(--amber-500); }

.ecpr-criteria {
    background: rgba(51, 65, 85, 0.5);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.ecpr-criteria-title { color: var(--slate-300); font-weight: 500; margin-bottom: 0.5rem; font-size: 0.875rem; }
.ecpr-criteria-list { color: var(--slate-400); font-size: 0.875rem; list-style: none; }
.ecpr-criteria-list li { margin-bottom: 0.25rem; }
.ecpr-criteria-list li::before { content: '• '; }

.ecpr-alert {
    background: var(--red-600);
    border-radius: 1.5rem;
    padding: 1.5rem;
    text-align: center;
    width: 100%;
    max-width: 24rem;
}

.ecpr-alert-icons { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.ecpr-alert-icons i { font-size: 2.5rem; }
.ecpr-alert-title { font-size: 1.875rem; font-weight: bold; margin-bottom: 1rem; }
.ecpr-alert-subtitle { font-size: 1.25rem; opacity: 0.9; margin-bottom: 1.5rem; }

.ecpr-alert-btn {
    width: 100%;
    padding: 1rem;
    background: white;
    color: var(--red-600);
    border: none;
    border-radius: 1rem;
    font-weight: bold;
    font-size: 1.125rem;
    cursor: pointer;
    transition: background 0.2s;
}

.ecpr-alert-btn:hover { background: #fef2f2; }

/* Summary Page */
.summary-page {
    min-height: 100vh;
    background: var(--slate-900);
    padding: 1rem;
}

@media (min-width: 768px) {
    .summary-page { padding: 1.5rem; }
}

.summary-header {
    text-align: center;
    padding: 1.5rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.summary-header.rosc { background: rgba(22, 163, 74, 0.2); }
.summary-header.ended { background: var(--slate-800); }
.summary-title { font-size: 1.875rem; font-weight: bold; margin-bottom: 0.5rem; }
.summary-title.rosc { color: var(--green-400); }
.summary-duration { color: var(--slate-400); }

.summary-section {
    background: var(--slate-800);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.summary-section-title { font-weight: bold; margin-bottom: 1rem; }

.medication-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.medication-stat {
    background: var(--slate-700);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}

.medication-stat.full-width { grid-column: span 2; }
.medication-stat-value { font-size: 1.875rem; font-weight: bold; }
.medication-stat-value.adrenalin { color: var(--emerald-400); }
.medication-stat-value.amiodaron { color: var(--purple-400); }
.medication-stat-value.magnesium { color: var(--amber-400); }
.medication-stat-label { color: var(--slate-400); font-size: 0.875rem; }

.event-list { max-height: 16rem; overflow-y: auto; }
.event-list-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; margin-bottom: 0.5rem; }
.event-list-time { color: var(--slate-500); font-family: monospace; white-space: nowrap; }
.event-list-message { color: var(--slate-300); }

.summary-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.summary-btn {
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    border: none;
    font-weight: bold;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: white;
}

.summary-btn:active { transform: scale(0.98); }
.summary-btn.copy { background: var(--blue-600); }
.summary-btn.copy:hover { background: var(--blue-700); }
.summary-btn.copy.copied { background: var(--green-600); }
.summary-btn.continue { background: var(--amber-600); }
.summary-btn.continue:hover { background: var(--amber-700); }
.summary-btn.home { background: var(--slate-700); }
.summary-btn.home:hover { background: var(--slate-600); }
.hidden { display: none !important; }