/* ═══════════════════════════════════════════════════════════════════════
   NORDLOOM HUB — UI-KIT

   Die gemeinsamen Grundelemente, EINMAL. Aufgebaut ausschließlich auf den
   Design-Tokens aus public/css/01-base.css :root.

   Gestaltungslinie: Melio (Web). Referenz und Begründung der Muster in
   docs/references/melio-web.md, die verbindlichen Regeln in DESIGN.md.
   Kurzfassung: Rahmen statt Schatten · Radius 8px für Felder und Knöpfe,
   12px für Karten · große luftige Seitentitel · ruhige Tabellen · Label
   über dem Feld.

   REGEL: Neue Buttons/Modals/Felder/Listen nutzen diese Klassen. Seiteneigene
   Namensräume (crm-*, company-*, offer-*, …) bleiben für LAYOUT, nicht für
   Grundelemente. Zweites Vorkommen eines neuen Musters → hierher.

   Diese Datei wird NACH style.css geladen und hat damit die letzte Autorität.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Button ────────────────────────────────────────────────────────────── */

.ui-btn {
  border: 1px solid var(--color-separator);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  min-height: var(--control-h-sm);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ui-btn:hover { background: var(--color-surface-subtle); border-color: var(--color-separator-strong); }
.ui-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.ui-btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }
.ui-btn--danger { color: var(--color-danger-text); border-color: var(--color-separator); }
.ui-btn--danger:hover { background: var(--color-danger-surface); border-color: var(--color-danger-text); color: var(--color-danger-text); }
.ui-btn--ghost { border-color: transparent; background: none; color: var(--color-text-secondary); }
.ui-btn--ghost:hover { background: var(--color-background-hover); border-color: transparent; }
/* Formularhöhe — im Formular sitzt der Knopf neben 40px hohen Feldern. */
.ui-btn--lg { min-height: var(--control-h); padding: 0 18px; }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.ui-btn svg, .ui-btn [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }

/* Reiner Icon-Knopf — bei Melio ein quadratischer Rahmen, kein nacktes Icon. */
.ui-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  padding: 0;
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ui-iconbtn:hover { background: var(--color-surface-subtle); color: var(--color-text); border-color: var(--color-separator-strong); }
.ui-iconbtn svg, .ui-iconbtn [data-lucide] { width: 17px; height: 17px; }
.ui-iconbtn--plain { border-color: transparent; background: none; }
.ui-iconbtn--plain:hover { background: var(--color-background-hover); border-color: transparent; }

/* ── Karte ─────────────────────────────────────────────────────────────── */

.ui-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}

/* Auswahlkarte: Icon links, Titel + Unterzeile, Aktion rechts.
   Melio nutzt sie für Zahlwege; im Hub passt sie für jede Liste aus wenigen
   gleichrangigen Angeboten (Vorlagenwahl, Integrationen, Importwege). */
.ui-selectcard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ui-selectcard + .ui-selectcard { margin-top: 10px; }
a.ui-selectcard, button.ui-selectcard { cursor: pointer; text-decoration: none; border-width: 1px; }
a.ui-selectcard:hover, a.ui-selectcard:hover .ui-selectcard-title { text-decoration: none; }
a.ui-selectcard:hover, button.ui-selectcard:hover { border-color: var(--color-accent); background: var(--color-surface-subtle); }
.ui-selectcard-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-text-tertiary);
}
.ui-selectcard-icon svg, .ui-selectcard-icon [data-lucide] { width: 20px; height: 20px; }
/* `display: block` ist Pflicht, nicht Kosmetik: die Karte wird auch mit
   <span>-Kindern gebaut (settings.html), und als Inline-Elemente stehen Titel
   und Unterzeile dann in EINER Zeile hintereinander — »Benutzer Nutzer, Rollen
   und Zugänge verwalten«. */
.ui-selectcard-main { flex: 1 1 auto; min-width: 0; }
.ui-selectcard-title { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--color-text); }
.ui-selectcard-sub { display: block; font-size: var(--fs-meta); color: var(--color-text-tertiary); margin-top: 2px; }
.ui-selectcard-action { flex-shrink: 0; color: var(--color-accent); font-size: var(--fs-body); font-weight: 500; }

