/* ============================================================
   TradingApp - gemeinsames Layout
   Auth-Teil uebernommen aus dem GPSLogger (logger.hf-clan.de),
   damit beide Anmeldemasken gleich aussehen.
   ============================================================ */

:root {
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* dynamische, aber gedeckelte Schriftgroesse */
  --ui-font-size: clamp(0.80rem, 0.55rem + 1.1vw, 1.05rem);

  --topbar-bg: #2c3e50;
  --topbar-fg: #ffffff;
  --topbar-accent: #34495e;
  --topbar-pad-y: clamp(0.30rem, 1.0vw, 0.55rem);
  --topbar-pad-x: clamp(0.50rem, 2.0vw, 1.00rem);
  --topbar-gap: clamp(0.40rem, 1.5vw, 0.90rem);

  /* Raender. Als Variablen, weil sie an mehreren Stellen gebraucht werden - die
     scrollenden Karten reichen ihren oberen Abstand an die Ueberschrift weiter.
     Stuenden die Werte getrennt da, liefen sie beim naechsten Nachjustieren auseinander.

     Ein Satz Werte fuer ALLE Seiten: vorher hatten die Tabellenseiten volle Breite und
     einen schmalen Rand, die uebrigen eine Lesebreite von 80rem und einen breiten. Beim
     Wechsel sprang dadurch die weisse Flaeche, und das faellt mehr auf als der gewonnene
     Rand nuetzt. Schmal ist der Standard, weil die breiteste Tabelle jeden Pixel braucht. */
  --page-pad-y: 0.8rem;
  --page-pad-x: clamp(0.6rem, 1vw, 1rem);
  --card-pad-y: clamp(0.9rem, 1.5vw, 1.2rem);
  --card-pad-x: clamp(0.7rem, 1.5vw, 1.2rem);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
}

body {
  display: flex;
  flex-direction: column;
}

/* ---------- Auth-/Info-Seiten (Login, Fehler, Logout) ---------- */
.auth-page {
  align-items: center;          /* horizontal zentrieren */
  justify-content: center;      /* vertikal zentrieren */
  min-height: 100%;
  padding: 1rem;
  background: var(--topbar-bg); /* grau wie die Menuezeile */
}
.auth-box {
  width: 100%;
  max-width: 22rem;
  box-sizing: border-box;
  padding: clamp(1.25rem, 4vw, 2rem);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  text-align: center;
}
.auth-box h1 {
  margin: 0 0 1rem;
  color: var(--topbar-bg);
  font-size: clamp(1.1rem, 0.9rem + 1.2vw, 1.5rem);
}
.auth-box p { margin: 0 0 1.2rem; color: #333; font-size: var(--ui-font-size); }
.auth-box form { display: flex; flex-direction: column; gap: 0.85rem; text-align: left; }
.auth-field { display: flex; flex-direction: column; gap: 0.3rem; }
.auth-box label { font-weight: 600; font-size: var(--ui-font-size); color: #333; }
.auth-box input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6em 0.7em;
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  border: 1px solid #cbd2d9;
  border-radius: 6px;
}
.auth-box input:focus {
  outline: none;
  border-color: var(--topbar-accent);
  box-shadow: 0 0 0 2px rgba(52, 73, 94, .35);
}
.auth-btn,
.auth-box button {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.6em 1.1em;
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  font-weight: 600;
  text-decoration: none;
  color: var(--topbar-fg);
  background: var(--topbar-bg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.auth-btn:hover,
.auth-box button:hover { background: var(--topbar-accent); }
.auth-error { margin: 0 0 1rem; color: #b71c1c; font-weight: 600; font-size: var(--ui-font-size); }
.auth-box--error h1 { color: #b71c1c; }


/* ---------- Topbar / Menue ---------- */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* nowrap statt wrap: eine zweizeilige Menueleiste verschiebt bei jedem Seitenwechsel
     den Inhalt darunter. Was nicht hineinpasst, raeumt topbar.js in die Klappe. */
  flex-wrap: nowrap;
  gap: var(--topbar-gap);
  padding: var(--topbar-pad-y) var(--topbar-pad-x);
  background: var(--topbar-bg);
  color: var(--topbar-fg);
}

/* min-width:0 ist noetig, damit das Flex-Kind ueberhaupt schmaler werden darf als sein
   Inhalt - sonst waere scrollWidth immer gleich clientWidth und nichts wanderte je in
   die Klappe. overflow:hidden verhindert, dass es waehrend des Messens kurz herausragt. */
.topbar__nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--topbar-gap);
  overflow: hidden;
}

.topbar a {
  color: var(--topbar-fg);
  text-decoration: none;
  font-weight: 600;
  padding: 0.35em 0.7em;
  border-radius: 6px;
  white-space: nowrap;
}
.topbar a:hover,
.topbar a:focus,
.topbar a.is-active { background: var(--topbar-accent); }

/* ---------- Hamburger und Klappe ---------- */
.topbar__more { position: relative; flex: 0 0 auto; margin-left: auto; }

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2.4rem;
  height: 2.1rem;
  padding: 0 0.45rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 6px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 2px;
  background: var(--topbar-fg);
  border-radius: 1px;
}
.hamburger:hover,
.hamburger[aria-expanded="true"] { background: var(--topbar-accent); }

.menupanel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 30;
  min-width: 12rem;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--topbar-bg);
  border: 1px solid var(--topbar-accent);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.menupanel > div { display: flex; flex-direction: column; gap: 0.15rem; }
