/* Vorschlag als Knopf (AP 5.1, Wertsuche der Watchlist): sieht aus wie der Link-Vorschlag, schickt
   aber ein Formular ab. Ohne diese Regel trüge er Rahmen, Grund und Schrift des Browsers. */
button.autocomplete__option {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

/* Dialog (DESIGN 5 „Dialog“, AP 5.1): schwebende Karte über einem abgedunkelten Grund, mittig,
   höchstens 440 px breit; auf dem Telefon mit 16 px Rand. Fokusfalle und Esc bringt <dialog> mit
   showModal() mit (js/dialog.js). */
.dialog {
  width: min(440px, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-4));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--gradient-card), var(--surface-2);
  box-shadow: var(--shadow-float);
  color: var(--text-1);
}

.dialog::backdrop {
  background: rgba(8, 8, 10, 0.72);
}

.dialog__body {
  padding: var(--space-5);
}

/* Knopf „Zur Watchlist hinzufügen“ (F-CHT-07): Ghost-Knopf mit Stern; kompakt nur das Symbol als
   runder 32-px-Knopf – in der Tabellenzeile und in der Chart-Kachel liegt er über dem Link, der
   Zeile bzw. Kachel abdeckt (wie die Notiz, `cell-note`). */
.watchlist-add {
  gap: var(--space-2);
}

/* Gefüllter Stern (Ä-34): Der Wert steht in mindestens einer eigenen Watchlist – Stern in
   Bernstein gefüllt, Beschriftung „In Watchlist (n)“ (Farbe nie allein: Füllung und Text). */
.watchlist-add.is-held .icon {
  color: var(--accent);
  fill: currentcolor;
}

.price-alarm-add {
  gap: var(--space-2);
}

.watchlist-add--icon {
  position: relative;
  z-index: 2;
  width: 32px;
  padding: 0;
  border-radius: 50%;
}

/* Notiz-Symbol (Ä-40): runder 32-px-Ghost-Knopf mit „sticky-note“ in der Aktionsspalte der
   Watchlist, über dem Link der Zeile. Gibt es eine Notiz, ist das Symbol Bernstein gefüllt
   (is-noted) und heißt „Notiz zu … öffnen“, sonst leer „… anlegen“ – Farbe nie allein: Füllung
   und Beschriftung (Tooltip und Bildschirmleser). */
.note-button {
  position: relative;
  z-index: 2;
  width: 32px;
  padding: 0;
  border-radius: 50%;
}

.note-button.is-noted .icon {
  color: var(--accent);
  fill: currentcolor;
}

/* Dialog „Notiz“ (Ä-40): Textfeld über die Breite, darunter Hinweis links und Zähler rechts, dann
   „Löschen“ links, „Abbrechen“ und „Speichern“ rechts. */
.note-form .field textarea {
  min-height: 168px;
  line-height: 1.45;
}

.note-form__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.note-form__meta .field__help {
  margin: 0;
}

.note-form__count {
  flex: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.note-form__count.is-over {
  color: var(--neg-soft);
}

.note-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.note-form__delete {
  margin-right: auto;
  color: var(--neg-soft);
}

/* Rückfrage vor dem Löschen (Ä-40): an Stelle der Knopfreihe, gleiche Höhe – links die Frage in
   --neg-soft, rechts „Abbrechen“ (sekundär, trägt den Fokus) und „Ja, löschen“ (Gefahr). */
.note-form__confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.note-form__question {
  margin: 0 auto 0 0;
  color: var(--neg-soft);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Inhalt eines Dialogs: Kopf mit Titel und „Schließen“, Teile untereinander, Fuß mit Link
   (watchlists/_add_dialog.html, alerts/_price_dialog.html). */
.dialog__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.dialog__head .card__subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.watchlist-dialog__lists {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-subtle);
}

.watchlist-dialog__list {
  padding: 2px 0;
  border-bottom: 1px solid var(--border-subtle);
}

/* Umschalter je Watchlist (Ä-34): Die ganze Zeile ist ein Knopf mit aria-pressed – links ein
   Kästchen (20 px, Rand --border-strong; gesetzt Bernstein mit dunklem Häkchen wie die
   Häkchen-Tabelle), dann der Name, rechts die Anzahl der Werte in --text-2. Ein Klick wirkt
   sofort (HTMX), der Fokus bleibt am Knopf; während der Anfrage wird die Zeile blass. */
.watchlist-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--r-input);
  background: none;
  color: var(--text-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--ease);
}

