/*
 * Datentabellen-Stil — abgeleitet von der Bank-Tabelle als Master.
 *
 * Layout, Spacing und Borders bleiben in Tailwind-Klassen direkt am Markup
 * (siehe plans/separate_pages_migration.md, Bank-Tabelle als Master-Style).
 * Hier nur die semantischen Status-Pills und ein paar Helper, die in Tailwind
 * nicht idiomatisch ausgedrückt werden können oder sich sonst über alle
 * Tabellen duplizieren würden.
 */

/* ─── Status-Pills ─────────────────────────────────────────────────── */
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.status-pill--offen   { background: #fef3c7; color: #92400e; }  /* yellow-100 / yellow-800 */
.status-pill--matched { background: #d1fae5; color: #065f46; }  /* green-100 / green-700 */
.status-pill--gebucht { background: #dbeafe; color: #1e40af; }  /* blue-100 / blue-800 */
.status-pill--fertig  { background: #dbeafe; color: #1e40af; }  /* alias, semantisch identisch */
.status-pill--fehler  { background: #ffe4e6; color: #9f1239; }  /* rose-100 / rose-700 */
.status-pill--info    { background: #e0e7ff; color: #3730a3; }  /* indigo-100 / indigo-800 */

/* Confidence-Pills nutzen dieselbe Optik, gestaffelt nach Wert. */
.status-pill--conf-high { background: #d1fae5; color: #065f46; }
.status-pill--conf-mid  { background: #fef3c7; color: #92400e; }
.status-pill--conf-low  { background: #ffe4e6; color: #9f1239; }

/* ─── Numerik-Spalten ──────────────────────────────────────────────── */
.cell-num {
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.cell-mono {
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  white-space: nowrap;
}

/* ─── Row-Highlight nach Inline-/Modal-Save ────────────────────────────
 * Eigene Klasse statt Tailwind-Utility, weil hover:bg-* mit gleicher
 * Spezifitaet kollidieren kann. !important garantiert, dass das Flash
 * sichtbar ist, egal welche Tailwind-Reihenfolge die CDN ausspielt.
 */
.row-flash {
  background-color: #dbeafe !important; /* blue-100 */
  transition: background-color 0.4s ease;
}

/* ─── Sortierbarer Spalten-Header ──────────────────────────────────── */
.sort-header {
  cursor: pointer;
  user-select: none;
}
.sort-header:hover {
  color: #111827; /* gray-900 */
}
.sort-header .sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: #9ca3af; /* gray-400 */
}
.sort-header.sort-active .sort-indicator {
  color: #2563eb; /* blue-600 */
}