/* ── Seitenkopf ────────────────────────────────────────────────────────── */
/* Melios Signatur: großer Titel mit viel Luft, Aktionen auf derselben Zeile
   rechts. Vorher trug jede Hub-Seite ihre eigene Kopfzeile in eigener Größe. */

.ui-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 32px 0 22px;
}
.ui-page-head-main { min-width: 0; }
.ui-page-title {
  margin: 0;
  font-size: var(--fs-page);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ui-page-sub {
  margin: 6px 0 0;
  font-size: var(--fs-body);
  color: var(--color-text-tertiary);
  max-width: 62ch;
}
.ui-page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
/* Zähler neben dem Titel (»Leads 4«) — bei Melio eine ruhige graue Zahl. */
.ui-page-count {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-text-tertiary);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-pill);
  padding: 1px 10px;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .ui-page-head { padding: 20px 0 16px; }
  :root { --fs-page: 1.5rem; }
  /* Auf dem Handy stehen die Aktionen unter dem Titel und füllen die Breite —
     nebeneinander bleibt von einem Knopf sonst nur der Rahmen übrig. */
  .ui-page-actions { width: 100%; }
  .ui-page-actions > * { flex: 1 1 auto; }
}

/* ── Tabs (zweite Ebene innerhalb einer Seite) ─────────────────────────── */

.ui-tabs {
  display: flex;
  align-items: stretch;
  gap: 26px;
  border-bottom: 1px solid var(--color-separator);
  margin: 0 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-text-tertiary);
  padding: 0 0 11px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.ui-tab:hover { color: var(--color-text); }
.ui-tab.is-active, .ui-tab[aria-selected="true"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

/* ── Werkzeugleiste über einer Liste ───────────────────────────────────── */

.ui-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.ui-toolbar-spacer { flex: 1 1 auto; }

/* Suchfeld mit Lupe RECHTS — so macht es Melio, und es hält das Feld schmal.
   Ein Suchfeld ist so breit, wie eine Suche sein muss (DESIGN.md). */
.ui-search { position: relative; flex: 0 1 260px; min-width: 160px; }
.ui-search > input {
  width: 100%;
  height: var(--control-h-sm);
  padding: 0 34px 0 12px;
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--color-text);
}
.ui-search > input::placeholder { color: var(--color-text-placeholder); }
.ui-search > input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); }
.ui-search-icon {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-placeholder);
  pointer-events: none;
  display: inline-flex;
}
.ui-search-icon svg, .ui-search-icon [data-lucide] { width: 16px; height: 16px; }

/* Filter-Auswahl in der Leiste: sieht aus wie ein Knopf, ist ein select.
   Melio zeigt hier »Filters ▾« — im Hub sind es echte Auswahlfelder, die
   aber dieselbe Form haben müssen wie die Knöpfe daneben. */
.ui-filter {
  height: var(--control-h-sm);
  padding: 0 30px 0 12px;
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  min-width: 0;
}
.ui-filter:hover { border-color: var(--color-separator-strong); }
.ui-filter:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); }

/* ── Tabelle / Liste ──────────────────────────────────────────────────── */
/* Ruhige Liste nach Melio: Kopf klein und grau in NORMALER Schreibweise,
   Zeilen durch Haarlinien getrennt. Kein Kartenrahmen um die Tabelle — die
   Liste ist die Seite, nicht ein Widget darauf. */

