/* Trading Control Center - Dark Theme.
   Die Farbwelt stammt aus dem Prototyp und wurde bewusst uebernommen:
   Sie war gut und musste nicht neu erfunden werden. */

:root {
  --bg: #111827;
  --panel: #1f2937;
  --panel-2: #273449;
  --border: #334155;
  --text: #f9fafb;
  --muted: #9ca3af;
  --green: #16a34a;
  --red: #dc2626;
  --yellow: #ca8a04;
  --blue: #2563eb;
  /* Eigene Akzentfarbe fuer "das hier ist gerade neu" (Issue 941). Bewusst
     nicht blau (Filter-Zustand, Listen-Marker), nicht gruen/rot (Aktiv-Punkt,
     Richtung) - sonst verschwimmen die Bedeutungen. */
  --amber: #f59e0b;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  min-height: 100vh;
}

a { color: #93c5fd; }

.tcc-header {
  padding: 14px 24px;
  background: #0b1220;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.tcc-header h1 { margin: 0; font-size: 20px; font-weight: 600; }

.tcc-nav { display: flex; gap: 6px; flex-wrap: wrap; }

.tcc-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 14px;
}
.tcc-nav a:hover { background: var(--panel-2); color: var(--text); }
.tcc-nav a.active { background: var(--blue); color: #fff; }

.tcc-sound-controls { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tcc-sound-controls select { padding: 6px 8px; }

.tcc-main { padding: 20px 24px 48px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 18px;
}
.card h2 { font-size: 16px; margin: 0 0 12px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.card h2 button { font-weight: 500; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat strong { display: block; font-size: 26px; }
.stat span { color: var(--muted); font-size: 13px; }

/* Kontostand-Kachel (Issue 1066): eigene Klassen statt .stats/.stat - jene ist
   fuer die breite 4-spaltige Dashboard-Uebersicht gebaut und presst hier in
   der schmalen Kachel (.tiles: minmax(220px,1fr)) drei gleich grosse Werte
   samt Labels zusammen, wodurch "Gesamtwert (EUR)" umbricht (Issue 946) bzw.
   eine Liste ohne Gewichtung entsteht statt echter Hierarchie (Kachel-
   Philosophie Issue 883): ein grosser Hauptwert (Gesamtwert), zwei kleine,
   gedaempfte Werte (Cash/Kaufkraft) in einer Zeile darunter. Flex statt
   Grid, damit auf dem Handy von selbst umbricht statt an einer Spaltenbreite
   zu zerren - keine eigene Media Query noetig. .stats/.stat selbst bleibt
   unveraendert. */
.balance-primary { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.balance-primary .balance-value { font-size: 30px; font-weight: 500; line-height: 1; }
.balance-primary .balance-ccy { font-size: 14px; font-weight: 500; color: var(--muted); }
.balance-label { font-size: 12px; color: var(--muted); letter-spacing: .03em; margin-top: 3px; }
.balance-secondary { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.balance-secondary .s-val { color: var(--text); font-weight: 500; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
/* Kachel als Filter-Umschalter (Issue 881): deutlich klickbar (cursor,
   hover) und im aktiven Zustand unuebersehbar hervorgehoben - nicht nur
   dezent, siehe Warnhinweis oberhalb der Liste fuer denselben Grundsatz. */
.tile { background: var(--panel-2); border-radius: 12px; padding: 14px; border: 1px solid var(--border); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
/* Hover-Anhebung zusaetzlich zum Zeiger (Issue 883): der cursor allein ist auf
   dunkler Kachel leicht zu uebersehen und fehlt am Touch-Geraet. Bewusst ein
   weicher Schatten statt Blau - das Blau bleibt dem aktiven Filterzustand
   (.tile--active) vorbehalten, der so dominant bleibt. */
.tile:hover { border-color: var(--blue); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.tile--active, .tile--active:hover { border-color: var(--blue); border-width: 2px; box-shadow: 0 0 0 1px var(--blue); }
/* Juengstes Signal ueber alle Strategien (Issue 941): die ganze Kachel glimmt
   amberfarben, damit beim fluechtigen Blick sofort auffaellt, wo gerade etwas
   passiert ist. Bewusst eine andere Farbsprache als der blaue Filter-Zustand
   (.tile--active) und der Listen-Marker (.is-latest) - Rahmen plus weicher
   Glow auf der ganzen Flaeche, nicht nur ein Punkt. Nach .tile:hover und
   .tile--active platziert, damit gleiche Spezifitaet zugunsten des Markers
   entschieden wird. */
.tile--newest, .tile--newest:hover {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), 0 0 18px 2px rgba(245, 158, 11, 0.45);
}
/* Gleichzeitig gefiltert UND die juengste (Issue 881 + 941): beide Zustaende
   bleiben lesbar - der blaue Filter-Ring innen, der amberfarbene Frische-Glow
   aussen. */
.tile--active.tile--newest, .tile--active.tile--newest:hover {
  border-color: var(--amber);
  box-shadow: inset 0 0 0 2px var(--blue), 0 0 18px 2px rgba(245, 158, 11, 0.45);
}
/* Zweistufig (Issue 941): kurz laut beim Eintreffen, dann ruhige
   Dauer-Markierung. Der Puls laeuft genau einmal und endet exakt im
   Ruhezustand von .tile--newest (kein Sprung beim Abklingen). Nur bei
   erlaubter Bewegung - die Markierung selbst bleibt ohne Animation bestehen,
   damit man die juengste Kachel auch mit prefers-reduced-motion findet. */
@media (prefers-reduced-motion: no-preference) {
  .tile--newest { animation: newest-pulse 1.6s ease-out; }
}
@keyframes newest-pulse {
  0%   { box-shadow: 0 0 0 3px var(--amber), 0 0 26px 8px rgba(245, 158, 11, 0.8); }
  100% { box-shadow: 0 0 0 1px var(--amber), 0 0 18px 2px rgba(245, 158, 11, 0.45); }
}
.tile .name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.tile .meta { color: var(--muted); font-size: 13px; margin-top: 6px; }
/* Letztes Signal auf einer Zeile: Richtungs-Badge + Zeit, aus dem Augenwinkel
   erfassbar (Issue 883). Die Zeit traegt volle Textfarbe, nicht das gedaempfte
   Grau der uebrigen Meta-Zeile - sie ist die Frischeangabe der Kachel. */
.tile-last { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tile-time { color: var(--text); font-weight: 600; font-size: 14px; }

.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot.on { background: var(--green); }
.dot.off { background: var(--muted); }

/* Live-Kurs auf der Strategie-Kachel (Issue 948) - bewusst Beiwerk unter dem
   Hauptwert (letztes Signal, ".tile-last" oben): kleinere Schrift, gedaempfte
   Farbe, kein eigener Rahmen/Glow. Aktualisiert wird nur der Text (siehe
   dashboard/index.html) - hier gibt es deshalb bewusst keine Transition/
   Animation, die bei jedem Tick erneut anspringen und "blinken" wuerde. */
.tile-quote { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 13px; flex-wrap: wrap; }
.tile-quote .quote-value { font-weight: 600; }
.tile-quote .quote-currency { color: var(--muted); }
/* Veralteter/eingefrorener Kurs (Gateway getrennt, verzoegert, zu alt): der
   Wert selbst graut aus - genau das sichtbare Alter, das die Vorgabe
   verlangt, nicht nur ein Zeitstempel zum Nachrechnen. */
.tile-quote.quote-stale .quote-value { color: var(--muted); font-weight: 500; }
.tile-quote .quote-arrow { font-size: 11px; }
.tile-quote .quote-arrow.up { color: var(--green); }
.tile-quote .quote-arrow.down { color: #f87171; }
.tile-quote .quote-missing { cursor: help; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 13px; }
tbody tr:hover { background: var(--panel-2); }

/* Signal-Liste (Alarm Center, Dashboard "Letzte Signale"): Liste + CSS Grid
   statt table/tr/td (Issue 876). Kopfzeile (.signal-row--header, ein <div>)
   und Zeilen (.signal-row, je ein <li> in .signal-list) teilen sich dieselbe
   grid-template-columns-Deklaration, damit sie exakt untereinander stehen -
   die Spaltenbreiten stehen deshalb hier nur an EINER Stelle.
   Bewusst kein Bootstrap-Grid: das haette ein eigenes Farb-/Komponentensystem
   mitgebracht, das mit diesem Dark-Theme kollidiert waere, fuer die paar
   Zeilen hier kein guter Tausch - siehe Issue 876. */
.signal-table { width: 100%; }
.signal-list { list-style: none; margin: 0; padding: 0; }

.signal-row {
  display: grid;
  grid-template-columns: 30px 100px 110px 90px 90px 64px 110px 90px 1fr 132px;
  column-gap: 10px;
  align-items: center;
  padding: 9px 10px;
}
.signal-row--header { color: var(--muted); font-weight: 500; font-size: 13px; border-bottom: 1px solid var(--border); }
.signal-list .signal-row { border-bottom: 1px solid var(--border); font-size: 14px; }
.signal-list .signal-row:hover { background: var(--panel-2); }
.signal-row.critical { border-left: 4px solid var(--red); }
.signal-row .cell-time, .signal-row .cell-action, .signal-row .cell-message { font-size: 13px; }
.cell-empty { grid-column: 1 / -1; text-align: center; padding: 24px 10px; }

/* Handy (~380px): aus der Tabellenzeile wird eine Karte. Reihenfolge nach
   Wichtigkeit unterwegs: Symbol + Prioritaet zuerst, dann Zeit/Ereignis/
   Aktion, dann Preis MIT Herkunft (siehe .price-source weiter unten - die
   bleibt bewusst sichtbar), zuletzt die Nachricht. Boersen-Checkbox und
   Strategie sind Desktop-Arbeit und entfallen hier. */
@media (max-width: 640px) {
  .signal-row--header { display: none; }

  .signal-list .signal-row {
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "symbol symbol priority"
      "time event action"
      "price price price"
      "message message message"
      "actions actions actions";
    row-gap: 4px;
    column-gap: 8px;
    padding: 12px 14px;
    border-bottom: none;
    border-radius: 10px;
    background: var(--panel-2);
    margin-bottom: 8px;
  }
  .signal-list .signal-row:hover { background: var(--panel-2); }
  .signal-row.critical { border-left: 4px solid var(--red); }

  .cell-select, .cell-strategy { display: none; }
  .cell-symbol { grid-area: symbol; font-size: 15px; }
  .cell-priority { grid-area: priority; justify-self: end; }
  .cell-time { grid-area: time; }
  .cell-event { grid-area: event; }
  .cell-action { grid-area: action; justify-self: end; }
  .cell-price { grid-area: price; }
  .cell-message { grid-area: message; }
  .cell-actions { grid-area: actions; display: flex; gap: 6px; justify-content: flex-end; }
  .cell-time, .cell-event, .cell-action { color: var(--muted); }
  .cell-empty { padding: 24px 0; }
}

.badge { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; display: inline-block; }
.prio-critical { background: #7f1d1d; color: #fecaca; }
.prio-info { background: #374151; color: #e5e7eb; }
.prio-low { background: #1e3a8a; color: #bfdbfe; }

/* Richtung auf einen Blick (Issue 877): long gruen, short rot. `dir-short`
   nutzt bewusst nicht denselben Rotton wie ".signal-row.critical" (var(--red))
   - dort bedeutet Rot Dringlichkeit, hier Richtung. Reiner (fetter) Text statt
   Badge haelt die beiden Bedeutungen zusaetzlich optisch auseinander. */
.dir-long { color: var(--green); font-weight: 600; }
.dir-short { color: #f87171; font-weight: 600; }
.dir-none { color: inherit; font-weight: inherit; }

/* Richtung als gefuelltes Chip auf der Strategie-Kachel (Issue 883). Anders als
   in der Signalzeile (reiner Text, siehe oben) soll die Richtung hier aus dem
   Augenwinkel erfassbar sein - also `.badge` + `.dir-*` kombiniert. Kein neuer
   Farbton: dieselben Gruen/Rot wie die Richtungsklassen, nur als Toenung
   hinterlegt. Auf der Kachel gibt es keine Prio-Badges, mit denen es sich
   verwechseln liesse. */
.badge.dir-long { background: rgba(22, 163, 74, 0.18); }
.badge.dir-short { background: rgba(248, 113, 113, 0.18); }

/* Preisherkunft sichtbar machen: Ein Chart-Close ist kein Orderpreis -
   und schon gar kein Fill. Wer die Zahl liest, soll wissen, was sie ist. */
.price-source { color: var(--muted); font-size: 11px; display: block; }

.toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }

input, select, button, textarea {
  background: #0f172a;
  color: var(--text);
  border: 1px solid #475569;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 14px;
  font-family: inherit;
}
button { cursor: pointer; }
button:hover { border-color: #94a3b8; }
button:disabled { cursor: default; opacity: 0.5; }
button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
button.danger { background: #7f1d1d; border-color: #991b1b; color: #fecaca; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
code, pre {
  background: #0f172a;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 13px;
  color: #cbd5e1;
}
pre { padding: 12px; overflow-x: auto; }

.warn {
  background: #422006;
  border: 1px solid #a16207;
  color: #fde68a;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.ok {
  background: #052e16;
  border: 1px solid #15803d;
  color: #bbf7d0;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea { width: 100%; box-sizing: border-box; }
.field ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.field ul label { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 14px; }
.field input[type="checkbox"] { width: auto; }
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* Wiederverwendbarer Dialog (Issue #884). Native <dialog>-Mechanik: Esc,
   Backdrop und Fokus kommen vom Browser, hier nur das Aussehen. */
.tcc-dialog {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  width: min(680px, 94vw);
  max-width: 94vw;
  max-height: 88vh;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.tcc-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
/* Der Inhalt sitzt im __inner-Kind, damit Klicks daneben die ::backdrop-Flaeche
   treffen (Backdrop-Schliessen) und nicht den Dialog. Scrollt bei viel Inhalt. */
.tcc-dialog__inner { padding: 20px 22px; overflow: auto; max-height: 88vh; }
.tcc-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.tcc-dialog__head code { color: var(--muted); font-weight: 400; }
/* Auf dem Handy Vollbild statt Mini-Fenster (Issue #884). inset:0 + margin:0 +
   100% pinnt den Dialog an die Viewport-Kanten, ohne sich auf vw/vh zu verlassen -
   diese Einheiten koennen je nach Zoom/Skalierung von der echten Viewport-Breite
   abweichen, 100% loest dagegen gegen den tatsaechlichen Container auf. */
@media (max-width: 640px) {
  .tcc-dialog {
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: none;
    border-radius: 0;
  }
  .tcc-dialog__inner { max-height: 100%; }
}

/* Payload-Werkzeug im Dialog (Issue #878, verschoben mit #884). */
.payload-panel .payload-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 12px 0;
}
.payload-panel .payload-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
}
.payload-panel pre { margin: 0 0 12px; }

.login-wrap { max-width: 380px; margin: 12vh auto; }
.login-wrap input { width: 100%; margin-bottom: 12px; box-sizing: border-box; }

/* Neu eingetroffene Signale kurz aufblitzen lassen - man sieht sofort,
   dass etwas passiert ist, ohne auf die Uhrzeit schauen zu muessen. */
@keyframes flash-in {
  from { background: #1d4ed8; }
  to { background: transparent; }
}
.flash { animation: flash-in 1.4s ease-out; }

/* Juengstes Signal deutlich markieren (Issue 941). Eigene Kennzeichnung statt
   Kritikalitaet (".critical", border-left, siehe oben) oder Richtung
   (".dir-*", siehe oben) wiederzuverwenden - sonst waere unklar, ob rot
   "kritisch" oder "das hier ist gerade neu" bedeutet. Inset-Schatten statt
   border-left, damit sich beide Markierungen nicht verdraengen, wenn ein
   kritisches Signal gleichzeitig das juengste ist. Zweistufig: ein kurzer,
   auffaelliger Puls beim Erscheinen, der in die ruhige Dauer-Markierung
   uebergeht (".is-latest" ohne Animation sieht bereits wie der Endzustand
   der Animation aus, deshalb kein Sprung beim Abklingen). Nach ".is-latest"
   platziert, damit die Markierung auch auf dem Handy (siehe Media Query
   oben, die dort einen eigenen Hintergrund setzt) sichtbar bleibt. */
.signal-row.is-latest {
  background: rgba(37, 99, 235, 0.16);
  box-shadow: inset 4px 0 0 0 var(--blue);
}
.signal-list .signal-row.is-latest:hover { background: rgba(37, 99, 235, 0.24); }

@media (prefers-reduced-motion: no-preference) {
  .signal-row.is-latest { animation: latest-flash-in 1.8s ease-out; }
}

@keyframes latest-flash-in {
  from { background: rgba(37, 99, 235, 0.55); }
  to { background: rgba(37, 99, 235, 0.16); }
}

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .tcc-header { flex-direction: column; align-items: flex-start; }
}

/* --- Links (Issue #951) -------------------------------------------------- */
/* Gruppen als aufklappbares Akkordeon (native <details>), darin die Links.
   Bewusst schlicht und mit den vorhandenen Bausteinen (card, badge, small). */
.link-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  margin-bottom: 10px;
  overflow: hidden;
}
.link-group__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* Den Standard-Marker (Dreieck) durch einen eigenen ersetzen, der die
   Auf-/Zu-Richtung anzeigt - konsistent ueber die Browser. */
.link-group__summary::-webkit-details-marker { display: none; }
.link-group__summary::before {
  content: "▸";
  color: var(--muted);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
.link-group[open] > .link-group__summary::before { transform: rotate(90deg); }
.link-group__title { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.link-group__actions { display: flex; gap: 6px; flex-wrap: wrap; }

.link-group__body { padding: 4px 14px 14px; border-top: 1px solid var(--border); }

.link-list { list-style: none; margin: 10px 0 0; padding: 0; }
.link-list__empty { padding: 8px 2px; }
.link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border);
}
.link-item:last-child { border-bottom: none; }
.link-item__link { color: var(--blue); text-decoration: none; font-weight: 500; word-break: break-word; }
.link-item__link:hover { text-decoration: underline; }
.link-item__note { flex: 1 1 auto; }
.link-item__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

@media (max-width: 900px) {
  .link-item__actions, .link-group__actions { width: 100%; margin-left: 0; }
}