/**
 * optimizer.css — Rezept-Optimizer (Simplex LP)
 * W-Make Batch 1.1 — Phase 2A
 *
 * Komponenten:
 *   .opt-toolbar       — Werkzeugleiste (Schmelzmasse, Basis laden, Run)
 *   .opt-grid          — 3-Spalten-Layout (Oxid-Ziele | Rohstoffe | Ergebnis)
 *   .opt-panel         — Einzelnes Panel (Card)
 *   .opt-target-row    — Oxid-Ziel-Zeile
 *   .opt-raw-row       — Rohstoff-Auswahlzeile
 *   .opt-result-table  — Ergebnistabelle
 *   .opt-status-badge  — optimal / infeasible / unbounded
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOOLBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-toolbar {
  display:        flex;
  align-items:    center;
  gap:            12px;
  flex-wrap:      wrap;
  padding:        12px 18px;
  background:     var(--bg2);
  border:         1px solid var(--line);
  border-radius:  var(--r-md);
  margin-bottom:  16px;
}

.opt-toolbar-label {
  font-size:   12px;
  color:       var(--t3);
  font-weight: 600;
  white-space: nowrap;
}

.opt-schmelze-input {
  width:       100px;
  text-align:  right;
  font-family: var(--mono);
  font-weight: 700;
  font-size:   14px;
}

.opt-toolbar-sep {
  flex:     1;
  min-width: 8px;
}

.opt-run-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  padding:       9px 22px;
  background:    var(--accent);
  color:         #fff;
  border:        none;
  border-radius: var(--r-md);
  font-size:     14px;
  font-weight:   700;
  cursor:        pointer;
  transition:    background .15s, transform .1s;
  white-space:   nowrap;
}

.opt-run-btn:hover  { background: var(--accent-hover, #5a7ef0); transform: translateY(-1px); }
.opt-run-btn:active { transform: translateY(0); }

.opt-run-btn.running {
  background: var(--t3);
  cursor:     default;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. DREISPALTEN-GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
  align-items:           start;
}

@media (max-width: 700px) {
  .opt-grid {
    grid-template-columns: 1fr;
  }
}

/* Ergebnis-Panel: volle Breite, unterhalb des Grids */
.opt-result-wrap {
  margin-top: 14px;
}

.opt-result-wrap .opt-panel {
  width: 100%;
}

/* KPI-Leiste im vollen Result-Panel: mehr Spalten nutzen */
.opt-result-wrap .opt-result-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Oxide-Kacheln nutzen die volle Breite besser */
.opt-result-wrap .opt-oxide-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* Kosten-Aufschlüsselung + Oxide nebeneinander im vollen Panel */
.opt-result-content-cols {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0;
  border-top:            1px solid var(--line2);
}

.opt-result-content-cols > * {
  min-width:   0;
  border-right: 1px solid var(--line2);
}

.opt-result-content-cols > *:last-child {
  border-right: none;
}

