/* Grundlayout */ 
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0f1117;
  color: #e5e7eb;
}

.app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px;
}

/* Header / Branding */
.app-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.brand-main {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f9fafb;
}

.brand-sub {
  font-size: 1.1rem;
  font-weight: 700;
  color: #22c55e;
  letter-spacing: 0.1em;
}

.header-tagline {
  font-size: 0.9rem;
  color: #9ca3af;
}

/* Layout */
.app-main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: 12px;
}

.layout-column {
  min-width: 0;
}


.layout-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Cards */
.card {
  background: #151823;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  border: 1px solid #1f2933;
}

.card h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #f9fafb;
}

.card h3 {
  margin: 8px 0 4px;
  font-size: 0.95rem;
  color: #e5e7eb;
}

/* Kleine Abschnittsüberschrift */
.subsection-title {
  margin: 8px 0 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Card-Header mit Badge (Wasser) */
.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

/* Badge */
.badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid transparent;
}

.badge-green {
  background: rgba(22,163,74,0.12);
  border-color: #22c55e;
  color: #bbf7d0;
}

.badge-yellow {
  background: rgba(250,204,21,0.12);
  border-color: #facc15;
  color: #facc15;
}

.badge-red {
  background: rgba(239,68,68,0.12);
  border-color: #ef4444;
  color: #fecaca;
}

/* Form-Elemente */
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.form-row label {
  flex: 0 0 120px;
  font-size: 0.85rem;
  color: #d1d5db;
}

.form-row input[type="number"],
.form-row select {
  flex: 1;
  padding: 4px 6px;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid #1f2933;
  background: #0b0d13;
  color: #e5e7eb;
}

/* Text-Inputs (z. B. Temp-Felder mit Punkt-Darstellung) */
.form-row input[type="text"] {
  flex: 1;
  padding: 4px 6px;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid #1f2933;
  background: #0b0d13;
  color: #e5e7eb;
}
.form-row input[type="text"]:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.4);
}


/* pH-Regulatoren: kompakter, klick-sicherer Aufbau */
.phreg-dose-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.phreg-dose-wrap input[type="number"] {
  flex: 1;
  min-width: 0;
}

.phreg-unit {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: #9ca3af;
  white-space: nowrap;
  pointer-events: none; /* verhindert, dass das Unit-Label Klicks blockiert */
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: #d1d5db;
}

.phreg-solver-row {
  margin-top: -2px;
}

.phreg-solver-spacer {
  flex: 0 0 120px;
}

.form-row input[type="number"]:focus,
.form-row select:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.4);
}

.hint {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Buttons */
.btn-primary {
  background: #22c55e;
  color: #0b0f19;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 600;
}

.btn-primary:hover {
  background: #16a34a;
}

.btn-primary.busy {
  opacity: 0.7;
}

.btn-secondary {
  background: #111827;
  color: #e5e7eb;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #4b5563;
  font-size: 0.85rem;
  cursor: pointer;
}

.btn-secondary:hover {
  background: #1f2937;
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Kleine Buttons */
.btn-smallstep {
  padding: 2px 6px;
  font-size: 0.75rem;
  border-radius: 4px;
  border: 1px solid #4b5563;
  background: #111827;
  color: #e5e7eb;
  cursor: pointer;
}

.btn-smallstep:hover {
  background: #1f2937;
}

/* Säure-Toggle */
.acid-unit-toggle label {
  margin-right: 10px;
  font-size: 0.85rem;
  color: #d1d5db;
}

.acid-input-group.hidden {
  display: none;
}

.small-hint {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 2px;
}

/* Wasser Custom Grid */
.custom-water-box {
  margin-top: 6px;
  border-top: 1px solid #1f2933;
  padding-top: 6px;
}

.custom-water-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

/* Wasser-Mix Slider */
.water-mix-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.water-mix-side-label {
  font-size: 0.8rem;
  color: #9ca3af;
  min-width: 80px;
  text-align: center;
}

.water-mix-row input[type="range"] {
  flex: 1;
}

.water-mix-summary {
  font-size: 0.85rem;
  color: #d1d5db;
  margin-bottom: 8px;
}

/* Wasser-Ampel */
.water-ampel-box {
  margin-top: 6px;
}

.water-ampel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  border: 1px solid transparent;
}

.water-ampel .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.water-ampel .water-ampel-text {
  color: #e5e7eb;
}

.water-ampel.green {
  background: rgba(22,163,74,0.12);
  border-color: #22c55e;
}

.water-ampel.green .dot {
  background: #22c55e;
}

.water-ampel.yellow {
  background: rgba(250,204,21,0.12);
  border-color: #facc15;
}

.water-ampel.yellow .dot {
  background: #facc15;
}

.water-ampel.red {
  background: rgba(239,68,68,0.12);
  border-color: #ef4444;
}

.water-ampel.red .dot {
  background: #ef4444;
}

/* Wasser-Warnungen */
.water-warnings {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #facc15;
}

.water-warning-line {
  margin-bottom: 2px;
}

/* Wasser-Aktionen */
.water-actions {
  margin-top: 10px;
  text-align: right;
}

/* Ergebnisse */
#results .card {
  margin-bottom: 10px;
}

/* Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #4b5563;
  border-radius: 18px;
  transition: 0.2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: #f9fafb;
  border-radius: 50%;
  transition: 0.2s;
}

.switch input:checked + .slider {
  background-color: #6b7280;
}

.switch input:checked + .slider:before {
  transform: translateX(14px);
}

/* Tabellen */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

th, td {
  border: 1px solid #1f2933;
  padding: 4px 6px;
  text-align: right;
}

th {
  background: #111827;
  color: #e5e7eb;
}

td {
  background: #0b0f19;
}

th:first-child,
td:first-child {
  text-align: left;
}

.solver-col {
  background: #020617;
}

.user-col {
  background: #020817;
}

/* Stock-Profil */
.stock-profile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
}

.stock-profile-line {
  white-space: nowrap;
}

/* Status */
.status-ok { color: #22c55e; }
.status-low { color: #facc15; }
.status-high { color: #f97316; }

.status-nh4-warning::after {
  content: "▲";
  color: #f97316;
  margin-left: 4px;
  font-size: 0.75rem;
  vertical-align: middle;
}

/* Ampelpanel */
.ampel-panel {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ampel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.8rem;
}

.ampel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ampel-green {
  background: rgba(22,163,74,0.12);
  border: 1px solid #22c55e;
}

.ampel-green .ampel-dot { background: #22c55e; }

.ampel-red {
  background: rgba(239,68,68,0.12);
  border: 1px solid #ef4444;
}

.ampel-red .ampel-dot { background: #ef4444; }

.ampel-yellow {
  background: rgba(234,179,8,0.16);
  border: 1px solid #eab308;
}
.ampel-yellow .ampel-dot { background: #eab308; }

/* Kleine Buttons in Tabellen */
.btn-adjust,
.btn-el-adjust,
.btn-reset {
  padding: 2px 6px;
  font-size: 0.75rem;
  border-radius: 4px;
  border: 1px solid #4b5563;
  background: #111827;
  color: #e5e7eb;
  cursor: pointer;
}

.btn-adjust[disabled],
.btn-el-adjust[disabled],
.btn-reset[disabled] {
  cursor: default;
  opacity: 0.5;
}

/* Slider-Design */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: #374151;
  border-radius: 2px;
  margin: 4px 0;
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: #374151;
  border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0b0f19;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
  margin-top: -5px;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  height: 4px;
  background: #374151;
  border-radius: 2px;
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0b0f19;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
  cursor: pointer;
}

/* Eff. Stärke Box */
.effective-strength-box {
  flex: 0 0 auto;
  min-width: 90px;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #22c55e;
  font-weight: 700;
  font-size: 1.05rem;
  background: #022c22;
  color: #bbf7d0;
}

.eff-strength-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Toggle-Row */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* VPD/Statusboxen */
.status-box {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #1f2933;
  background: rgba(17, 24, 39, 0.35);
  font-size: 0.8rem;
  line-height: 1.25;
  color: #9ca3af;
}

.status-green {
  border-color: #22c55e;
  background: rgba(22, 163, 74, 0.10);
  color: #bbf7d0;
}

.status-yellow {
  border-color: #facc15;
  background: rgba(250, 204, 21, 0.10);
  color: #fde68a;
}

.status-red {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.10);
  color: #fecaca;
}

.status-box.with-dot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 2px;
  flex: 0 0 auto;
  background: #6b7280;
}

.status-green .status-dot { background: #22c55e; }
.status-yellow .status-dot { background: #facc15; }
.status-red .status-dot { background: #ef4444; }

/* Infeasible (Hard-Ranges) details */
.infeasible-list {
  margin: 6px 0 0 18px;
  padding: 0;
}
.infeasible-list li {
  margin: 2px 0;
}

/* Coco-Safe Boost Buttons */
.coco-boost-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.coco-boost-btn {
  flex: 1;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #4b5563;
  background: #111827;
  color: #e5e7eb;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}

.coco-boost-btn:hover {
  background: #1f2937;
}

.coco-boost-btn.active,
.coco-boost-btn[aria-pressed="true"] {
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.35);
  background: rgba(22,163,74,0.10);
  color: #bbf7d0;
}

.coco-boost-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Coco-Safe: grüner Rahmen bei aktiv */
.coco-safe-row {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #1f2933;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.coco-safe-row.is-active {
  border-color: #22c55e;
  background: rgba(22,163,74,0.08);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.35);
}

/* Print Controls (rechter Block) */
.print-controls {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #1f2933;
}

/* Responsive */
@media (max-width: 1200px) {
  .app-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app-main { grid-template-columns: 1fr; }
}


/* =========================
   Print: clean output (FIXED)
   - Keine leeren Seiten: App wird im Print-Layout entfernt
   - PrintHost wird korrekt angezeigt
   ========================= */
@media print {
  /* Hintergrund/Schriften für Print */
  body {
    background: #fff !important;
    color: #000 !important;
  }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ==== WICHTIGER FIX gegen leere Seiten ====
     Alles auf body-Ebene rausnehmen (display:none nimmt keinen Platz ein),
     damit nicht erst 1..7 Seiten "unsichtbare" App gedruckt werden.
  */
  body > * {
    display: none !important;
  }

  /* Print läuft IMMER über PrintHost (script.js) */
  #printHost {
    display: block !important;
  }

  /* Wichtig: results NIEMALS im Print erzwingen (sonst „leere Seite 1“ möglich) */
  #results {
    display: none !important;
  }

  /* Buttons ausblenden */
  button, .btn-primary, .btn-secondary, .btn-smallstep {
    display: none !important;
  }

  /* Dark UI hell drucken */
  .card {
    background: #fff !important;
    color: #000 !important;
    border-color: #ddd !important;
    box-shadow: none !important;
  }

  .hint, .small-hint, .subsection-title {
    color: #444 !important;
  }

  table, th, td {
    background: #fff !important;
    color: #000 !important;
    border-color: #ddd !important;
  }

  .solver-col, .user-col {
    background: #fff !important;
  }

  .status-ok, .status-low, .status-high {
    color: #000 !important;
  }

  /* Print: Seite sauber umbrechen */
  .card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  table {
    page-break-inside: auto;
  }

  tr, td, th {
    page-break-inside: avoid;
  }
}

.dose-input{display:flex;align-items:center;gap:8px;}
.unit-chip{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;height:32px;border-radius:8px;background:#0f1720;border:1px solid #1f2933;color:#9ca3af;font-size:.85rem;white-space:nowrap;pointer-events:none;}
.checkbox-line{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#e5e7eb;}


/* Auto/Manuell: führende Spalte normal, passive grau */
body.auto-mode th.user-col, body.auto-mode td.user-col { opacity: 0.45; }
body.manual-mode th.solver-col, body.manual-mode td.solver-col { opacity: 0.45; }


/* --- Water mix table: ultra compact + centered numeric columns --- */
.water-mix-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  font-size:0.82rem;
}
.water-mix-table th:first-child,
.water-mix-table td:first-child{
  width:8ch;
  white-space:nowrap;
  text-align:left;
}
.water-mix-table th:not(:first-child),
.water-mix-table td:not(:first-child){
  width:5ch;
  text-align:center;
  white-space:nowrap;
}
.water-mix-table th,
.water-mix-table td{ padding:4px 4px; }

/* --- Custom-Wasser: Miniampeln pro Ion --------------------------- */
.ion-ampel-grid {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  gap: 6px 10px;
  margin-top: 8px;
  align-items: center;
  font-size: 0.85rem; /* wie Wasser-UI */
}

.ion-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 8px;
}

.ion-name {
  display: flex;
  align-items: center;
  font-weight: 650;
}

.ion-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ion-range {
  opacity: 0.85;
  font-size: 0.88em;
  white-space: nowrap;
}

.ion-green .ion-dot { background: #22c55e; }
.ion-yellow .ion-dot { background: #f59e0b; }
.ion-red .ion-dot { background: #ef4444; }

/* "zu niedrig" (bei Ca/Mg/S): kein Alarm, nur Hinweis zum Aufsalzen */
.ion-blue .ion-dot { background: #3b82f6; }



/* Custom: neutrales Hinweis-Schild (statt großer Ampel-Box) */
.water-hint{
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  font-size: 0.75rem; /* identisch zu .small-hint ("Drucken nutzt immer...") */
}

.water-hint-section + .water-hint-section{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.water-hint-title{
  font-weight: 650;
  margin-bottom: 3px;
}

.water-hint-text{
  opacity: 0.9;
  line-height: 1.25;
}

.water-hint-legend{
  margin-top: 0;
  opacity: 0.95;
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.legend-blue{ background: #3b82f6; }

/* Custom: Summary kompakter halten (weniger "erschlagen") */
.water-ampel.water-ampel-custom {
  padding: 10px 12px;
  font-size: 0.95em;
  line-height: 1.25;
}


/* =========================
   EC / TDS Schätzer
   ========================= */
.inline-input {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.inline-input input[type="number"] {
  flex: 1;
  min-width: 0;
}

.inline-input select {
  flex: 0 0 110px;
}

.ec-tds-wrap {
  margin-top: 6px;
}

.ec-tds-lines {
  margin-top: 6px;
  line-height: 1.35;
}


/* EC / TDS Schätzer: Textgröße an Tabelle anpassen */
.ec-tds-lines,
.ec-tds-lines .ec-line {
  font-size: 0.85rem;
}


/* ---- Physio checks table ---- */
.physio-table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
  font-size:13px;
}
.physio-table th, .physio-table td{
  border:1px solid rgba(0,0,0,0.12);
  padding:6px 8px;
  vertical-align:top;
}
.physio-table th{
  background:rgba(0,0,0,0.04);
  font-weight:600;
}
.physio-row .physio-status{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.physio-ok .physio-status{ color:#0b6b2b; }
.physio-warn .physio-status{ color:#8a5a00; }
.physio-danger .physio-status{ color:#a11212; }
.physio-ok{ background:rgba(11,107,43,0.06); }
.physio-warn{ background:rgba(138,90,0,0.08); }
.physio-danger{ background:rgba(161,18,18,0.08); }


/* Utility */
.is-hidden{ display:none; }

/* Error banner (runtime errors / unhandled rejections) */
.error-banner{
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(239,68,68,0.6);
  background: rgba(239,68,68,0.12);
  color: #fecaca;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

/* Hidden iframe used for printing */
.print-iframe-hidden{
  position: fixed;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}


/* Range column in macro table */
.range-col{white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0.95}


/* Physio-Relax compact pill */
.physio-pill{display:inline-block;padding:2px 8px;border-radius:999px;background:#111827;color:#e5e7eb;font-size:0.78rem;line-height:1.4;border:1px solid #1f2937;}

/* Physio-Safe (immer sichtbar) */
.physio-safe-inline-row{display:flex;align-items:center;gap:10px;}
.physio-safe-label{min-width:110px;}
.physio-safe-row.is-disabled .physio-safe-label,
.physio-safe-row.is-disabled .physio-pill{opacity:.55;}
.physio-safe-row.is-disabled input[type="checkbox"]{opacity:.55;}

/* pH regulator enabled/disabled input clarity */
.phreg-disabled input[type="number"]{color:#94a3b8;}
.phreg-enabled input[type="number"]{color:#f8fafc;}


/* Inline text-inputs (EC/TDS oder Temp falls dort verwendet) */
.inline-input input[type="text"]{
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid #1f2933;
  background: #0b0d13;
  color: #e5e7eb;
}
.inline-input input[type="text"]:focus{
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.4);
}

/* pH-Regulator: text inputs dark as well */
.phreg-dose-wrap input[type="text"]{
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid #1f2933;
  background: #0b0d13;
  color: #e5e7eb;
}
.phreg-dose-wrap input[type="text"]:focus{
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.4);
}


/* ===== UI-Feinschliff: Effektive Stärke & Coco-Buttons −20% (Position unverändert) ===== */

/* Effektive Stärke */
.effective-strength-box {
    font-size: 0.84rem !important;   /* ca. 20% kleiner */
    padding: 5px 9px !important;     /* ca. 20% kleiner */
    min-width: 72px !important;
}

/* Coco-Safe Prozent-Buttons */
#cocoBoostButtons .coco-boost-btn {
    font-size: 0.72rem !important;   /* ca. 20% kleiner */
    padding: 5px 0 !important;       /* Höhe ca. 20% kleiner */
    line-height: 1.2 !important;
}
/* =========================
   Results tables: narrower + centered values
   ========================= */
#results table {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

#results table th,
#results table td {
  text-align: center;
}

#results table th:first-child,
#results table td:first-child {
  text-align: left;
}


/* --- Stockprofile: bessere Lesbarkeit / mehr Luft --- */
.stock-profile {
  display: flex;
  flex-direction: column;
  gap: 4px;            /* Abstand zwischen Element-Zeilen */
}

.stock-profile-line {
  line-height: 1.35;   /* etwas mehr Zeilenhöhe */
}
/* --- Utilities (CSP-safe; no inline styles) ------------------------------------------- */
.u-my-10 { margin: 10px 0; }
.u-cursor-pointer { cursor: pointer; }
.expert-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}


/* Solver adjustment note */
.warn-hint{font-weight:600;}


/* ===== Teach-in (pH-Regulator) ===== */
.ph-teach-row .ph-teach-wrap{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.btn-teachin{padding:6px 10px;}
.btn-teachin.is-active{background:#facc15;color:#0b0f19;border-color:#facc15;}
.btn-teachin.is-active:hover{background:#eab308;}
/* bulletproof disabled (also for select) */
.phreg-locked select,
.phreg-locked input{opacity:0.55;pointer-events:none;}
.phreg-locked{filter:saturate(0.9);}