/* ============================================
   THEME 1: Clinical Blue (Default)
   Clean, professional medical software look
   ============================================ */
[data-theme="clinical-blue"] {
  --bg: #f4f6f9;
  --card: #ffffff;
  --border: #dce1e8;
  --text: #1a2332;
  --text2: #5a6577;
  --accent: #2563eb;
  --accent-light: #dbeafe;
  --header-bg: #2563eb;
  --header-text: #ffffff;
  --input-bg: #ffffff;
  --input-border: #dce1e8;
  --input-focus: #2563eb;
  --panel-bg: #ffffff;
  --tab-active: #2563eb;
  --green: #16a34a; --green-bg: #dcfce7;
  --yellow: #ca8a04; --yellow-bg: #fef9c3;
  --orange: #ea580c; --orange-bg: #fff7ed;
  --red: #dc2626; --red-bg: #fef2f2;
  --blue-bg: #eff6ff;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --dist-dex: #3b82f6; --dist-prot: #10b981; --dist-lip: #f59e0b;
}

/* ============================================
   THEME 2: Dark Mode
   High contrast dark theme for night shifts
   ============================================ */
[data-theme="dark-mode"] {
  --bg: #0f1117;
  --card: #1a1d27;
  --border: #2d3148;
  --text: #e4e6ed;
  --text2: #8b90a0;
  --accent: #6d9efc;
  --accent-light: #1e2a4a;
  --header-bg: #161820;
  --header-text: #e4e6ed;
  --input-bg: #22253a;
  --input-border: #3a3f56;
  --input-focus: #6d9efc;
  --panel-bg: #1a1d27;
  --tab-active: #6d9efc;
  --green: #4ade80; --green-bg: #14271c;
  --yellow: #facc15; --yellow-bg: #2a2510;
  --orange: #fb923c; --orange-bg: #2a1a10;
  --red: #f87171; --red-bg: #2a1414;
  --blue-bg: #15192d;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,.4);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --dist-dex: #6d9efc; --dist-prot: #4ade80; --dist-lip: #facc15;
}
[data-theme="dark-mode"] .form-group input,
[data-theme="dark-mode"] .form-group select,
[data-theme="dark-mode"] .header-controls select {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--input-border);
}
[data-theme="dark-mode"] .summary-item { border-bottom-color: #2d3148; }
[data-theme="dark-mode"] .elec-table th { border-bottom-color: #2d3148; }
[data-theme="dark-mode"] .elec-table td { border-bottom-color: #22253a; }
[data-theme="dark-mode"] .comp-table th { border-bottom-color: #2d3148; }
[data-theme="dark-mode"] .comp-table td { border-bottom-color: #22253a; }

/* ============================================
   THEME 3: Emerald Clinical
   Green-toned theme with a hospital/medical feel
   ============================================ */
[data-theme="emerald"] {
  --bg: #f0fdf4;
  --card: #ffffff;
  --border: #bbf7d0;
  --text: #14532d;
  --text2: #3f7a58;
  --accent: #059669;
  --accent-light: #d1fae5;
  --header-bg: #065f46;
  --header-text: #ffffff;
  --input-bg: #ffffff;
  --input-border: #a7f3d0;
  --input-focus: #059669;
  --panel-bg: #ffffff;
  --tab-active: #059669;
  --green: #16a34a; --green-bg: #dcfce7;
  --yellow: #ca8a04; --yellow-bg: #fef9c3;
  --orange: #ea580c; --orange-bg: #fff7ed;
  --red: #dc2626; --red-bg: #fef2f2;
  --blue-bg: #ecfdf5;
  --radius: 10px;
  --shadow: 0 1px 4px rgba(5,150,105,.1);
  --font: 'Segoe UI', system-ui, sans-serif;
  --dist-dex: #059669; --dist-prot: #0891b2; --dist-lip: #d97706;
}

/* ============================================
   THEME 4: Warm Slate
   Soft warm neutral tones, minimal and elegant
   ============================================ */
[data-theme="warm-slate"] {
  --bg: #fafaf9;
  --card: #ffffff;
  --border: #e7e5e4;
  --text: #292524;
  --text2: #78716c;
  --accent: #b45309;
  --accent-light: #fef3c7;
  --header-bg: #44403c;
  --header-text: #fafaf9;
  --input-bg: #fafaf9;
  --input-border: #d6d3d1;
  --input-focus: #b45309;
  --panel-bg: #ffffff;
  --tab-active: #b45309;
  --green: #16a34a; --green-bg: #dcfce7;
  --yellow: #a16207; --yellow-bg: #fef9c3;
  --orange: #c2410c; --orange-bg: #fff7ed;
  --red: #dc2626; --red-bg: #fef2f2;
  --blue-bg: #fffbeb;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.06);
  --font: Georgia, 'Times New Roman', serif;
  --dist-dex: #b45309; --dist-prot: #0d9488; --dist-lip: #7c3aed;
}
[data-theme="warm-slate"] body { font-family: var(--font); }
[data-theme="warm-slate"] .form-group input,
[data-theme="warm-slate"] .form-group select {
  background: var(--input-bg);
  border-color: var(--input-border);
}

/* ============================================
   THEME 5: High Contrast
   WCAG AAA accessible, maximum readability
   ============================================ */
[data-theme="high-contrast"] {
  --bg: #ffffff;
  --card: #ffffff;
  --border: #000000;
  --text: #000000;
  --text2: #333333;
  --accent: #0000cc;
  --accent-light: #ccccff;
  --header-bg: #000000;
  --header-text: #ffffff;
  --input-bg: #ffffff;
  --input-border: #000000;
  --input-focus: #0000cc;
  --panel-bg: #ffffff;
  --tab-active: #0000cc;
  --green: #006600; --green-bg: #ccffcc;
  --yellow: #886600; --yellow-bg: #ffffcc;
  --orange: #cc4400; --orange-bg: #ffe8cc;
  --red: #cc0000; --red-bg: #ffcccc;
  --blue-bg: #e6e6ff;
  --radius: 4px;
  --shadow: 0 0 0 2px #000;
  --font: Verdana, Geneva, sans-serif;
  --dist-dex: #0000cc; --dist-prot: #006600; --dist-lip: #cc4400;
}
[data-theme="high-contrast"] body { font-family: var(--font); font-size: 15px; }
[data-theme="high-contrast"] .form-group input,
[data-theme="high-contrast"] .form-group select {
  background: var(--input-bg);
  border: 2px solid var(--input-border);
  font-size: 14px;
}
[data-theme="high-contrast"] .form-group input:focus,
[data-theme="high-contrast"] .form-group select:focus {
  box-shadow: 0 0 0 3px var(--accent-light);
  border-color: var(--accent);
}
[data-theme="high-contrast"] .summary-card { border: 2px solid #000; box-shadow: none; }
[data-theme="high-contrast"] .warning-item { border-left-width: 5px; }
[data-theme="high-contrast"] .tab-btn { font-size: 14px; font-weight: 700; }
[data-theme="high-contrast"] .panel-section h3 { font-size: 14px; }
[data-theme="high-contrast"] .summary-item { border-bottom: 1px solid #ccc; }
[data-theme="high-contrast"] .elec-table td,
[data-theme="high-contrast"] .comp-table td { border-bottom: 1px solid #999; }
[data-theme="high-contrast"] .elec-table th,
[data-theme="high-contrast"] .comp-table th { border-bottom: 2px solid #000; }

/* ============================================
   Theme-aware overrides applied to base styles
   ============================================ */
body {
  font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
  background: var(--bg);
  color: var(--text);
}
header { background: var(--header-bg); color: var(--header-text); }
.input-panel { background: var(--panel-bg); border-right-color: var(--border); }
.warnings-panel { background: var(--panel-bg); border-left-color: var(--border); }
.summary-card { background: var(--card); box-shadow: var(--shadow); border-radius: var(--radius); }
.form-group input, .form-group select {
  background: var(--input-bg, #fff);
  border-color: var(--input-border, var(--border));
  color: var(--text);
}
.form-group input:focus, .form-group select:focus {
  border-color: var(--input-focus, var(--accent));
  box-shadow: 0 0 0 2px var(--accent-light);
}
.form-group label { color: var(--text2); }
.panel-section h3 { color: var(--text2); border-bottom-color: var(--border); }
.computed-row .label { color: var(--text2); }
.tab-btn { color: var(--text2); }
.tab-btn.active { color: var(--tab-active, var(--accent)); border-bottom-color: var(--tab-active, var(--accent)); }
.summary-item .si-label { color: var(--text2); }
.summary-item.highlight { background: var(--accent-light); }
.tabs { border-bottom-color: var(--border); }
.warnings-panel h3 { color: var(--text2); }
.dist-bar .dist-dex { background: var(--dist-dex, #3b82f6); }
.dist-bar .dist-prot { background: var(--dist-prot, #10b981); }
.dist-bar .dist-lip { background: var(--dist-lip, #f59e0b); }

/* SOAP note styles */
.soap-note { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px; }
.soap-note h4 { font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
.soap-section { margin-bottom: 14px; }
.soap-section-title { font-weight: 700; font-size: 14px; color: var(--accent); margin-bottom: 4px; padding-bottom: 4px; border-bottom: 2px solid var(--accent-light); }
.soap-content { font-size: 13px; line-height: 1.7; white-space: pre-wrap; color: var(--text); }
.soap-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.soap-actions button {
  padding: 6px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 500;
}
.soap-actions button:hover { background: var(--accent-light); border-color: var(--accent); }
.soap-actions button.primary { background: var(--accent); color: var(--header-text, #fff); border-color: var(--accent); }
.soap-textarea {
  width: 100%; min-height: 120px; padding: 10px; border: 1px solid var(--border);
  border-radius: var(--radius); font-family: inherit; font-size: 13px; line-height: 1.7;
  background: var(--input-bg, #fff); color: var(--text); resize: vertical;
}