/* medicalData UI — дизайн-система 13-UI-SPEC.md. Единственный файл стилей фазы. */

body {
  margin:0;
  background:#FAFAFA;
  color:#212529;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.5;
}

.page {
  max-width:1800px;
  margin:0 auto;
  padding:16px 24px 64px;
}

h2 {
  font-size:20px;
  font-weight:600;
  margin:0 0 16px;
}

.nav {
  background:#F1F3F5;
  border-bottom:1px solid #DEE2E6;
  padding:8px 32px;
  display:flex;
  gap:16px;
}

.nav-link {
  color:#495057;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  padding:8px 4px;
}

.nav-link.active {
  color:#2563EB;
}

.chart-row {
  display:flex;
  gap:24px;
  align-items:flex-start;
}

.metrics-sidebar {
  flex:0 0 220px;
  background:#F1F3F5;
  border:1px solid #DEE2E6;
  padding:16px;
}

.metrics-sidebar label {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14px;
  padding:4px 0;
}

.metrics-sidebar input[type="checkbox"] {
  accent-color:#2563EB;
}

.chart-wrap {
  position:relative;
  height:480px;
  flex:1;
  min-width:0;
}

#chart {
  width:100%;
  height:100%;
}

.empty {
  color:#495057;
  padding:16px;
}

.layers-panel {
  flex:0 0 220px;
  background:#F1F3F5;
  border:1px solid #DEE2E6;
  padding:16px;
}

.layers-panel label {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14px;
  padding:4px 0;
}

.layers-panel input[type="checkbox"] {
  accent-color:#2563EB;
}

.period-selector {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
}

.multiselect {
  position:relative;
  display:inline-block;
  margin-top:16px;
}

.multiselect-toggle {
  background:#fff;
  color:#212529;
  border:1px solid #DEE2E6;
  border-radius:4px;
  padding:8px 16px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
}

.multiselect-panel {
  position:absolute;
  top:100%;
  left:0;
  z-index:10;
  background:#F1F3F5;
  border:1px solid #DEE2E6;
  border-radius:4px;
  padding:8px;
  margin-top:4px;
  min-width:220px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.multiselect-panel label {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14px;
  padding:4px 0;
}

.multiselect-panel input[type="checkbox"] {
  accent-color:#2563EB;
}

#workouts-section {
  margin-top:24px;
}

#workout-list {
  margin-top:16px;
}

.workout-row {
  padding:4px 0;
  border-bottom:1px solid #DEE2E6;
  font-size:14px;
}

.form {
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:420px;
}

.form label {
  font-weight:600;
  font-size:14px;
}

.primary {
  background:#2563EB;
  color:#fff;
  border:none;
  padding:8px 16px;
  font-weight:600;
  border-radius:4px;
  cursor:pointer;
}

.error {
  color:#DC2626;
  font-weight:600;
}

.flag-high,
.flag-low {
  color:#DC2626;
  font-weight:600;
}

:focus-visible {
  outline:2px solid #2563EB;
}