/* Durchlaufsimulation (public/js/simulation.js) – nutzt die Variablen aus app.css */
.sim-page { display: grid; gap: 14px; max-width: 1280px; }
.sim-page h4 { margin: 0 0 8px; }
.sim-intro { margin: 0; font-size: 13px; max-width: 900px; }
.sim-note { margin: 6px 0 0; font-size: 12px; }

.sim-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; min-width: 0; }
.sim-settings { display: grid; gap: 10px; }
.sim-settings h4 { margin: 4px 0 0; font-size: 13px; }

.sim-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sim-field { display: grid; gap: 4px; font-size: 12px; }
.sim-field > span:first-child { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.sim-input { display: flex; align-items: center; gap: 6px; }
.sim-input em { font-style: normal; color: var(--muted); font-size: 12px; }
.sim-field input, .sim-field select, .sim-cap input {
  font: inherit; font-size: 13px; width: 100%; min-width: 0; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink);
}
.sim-field input:disabled, .sim-field select:disabled, .sim-cap input:disabled { background: var(--bg); color: var(--muted); }

.sim-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.sim-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line-2); }
.sim-cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-cap input { width: 72px; flex: none; text-align: right; }
.sim-actions { display: flex; align-items: center; gap: 10px; }

.sim-results { display: grid; gap: 14px; }
.sim-conclusion {
  border: 1px solid var(--brand-100); border-left: 4px solid var(--brand); background: var(--brand-50);
  border-radius: var(--radius); padding: 10px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink);
}
.sim-kpi b { white-space: nowrap; }
.sim-kpi b.bad { color: var(--bad); }

.sim-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .sim-grid { grid-template-columns: minmax(0, 1fr); } }

/* Histogramm */
.sim-hist { width: 100%; height: auto; display: block; }
.sim-hbar { fill: var(--brand); opacity: 0.75; }
.sim-hbar:hover { opacity: 1; }
.sim-hbase { stroke: var(--line); stroke-width: 1; }
.sim-hmean { stroke: var(--ink); stroke-width: 1.5; }
.sim-hp95 { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sim-hstatic { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 2 3; }
.sim-hlabel { font-size: 10px; fill: var(--ink-2); }
.sim-haxis { font-size: 10px; fill: var(--muted); }
.sim-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.sim-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--line); }
.sim-lg-mean::before { background: var(--ink) !important; height: 2px !important; vertical-align: 3px !important; }
.sim-lg-p95::before { background: var(--warn) !important; height: 2px !important; vertical-align: 3px !important; }
.sim-lg-static::before { background: var(--muted) !important; height: 2px !important; vertical-align: 3px !important; }

/* Zusammensetzung der Durchlaufzeit */
.sim-comp { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line-2); margin-top: 12px; }
.sim-comp span { display: block; height: 100%; }
.sim-c-wait, .sim-lg-wait::before { background: var(--bad) !important; }
.sim-c-work, .sim-lg-work::before { background: var(--brand) !important; }
.sim-c-liege, .sim-lg-liege::before { background: var(--faint) !important; }

/* Auslastung je Einheit */
.sim-lane { display: grid; grid-template-columns: minmax(0, 1fr) 46px; grid-template-areas: "name pct" "bar bar" "meta meta"; gap: 3px 8px; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.sim-lane:last-of-type { border-bottom: 0; }
.sim-lane-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sim-lane > b { grid-area: pct; text-align: right; }
.sim-lane-bar { grid-area: bar; height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.sim-lane-bar span { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.sim-lane.warn .sim-lane-bar span { background: var(--warn); }
.sim-lane.bad .sim-lane-bar span { background: var(--bad); }
.sim-lane.warn > b { color: #b45309; }
.sim-lane.bad > b { color: var(--bad); }
.sim-lane-meta { grid-area: meta; font-size: 11.5px; }

/* Schritt-Tabelle */
.sim-table .num { text-align: right; white-space: nowrap; }
.sim-table tr.sim-hot td { background: #fff1f2; }
.sim-table tr.sim-hot td:first-child { box-shadow: inset 3px 0 0 var(--bad); }