.menupanel a { display: block; padding: 0.5em 0.8em; }

/* Ohne diese Zeile stuende die Klappe immer offen: das hidden-Attribut wirkt ueber
   [hidden]{display:none} aus dem Browser-Stylesheet, und jede Autorenregel schlaegt das -
   hier also das display:flex von oben. Das Skript setzt hidden dann zwar brav, sichtbar
   aendert sich aber nichts. Dieselbe Falle wie bei .vtable tr[hidden] weiter unten. */
.menupanel[hidden] { display: none; }

/* Abmelden ist kein Menuepunkt wie die anderen - abgesetzt, damit man es nicht
   versehentlich statt der Nachbarzeile trifft. */
.menupanel__logout { border-top: 1px solid var(--topbar-accent); margin-top: 0.25rem; padding-top: 0.6em; }

/* ---------- Inhaltsbereich ---------- */
.admin {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;              /* Inhalt scrollt, Topbar bleibt oben */
  background: #eef1f4;
  color: #222;
  padding: var(--page-pad-y) var(--page-pad-x);
}
.admin__inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 2.5vw, 1.5rem);
}

/* Karte / Panel */
.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
  padding: var(--card-pad-y) var(--card-pad-x);
}
.card h2 { margin: 0 0 1rem; color: var(--topbar-bg); font-size: clamp(1.05rem, 0.9rem + 1vw, 1.35rem); }
.card .hint { margin: 0 0 0.9rem; color: #55606b; font-size: var(--ui-font-size); }

/* Auswahlleiste */
.pickbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem; margin: 0 0 1rem; }
.pickbar label { display: block; font-weight: 600; font-size: var(--ui-font-size); color: #333; margin-bottom: 0.3rem; }
.pickbar select {
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  padding: 0.45em 0.6em;
  border: 1px solid #cbd2d9;
  border-radius: 6px;
  background: #fff;
}
.pickbar select:focus { outline: none; border-color: var(--topbar-accent); box-shadow: 0 0 0 2px rgba(52, 73, 94, .3); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.5em 1.05em;
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  color: var(--topbar-fg);
  background: var(--topbar-bg);
  border: 1px solid var(--topbar-bg);
  border-radius: 6px;
  cursor: pointer;
}
.btn:hover { background: var(--topbar-accent); border-color: var(--topbar-accent); }

/* Tabelle */
.table-wrap { overflow-x: auto; }

/* Eigener Scrollbereich mit begrenzter Hoehe - Voraussetzung fuer den klebenden
   Tabellenkopf: position:sticky orientiert sich am naechsten scrollenden Vorfahren,
   und der braucht dafuer eine Hoehenbegrenzung. */
.table-wrap--scroll { max-height: 70vh; overflow: auto; }

/* Vollhoehen-Layout: die Karte fuellt genau den sichtbaren Bereich, gescrollt wird
   INNERHALB der Karte. Ohne das scrollt zusaetzlich die Seite und der Kartenrand ist
   unten nicht mehr zu sehen. min-height:0 ist noetig, damit Flex-Kinder schrumpfen.

   Gescrollt wird die Karte als Ganzes und nicht nur die Tabelle darin. Der Unterschied
   faellt erst auf einem liegenden Telefon auf: dort belegen Ueberschrift und Filterleiste
   zusammen mehr als ein Drittel der Hoehe, und scrollte nur die Tabelle, blieben sie
   dauerhaft stehen - uebrig waeren drei Datenzeilen. So fahren sie beim Scrollen mit
   nach oben weg, waehrend der Tabellenkopf (position:sticky) am oberen Rand haengen
   bleibt. Die Menuezeile liegt ausserhalb und bleibt ohnehin stehen.

   Wichtig dabei: die Tabellenhuelle darf dann KEIN eigener Scrollbereich mehr sein.
   Ein overflow zwischen Kopfzeile und Karte wuerde das Kleben abfangen - der Kopf bliebe
   in der Huelle haengen, die selbst mit wegscrollt, und waere weg. */
.admin--fill { overflow: hidden; }
.admin--fill .admin__inner { height: 100%; min-height: 0; }
.admin--fill .card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}
.admin--fill .table-wrap--scroll {
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

/* Kein oberer Innenabstand an der scrollenden Karte: er gehoert zum Inhalt und scrollt
   mit weg, sodass zwischen Kartenrand und klebendem Tabellenkopf ein Streifen bliebe,
   durch den die Zeilen sichtbar nach oben durchlaufen. Der Abstand wandert deshalb an
   die Ueberschrift - dort sieht er genauso aus und scrollt richtig mit. */
.admin--fill .card { padding-top: 0; }
.admin--fill .card > h2 { margin-top: var(--card-pad-y); }

/* Fusszeile des Scrollbereichs: Ladehinweis und Ende-Meldung */
.table-foot { padding: 0.6em 0.2em; color: #6b757e; font-size: 0.9em; min-height: 1.2em; }

/* Laufende Nummer per CSS-Counter statt vom Server. Beim Voranstellen neuer und Anhaengen
   alter Zeilen muesste sonst jedes Mal die ganze Tabelle neu durchnummeriert werden. */

/* Klebender Tabellenkopf. Der Hintergrund ist noetig, sonst scheinen die Zeilen durch,
   und die Trennlinie kommt als inset-Schatten, weil ein border beim Scrollen mitwandert. */
.vtable--sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: inset 0 -1px 0 #e6eaee;
}
.vtable { width: 100%; border-collapse: collapse; font-size: var(--ui-font-size); }
.vtable th, .vtable td { text-align: left; padding: 0.5em 0.6em; border-bottom: 1px solid #e6eaee; vertical-align: middle; }
.vtable th { color: #55606b; font-weight: 600; white-space: nowrap; }
.vtable th.num { text-align: right; }        /* Ueberschrift buendig zur Zahl darunter */
.vtable th, .vtable td { white-space: nowrap; }   /* Zeitstempel und Zahlen nie umbrechen */

/* Dichtere Variante fuer Tabellen mit vielen Spalten (Kraken-Orders). Zwoelf Spalten mit
   zwei Bezeichnern und einem vollen Zeitstempel passen sonst auf keinen Laptop, ohne dass
   waagerecht gescrollt werden muss. Kleiner setzen kostet nichts - kuerzen wuerde etwas
   kosten, denn eine halbe Id nuetzt niemandem. */
.vtable--dense { font-size: 0.92em; }
.vtable--dense th, .vtable--dense td { padding: 0.45em 0.4em; }

/* Datenstand-Tabelle: feste Spaltenanteile. Ohne Vorgabe verteilt der Browser die Breite
   der Karte auf nur fuenf Spalten, wodurch Intervall und Alter unnoetig breit werden. */
.vtable--status { table-layout: fixed; }
.vtable--status th:nth-child(1), .vtable--status td:nth-child(1) { width: 14%; }
.vtable--status th:nth-child(2), .vtable--status td:nth-child(2) { width: 14%; }
.vtable--status th:nth-child(3), .vtable--status td:nth-child(3) { width: 26%; }
.vtable--status th:nth-child(4), .vtable--status td:nth-child(4) { width: 16%; }
.vtable--status th:nth-child(5), .vtable--status td:nth-child(5) { width: 30%; }

/* Intervall, Neueste Kerze und Status mittig. Steht bewusst nach .vtable th.num und
   .vtable td.num - gleiche Spezifitaet, die spaetere Regel gewinnt. */
.vtable--status th:nth-child(1), .vtable--status td:nth-child(1),
.vtable--status th:nth-child(3), .vtable--status td:nth-child(3),
.vtable--status th:nth-child(5), .vtable--status td:nth-child(5) { text-align: center; }

/* Gestapelt gilt das nicht: dort steht die Beschriftung links und der Wert rechts,
   und eine mittig gesetzte Zelle bricht diese Flucht. */
@media (max-width: 640px) {
  .vtable--status td:nth-child(1),
  .vtable--status td:nth-child(3),
  .vtable--status td:nth-child(5) { text-align: right; }
}
.vtable td.num { text-align: right; white-space: nowrap; }
.vtable tr:hover { background: #f7f9fb; }
.vtable .important { font-weight: 600; }

/* Kraken-Orders: die Order als Zeile, ihre Ausfuehrungen aufklappbar darunter.
   Beides sind normale Tabellenzeilen - eine verschachtelte Tabelle wuerde die Spalten
   nicht mehr untereinander halten. */
/* Bezeichnerspalten: Trade ID, Order ID, Ledger ID, Referenz. Ein Sprung dorthin, wo
   der Bezeichner herkommt - nur gesetzt, wenn es dort wirklich etwas zu sehen gibt. */
.idcell code { font-size: 0.92em; }
.idlink { color: inherit; text-decoration: none; border-bottom: 1px dotted #9aa4ad; }
.idlink:hover { color: var(--topbar-bg); border-bottom-color: var(--topbar-bg); }

.orderrow.is-expandable { cursor: pointer; }
.orderrow.is-expandable:hover { background: #eef3f8; }
.orderrow.is-open { background: #eef3f8; }
.ordertoggle { color: #55606b; white-space: nowrap; }
.ordertoggle__mark { display: inline-block; width: 0.9em; color: #8a949d; }
/* Anzahl der Ausfuehrungen direkt am Aufklappgriff statt in eigener Spalte. Feste
   Breite, damit die Bezeichner darunter buendig bleiben. */
.ordercount { display: inline-block; min-width: 1.1em; text-align: right; color: #6b757e; }
.ordersmall { color: #6b757e; font-size: 0.85em; }

/* Die Ausfuehrungen: leiser Hintergrund, damit sie sichtbar zur Order darueber gehoeren */
.traderow > td { background: #f7f9fb; color: #55606b; border-bottom: 1px solid #eef1f4; }
.traderow:hover > td { background: #f2f5f8; }
.traderow__label { color: #8a949d; }
.up   { color: #1b6b34; font-weight: 700; }
.down { color: #b71c1c; font-weight: 700; }
.rsi-high { color: #b71c1c; font-weight: 700; }
.rsi-low  { color: #1b6b34; font-weight: 700; }

/* schmale Screens: Tabelle als Karten stapeln */
@media (max-width: 640px) {
  .vtable thead { display: none; }
  .table-wrap--scroll { max-height: none; overflow: visible; }
  .admin--fill { overflow-y: auto; }
  .admin--fill .admin__inner { height: auto; }
  .admin--fill .card { display: block; }
  .admin--fill .table-wrap--scroll { flex: none; }
  .vtable--status { table-layout: auto; }
  .vtable--status td { width: auto !important; }
  .vtable td { white-space: normal; }
  .vtable, .vtable tbody, .vtable tr, .vtable td { display: block; width: 100%; }
  /* display:block wuerde sonst das hidden-Attribut ueberstimmen und die zugeklappten
     Ausfuehrungen der Kraken-Orders dauerhaft zeigen. */
  .vtable tr[hidden] { display: none; }
  .vtable tr { border: 1px solid #e6eaee; border-radius: 8px; margin-bottom: 0.8rem; padding: 0.3rem 0.6rem; }
  /* Leere Zellen brauchen als Karte keine eigene Zeile: die Einrueckung der Ausfuehrung
     und die Trade-ID-Spalte, die bei einer Order nichts zu zeigen hat. */
  .traderow td:empty, .orderrow td:empty { display: none; }
  .vtable td { border-bottom: 1px solid #f0f2f4; padding: 0.5em 0; }
  .vtable td:last-child { border-bottom: none; }

  /* Beschriftung links, Wert rechts - eine Zeile statt zwei. Das spart bei zwoelf
     Spalten die halbe Kartenhoehe, und man liest die Werte untereinander in einer
     Flucht statt sie zwischen den Beschriftungen zu suchen.
     Ueber float und nicht ueber flex: in den Zellen steht mal blosser Text, mal ein
     Abzeichen, mal beides. Flex machte daraus mehrere Elemente, die sich die Zeile
     teilen; der Float laesst den Inhalt schlicht rechts danebenlaufen, was immer
     drinsteht. */
  .vtable td { text-align: right; }
  .vtable td::before {
    content: attr(data-th);
    float: left;
    margin-right: 1rem;
    font-size: 0.85em;
    font-weight: 600;
    color: #55606b;
    text-align: left;
  }

  /* Der Einrueckungshinweis der Ausfuehrungen hat keine Beschriftung und gehoert
     deshalb nach links, nicht an den rechten Rand. */
  .vtable .traderow__label { text-align: left; }

}


/* ============================================================
   Formulare, Abzeichen und Bestaetigungsdialog
   ============================================================ */

.flash {
  padding: 0.8em 1em;
  border-radius: 8px;
  font-size: var(--ui-font-size);
  font-weight: 600;
}
.flash--ok    { background: #e6f5ea; color: #1b6b34; border: 1px solid #b6e0c2; }
.flash--error { background: #fdecec; color: #b71c1c; border: 1px solid #f5c2c2; }

.badge { display: inline-block; padding: 0.15em 0.7em; border-radius: 999px; font-size: 0.85em; font-weight: 600; }
.badge--on   { background: #e6f5ea; color: #1b6b34; }
.badge--off  { background: #fdecec; color: #b71c1c; }
.badge--test { background: #fff8e1; color: #6b4e00; }

.btn--ghost  { color: var(--topbar-bg); background: #fff; border-color: #cbd2d9; }
.btn--ghost:hover { background: #eef1f4; color: var(--topbar-bg); }
.btn--danger { color: #fff; background: #c0392b; border-color: #c0392b; }
.btn--danger:hover { background: #a5281c; border-color: #a5281c; }

/* Formularraster: zwei Spalten auf breiten Schirmen, eine auf schmalen */
.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem 1.4rem;
  margin: 0 0 1.1rem;
}
.fgrid--wide { grid-column: 1 / -1; }

.vfield { display: flex; flex-direction: column; gap: 0.3rem; }
.vfield label { font-weight: 600; font-size: var(--ui-font-size); color: #333; }
.vfield small { color: #6b757e; font-size: 0.85em; }
.vfield input[type="text"],
.vfield input[type="number"],
.vfield select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55em 0.7em;
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  border: 1px solid #cbd2d9;
  border-radius: 6px;
  background: #fff;
}
.vfield input:focus,
.vfield select:focus {
  outline: none;
  border-color: var(--topbar-accent);
  box-shadow: 0 0 0 2px rgba(52, 73, 94, .3);
}
.vfield input[readonly] { background: #f2f4f6; color: #6b757e; }

.vactions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.3rem; }

/* Zeile mit Schalter und Erklaerung */
.switchrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7em 0;
  border-bottom: 1px solid #eef1f4;
}
.switchrow:last-child { border-bottom: none; }
.switchrow__text { flex: 1 1 16rem; min-width: 0; }
.switchrow__text strong { display: block; }
.switchrow__text span { color: #6b757e; font-size: 0.9em; }

/* ---------- Bestaetigungsdialog ---------- */
.modal-open { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.modal__box {
  position: relative;
  width: 100%;
  max-width: 30rem;
  box-sizing: border-box;
  padding: clamp(1.1rem, 4vw, 1.6rem);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  text-align: left;
}
.modal__title { margin: 0 0 0.6rem; color: var(--topbar-bg); font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.3rem); }
.modal__msg   { margin: 0 0 1.3rem; color: #333; font-size: var(--ui-font-size); line-height: 1.45; white-space: pre-line; }
.modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; }


/* ---------- Zahlenfelder ---------- */
/* Zahlen gehoeren rechtsbuendig - so stehen Komma und Stellen untereinander. */
.vfield input[type="number"],
.vfield input.num { text-align: right; }

/* Eigene Pfeile fuer die Eurofelder. Die muessen Textfelder sein, weil
   input[type=number] keine Tausendertrennung darstellen kann - der Browser verlangt
   dort eine reine Fliesskommazahl. Damit entfaellt auch der native Spinner. */
.stepper { display: flex; align-items: stretch; }
.stepper input {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.stepper__btns { display: flex; flex-direction: column; flex: 0 0 auto; }
.stepper__btns button {
  flex: 1 1 0;
  width: 2em;
  padding: 0;
  border: 1px solid #cbd2d9;
  border-left: none;
  background: #f5f7f9;
  color: #55606b;
  font-size: 0.65em;
  line-height: 1;
  cursor: pointer;
}
.stepper__btns button:first-child { border-radius: 0 6px 0 0; }
.stepper__btns button:last-child  { border-radius: 0 0 6px 0; border-top: none; }
.stepper__btns button:hover { background: #e6eaee; color: var(--topbar-bg); }


/* ---------- Einblendung am oberen Rand ---------- */
.toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  max-width: min(44rem, 92vw);
  padding: 0.85em 1.2em;
  border-radius: 8px;
  font-size: var(--ui-font-size);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  transition: opacity .4s ease, transform .4s ease;
}
.toast--ok    { background: #e6f5ea; color: #1b6b34; border: 1px solid #b6e0c2; }
.toast--error { background: #fdecec; color: #b71c1c; border: 1px solid #f5c2c2; }
.toast.is-gone { opacity: 0; transform: translate(-50%, -0.7rem); }


/* ---------- Zwei-Faktor-Einrichtung ---------- */
.auth-box--wide { max-width: 30rem; }

.auth-hint { font-size: 0.9em; color: #555; }
.auth-alt  { margin: 1.2rem 0 0; font-size: 0.9em; }
.auth-alt a { color: #555; }

.mfa-schritte {
  margin: 0 0 1.2rem;
  padding-left: 1.3em;
  text-align: left;
  color: #333;
  font-size: var(--ui-font-size);
  line-height: 1.6;
}

/* Der QR-Code kommt als SVG mit fester Kantenlaenge herein - hier wird er auf die
   Spaltenbreite begrenzt, damit er auf dem Handy nicht seitlich hinauslaeuft. */
.mfa-qr { margin: 0 0 1rem; }
.mfa-qr svg {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 15rem;
  height: auto;
  border-radius: 6px;
}

.mfa-key-label { margin: 0 0 0.2rem; font-size: 0.9em; color: #555; }

/* Der Schluessel wird abgetippt: feste Zeichenbreite und Sperrung, damit sich
   0 und O beziehungsweise 1 und I nicht verwechseln lassen. */
.mfa-key {
  margin: 0 0 1.4rem;
  padding: 0.6em 0.8em;
  background: #f4f6f8;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.05em;
  letter-spacing: 0.12em;
  word-break: break-all;
  user-select: all;
}

.mfa-neu { margin-top: 0.8rem; }
.auth-box button.auth-btn--zurueckhaltend {
  background: transparent;
  color: #555;
  border: 1px solid #cfd6dd;
  font-weight: 500;
}
.auth-box button.auth-btn--zurueckhaltend:hover { background: #f4f6f8; color: #222; }


/* ---------- Summenzeile einer Tabelle ---------- */
/* Deutlich abgesetzt, damit die Summe nicht wie eine weitere Position aussieht. */
.vtable tfoot th {
  border-top: 2px solid #cfd6dd;
  border-bottom: none;
  padding-top: 0.7em;
  color: #222;
  font-size: 1.05em;
}

/* Gestapelt: eine abgesetzte Zeile, kein eigener Kasten.
   Ohne das wird auch die tfoot-Zeile zur Karte, waehrend ihre th Tabellenzellen bleiben -
   dabei entsteht ein schmaler Kasten, in dem jede Zelle ihren eigenen kurzen Strich zieht.
   Der Trennstrich gehoert deshalb an die Zeile, nicht an die Zellen.

   Warum hier unten und nicht im grossen Mobil-Block weiter oben: der steht im Stylesheet
   VOR dieser Vorgabe, und bei gleicher Spezifitaet gewinnt die spaetere Regel. Genau
   daran ist der erste Anlauf gescheitert. */
@media (max-width: 640px) {
  .vtable tfoot { display: block; }
  .vtable tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border: none;
    border-top: 2px solid #cfd6dd;
    border-radius: 0;
    margin: 0;
    padding: 0.7em 0.6rem 0.2em;
  }
  .vtable tfoot th { display: block; border: none; padding: 0; }
}


/* ---------- Zeitstempel in einer Ueberschrift ---------- */
/* Gehoert zur Ueberschrift, ist aber kein Titel - deshalb in der Schriftstaerke und
   Farbe eines Hinweises statt in der der Ueberschrift. */
.card h2 .stamp {
  font-weight: 400;
  color: #55606b;
  font-size: var(--ui-font-size);
}


/* ---------- Behaelter, den es nur fuers Skript gibt ---------- */
/* display: contents nimmt das Element aus dem Layout, ohne seinen Inhalt anzutasten.
   Ohne das waere der Wrapper das einzige Flex-Kind von .admin__inner - und der gap
   zwischen den Karten fiele weg, weil die Karten dann eine Ebene tiefer liegen. */
#dataStatusCards { display: contents; }


/* ---------- Suchfelder in der Auswahlleiste ---------- */
/* Vergleichszeichen und Wert gehoeren zusammen, deshalb in einer eigenen Zeile
   innerhalb des Feldblocks - sonst reisst der Umbruch sie auseinander. */
.pickbar__combo { display: flex; gap: 0.35rem; align-items: center; }

.pickbar input {
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  padding: 0.45em 0.6em;
  border: 1px solid #cbd2d9;
  border-radius: 6px;
  background: #fff;
}

/* Rechtsbuendig nur, wo eine Zahl steht. Ein Textfeld rechtsbuendig zu setzen liest
   sich falsch - man tippt von links. */
.pickbar input.num { text-align: right; }
.pickbar input:focus {
  outline: none;
  border-color: var(--topbar-accent);
  box-shadow: 0 0 0 2px rgba(52, 73, 94, .3);
}

/* Die Vergleichszeichen sind kurz - ohne Mindestbreite werden sie unterschiedlich
   breit und die Leiste wackelt beim Umschalten. */
.pickbar__combo select { min-width: 3.6rem; text-align: center; }


/* Beschriftung mittig ueber dem Paar aus Vergleichszeichen und Wert - links steht
   sie sonst ueber dem Zeichen statt ueber dem, was sie benennt. */
.pickbar__field label { text-align: center; }


/* ---------- Sortierbare Spaltenkoepfe ---------- */
/* Der Kopf bleibt ein Kopf: gleiche Farbe und Staerke wie ohne Verweis, nur mit
   Zeigefinger und Unterstreichung beim Ueberfahren. */
.sortlink {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.sortlink:hover { text-decoration: underline; }
.sortlink.is-active { color: var(--topbar-bg); }

/* Die Verknuepfung steht zwischen zwei Bedingungen - mittig unter ihrer
   Beschriftung, sonst haengt sie schief zwischen den beiden Feldpaaren. */
.pickbar__join { text-align: center; }
.pickbar__join select { display: inline-block; }


/* ---------- Trades ---------- */
/* Ein noch offener Rundlauf hat keine Verkaufszahlen. Statt sechs leerer Zellen steht
   dort, worauf gewartet wird - zurueckhaltend, damit es nicht wie ein Ergebnis aussieht. */
.trades-open { color: #55606b; font-style: italic; }


/* ---------- Kaestchen auf der Anmeldeseite ---------- */
/* Box und Text nebeneinander, aber ohne <label for> - das Haekchen soll sich nur bei
   Klick auf die Box aendern, nicht auf den Text daneben. */
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.2rem 0 0.4rem;
  text-align: left;
}
.auth-check input { width: auto; margin-top: 0.2rem; flex: none; }
.auth-check span { font-size: 0.9em; color: #555; line-height: 1.45; }

/* ---------- Liste der vertrauten Geraete ---------- */
.mfa-devices {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  text-align: left;
}
.mfa-devices li {
  padding: 0.55em 0;
  border-bottom: 1px solid #eef1f4;
  font-size: var(--ui-font-size);
}
.mfa-devices li:last-child { border-bottom: none; }
.mfa-devices strong { display: block; color: #222; }
.mfa-devices span { color: #6b757e; font-size: 0.9em; }