* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: #1a1a1f;
  color: #e8e8ee;
  min-height: 100vh;
}

header {
  background: linear-gradient(180deg, #2a1f2f, #1a1a1f);
  padding: 16px 24px;
  border-bottom: 1px solid #3a3340;
}

header h1 {
  margin: 0 0 4px 0;
  font-size: 20px;
  letter-spacing: 0.3px;
}

header p {
  margin: 0;
  font-size: 13px;
  color: #b0a8b8;
}

.disclaimer {
  background: #3a2a1f;
  border-bottom: 1px solid #5a4030;
  color: #ffc870;
  padding: 8px 24px;
  font-size: 12px;
  line-height: 1.5;
}

.disclaimer strong { color: #ffd66b; }

.container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  padding: 16px;
}

.controls {
  background: #25222b;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #3a3340;
  height: fit-content;
  position: sticky;
  top: 16px;
}

.controls h2 {
  font-size: 14px;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #b0a8b8;
}

.control-group {
  margin-bottom: 14px;
}

.control-group label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #c8c0d0;
  margin-bottom: 4px;
}

.control-group label .value {
  font-weight: bold;
  color: #ffd66b;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.control-group input[type="range"] {
  width: 100%;
  accent-color: #ff6b88;
}

.control-group select,
.control-group input[type="text"],
.control-group input[type="number"] {
  width: 100%;
  background: #1a1820;
  color: #e8e8ee;
  border: 1px solid #4a4350;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}

.control-group select option { background: #1a1820; }
.control-group select optgroup { color: #ffd66b; font-weight: 600; }

.seed-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
}

.seed-row label { margin: 0; font-size: 12px; color: #c8c0d0; display: flex; gap: 4px; align-items: center; }

.seed-row input[type="range"]:disabled { opacity: 0.4; }

.icon-btn {
  flex: 0 0 auto;
  min-width: 32px;
  padding: 6px 8px;
  background: #4a4350;
  color: #e8e8ee;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.icon-btn:hover { background: #5a5360; }

/* ── Mode Tabs ─────────────────────────────────────────────────────── */

.mode-tabs {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.mode-tab {
  background: #2a1f2f;
  color: #c8c0d0;
  border: 1px solid #4a4350;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  flex: 0 0 auto;
}

.mode-tab:hover { background: #3a2f3f; color: #e8e8ee; }

.mode-tab.active {
  background: #ff6b88;
  color: #1a1a1f;
  border-color: #ff6b88;
}

.view-hidden { display: none !important; }

/* ── Toggle-Button ─────────────────────────────────────────────────── */

button.toggle-btn.active {
  background: #0066ff;
  color: white;
}

/* ── Quiz ──────────────────────────────────────────────────────────── */

.quiz-sidebar { font-size: 13px; }

.quiz-score {
  display: flex;
  justify-content: space-between;
  background: #1a1820;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 12px;
  color: #ffd66b;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

.quiz-instruction {
  font-size: 12px;
  color: #c8c0d0;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.quiz-option {
  background: #1a1820;
  color: #e8e8ee;
  border: 1px solid #4a4350;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  font-family: inherit;
}

.quiz-option:hover:not(:disabled) {
  background: #25222b;
  border-color: #ff6b88;
}

.quiz-option:disabled { cursor: default; }

.quiz-option.correct {
  background: #1f3a25;
  border-color: #4caf50;
  color: #b6e8c2;
}

.quiz-option.incorrect {
  background: #3a1f1f;
  border-color: #f44336;
  color: #f8b6b6;
}

.quiz-result {
  background: #1a1820;
  border-left: 3px solid #ffd66b;
  padding: 10px 12px;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  line-height: 1.5;
  color: #c8c0d0;
  margin-bottom: 12px;
  min-height: 20px;
  display: none;
}

.quiz-result.visible { display: block; }

.quiz-result strong { color: #ffd66b; }

.quiz-tip {
  font-size: 11px;
  color: #888090;
  margin: 12px 0 6px 0;
  line-height: 1.5;
}

/* ── Monitor (Bedside-Überwachungsmonitor) ─────────────────────────── */

.monitor-viewport { padding: 0; overflow: hidden; background: #05080a; }

/* Bildschirm: EKG-Spur links, Vitalwert-Kacheln rechts (wie am Patienten-
   monitor). Bei schmalem Viewport werden die Kacheln unter die Spur gestapelt. */
.monitor-screen {
  display: flex;
  gap: 0;
  background: #05080a;
  min-height: 300px;
}

.monitor-trace {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

#monitor-canvas {
  display: block;
  background: #08120a;
  width: 100%;
}

/* Vitalwert-Spalte */
.monitor-vitals {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: #05080a;
  border-left: 1px solid #16211a;
}

.vital {
  position: relative;
  padding: 6px 10px 8px;
  border-radius: 6px;
  background: #0c1410;
  border: 1px solid #16211a;
  line-height: 1;
}

.vital-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.85;
}

.vital-body {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}

.vital-value {
  font-size: 40px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.vital-nibp .vital-value { font-size: 30px; }

.vital-unit { font-size: 12px; opacity: 0.7; }
.vital-sub  { font-size: 11px; opacity: 0.65; margin-top: 3px; }

/* Farbkonventionen wie am realen Monitor */
.vital-hr   { color: #45f06a; }
.vital-spo2 { color: #35d6e6; }
.vital-nibp { color: #f2a33c; }
.vital-rr   { color: #f2d84c; }
.vital-temp { color: #e8e8ee; }
.vital .vital-head span:last-child { opacity: 0.75; font-weight: 700; }

/* Alarm-Banner über der Spur */
.monitor-alarms {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
  z-index: 3;
}

.monitor-alarm {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 4px;
  text-transform: uppercase;
}

.monitor-alarm.crit {
  background: #c62828;
  color: #fff;
  animation: alarm-blink 1s steps(2, start) infinite;
}

.monitor-alarm.warn {
  background: #4a3a10;
  color: #ffd66b;
  border: 1px solid #7a6320;
}

@keyframes alarm-blink { 50% { opacity: 0.35; } }

.monitor-viewport .info {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  z-index: 3;
  background: rgba(5, 8, 10, 0.72);
  color: #b9d8c4;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.monitor-viewport .info strong { color: #eafff0; }

@media (max-width: 640px) {
  .monitor-screen { flex-direction: column; }
  .monitor-vitals {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    border-top: 1px solid #16211a;
  }
  .monitor-vitals .vital { flex: 1 1 30%; }
  .vital-value { font-size: 32px; }
}

/* ── Caliper ───────────────────────────────────────────────────────── */

.caliper-overlay {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10;
}

/* ── Print ─────────────────────────────────────────────────────────── */

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: white; color: black; }
  header, .disclaimer, .controls, .legend, .mode-tabs,
  #view-quiz, #view-monitor, .caliper-overlay { display: none !important; }
  .container { display: block; padding: 0; }
  .viewport { background: white; border: none; padding: 0; }
  /* Patient/Befund-Info wird auf jedem Bogen direkt im Canvas gedruckt
     (oben rechts), deshalb hier ausblenden, damit der Canvas exakt 1:1 mm
     gedruckt wird. */
  .info { display: none !important; }
  .ecg-sheets { gap: 0; }
  .ecg-sheet-wrapper {
    page-break-after: always;
    break-after: page;
    margin: 0;
  }
  .ecg-sheet-wrapper:last-child {
    page-break-after: auto;
    break-after: auto;
  }
  /* Sheet-Header beim Druck ausblenden — der Bogen-Hinweis steht ohnehin
     unten rechts auf dem Canvas selbst. */
  .ecg-sheet-header { display: none !important; }
  /* Bogen druckt mm-genau in voller A4-Quer-Druckfläche (10 mm @page-Margin).
     So bleibt 1 mm = 1 mm und die Eichzacke (10 mm) ist physisch korrekt. */
  canvas.ecg-sheet {
    width: 277mm !important;
    height: 190mm !important;
    max-width: 277mm !important;
    border: none !important;
    border-radius: 0 !important;
  }
}

.pathology-description {
  background: #1a1820;
  border-left: 3px solid #ff6b88;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #c8c0d0;
  margin: 8px 0 16px 0;
  border-radius: 0 4px 4px 0;
  min-height: 32px;
}

.pathology-explanation {
  margin: -8px 0 16px 0;
  font-size: 12px;
}
.pathology-explanation > summary {
  cursor: pointer;
  color: #ff9bb0;
  font-size: 12px;
  padding: 4px 2px;
  user-select: none;
  list-style: none;
}
.pathology-explanation > summary::-webkit-details-marker { display: none; }
.pathology-explanation > summary:hover { color: #ffb3c4; }
.pathology-explanation-text {
  background: #1a1820;
  border-left: 3px solid #ffa94d;
  padding: 8px 10px;
  line-height: 1.6;
  color: #c8c0d0;
  margin-top: 6px;
  border-radius: 0 4px 4px 0;
}

/* Pathologie-spezifische Controls (z. B. Vorhoffrequenz nur bei AVB III°) */
.avb3-only { display: none; }
.controls.is-avb3 .avb3-only { display: block; }

.layout-description {
  background: #1a1820;
  border-left: 3px solid #6b9aff;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.4;
  color: #aab0c0;
  margin: -4px 0 14px 0;
  border-radius: 0 4px 4px 0;
}

.button-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

button {
  background: #ff6b88;
  color: #1a1a1f;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.3px;
  flex: 1;
  min-width: 80px;
}

button:hover { background: #ff8aa3; }

button.secondary {
  background: #4a4350;
  color: #e8e8ee;
}
button.secondary:hover { background: #5a5360; }

.viewport {
  background: #25222b;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #3a3340;
  overflow: auto;
}

.info {
  background: #1a1820;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
  color: #ffd66b;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

.ecg-sheets {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ecg-sheet-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ecg-sheet-header {
  font-size: 12px;
  color: #ffd66b;
  letter-spacing: 0.3px;
  font-weight: 600;
}

.ecg-sheet-frame {
  position: relative;     /* Bezugspunkt für Caliper-Overlay */
  display: block;
  line-height: 0;         /* keine zusätzliche Inline-Höhe unter dem Canvas */
}

canvas.ecg-sheet {
  display: block;
  border: 1px solid #3a3340;
  border-radius: 4px;
  background: #fff5f5;
  max-width: 100%;
}

.legend {
  margin-top: 12px;
  font-size: 11px;
  color: #888090;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.legend span { white-space: nowrap; }

/* Bedienfeld-Toggle: nur auf schmalen Viewports sichtbar (siehe Media-Query) */
.controls-toggle {
  display: none;
  width: 100%;
  background: #ff6b88;
  color: #1a1a1f;
  border: none;
  border-radius: 6px;
  padding: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 10px;
}

/* Tablet-Hochformat / schmaler Desktop: Sidebar über den Inhalt stapeln.
   Gilt auch für iPad-Hochformat (768–900px) – der volle 12-Kanal-A4-Bogen
   bleibt erhalten (canvas skaliert per max-width:100% auf Viewport-Breite),
   nur die Bedienleiste wandert nach oben und ist einklappbar. */
@media (max-width: 900px) {
  .container { grid-template-columns: 1fr; }
  .controls { position: static; }

  /* Pathologie-Auswahl bleibt immer sichtbar; nur die übrigen Parameter
     (.controls-collapsible) werden über den Toggle ein-/ausgeblendet, damit
     das EKG bei gestapeltem Layout sofort sichtbar ist. */
  .controls-toggle { display: block; min-height: 44px; }
  #view-generator .controls.collapsed .controls-collapsible { display: none; }
}

/* Mobil: kompaktes UI, einklappbares Bedienfeld, größere Touch-Ziele.
   820px = Schwelle, ab der app.js auf den mobilen Einspalt-Bogen umschaltet. */
/* Smartphone (echte schmale Viewports): Einspalt-Scroll-Bogen.
   NUR hier wird der Canvas horizontal scrollbar gemacht (max-width:none) und
   die Lead-Label-Overlay-Spalte eingeblendet. Tablets fallen NICHT hierunter. */
@media (max-width: 767px) {
  header { padding: 12px 14px; }
  header h1 { font-size: 17px; }
  header p { font-size: 12px; }
  .disclaimer { padding: 8px 14px; font-size: 11px; }

  /* Mode-Tabs horizontal scrollbar statt zu quetschen */
  .mode-tabs {
    margin-top: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mode-tabs::-webkit-scrollbar { display: none; }
  .mode-tab { padding: 10px 14px; font-size: 14px; min-height: 44px; }

  .container { gap: 10px; padding: 10px; }
  /* Horizontal-Scroll passiert AUSSCHLIESSLICH in .ecg-mobile-scroll — .viewport
     und .ecg-sheets scrollen mobil nicht (overflow-x:hidden), damit die
     Lead-Label-Spalte als absolutes Overlay ÜBER dem Scroll-Container ruhig
     stehenbleiben kann. Frühere Varianten (position:sticky bzw. JS-Translate-
     Kompensation) wackelten auf iOS Safari beim Touch-Scrollen. */
  .viewport { padding: 8px; overflow-x: hidden; }
  .ecg-sheets { overflow-x: visible; }
  /* WICHTIG: max-width:100% würde den Canvas auf Container-Breite
     herunterskalieren (statt überzulaufen) → dann gäbe es nichts zum
     Horizontal-Scrollen. Mobil zeigt der Canvas seine volle Eigenbreite. */
  canvas.ecg-sheet { max-width: none; }
  #quiz-canvas { max-width: none; }

  /* Mobiler Host: nicht-scrollender Bezugsrahmen. Enthält genau zwei Kinder:
       1. .ecg-mobile-scroll  — der einzige horizontal-scrollende Container
       2. .mobile-lead-labels — absolutes Overlay am linken Rand, AUSSERHALB
          des Scrollers (deshalb wackelfrei, ohne Scroll-Listener). */
  .ecg-mobile-host {
    position: relative;
    width: 100%;
  }
  .ecg-mobile-scroll {
    overflow-x: auto;
    overflow-y: visible;
  }
  .ecg-sheet-wrapper { align-self: flex-start; }
  .mobile-lead-labels {
    position: absolute;     /* relativ zu .ecg-mobile-host */
    top: 0;
    left: 0;
    height: 0;
    z-index: 6;
    pointer-events: none;
  }
  .mobile-lead-label {
    position: absolute;
    left: 2px;
    font: bold 13px sans-serif;
    color: #000;
    background: #fff5f5;
    padding: 0 4px;
    border-radius: 2px;
    line-height: 1.3;
  }
}

/* ── Touch-Geräte (Phone + Tablet/iPad, quer wie hoch) ──────────────────────
   Größere Touch-Ziele unabhängig von der Viewport-Breite – so bekommt auch
   das iPad im Querformat (>900px, zweispaltiges Layout) bedienbare Buttons,
   ohne dass Desktop-Geräte mit Maus betroffen sind. */
@media (hover: none) and (pointer: coarse) {
  button { min-height: 44px; font-size: 13px; }
  .icon-btn { min-height: 44px; min-width: 44px; }
  .mode-tab { min-height: 44px; }
  .control-group select,
  .control-group input[type="text"],
  .control-group input[type="number"] {
    padding: 10px;
    font-size: 16px;   /* ≥16px: verhindert iOS-Auto-Zoom beim Fokus */
  }
  .control-group input[type="range"] { height: 36px; }
  .quiz-option { padding: 14px 12px; min-height: 44px; }
}

/* ── PWA / iOS-Standalone ─────────────────────────────────────────────────── */
/* Safe-Area-Insets: Inhalt nicht unter Notch, Status-Bar oder Home-Indicator.
   env(...) ist im normalen Browser 0 -> calc bleibt bei den Basiswerten. */
@supports (padding: env(safe-area-inset-top)) {
  header {
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
  }
  .disclaimer {
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
  }
  .container {
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* App-Feeling nur in der installierten (standalone) App – Browser bleibt normal. */
@media (display-mode: standalone) {
  body {
    overscroll-behavior-y: none;      /* kein Gummiband-Overscroll */
    -webkit-tap-highlight-color: transparent;
  }
  /* Nicht-interaktive UI nicht selektierbar (Long-Press-Callout) – Eingaben
     und Canvas bleiben bedienbar. */
  header, .disclaimer, .mode-tabs, .controls h2, label {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}