/*
 * Ansichten nach der Bildvorlage `dashboard_beispiel.png`.
 *
 * Die Startseite: eine zentrierte Kopfzeile (Datum, grosse duenne Uhr, Leitsatz) mit dem Wetter
 * rechts aussen, darunter zwei Karten, deren **Mitte bewusst leer bleibt** — dort schaut das Foto
 * durch, und genau daraus lebt das Bild. Am unteren Rand eine einzige Leiste (2026-09-16), keine
 * Reihe gleicher Karten mehr:
 *
 *   markets   .         inbox
 *   [ + Neue Aufgabe | Heute | System | Notiz | Fokus ]
 *
 * Die Leiste ist ein Glaskörper mit Haarlinien zwischen den Abschnitten; die Uhr bleibt das
 * einzige laute Element der Seite.
 */

/* --------------------------------------------------------------------- */
/* Startseite                                                            */
/* --------------------------------------------------------------------- */

.cockpit {
  min-height: 100%;
  padding: 30px var(--page-x) 22px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.cockpit__header {
  position: relative;
  min-height: 152px;
  flex: none;
}

/*
 * Die Uhr steht in der Vorlage mittig im **Fenster**, nicht mittig im Inhaltsbereich — deshalb
 * die Verschiebung um die halbe Seitenleistenbreite. `--sidebar-current` setzt
 * `ui/sidebar/view.ts` beim Ein-/Ausklappen, damit die Uhr mitwandert statt zu springen.
 */
.cockpit__clock {
  position: absolute;
  top: 6px;
  left: calc(50% - var(--sidebar-current, var(--sidebar-width)) / 2);
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.cockpit__date {
  font-size: var(--text-md);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

.cockpit__time {
  margin-top: 4px;
  font-size: var(--text-clock);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.cockpit__tagline {
  margin-top: 6px;
  font-size: var(--text-2xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Wetter — rechts aussen, auf Hoehe der Uhr. */
.weather {
  position: absolute;
  top: 18px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 14px 22px;
}

.weather__now {
  display: flex;
  align-items: center;
  gap: 14px;
}

.weather__icon {
  width: 26px;
  height: 26px;
  color: var(--fg-muted);
}

.weather__place {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.weather__temp {
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--fg);
  line-height: 1.2;
}

.weather__desc {
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

.weather__days {
  display: flex;
  gap: 24px;
}

.weather__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.weather__day-icon {
  width: 17px;
  height: 17px;
  color: var(--fg-muted);
}

.weather__day-name {
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.weather__day-temp {
  font-size: var(--text-2xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- */
/* Das Kartenraster                                                      */
/* --------------------------------------------------------------------- */

.cockpit__grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 1.1fr) minmax(300px, 0.95fr);
  grid-template-areas: "markets . inbox";
  gap: var(--gap);
  align-content: start;
  /* Jede Karte endet nach ihrem Inhalt. Ohne das zieht die hoehere Karte einer Zeile (Inbox mit
   * fuenf Zweizeilern) ihre Nachbarin auf dieselbe Hoehe, und Markets bekaeme unten eine leere
   * Flaeche — in der Vorlage haben die Karten sichtbar unterschiedliche Hoehen. */
  align-items: start;
}

.area-markets {
  grid-area: markets;
}
.area-inbox {
  grid-area: inbox;
}

/* --------------------------------------------------------------------- */
/* Die Leiste am unteren Rand                                            */
/* --------------------------------------------------------------------- */

.band {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 118px;
}

.band__seg {
  min-width: 0;
  padding: 14px 20px 15px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.band__head {
  margin-bottom: 8px;
}

/* Der eine Knopf der Seite: leise gerahmt, Akzent nur auf Zeichen und Schrift. */
.band__compose {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  color: var(--accent);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast)
    var(--ease-standard);
  border-radius: var(--radius) 0 0 var(--radius);
}
.band__compose svg {
  width: 22px;
  height: 22px;
}
.band__compose:hover,
.band__compose:focus-visible {
  background: var(--accent-strong);
  color: var(--fg);
  outline: none;
}

.band__focus {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: var(--fg-faint);
  border-left: 1px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: color var(--motion-fast) var(--ease-standard);
}
.band__focus svg {
  width: 18px;
  height: 18px;
}
.band__focus:hover,
.band__focus:focus-visible {
  color: var(--fg);
  outline: none;
}

/* --------------------------------------------------------------------- */
/* Karte                                                                 */
/* --------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  padding: 15px 18px 17px;
  min-width: 0;
}

.card__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}

.card__icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
}

.card__title {
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 400;
}

.card__more {
  margin-left: auto;
  display: inline-flex;
  color: var(--fg-faint);
  transition: color var(--motion-fast) ease;
}
.card__more svg {
  width: 15px;
  height: 15px;
}
.card__more:hover {
  color: var(--fg);
}

.card__hint,
.card__empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-faint);
}

/* --------------------------------------------------------------------- */
/* Markets                                                               */
/* --------------------------------------------------------------------- */

.markets-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.markets-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px auto;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  outline: none;
}
.markets-row:last-child {
  border-bottom: none;
}
.markets-row__ident,
.markets-row__figures {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.markets-row__figures {
  align-items: flex-end;
}
.markets-row:hover .markets-row__symbol,
.markets-row:focus-visible .markets-row__symbol {
  color: var(--accent);
}

.markets-row__symbol {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg);
  transition: color var(--motion-fast) var(--ease-standard);
}

.markets-row__name {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.markets-row__price {
  font-size: var(--text-md);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.markets-row__spark {
  width: 56px;
  height: 18px;
  overflow: visible;
}

.markets-row__change {
  text-align: right;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.markets-row__change--up {
  color: var(--state-up);
}
.markets-row__change--down {
  color: var(--state-down);
}

/* --------------------------------------------------------------------- */
/* Inbox                                                                 */
/* --------------------------------------------------------------------- */

.inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inbox-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
}

/* Der Punkt trägt jetzt zwei Aussagen auf einmal: die **Farbe** sagt, aus welchem Postfach
   die Nachricht kommt, die **Deckkraft**, ob sie gelesen ist. Bei drei Konten in einer
   gemischten Liste ist die Herkunft sonst nicht zu sehen — und genau das war der Wunsch. */
.inbox-row__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--konto-farbe, var(--accent));
  margin-top: 5px;
  opacity: 0.9;
}
.inbox-row--read .inbox-row__dot {
  opacity: 0.35;
}

/* Die Umschalter über der Liste. Keine Knöpfe im Wortsinn — eine Zeile stiller Filter,
   die nur dann erscheint, wenn es überhaupt mehr als ein Postfach gibt. */
.konten-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.konto-schalter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-muted);
  font-size: var(--text-xs);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.konto-schalter:hover {
  color: var(--fg);
  border-color: var(--fg-faint);
}
.konto-schalter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.konto-schalter[aria-pressed="true"] {
  color: var(--fg);
  border-color: var(--konto-farbe, var(--accent));
}
.konto-schalter__punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--konto-farbe, var(--accent));
}

.inbox-row__from {
  font-size: var(--text-md);
  color: var(--fg);
}

.inbox-row__subject {
  grid-column: 2;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-row__time {
  grid-row: 1;
  grid-column: 3;
  font-size: var(--text-xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- */
/* Today (Zeitleiste)                                                    */
/* --------------------------------------------------------------------- */

.today-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.today-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
}
.today-row--more {
  grid-template-columns: minmax(0, 1fr);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

.today-row__time {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.today-row__label {
  font-size: var(--text-md);
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------- */
/* System — vier schmale Balken                                          */
/* --------------------------------------------------------------------- */

.meters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.meter {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 12px;
}

.meter__label {
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.meter__track {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width var(--motion-medium) var(--ease-standard);
}
.meter--warn .meter__fill {
  background: var(--state-blocked);
}

.meter__value {
  font-size: var(--text-xs);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.meter__value small {
  font-size: var(--text-2xs);
  color: var(--fg-faint);
  margin-left: 2px;
}

/* --------------------------------------------------------------------- */
/* Notiz                                                                 */
/* --------------------------------------------------------------------- */

.note-quote {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.note-quote--empty {
  color: var(--fg-faint);
}

.note-author {
  margin: 6px 0 0;
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

/* --------------------------------------------------------------------- */
/* Detailseiten                                                          */
/* --------------------------------------------------------------------- */

.detail-view {
  min-height: 100%;
  padding: 34px var(--page-x) 26px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.detail-view__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: none;
}
.detail-view__icon {
  width: 22px;
  height: 22px;
  color: var(--fg-muted);
  margin-top: 3px;
}
.detail-view__title {
  font-size: var(--text-2xl);
  font-weight: 200;
  letter-spacing: 0.01em;
}
.detail-view__subtitle {
  margin: 3px 0 0;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.detail-panel {
  padding: 6px 20px;
}

.detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.detail-list > li {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.detail-list > li:last-child {
  border-bottom: none;
}

.detail-list__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.detail-list__title {
  margin: 0;
  font-size: var(--text-md);
  color: var(--fg);
}

.detail-list__meta {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.detail-list__body {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.detail-list__row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.detail-list__row svg {
  width: 17px;
  height: 17px;
  color: var(--fg-faint);
  flex: none;
}

.detail-list--unread > li.is-unread {
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  margin-left: -16px;
}

/* --------------------------------------------------------------------- */
/* Trading (Neubau 2026-09-16): Suche, Beobachtungsliste, Kurs + Chart   */
/* --------------------------------------------------------------------- */

.trading__body {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.search {
  position: relative;
}
.search__field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 18px;
  cursor: text;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.search__field:focus-within {
  border-color: var(--border-strong);
}
.search__icon {
  width: 18px;
  height: 18px;
  color: var(--fg-faint);
  flex: none;
}
.search__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font: inherit;
  font-size: var(--text-md);
}
.search__input::placeholder {
  color: var(--fg-faint);
}
.search__input::-webkit-search-cancel-button {
  filter: invert(1) opacity(0.5);
}
.search__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--bg-panel-solid);
}
.search__empty {
  padding: 12px;
  font-size: var(--text-sm);
  color: var(--fg-faint);
}
.search-hit {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: baseline;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.search-hit:hover,
.search-hit:focus-visible {
  background: var(--accent-strong);
  outline: none;
}
.search-hit__symbol {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.search-hit__name {
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-hit__meta {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  white-space: nowrap;
}
.search-hit__action {
  font-size: var(--text-xs);
  color: var(--accent);
  white-space: nowrap;
}

.watchlist {
  padding: 14px 8px 8px;
}
.watchlist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 12px 10px;
}
.watchlist__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-muted);
}
.watchlist__count {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.watchlist__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.watchlist__empty {
  padding: 14px 12px;
  font-size: var(--text-sm);
  color: var(--fg-faint);
}

.watch-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px auto;
  grid-template-areas:
    "symbol symbol price"
    "name   spark  change";
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
  padding: 10px 34px 10px 12px;
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.watch-row:hover,
.watch-row:focus-visible {
  background: var(--bg-panel);
}
.watch-row.is-selected {
  background: var(--accent-strong);
  border-left-color: var(--accent);
}
.watch-row__symbol {
  grid-area: symbol;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg);
}
.watch-row__price {
  grid-area: price;
  font-size: var(--text-sm);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.watch-row__name {
  grid-area: name;
  font-size: var(--text-xs);
  color: var(--fg-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.watch-row--pending .watch-row__name {
  font-style: italic;
}
.watch-row__spark {
  grid-area: spark;
  width: 64px;
  height: 18px;
  overflow: visible;
}
.watch-row__change {
  grid-area: change;
  font-size: var(--text-xs);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.watch-row__change--up {
  color: var(--state-up);
}
.watch-row__change--down {
  color: var(--state-down);
}
.watch-row__remove {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-standard);
}
.watch-row:hover .watch-row__remove,
.watch-row:focus-within .watch-row__remove {
  opacity: 1;
}
.watch-row__remove:hover,
.watch-row__remove:focus-visible {
  color: var(--fg);
  background: var(--bg-panel-solid);
  opacity: 1;
  outline: none;
}
.watch-row__remove svg {
  width: 12px;
  height: 12px;
}

.quote-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px 12px;
}
.quote-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
.quote-panel__ident {
  min-width: 0;
}
.quote-panel__name {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quote-panel__meta {
  margin: 3px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}
.quote-panel__price-block {
  text-align: right;
  margin-left: auto;
}
.quote-panel__price {
  margin: 0;
  font-size: 40px;
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.quote-panel__change {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.quote-panel__change.is-up {
  color: var(--state-up);
}
.quote-panel__change.is-down {
  color: var(--state-down);
}
.quote-panel__ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quote-panel__chart {
  width: 100%;
  min-width: 0;
  height: 420px;
}

.chart-panel__interval {
  font: inherit;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast)
    var(--ease-standard);
}
.chart-panel__interval:hover {
  color: var(--fg);
}
.chart-panel__interval.is-active {
  color: var(--fg);
  border-color: var(--border-strong);
}
.chart-panel__hint {
  margin: 0 6px 6px;
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

/* --------------------------------------------------------------------- */
/* System-Ansicht (S22–S24, unveraendert angebunden)                     */
/* --------------------------------------------------------------------- */

.system-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(340px, auto) minmax(150px, auto) auto;
  gap: var(--gap);
  align-content: start;
}

.card--runs {
  grid-column: 1;
  grid-row: 1;
}
.card--approvals {
  grid-column: 2;
  grid-row: 1;
}
.card--plan {
  grid-column: 1;
  grid-row: 2;
}
.card--metrics {
  grid-column: 2;
  grid-row: 2;
}
/* Kosten je Agent und Tag (S28) — volle Breite, weil es eine Tabelle ist und keine Kachel. */
.card--costs {
  grid-column: 1 / -1;
  grid-row: 3;
}

.card__meta {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.spend-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.spend-table th {
  text-align: left;
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 400;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.spend-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
}
.spend-table tr:last-child td {
  border-bottom: none;
}
.spend-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Ein Betrag, dem Aufrufe ohne Preis fehlen, wird als unvollstaendig kenntlich gemacht — sonst
 * saehe er aus wie ein guenstiger. */
.spend-table__warn {
  margin-left: 8px;
  font-size: var(--text-2xs);
  color: var(--state-blocked);
  white-space: nowrap;
}

.card__runs-list,
.card__approvals-list,
.card__errors-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.card__subtitle {
  margin: 14px 0 4px;
  font-size: var(--text-2xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 400;
}

.card__figures {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin: auto 0 0;
}

.run-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
  cursor: pointer;
}
.run-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.run-row__id {
  font-family: var(--font-mono);
  color: var(--fg);
}
.run-row__meta {
  margin-left: auto;
  color: var(--fg-faint);
  font-size: var(--text-xs);
  text-align: right;
}

.run-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.run-detail__back {
  align-self: flex-start;
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.run-detail__back:hover {
  color: var(--accent);
}
.run-detail__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  color: var(--fg-faint);
}
.run-detail__steps {
  margin: 0;
  padding: 0 0 0 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  font-size: var(--text-sm);
}
.run-step {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.run-step--failed {
  color: var(--state-error);
}
.run-step__error {
  margin: 3px 0 0;
  font-size: var(--text-xs);
  color: var(--state-error);
  white-space: pre-wrap;
}
.run-step__artifact {
  margin: 3px 0 0;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.run-step__artifact-icon {
  width: 13px;
  height: 13px;
}

.approval-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.approval-row__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}
.approval-row__options button {
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--fg);
}
.approval-row__options button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.error-row {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: var(--text-xs);
  color: var(--state-error);
}
.error-row time {
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.figure dt {
  font-size: var(--text-2xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.figure dd {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- */
/* Einstellungen                                                         */
/* --------------------------------------------------------------------- */

.settings-view {
  min-height: 100%;
  padding: 34px var(--page-x) 26px;
  display: flex;
  gap: 34px;
}

.settings-nav {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
}
.settings-nav__link {
  position: relative;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  text-align: left;
  color: var(--fg-muted);
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.settings-nav__link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
}
.settings-nav__link--active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
}

.settings-content {
  flex: 1;
  min-width: 0;
  max-width: 620px;
  padding: 22px 26px 26px;
}

.settings-section__title {
  font-size: var(--text-xl);
  font-weight: 300;
  margin-bottom: 22px;
}

.field {
  margin-bottom: 22px;
}
.field__label {
  display: block;
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.field__control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
  font-size: var(--text-sm);
}
.field__control--color {
  width: 58px;
  height: 34px;
  padding: 2px;
}
.field__control:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.field__hint {
  margin: 7px 0 0;
  font-size: var(--text-xs);
  color: var(--fg-faint);
  line-height: 1.6;
}
.field__static {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg);
  font-family: var(--font-mono);
}
.field__button {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.field__button:not(:disabled):hover {
  border-color: var(--accent-strong);
  color: var(--fg);
}
.field__button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.field__reset {
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.field__reset:hover {
  color: var(--accent);
}
.field__status {
  display: inline-block;
  margin-top: 7px;
  font-size: var(--text-xs);
  color: var(--state-complete);
}
.field--row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.field--row .field__label {
  margin: 0;
  flex: 1;
}

.field__button--danger {
  color: var(--state-down);
  border-color: rgba(224, 120, 127, 0.35);
}
.field__button--danger:hover {
  border-color: var(--state-down);
  color: var(--state-down);
}

.settings-section__subtitle {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--fg-muted);
  margin: 0 0 16px;
}
.settings-section__form {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.mcp-server-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.mcp-server-list__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.mcp-server-list__row:last-child {
  border-bottom: none;
}
.mcp-server-list__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mcp-server-list__id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg);
}
.mcp-server-list__cmd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcp-server-list__meta {
  font-size: var(--text-2xs);
  color: var(--fg-faint);
}
.mcp-server-list__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  flex: none;
}

.accent-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.background-choices {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.background-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  cursor: pointer;
}
.background-choice:hover {
  color: var(--fg);
  border-color: var(--accent-strong);
}
.background-choice--active {
  border-color: var(--accent);
  color: var(--fg);
}
.background-choice__swatch {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
}
.background-choice__swatch--lake {
  background-image: url("../assets/lake.jpg");
}
.background-choice__swatch--void {
  background: linear-gradient(135deg, #0b0f1a, #1d2436);
}
.background-choice__upload-icon {
  width: 16px;
  height: 16px;
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-list__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.service-list__row:last-child {
  border-bottom: none;
}
.service-list__status {
  color: var(--fg-faint);
  font-size: var(--text-xs);
  text-align: right;
}

/* --------------------------------------------------------------------- */
/* Schmale Fenster                                                       */
/* --------------------------------------------------------------------- */

@media (max-width: 1180px) {
  /* Zwischen 860 und 1180 px liefen Uhr (absolut zentriert) und Wetter (absolut rechts)
   * ineinander. Hier stehen beide im Fluss nebeneinander: Uhr links, Wetter rechts. */
  .cockpit__header {
    min-height: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
  }
  .cockpit__clock {
    position: static;
    transform: none;
    text-align: left;
  }
  .weather {
    position: static;
    gap: 18px;
    padding: 12px 18px;
  }
  .cockpit__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "markets inbox";
  }
  .band {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "compose today  system focus"
      "compose note   note   focus";
  }
  .band__compose {
    grid-area: compose;
  }
  .band__focus {
    grid-area: focus;
  }
  .band__seg:nth-of-type(1) {
    grid-area: today;
  }
  .band__seg:nth-of-type(2) {
    grid-area: system;
  }
  .band__seg:nth-of-type(3) {
    grid-area: note;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 860px) {
  .cockpit,
  .detail-view,
  .settings-view {
    padding: 22px 16px;
  }
  .cockpit__clock {
    position: static;
    transform: none;
    text-align: left;
  }
  .cockpit__header {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .weather {
    position: static;
    flex-wrap: wrap;
    gap: 16px;
  }
  .cockpit__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "markets"
      "inbox";
  }
  .band {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "compose focus"
      "today   today"
      "system  system"
      "note    note";
  }
  .band__compose {
    flex-direction: row;
    padding: 16px 20px;
    border-radius: var(--radius) 0 0 0;
  }
  .band__focus {
    border-radius: 0 var(--radius) 0 0;
  }
  .band__seg {
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .trading__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .quote-panel__price {
    font-size: 30px;
  }
  .quote-panel__chart {
    height: 300px;
  }
  .search-hit {
    grid-template-columns: 88px minmax(0, 1fr) auto;
  }
  .search-hit__meta {
    display: none;
  }
  .system-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .card--runs,
  .card--approvals,
  .card--plan,
  .card--metrics {
    grid-column: 1;
    grid-row: auto;
  }
  .settings-view {
    flex-direction: column;
    gap: 18px;
  }
  .settings-nav {
    flex: none;
    flex-direction: row;
    overflow-x: auto;
  }
}

/* --- Mail-Ansicht -------------------------------------------------------
   Die Herkunft steht als Name an der Zeile, nicht nur als Punkt: bei drei
   Postfächern in einer gemischten Liste ist eine Farbe allein zu wenig, wenn
   man wissen will, welches Konto gemeint ist. Der farbige Streifen links
   verbindet beides — man erkennt die Gruppe im Vorbeisehen und liest den
   Namen, wenn man genau hinschaut. */

.mail-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mail-eintrag {
  border-bottom: 1px solid var(--line);
  border-left: 2px solid var(--konto-farbe, transparent);
  padding-left: 12px;
}
.mail-eintrag:last-child {
  border-bottom: none;
}
.mail-eintrag.ist-offen {
  background: color-mix(in srgb, var(--konto-farbe, transparent) 7%, transparent);
}

.mail-zeile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 8px 10px;
  padding: 12px 14px 12px 8px;
  cursor: pointer;
}
.mail-zeile:hover {
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.mail-zeile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.mail-konto {
  font-size: var(--text-xs);
  color: var(--konto-farbe, var(--fg-muted));
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.mail-von {
  font-size: var(--text-md);
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ist-ungelesen .mail-von {
  color: var(--fg);
  font-weight: 500;
}

.mail-zeit {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mail-betreff {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ist-ungelesen .mail-betreff {
  color: var(--fg);
}
/* Offen darf der Betreff umbrechen — abgeschnitten zu lesen, was man gerade
   aufgeklappt hat, wäre die falsche Sparsamkeit. */
.ist-offen .mail-betreff {
  white-space: normal;
}

.mail-text {
  padding: 0 14px 16px 8px;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.mail-text__kopf {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  padding-bottom: 8px;
}
.mail-text__koerper {
  margin: 0;
  max-height: 420px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  line-height: 1.6;
}
.mail-text--laedt,
.mail-text--fehler {
  color: var(--fg-faint);
}

@media (max-width: 560px) {
  .mail-zeile {
    grid-template-columns: 1fr auto;
  }
  .mail-konto {
    grid-column: 1 / -1;
  }
}

/* Ein Schalter als Zeile: Kästchen und Text zusammen anklickbar. */
.field__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--fg);
  font-size: var(--text-md);
}
.field__toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}