@media (max-width: 860px) {
  .opt-result-content-cols {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. PANEL (CARD)
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-panel {
  background:    var(--bg2);
  border:        1px solid var(--line);
  border-radius: var(--r-md);
  overflow:      hidden;
}

.opt-panel-head {
  display:        flex;
  align-items:    center;
  gap:            8px;
  padding:        11px 16px;
  background:     var(--bg3);
  border-bottom:  1px solid var(--line);
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--t2);
}

.opt-panel-head-icon {
  font-size:   16px;
  line-height: 1;
}

.opt-panel-body {
  padding:    4px 0 6px;
  max-height: 620px;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. OXID-ZIEL-ZEILEN
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-target-labels {
  display:     flex;
  gap:         6px;
  padding:     6px 16px 4px;
  font-size:   10px;
  color:       var(--t4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--line2);
}

.opt-target-labels > span:first-child  { width: 20px; }
.opt-target-labels > span:nth-child(2) { width: 58px; }
.opt-target-labels > span:nth-child(3) { flex: 1; text-align: right; }
.opt-target-labels > span:nth-child(4) { flex: 1; text-align: right; }

.opt-target-row {
  display:       grid;
  grid-template-columns: 20px 58px 1fr 1fr;
  align-items:   center;
  gap:           8px;
  padding:       7px 16px;
  border-bottom: 1px solid var(--line2);
  transition:    background .1s;
}

.opt-target-row:last-child { border-bottom: none; }
.opt-target-row:hover { background: var(--bg3); }

.opt-target-row.inaktiv {
  opacity: .4;
}

.opt-target-check {
  width:  15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
}

.opt-target-symbol {
  font-size:   12px;
  font-weight: 700;
  font-family: var(--mono);
  color:       var(--t1);
  white-space: nowrap;
}

.opt-target-inp {
  width:       100%;
  font-size:   12px;
  text-align:  right;
  font-family: var(--mono);
  padding:     4px 7px;
  background:  var(--bg1);
  border:      1px solid var(--line2);
  border-radius: 5px;
  color:       var(--t1);
  box-sizing:  border-box;
}

.opt-target-inp:focus {
  border-color: var(--accent);
  outline:      none;
}

.opt-target-inp.tol-inp {
  border-color: var(--line2);
  color:        var(--warn);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. ROHSTOFF-AUSWAHLZEILEN
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-raw-labels {
  display:     flex;
  gap:         6px;
  padding:     6px 16px 4px;
  font-size:   10px;
  color:       var(--t4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--line2);
}

.opt-raw-row {
  display:       grid;
  grid-template-columns: 20px 1fr 52px 58px 42px;
  align-items:   center;
  gap:           7px;
  padding:       6px 16px;
  border-bottom: 1px solid var(--line2);
  transition:    background .1s;
  font-size:     12px;
}

.opt-raw-row:last-child { border-bottom: none; }
.opt-raw-row:hover { background: var(--bg3); }

.opt-raw-row.inaktiv {
  opacity: .4;
}

.opt-raw-check {
  width:  15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
}

.opt-raw-name {
  color:         var(--t1);
  font-size:     12px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.opt-raw-cur {
  text-align:  right;
  color:       var(--t3);
  font-family: var(--mono);
  font-size:   11px;
}

.opt-raw-max-inp {
  width:       100%;
  font-size:   11px;
  text-align:  right;
  font-family: var(--mono);
  padding:     3px 5px;
  background:  var(--bg1);
  border:      1px solid var(--line2);
  border-radius: 4px;
  color:       var(--t2);
  box-sizing:  border-box;
}

.opt-raw-max-inp:focus {
  border-color: var(--warn);
  outline:      none;
}

.opt-raw-cat-header {
  padding:     7px 16px 4px;
  font-size:   10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:       var(--t4);
  background:  var(--bg3);
  border-top:  1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. ERGEBNIS-PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-status-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     12px 16px;
  border-bottom: 1px solid var(--line2);
}

.opt-status-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       4px 12px;
  border-radius: 10px;
  font-size:     12px;
  font-weight:   700;
  font-family:   var(--mono);
  border:        1px solid transparent;
}

.opt-status-badge.optimal {
  background: rgba(45, 224, 156, .15);
  color:      var(--success);
  border-color: rgba(45, 224, 156, .35);
}

.opt-status-badge.infeasible {
  background: rgba(255, 90, 90, .12);
  color:      var(--error);
  border-color: rgba(255, 90, 90, .28);
}

.opt-status-badge.unbounded {
  background: rgba(255, 190, 50, .12);
  color:      var(--warn);
  border-color: rgba(255, 190, 50, .28);
}

.opt-status-badge.idle {
  background: var(--bg3);
  color:      var(--t4);
  border-color: var(--line2);
}

.opt-result-kpis {
  display:       flex;
  gap:           0;
  border-bottom: 1px solid var(--line2);
}

.opt-result-kpi {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  padding:        12px 8px;
  border-right:   1px solid var(--line2);
  gap:            3px;
}

.opt-result-kpi:last-child { border-right: none; }

.opt-kpi-label {
  font-size:      10px;
  color:          var(--t4);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight:    700;
}

.opt-kpi-val {
  font-size:   18px;
  font-weight: 700;
  font-family: var(--mono);
  color:       var(--t1);
}

.opt-kpi-delta {
  font-size:   11px;
  font-family: var(--mono);
  font-weight: 600;
}

.opt-kpi-delta.plus  { color: var(--error); }
.opt-kpi-delta.minus { color: var(--success); }
.opt-kpi-delta.zero  { color: var(--t4); }

/* Ergebnis-Tabelle */
.opt-result-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       12px;
}

.opt-result-table th {
  padding:        7px 12px;
  text-align:     right;
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--t4);
  border-bottom:  1px solid var(--line2);
  white-space:    nowrap;
}

.opt-result-table th:first-child { text-align: left; }

.opt-result-table td {
  padding:       6px 12px;
  border-bottom: 1px solid var(--line2);
  text-align:    right;
  font-family:   var(--mono);
  font-size:     12px;
  color:         var(--t2);
  white-space:   nowrap;
}

.opt-result-table td:first-child {
  text-align:    left;
  font-family:   inherit;
  font-size:     12px;
  color:         var(--t1);
  max-width:     140px;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.opt-result-table tr:last-child td { border-bottom: none; }
.opt-result-table tr:hover td { background: var(--bg3); }

.opt-delta-cell.up   { color: var(--success); font-weight: 700; }
.opt-delta-cell.down { color: var(--error);   font-weight: 700; }
.opt-delta-cell.same { color: var(--t4); }

/* Oxide-Vergleich */
.opt-oxide-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap:                   8px;
  padding:               12px 14px;
  border-top:            1px solid var(--line2);
}

.opt-oxide-cell {
  background:    var(--bg3);
  border:        1px solid var(--line2);
  border-radius: var(--r-sm);
  padding:       8px 10px;
  font-size:     11px;
}

.opt-oxide-cell.ok  { border-color: rgba(45, 224, 156, .4); background: rgba(45, 224, 156, .06); }
.opt-oxide-cell.warn { border-color: rgba(255, 190, 50, .4); background: rgba(255, 190, 50, .06); }
.opt-oxide-cell.err  { border-color: rgba(255, 90, 90, .4);  background: rgba(255, 90, 90, .06); }

/* Oxide-Zell-Inhalt */
.opt-oxide-header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   5px;
}