.ui-table-wrap { overflow-x: auto; }
.ui-table-caption {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-text-tertiary);
  padding: 0 0 8px;
}
.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.ui-table thead th {
  text-align: left;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-text-tertiary);
  /* Ausdrücklich KEIN uppercase und KEIN letter-spacing: der gesperrte
     Blocksatz in Großbuchstaben war der auffälligste Unterschied zur
     Referenz und macht jede Liste behördlich. */
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 14px;
  background: none;
  border-bottom: 1px solid var(--color-separator);
  white-space: nowrap;
}
.ui-table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--color-separator);
  color: var(--color-text);
  vertical-align: middle;
}
.ui-table tbody tr:hover td { background: var(--color-surface-subtle); }
.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table th:first-child, .ui-table td:first-child { padding-left: 4px; }
.ui-table th:last-child, .ui-table td:last-child { padding-right: 4px; }
.ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table .is-muted { color: var(--color-text-tertiary); }
.ui-table-link { color: var(--color-accent); font-weight: 500; text-decoration: none; }
.ui-table-link:hover { text-decoration: underline; }
/* Zellinhalt aus Avatar + Text, die häufigste erste Spalte im Hub. */
.ui-cell-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-cell-id-main { min-width: 0; }
.ui-cell-id-sub { font-size: var(--fs-meta); color: var(--color-text-tertiary); }
.ui-avatar {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-separator);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-micro); font-weight: 600; color: var(--color-text-tertiary);
  overflow: hidden;
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── ⋮-Menü einer Zeile ───────────────────────────────────────────────── */
/* Ersetzt die Reihen blauer Wörter (»Bearbeiten Löschen«) in Tabellen. */

.ui-menu-wrap { position: relative; display: inline-flex; }
.ui-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 60;
  min-width: 176px;
  padding: 6px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
}
.ui-menu--up { top: auto; bottom: calc(100% + 4px); }
.ui-menu button, .ui-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ui-menu button:hover, .ui-menu a:hover { background: var(--color-surface-subtle); }
.ui-menu svg, .ui-menu [data-lucide] { width: 15px; height: 15px; color: var(--color-text-tertiary); }
.ui-menu-sep { height: 1px; margin: 5px 4px; background: var(--color-separator); }
.ui-menu-danger { color: var(--color-danger-text) !important; }
.ui-menu-danger svg, .ui-menu-danger [data-lucide] { color: var(--color-danger-text); }

/* ── Formularfeld (Label über Eingabe) ─────────────────────────────────── */

.ui-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0; /* Flex-/Grid-Kind: sonst schrumpft die Spalte nie unter Inhaltsbreite */
  font-size: var(--fs-meta);
  color: var(--color-text-tertiary);
  font-weight: 500;
}
.ui-field > input, .ui-field > select, .ui-field > textarea { font-weight: 400; color: var(--color-text); }
.ui-field-hint { font-size: var(--fs-meta); color: var(--color-text-tertiary); font-weight: 400; }
.ui-field-error { font-size: var(--fs-meta); color: var(--color-danger-text); font-weight: 500; }

/* Lesezustand eines Formulars als Definitionsliste. Melio zeigt gespeicherte
   Angaben NICHT als gesperrtes Eingabefeld, sondern als Label über Wert — ein
   graues Feld sieht kaputt aus, eine Definitionszeile gelesen. */
.ui-defs { display: grid; gap: 16px; margin: 0; }
.ui-defs--2 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.ui-def { min-width: 0; }
.ui-def-label { font-size: var(--fs-meta); color: var(--color-text-tertiary); font-weight: 500; }
.ui-def-value { font-size: var(--fs-body); color: var(--color-text); margin-top: 2px; overflow-wrap: anywhere; }
.ui-def-value:empty::after { content: '—'; color: var(--color-text-placeholder); }

/* ── Abschnitt innerhalb einer Seite ──────────────────────────────────── */

.ui-section { margin: 0 0 28px; }
.ui-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.ui-section-title { margin: 0; font-size: var(--fs-section); font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }
.ui-section-sub { margin: 4px 0 0; font-size: var(--fs-body); color: var(--color-text-tertiary); max-width: 68ch; }

/* ── Banner ───────────────────────────────────────────────────────────── */

