/**
 * oxide.css — Oxide-Tabelle, Visualisierungs-Balken, Kategorie-Badges, Diff-Badges
 * Modul: public/assets/js/modules/oxide.js (Satz-Tab)
 * v6.3 CSS-MODULARISIERUNG
 */

/* ── Zweispalten-Layout ───────────────────────────────────────────────────── */
.oxide-layout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.oxide-table-card {
  flex: 1.4;
  min-width: 340px;
  margin-bottom: 0;
}

.oxide-table-card .td-mono {
  font-size: 13px;
}

.oxide-right-col {
  flex: 1;
  min-width: 280px;
}

/* ── Visualisierungs-Balken in der Oxide-Tabelle ─────────────────────────── */
.ox-vis-col {
  min-width: 120px;
  padding-right: 8px;
}

.ox-bar-bg {
  position: relative;
  height: 10px;
  background: var(--bg3);
  border-radius: var(--r-sm);
  overflow: visible;
}

.ox-bar-fill {
  height: 100%;
  border-radius: var(--r-sm);
  transition: width .3s ease;
  opacity: .85;
}

.ox-target-line {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  background: var(--t2);
  border-radius: 1px;
  transform: translateX(-1px);
}

/* Oxide-Tabellenzeilen */
.ox-dyn-row td {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ── Oxide-Toggle-Button ──────────────────────────────────────────────────── */
.oxide-toggle-btn {
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  padding: 3px 8px;
  transition: border-color .1s;
  white-space: nowrap;
}

.oxide-toggle-btn:hover {
  border-color: var(--accent);
}

.oxide-dev-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--bg4);
  overflow: hidden;
  margin-top: 2px;
}

.oxide-dev-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s;
}

/* ── Kategorie-Badges auf Oxide-Namen ────────────────────────────────────── */
.roh-cat-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 4px;
  border-radius: 3px;
  vertical-align: middle;
  text-transform: uppercase;
  opacity: .85;
}

.roh-cat-badge.network {
  background: rgba(108, 143, 255, .18);
  color: #6c8fff;
}

.roh-cat-badge.modifier {
  background: rgba(45, 224, 156, .15);
  color: #2de09c;
}

.roh-cat-badge.colorant {
  background: rgba(255, 148, 70, .18);
  color: #ff9446;
}

.roh-cat-badge.fining {
  background: rgba(255, 200, 68, .15);
  color: #ffc844;
}

.roh-cat-badge.redox {
  background: rgba(220, 80, 80, .15);
  color: var(--error);
}

.roh-cat-badge.intermediate {
  background: rgba(180, 100, 220, .15);
  color: #c46dfa;
}

.roh-cat-badge.other {
  background: rgba(140, 140, 160, .15);
  color: var(--t3);
}

/* ── Δ-Farben in der Oxide-Tabelle ───────────────────────────────────────── */
.diff-pos {
  color: var(--error);
}

.diff-neg {
  color: var(--accent);
}

.diff-zero {
  color: var(--t4);
  font-size: 11px;
}

.diff-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  white-space: nowrap;
}

.diff-badge.diff-pos {
  background: var(--success-subtle);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.diff-badge.diff-neg {
  background: var(--error-subtle);
  color: var(--error);
  border: 1px solid var(--error-border);
}

/* ── Status-Badges ───────────────────────────────────────────────────────── */
.badge-ok {
  background: rgba(45, 224, 156, .18);
  color: var(--success);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  display: inline-block;
}

.badge-warn {
  background: rgba(255, 200, 68, .18);
  color: var(--warn);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  display: inline-block;
}

.badge-error {
  background: rgba(220, 80, 80, .18);
  color: var(--error);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  display: inline-block;
}

/* ── Weitere Kennwerte — Chips ────────────────────────────────────────────── */
.calc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.calc-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-size: 11px;
}

.calc-key {
  color: var(--t3);
  font-size: 10px;
}

.calc-val {
  color: var(--t1);
  font-family: var(--mono);
  font-weight: 700;
}

/* ── Stats-Grid für Physik-Karten ────────────────────────────────────────── */
.stats-grid {
  display: grid;
  gap: 8px;
}

.form-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}