.opt-oxide-sym { font-family: var(--mono); font-weight: 700; color: var(--t2); font-size: 12px; }
.opt-oxide-val { font-family: var(--mono); font-weight: 700; color: var(--t1); font-size: 13px; }
.opt-oxide-tgt { font-family: var(--mono); color: var(--t4); font-size: 10px; margin-top: 2px; }
.opt-ox-delta  { font-family: var(--mono); font-size: 10px; font-weight: 600; }

/* Compliance-Bar */
.opt-ox-bar-wrap {
  position:      relative;
  height:        6px;
  background:    var(--line2);
  border-radius: 3px;
  overflow:      visible;
  margin:        3px 0 4px;
}

.opt-ox-bar-zone {
  position:      absolute;
  left:          33.3%;
  width:         33.4%;
  top:           0;
  height:        100%;
  background:    rgba(45, 224, 156, .25);
  border-radius: 2px;
}

.opt-ox-bar-needle {
  position:      absolute;
  width:         2px;
  height:        10px;
  top:           -2px;
  margin-left:   -1px;
  border-radius: 1px;
}

/* Übernehmen-Button */
.opt-apply-btn {
  display:         flex;
  align-items:     center;
  gap:             7px;
  margin:          10px 14px 12px;
  padding:         11px 20px;
  background:      rgba(45, 224, 156, .12);
  border:          1.5px solid rgba(45, 224, 156, .35);
  border-radius:   var(--r-md);
  color:           var(--success);
  font-size:       14px;
  font-weight:     700;
  cursor:          pointer;
  transition:      background .15s;
  justify-content: center;
  box-sizing:      border-box;
}

.opt-apply-btn:hover {
  background: rgba(45, 224, 156, .22);
}

/* Leer/Hinweis */
.opt-empty {
  padding:     28px 16px;
  text-align:  center;
  color:       var(--t4);
  font-size:   13px;
  line-height: 1.7;
}