.ui-banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  margin: 0 0 16px;
}
.ui-banner-icon { flex-shrink: 0; display: inline-flex; margin-top: 1px; }
.ui-banner-icon svg, .ui-banner-icon [data-lucide] { width: 17px; height: 17px; }
.ui-banner-main { flex: 1 1 auto; min-width: 0; }
.ui-banner-title { font-weight: 600; color: var(--color-text); }
.ui-banner-close { flex-shrink: 0; }
.ui-banner--info    { background: var(--color-accent-subtle); }
.ui-banner--info    .ui-banner-icon { color: var(--color-accent); }
.ui-banner--success { background: var(--pill-customer-bg); color: var(--pill-customer-text); }
.ui-banner--success .ui-banner-title { color: var(--pill-customer-text); }
.ui-banner--warn    { background: var(--pill-qualified-bg); color: var(--pill-qualified-text); }
.ui-banner--warn    .ui-banner-title { color: var(--pill-qualified-text); }
.ui-banner--danger  { background: var(--color-danger-surface); color: var(--color-danger-text-strong); }
.ui-banner--danger  .ui-banner-title { color: var(--color-danger-text-strong); }

/* ── Leerzustand ──────────────────────────────────────────────────────── */
/* Ein grauer Halbsatz in einer leeren Tabelle sagt nicht, was zu tun ist. */

.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 56px 20px;
  color: var(--color-text-tertiary);
}
.ui-empty-icon { color: var(--color-separator-strong); margin-bottom: 4px; }
.ui-empty-icon svg, .ui-empty-icon [data-lucide] { width: 30px; height: 30px; }
.ui-empty-title { font-size: var(--fs-card); font-weight: 600; color: var(--color-text); }
.ui-empty-text { font-size: var(--fs-body); max-width: 44ch; }
.ui-empty-action { margin-top: 10px; }

/* ── Mehrfachauswahl-Fußleiste ────────────────────────────────────────── */

.ui-bulkbar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 18px;
  margin-top: 12px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-toast-bg);
  color: #fff;
  font-size: var(--fs-body);
  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.16);
}
.ui-bulkbar-info { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; color: rgba(255,255,255,0.72); }
.ui-bulkbar-info strong { color: #fff; font-weight: 600; }
.ui-bulkbar .ui-btn { background: transparent; border-color: rgba(255,255,255,0.28); color: #fff; }
.ui-bulkbar .ui-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.44); }
.ui-bulkbar .ui-btn--primary { background: var(--color-accent); border-color: var(--color-accent); }

/* ── Modal ─────────────────────────────────────────────────────────────── */

.ui-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* Während des Ausblendens liegt das Modal noch da (die Transition läuft) —
   es darf in dieser Zeit keine Klicks mehr abfangen. Sichtbar wird ein Modal
   ausschließlich über NLModal, das dabei .is-open setzt. */
.ui-modal:not(.is-open) { pointer-events: none; }
/* Der Backdrop liegt absolut über der ganzen Fläche — alles andere im Modal
   braucht einen eigenen Stapelkontext, sonst liegt es darunter und wirkt
   ausgegraut (genau so beim ersten Umbau des Aufgaben-Modals passiert). */
.ui-modal > :not(.ui-modal-backdrop) { position: relative; }
.ui-modal-backdrop { position: absolute; inset: 0; background: var(--color-overlay); }
.ui-modal-card {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  /* Ein Modal ist die eine Stelle, an der Elevation richtig ist: es schwebt
     wirklich über der Seite. */
  box-shadow: var(--shadow-overlay);
  padding: 22px 24px;
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 86vh;
  overflow-y: auto;
}
.ui-modal-card--wide { width: min(620px, 100%); }

/* Kopfzeile mit X als Rahmen-Quadrat rechts (Melio-Muster). */
.ui-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ui-modal-head h2, .ui-modal-head h3 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.ui-modal-lead { margin: 0 0 6px; font-size: var(--fs-body); color: var(--color-text-tertiary); }

/* Slideover — dieselbe Mechanik (NLModal), andere Erscheinung.
   Muster-Regel: Formulare und Bestätigungen = zentriertes Modal ·
   Detailansicht zum Durcharbeiten einer Liste = Slideover.
   Die Zustandsklasse .is-open setzt NLModal (nicht aria-hidden). */
