/* moco_review.css — Eingangsrechnungs-Review (Surface 'rechnungen').
   Hero, Cards, Tabellen, Badges kommen aus dashboard.css / master-ai-template.css.
   Hier nur surface-eigene Bausteine — ausschliesslich Tokens aus tokens.css,
   keine Hardcodes (Golden Rule #33). */

/* ── Fall-Karten ─────────────────────────────────────────────────────────── */
.mr-case {
  margin: 0 0 var(--sp-3);
  padding: 0;
  overflow: hidden;
}
.mr-case-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--tx-0);
}
.mr-case-head:hover { background: var(--bg-el); }
.mr-case-head .badge { flex: 0 0 auto; }
.mr-case-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mr-case-meta {
  flex: 0 0 auto;
  color: var(--tx-2);
  font-size: var(--t-sm);
}
.mr-case--open .mr-case-head { border-bottom: 1px solid var(--bdr-def); }
.mr-case-body {
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Frage der Pipeline — der wichtigste Text, deutlich abgesetzt. */
.mr-question {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--inf-bd);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--inf-bg);
  color: var(--tx-0);
  line-height: 1.55;
  max-width: 860px;
}
.mr-error {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--er-bd);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--er-bg);
  color: var(--tx-1);
  font-size: var(--t-sm);
  line-height: 1.5;
  max-width: 860px;
  word-break: break-word;
}
.mr-resolved { margin: 0; color: var(--tx-2); font-size: var(--t-sm); }

/* ── Kontext/Vorschlag als Key-Value-Bloecke ─────────────────────────────── */
.mr-kv { max-width: 860px; }
.mr-kv-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tx-1);
  text-transform: none;
  letter-spacing: 0;
}
.mr-kv-tbl { width: 100%; }
.mr-kv-tbl th.mr-kv-key {
  width: 220px;
  font-weight: 500;
  color: var(--tx-2);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-sm);
  vertical-align: top;
  padding: var(--sp-2) var(--sp-3);
}
.mr-kv-tbl td {
  padding: var(--sp-2) var(--sp-3);
  line-height: 1.5;
  word-break: break-word;
}
.mr-kv-code {
  font-size: var(--t-sm);
  color: var(--tx-1);
  word-break: break-all;
}

/* ── Kandidaten-Auswahl (Zahlungs-Zuordnung) ─────────────────────────────── */
.mr-cands { max-width: 860px; }
.mr-cand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2-5) var(--sp-3);
  border: 1px solid var(--bdr-def);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
  cursor: pointer;
}
.mr-cand:hover { background: var(--bg-el); }
.mr-cand input[type="radio"] { flex: 0 0 auto; margin: 0; align-self: center; }
.mr-cand--on { border-color: var(--bdr-str); background: var(--bg-el); }
.mr-cand-supplier { font-weight: 600; color: var(--tx-0); }
.mr-cand-title { color: var(--tx-1); }
.mr-cand-meta { margin-left: auto; color: var(--tx-2); font-size: var(--t-sm); white-space: nowrap; }

/* ── Entscheidungs-Leiste ────────────────────────────────────────────────── */
.mr-decide {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--bdr-def);
  border-radius: var(--r-md);
  background: var(--bg-el);
  max-width: 860px;
}
.mr-decide-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-end;
}
.mr-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 200px;
}
.mr-field span {
  font-size: var(--t-sm);
  color: var(--tx-2);
}
.mr-field input,
.mr-field select,
.mr-note {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--bdr-def);
  border-radius: var(--r-sm);
  background: var(--bg-0);
  color: var(--tx-0);
  font: inherit;
  font-size: var(--t-sm);
}
.mr-field input:focus,
.mr-field select:focus,
.mr-note:focus { outline: 2px solid var(--bdr-str); outline-offset: 1px; }
.mr-note { flex: 1 1 260px; }
.mr-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-sm);
  color: var(--tx-1);
  cursor: pointer;
  padding-bottom: var(--sp-2);
}
.mr-check input { margin: 0; }

/* ── "Als Regel merken" -- Vorschlags-Vorschau (Verarbeitungsregeln Phase 2,
   Markus 20.08.2026): klar abgesetzt von der Entscheidungs-Leiste, damit
   sichtbar bleibt, dass hier etwas Dauerhaftes bestaetigt wird. ────────── */
.mr-rule-proposal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-top: var(--sp-3);
  border: 1px solid var(--bdr-str);
  border-radius: var(--r-md);
  background: var(--bg-1, var(--bg-el));
  max-width: 860px;
}
.mr-rule-proposal-text {
  margin: 0;
  color: var(--tx-0);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.mr-rule-proposal-none { color: var(--tx-2); }

/* ── Leer-/Fehlerzustaende ───────────────────────────────────────────────── */
.mr-empty {
  padding: var(--sp-xl) var(--sp-4);
  text-align: center;
  color: var(--tx-2);
}
.mr-error-card {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--er-bd);
  background: var(--er-bg);
  color: var(--tx-1);
}

/* ── Bank-Tabellen (Konto ohne Beleg / Regeln / Laeufe) ──────────────────── */
.mr-banktext {
  max-width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tx-1);
}
.mr-ignore-editor-row td { background: var(--bg-el); }
.mr-rule-actions { white-space: nowrap; }
.mr-rule-actions .btn { margin-left: var(--sp-1); }
.mr-run-clickable { cursor: pointer; }
.mr-run-clickable:hover td { background: var(--bg-el); }
.mr-run-report { color: var(--tx-2); font-size: var(--t-sm); }
.mr-run-errors {
  margin: var(--sp-2) 0;
  padding-left: var(--sp-lg);
  color: var(--tx-1);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* Abstand zwischen Hero und erstem Abschnitt (klebt sonst am Header). */
.page-wide > .dash-hero-quiet { margin-bottom: var(--sp-lg); }
.page-wide > .dash-section + .dash-section { margin-top: var(--sp-xl); }