/* Combobox — searchable <select> replacement (see scripts/main.js `combobox` component) */
/* <ff-combobox> ist ein reiner Marker: main.js füllt vor Alpines initTree das
   gemeinsame Markup hinein, statt es zehnmal ins HTML zu schreiben. */
.combobox { display: block; position: relative; min-width: 240px; }
.combobox-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.4;
  padding: .55rem .75rem;
  cursor: pointer;
}
.combobox-trigger:hover:not(:disabled) { background: var(--surface); }
.combobox-trigger:focus-visible,
.combobox-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.combobox-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox-value.placeholder { color: var(--muted); }
.combobox-caret { flex: none; color: var(--muted); font-size: .7rem; transition: transform .15s ease; }
.combobox-trigger[aria-expanded="true"] .combobox-caret { transform: rotate(180deg); }

.combobox-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: .35rem;
  min-width: 240px;
}
.combobox-search { width: 100%; margin: 0 0 .35rem; font-size: .9rem; }
.combobox-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.combobox-option {
  padding: .4rem .55rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combobox-option.active { background: var(--surface-2); }
.combobox-option.selected { color: var(--brand); font-weight: 600; }
.combobox-empty { padding: .4rem .55rem; color: var(--muted); font-size: .85rem; }

/* Status badges (see design.md §5). Jede Marke trägt Text und Fläche aus DERSELBEN
   Familie — die Fehlermarke lag bis 2026-08-11 auf `--brand-soft`, was nur solange
   unauffällig war, wie `--error` bitgleich `--brand` war. */
.badge { display: inline-block; border-radius: 999px; padding: .15rem .55rem; font-size: .8rem; font-weight: 600; }
.badge.success { color: var(--success); background: rgba(30, 142, 62, .1); }
.badge.warning { color: var(--warning); background: rgba(184, 134, 11, .12); }
.badge.error { color: var(--error); background: var(--error-soft); }

/* Zwei Sorten Zeilenaktionen. `.row-actions` sind beschriftete Knöpfe (Webhook-Card):
   sie dürfen umbrechen, weil sie breit sind. `.icon-actions` sind die Icon-Knöpfe der
   Stammdaten-Tabellen — dort hat eine Zeile bis zu drei Aktionen, und ausgeschrieben
   („JETZT SYNCHRONISIEREN") verdrängen sie die Daten, um die es in der Zeile geht.
   Die Bedeutung steckt trotzdem nie allein im Bild: title + aria-label stehen am
   Knopf, der Fokusring bleibt sichtbar (design.md §5/§6). */
.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
/* `nowrap` ist hier tragend: die Spalte ist auf ihre Mindestbreite geschrumpft
   (.col-actions), und mit `wrap` wäre diese Mindestbreite ein einziges Icon — die
   drei stünden untereinander und die Zeile würde dreimal so hoch. */
.icon-actions { display: flex; align-items: center; gap: .25rem; flex-wrap: nowrap; }
.col-actions { width: 1%; white-space: nowrap; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  background: none; border: 1px solid transparent;
  color: var(--muted);
}
.icon-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-2); color: var(--fg); }
.icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Entfernen ist die einzige zerstörende Zeilenaktion — beim Überfahren durchgehend in
   der Fehlerfarbe, Rahmen und Fläche eingeschlossen. Der Rahmen war `--brand`, was
   dieselbe Bewegung halb als Primäraktion und halb als Warnung malte (unsichtbar,
   solange `--error` = `--brand` war). */
.icon-btn.danger:hover:not(:disabled) { background: var(--error-soft); border-color: var(--error); color: var(--error); }
/* Die Zeile, die gerade im Formular darunter liegt — sonst ist nicht erkennbar,
   was man bearbeitet. Muss `tbody tr:hover` aus tables.css schlagen: gleiche
   Spezifität, aber diese Datei kommt später im Cascade (index.html). */
tbody tr.is-editing, tbody tr.is-editing:hover { background: var(--brand-soft); }

/* Strichzeichnungen, die die Textfarbe erben — so färbt .icon-btn.danger:hover
   Rahmen, Text und Icon in einem. */
.icon { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Der <symbol>-Vorrat selbst wird nie gezeichnet, nur per <use> referenziert. */
.icon-defs { display: none; }
.webhook-events { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .2rem 0 .3rem; }
/* Scope-Auswahl der Bexio-Verbindung: eine Zeile je Berechtigung, untereinander. Nicht
   die umbrechende Reihe von .webhook-events — dort steht neben dem Kästchen ein blosser
   Event-Name, hier ein Satz, der erklärt, wofür das Recht gebraucht wird. */
.scope-list { display: grid; gap: .5rem; margin: .2rem 0 .3rem; }
.scope-list .checkbox-inline { align-items: flex-start; }
.scope-list small { display: block; }
.scope-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.receiver {
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--surface-2); padding: .75rem .9rem; margin-bottom: 1rem;
}
.receiver-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
/* Gleiche Titelspalte wie die Formulare darunter (tokens.css). */
.receiver-row > span:first-child { flex: 0 0 var(--form-label-col); }
.receiver-row .secret-value { flex: 1 1 18rem; margin-bottom: 0; }
.receiver .settings-form { margin-top: .5rem; }
.card h4 { margin: 1.25rem 0 .5rem; font-size: .95rem; }
.secret-reveal {
  border: 1px solid var(--brand); border-radius: var(--radius);
  background: var(--brand-soft); padding: .75rem .9rem; margin-bottom: 1rem;
}
.secret-reveal p { margin: 0 0 .5rem; }
.secret-value {
  display: block; word-break: break-all; user-select: all;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); padding: .5rem .6rem; margin-bottom: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem;
}