.ui-modal--slideover {
  opacity: 0;
  transition: opacity var(--transition-fast);
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  /* Das Panel wartet per translateX(100%) RECHTS außerhalb — ohne Clip zählt
     die transformierte Box zur Scrollbreite und die Seite läuft auf 390px über. */
  overflow-x: hidden;
}
.ui-modal-card--slideover {
  border-radius: 0;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  border-left: 1px solid var(--color-separator);
  width: min(560px, 100%);
  height: 100%;
  max-height: none;
  padding: 0;
  gap: 0;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}
.ui-modal--slideover.is-open { opacity: 1; }
.ui-modal--slideover.is-open .ui-modal-card--slideover { transform: translateX(0); }

/* Altbestand: die `.project-modal`-Familie ist dieselbe Variante mit eigenem
   Innen-Namensraum (Header/Body/Field/Actions in public/css/01-base.css).
   Migrierte Seiten tragen außen `.ui-modal.ui-modal--slideover` und behalten
   innen `.project-modal` — die Optik bleibt damit unverändert, nur die
   Mechanik kommt aus NLModal. Neue Slideover nehmen `.ui-modal-card--slideover`. */
.ui-modal--slideover.is-open .project-modal { transform: translateX(0); }
.ui-modal--slideover.is-open .project-modal-body,
.ui-modal--slideover.is-open .project-modal-form { animation: modal-in 0.22s ease both; }
.ui-modal-card h2 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.ui-modal-card > label { font-size: var(--fs-meta); color: var(--color-text-tertiary); font-weight: 500; }
.ui-modal-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.ui-modal-row label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: var(--fs-meta); color: var(--color-text-tertiary); font-weight: 500;
  min-width: 0;
}
/* Melio setzt Abbrechen und Speichern an die Ränder der Fußzeile, mit einer
   Trennlinie darüber — der Rand markiert das Ende des Formulars. */
.ui-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--color-separator);
}
.ui-modal-actions--split { justify-content: space-between; }
.ui-modal-note {
  margin: 0; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--color-accent-subtle); color: var(--color-text-secondary);
  font-size: var(--fs-meta); line-height: 1.5;
}

/* ── Pille (Status/Kategorie) ──────────────────────────────────────────── */
/* Flache Tint-Fläche ohne Rahmen und ohne Gradient (siehe Token-Block). */

.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}
.ui-pill--round { border-radius: var(--radius-pill); }
.ui-pill--lead      { background: var(--pill-lead-bg);       color: var(--pill-lead-text); }
.ui-pill--qualified { background: var(--pill-qualified-bg);  color: var(--pill-qualified-text); }
.ui-pill--won,
.ui-pill--customer  { background: var(--pill-customer-bg);   color: var(--pill-customer-text); }
.ui-pill--partner   { background: var(--pill-partner-bg);    color: var(--pill-partner-text); }
.ui-pill--lost      { background: var(--pill-lost-bg);       color: var(--pill-lost-text); }
.ui-pill--accent    { background: var(--color-accent-subtle); color: var(--color-accent); }
/* Punkt vor dem Text, wie in Melios Status-Spalte. */
.ui-pill-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; flex-shrink: 0; }

/* Eigene display-Regeln dürfen das hidden-Attribut nicht schlagen — derselbe
   Fallstrick wie bei den process- und offer-Namensräumen (siehe CLAUDE.md).
   Achtung: „stern-slash" im Kommentartext würde den Kommentar vorzeitig
   beenden und die Folgeregel ungültig machen (genau so passiert, 07.08.2026). */
.ui-modal[hidden],
.ui-modal-row[hidden],
.ui-modal-note[hidden],
.ui-banner[hidden],
.ui-menu[hidden],
.ui-bulkbar[hidden],
.ui-empty[hidden],
.ui-tabs[hidden],
.ui-toolbar[hidden],
.ui-section[hidden],
[hidden].ui-btn,
[hidden].ui-iconbtn,
[hidden].ui-pill,
[hidden].ui-selectcard,
[hidden].ui-card { display: none !important; }