.watchlist-toggle:hover {
  background: var(--surface-pill);
}

.htmx-request > .watchlist-toggle {
  opacity: 0.6;
}

.watchlist-toggle__box {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  color: transparent;
}

.watchlist-toggle__box .icon {
  stroke-width: 2.5;
}

.watchlist-toggle[aria-pressed="true"] .watchlist-toggle__box {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-inverse);
}

.watchlist-toggle__name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.watchlist-toggle__count {
  flex: none;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* Ä-81 – im Dialog des Sterns (auch auf Chart- und Scan-Seite, daher hier): Untersektion beim Aufnehmen wählen bzw. sehen, in welcher der Wert steht. */
.watchlist-dialog__section {
  margin: 0 0 var(--space-2);
  padding-left: calc(20px + var(--space-3) + var(--space-2));
  color: var(--text-2);
  font-size: 0.8125rem;
}

.watchlist-dialog__section select {
  max-width: 100%;
}

.watchlist-dialog__new {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dialog__foot {
  margin: 0;
  font-size: 0.875rem;
}

/* Formular im Dialog (alerts/_price_dialog.html): Felder untereinander, Knopf über die Breite. */
.dialog__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dialog__form .field-set .segmented {
  flex-wrap: wrap;
}

/* Rückfrage vor dem Löschen (Ä-84, accounts/admin/_user_delete.html, _invitation_delete.html):
   „Abbrechen“ und der Knopf rechts nebeneinander, darüber knapp, was verschwindet. Als Seite ohne
   JavaScript (accounts/admin/confirm.html) höchstens so breit wie der Dialog. */
.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.dialog__actions form {
  display: contents;
}

.confirm-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.875rem;
}

.confirm-list__title {
  margin: 0;
  color: var(--text-1);
  font-weight: 600;
}

.confirm-list ul {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--text-2);
}

.confirm-list .muted {
  margin: 0;
}

.confirm-page {
  max-width: 560px;
}

/* Aktive Preis-Alarme eines Werts über dem Formular (AP 5.3): kompakte Liste mit Richtung,
   Marke und „einmalig/wiederkehrend“ rechts. */
.price-marks__title {
  margin: 0 0 var(--space-2);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.price-marks__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-subtle);
}

.price-marks__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
  border-bottom: 1px solid var(--border-subtle);
  font-variant-numeric: tabular-nums;
}

.price-marks__item > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Warnung unter „Melden“, wenn „nur, wenn in …“ den Preis-Alarm still stellte (Review AP 5.3). */
.price-reach__warning {
  margin-top: var(--space-2);
}

/* Fuß der Chart-Kachel (AP 5.1): Notiz links (gekürzt), „Zur Watchlist hinzufügen“ rechts. */
.chart-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.chart-tile__foot .chart-tile__note {
  flex: 1;
  min-width: 0;
}

.chart-tile__foot .watchlist-add {
  margin-left: auto;
}

/* Dialog „Watchlists exportieren“ (Ä-60): Häkchen je Watchlist (bei vielen Listen scrollt nur
   die Liste), „Alle auswählen/abwählen“ als kleine Ghost-Knöpfe, Download und „Basic Export“
   nebeneinander, darunter das Textfeld mit Zeichenzahl und „Kopieren“ rechts. */
.export-form__chosen,
.export-form__count {
  margin-left: var(--space-1);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.export-form__all {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.export-form__lists {
  max-height: 240px;
  overflow-y: auto;
}

.export-form__notes .field__help,
.export-form > .field__help {
  margin: 0;
}

.export-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.export-form__basic textarea {
  min-height: 168px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  line-height: 1.45;
}

.export-form__copy {
  display: flex;
  justify-content: flex-end;
}