/* Module Tabs */
.module-tabs {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-dim);
    padding-bottom: var(--space-sm);
}

.tab-btn {
    background: transparent;
    border: 1px solid var(--border-dim);
    color: var(--text-muted);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-header);
    font-size: 0.9rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.tab-btn:hover {
    border-color: var(--accent-secondary);
    color: var(--text-primary);
}

.tab-btn.active {
    background: var(--accent-secondary);
    color: #000;
    border-color: var(--accent-secondary);
    box-shadow: 0 0 10px rgba(230, 184, 0, 0.3);
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

/* Medical Module Styles */

.medical-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-xl);
}

.vitamin-toggle {
    color: var(--text-muted);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.vitamin-toggle.active {
    background: rgba(39, 174, 96, 0.14);
    border-color: var(--accent-success);
    color: var(--accent-success);
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.22);
}

.vitamin-toggle:focus-within {
    outline: 2px solid var(--accent-secondary);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .medical-layout {
        grid-template-columns: 1fr;
    }
}

.symptom-tag {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-dim);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.symptom-tag:hover {
    border-color: var(--accent-secondary);
}

.symptom-tag.active {
    background: var(--accent-secondary);
    color: #000;
    border-color: var(--accent-secondary);
}

.disease-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.disease-card {
    position: relative;
    overflow: hidden;
    border-left: 3px solid var(--accent-secondary) !important;
    background: linear-gradient(135deg, var(--bg-panel) 0%, #151515 100%);
}

.disease-card::before {
    content: "MED_OS // PATHOGEN_REPORT";
    position: absolute;
    top: 4px;
    right: 12px;
    font-size: 0.55rem;
    font-family: var(--font-tech);
    color: var(--accent-secondary);
    opacity: 0.2;
    letter-spacing: 1px;
}

.disease-card.severity-high { border-left-color: var(--accent-primary) !important; }
.disease-card.severity-med { border-left-color: var(--accent-secondary) !important; }
.disease-card.severity-low { border-left-color: var(--accent-success) !important; }

.disease-card .dt-card-header {
    padding: 10px 16px;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid var(--border-dim);
}

.disease-card .disease-title-group {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.disease-card .disease-name {
    font-family: var(--font-header);
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: 0.5px;
}

.disease-card .disease-id {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-family: var(--font-tech);
}

.disease-info-grid {
    display: grid;
    grid-template-columns: 240px 1fr 1fr;
    min-height: auto;
}

@media (max-width: 1000px) {
    .disease-info-grid {
        grid-template-columns: 1fr;
    }
}

.disease-info-column {
    padding: 12px 16px;
    border-right: 1px solid var(--border-dim);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.disease-info-column:last-child {
    border-right: none;
}

.disease-info-column.symptoms-col {
    background: rgba(0,0,0,0.1);
}

.column-label {
    font-family: var(--font-tech);
    font-size: 0.65rem;
    color: var(--accent-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.symptoms-list-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.symptom-pill {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-dim);
    padding: 2px 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.column-content {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.protocol-box {
    background: rgba(39, 174, 96, 0.03);
    border: 1px solid rgba(39, 174, 96, 0.15);
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--accent-success);
    line-height: 1.4;
}

.prevention-text {
    font-size: 0.7rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-dim);
    padding-top: 8px;
    margin-top: 4px;
}

/* Blood & transfusions */
.blood-priority {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.blood-priority strong {
    flex: 1;
    padding: var(--space-sm);
    border-left: 3px solid var(--accent-primary);
    background: var(--bg-panel);
    font-size: 0.8rem;
}

.blood-reference-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.blood-compatibility { margin-top: var(--space-lg); }
.blood-list p, .blood-note, .blood-source { font-size: 0.82rem; line-height: 1.5; }
.blood-list p + p { border-top: 1px solid var(--border-dim); margin-top: var(--space-sm); padding-top: var(--space-sm); }
.blood-note { color: var(--text-secondary); margin-bottom: var(--space-md); }
.blood-source { color: var(--text-muted); margin-top: var(--space-md); }

.blood-status-list, .blood-recovery-list, .iv-choice-list { display: flex; flex-direction: column; gap: 6px; }
.blood-status, .blood-recovery, .iv-choice { align-items: center; background: var(--bg-deep); border-left: 3px solid var(--border-dim); display: flex; gap: var(--space-sm); padding: 6px 8px; }
.blood-status img { height: 28px; object-fit: contain; width: 28px; }
.blood-status strong, .blood-status span { display: block; }
.blood-status strong { font-family: var(--font-header); font-size: 0.78rem; }
.blood-status span { color: var(--text-secondary); font-size: 0.67rem; }
.blood-status.healthy { border-color: var(--accent-success); }
.blood-status.low, .blood-status.warning { border-color: var(--accent-secondary); }
.blood-status.critical, .blood-status.dead { border-color: var(--accent-primary); }
.blood-recovery { display: grid; grid-template-columns: 52px 68px 1fr; }
.hud-icons { display: flex; gap: 3px; }
.hud-icons img { height: 24px; object-fit: contain; width: 24px; }
.blood-recovery strong { color: var(--accent-success); font-family: var(--font-header); font-size: 1rem; }
.blood-recovery strong small { color: var(--text-muted); font-family: var(--font-tech); font-size: 0.55rem; }
.blood-recovery > span:last-child, .blood-recovery-note { color: var(--text-secondary); font-size: 0.68rem; }
.blood-recovery-note { margin: var(--space-xs) 0 0; }
.iv-choice { border: 1px solid var(--border-dim); border-left-width: 3px; }
.iv-choice.saline { border-left-color: var(--accent-success); }
.iv-choice.blood { border-left-color: var(--accent-primary); }
.iv-choice > img { height: 52px; object-fit: contain; width: 42px; }
.iv-choice strong, .iv-choice span { display: block; }
.iv-choice strong { font-family: var(--font-header); font-size: 0.75rem; }
.iv-choice span { font-family: var(--font-tech); font-size: 0.6rem; margin-top: 2px; }
.iv-safe { color: var(--accent-success); }
.iv-warning { color: var(--accent-primary); }
.iv-choice p { color: var(--text-secondary); font-size: 0.7rem; line-height: 1.35; margin: 5px 0 0; }
.iv-kit { align-items: center; color: var(--text-muted); display: flex; font-size: 0.68rem; gap: var(--space-sm); margin: 3px 0 0; }
.iv-kit img { height: 26px; object-fit: contain; width: 26px; }

.blood-table-wrap { overflow-x: auto; }
.blood-table { border-collapse: collapse; min-width: 540px; table-layout: fixed; text-align: center; width: 100%; }
.blood-table caption { caption-side: top; color: var(--text-muted); font-size: 0.75rem; margin-bottom: var(--space-sm); text-align: left; }
.blood-table th, .blood-table td { border: 1px solid var(--border-dim); padding: 7px; font-size: 0.75rem; }
.blood-table th:first-child { width: 4.5rem; }
.blood-table thead th, .blood-table tbody th { background: var(--bg-deep); color: var(--accent-secondary); font-family: var(--font-header); }
.blood-table td { font-size: 1rem; font-weight: bold; }
.blood-table .compatible { background: rgba(39, 174, 96, 0.1); color: var(--accent-success); }
.blood-table .incompatible { background: rgba(212, 77, 77, 0.06); color: var(--accent-primary); opacity: 0.65; }

@media (max-width: 800px) {
    .blood-priority, .blood-reference-grid { display: grid; grid-template-columns: 1fr; }
    .blood-type-grid { grid-template-columns: repeat(2, 1fr); }
}