.opt-hint {
  margin:        8px 14px 12px;
  padding:       8px 12px;
  background:    var(--bg3);
  border:        1px solid var(--line2);
  border-radius: var(--r-sm);
  font-size:     11px;
  color:         var(--t3);
  line-height:   1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. PREIS-SPALTE
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-raw-preis {
  text-align:  right;
  color:       var(--warn);
  font-family: var(--mono);
  font-size:   11px;
  white-space: nowrap;
}

.opt-raw-preis.muted { color: var(--t4); }

/* ═══════════════════════════════════════════════════════════════════════════
   8. STATUS META-INFO
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-status-meta {
  font-size:   11px;
  color:       var(--t3);
  font-family: var(--mono);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. REDOX-KARTE
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-redox-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       9px 16px;
  border-bottom: 1px solid var(--line2);
  font-size:     13px;
}

.opt-redox-row.ok  { background: rgba(45, 224, 156, .05); }
.opt-redox-row.err { background: rgba(255, 90, 90, .05); }

.opt-rdx-ico   { font-size: 15px; }
.opt-rdx-label { color: var(--t3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.opt-rdx-val   { font-family: var(--mono); font-size: 16px; font-weight: 700; min-width: 60px; }
.opt-rdx-zone  { font-size: 11px; color: var(--t3); font-family: var(--mono); margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   10. OXIDE-SECTION-HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-oxide-section-head {
  padding:        8px 14px 5px;
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--t4);
  border-top:     1px solid var(--line2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. BESTAND-SPALTE
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-bestand-ok   { color: var(--t3); font-size: 11px; font-family: var(--mono); text-align: right; white-space: nowrap; }
.opt-bestand-warn { color: var(--error); font-size: 11px; font-family: var(--mono); text-align: right; white-space: nowrap; font-weight: 700; }
.opt-td-opt       { font-weight: 700; color: var(--accent); text-align: right; }
.opt-td-netto     { color: var(--t3); text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════════
   12. KOSTEN-AUFSCHLÜSSELUNG
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-kost-section {
  padding:    8px 14px 10px;
  border-top: 1px solid var(--line2);
}

.opt-kost-head {
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--t4);
  margin-bottom:  8px;
}

.opt-kost-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 5px;
  font-size:     11px;
}

.opt-kost-name {
  width:         120px;
  flex-shrink:   0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  color:         var(--t2);
}

.opt-kost-bar-wrap {
  flex:          1;
  height:        6px;
  background:    var(--line2);
  border-radius: 3px;
  overflow:      hidden;
}

.opt-kost-bar-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--accent), var(--teal));
  border-radius: 3px;
  transition:    width .3s;
  max-width:     100%;
}

.opt-kost-val {
  width:       95px;
  flex-shrink: 0;
  text-align:  right;
  font-family: var(--mono);
  font-size:   11px;
  color:       var(--t3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. INFEASIBILITY-DIAGNOSE
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-infeas-diag {
  padding:     12px 16px;
  font-size:   12px;
  color:       var(--t2);
  line-height: 1.6;
}

.opt-infeas-item {
  display:       inline-block;
  padding:       3px 10px;
  margin:        3px 4px 3px 0;
  background:    rgba(255, 90, 90, .1);
  border:        1px solid rgba(255, 90, 90, .3);
  border-radius: 10px;
  font-size:     11px;
  font-family:   var(--mono);
  color:         var(--error);
}

.opt-infeas-hint {
  margin-top:  10px;
  font-size:   11px;
  color:       var(--t3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. TOOLBAR-ERWEITERUNGEN (Tol-Buttons, Rezept-Selector)
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-tol-btn {
  padding:       5px 11px;
  font-size:     12px;
  font-weight:   600;
  font-family:   var(--mono);
  background:    var(--bg3);
  border:        1px solid var(--line);
  border-radius: var(--r-sm);
  color:         var(--warn);
  cursor:        pointer;
  transition:    background .12s;
  white-space:   nowrap;
}
.opt-tol-btn:hover { background: var(--bg2); }

/* ═══════════════════════════════════════════════════════════════════════════
   15. OXID-SUMME FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.opt-target-sum {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         8px 16px 10px;
  border-top:      1px solid var(--line);
  background:      var(--bg3);
  min-height:      36px;
}

.opt-target-sum:empty { display: none; }

.opt-sum-label {
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--t4);
}

.opt-sum-val {
  font-size:   15px;
  font-weight: 700;
  font-family: var(--mono);
}

.opt-sum-ok   { color: var(--success); }
.opt-sum-warn { color: var(--warn); }
.opt-sum-err  { color: var(--error); }

.opt-sum-hint {
  font-size:   10px;
  font-family: var(--mono);
  color:       var(--t4);
}