/*
 * DefiTactic-Design für die Bot-Oberfläche (Design-Review vom 03.11.2026,
 * emdash-cms 1.2.0 „Landingpage nach Design-Review“ und 1.3.0 „Cockpit im
 * Design der Seite“). Wird als letzte Schicht geladen und überschreibt die
 * Tokens aus colors_and_type.css und theme-w3u-*.css.
 *
 * Regeln wie auf www.defitactic.com:
 * - IBM Plex Sans für Text und Überschriften, Plex Mono für Kennzahlen und
 *   Kennzeichen. Kein Inter, kein Space Grotesk.
 * - Warme Neutrale und ein Akzent (Moosgrün). Kein Blau, kein Lila.
 * - Zwei Radien: 4px für Bedienelemente und Kennzeichen, 8px für Flächen.
 * - Schriftskala 12 · 14 · 16 · 18 · 22 · 28, nichts unter 12px.
 * - Knöpfe rechteckig, 44px hoch (klein 36px), ohne Schatten.
 * - Keine Versal-Etiketten, keine Leuchtschatten, Verläufe oder Farbleisten.
 * - Text mindestens 4,5:1, Rahmen von Bedienelementen 3:1.
 */

:root {
  /* ── Schrift ─────────────────────────────────────── */
  --font-plex: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-plex-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-inter: var(--font-plex);
  --font-grotesk: var(--font-plex);
  --font-body: var(--font-plex);
  --font-display: var(--font-plex);
  --font-mono: var(--font-plex-mono);

  /* ── Flächen (night, night-soft, night-raised) ───── */
  --color-bg-primary: #121412;
  --color-bg-secondary: #1b1e1b;
  --color-bg-raised: #222622;
  --color-white-2: #1b1e1b;
  --color-white-4: #222622;
  --color-white-10: #2a2e29;
  --surface-canvas: #121412;
  --surface-raised: #1b1e1b;
  --surface-card: #1b1e1b;
  --surface-card-hi: #222622;
  --surface-overlay: #2a2e29;

  /* ── Text (fog, fog-soft); tertiär hält 4,5:1 auf allen drei Flächen ── */
  --color-text-primary: #e8e6df;
  --color-text-secondary: #a3a89e;
  --color-text-tertiary: #8a8f86;
  --color-text-dark: #121412;
  --color-white: #e8e6df;

  /* ── Linien: line-dark für Flächen, line-strong-dark (3:1) für Bedienelemente ── */
  --color-stroke-divider: #2a2e29;
  --color-stroke-primary: #6b7268;
  --color-stroke-strong: #6b7268;
  --color-border: #2a2e29;

  /* ── Akzent ──────────────────────────────────────── */
  --color-brand: #7fc39a;
  --color-brand-hover: #9bd3b1;
  --color-brand-bg: rgba(127, 195, 154, 0.14);
  --accent: #7fc39a;

  /* ── Status: gut = Markengrün, kritisch = Rot der Seite ── */
  --color-success: #7fc39a;
  --color-success-light: #7fc39a;
  --color-success-bg: rgba(127, 195, 154, 0.14);
  --color-success-stroke: rgba(127, 195, 154, 0.4);
  --color-error: #e38a7d;
  --color-error-light: #e38a7d;
  --color-error-bg: rgba(227, 138, 125, 0.14);
  --color-error-stroke: rgba(227, 138, 125, 0.45);
  --color-warning: #d9a54a;
  --color-warning-bg: rgba(217, 165, 74, 0.12);
  --color-warning-stroke: rgba(217, 165, 74, 0.4);
  /* Info ohne Blau: neutral wie fog-soft. */
  --color-info: #a3a89e;
  --color-info-bg: rgba(163, 168, 158, 0.14);

  /* ── Radien: 4px Bedienelemente, 8px Flächen ─────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-round: 4px;

  /* ── Schriftskala 12 · 14 · 16 · 18 · 22 · 28 ────── */
  --text-xs: 12px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-h6: 18px;
  --text-h5: 22px;
  --text-h4: 28px;

  /* Menüs dürfen sich abheben, aber ohne Leuchten. */
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.45);
}

html,
body {
  background: var(--color-bg-primary);
  font-family: var(--font-plex);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Sichtbarer Tastaturfokus auf allem, was man bedienen kann. */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ── Seitenkopf: normale Überschrift, keine Versal-Zeile darüber ── */
.page-title {
  font-family: var(--font-plex);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.page-sub {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.page-eyebrow,
.eyebrow {
  margin-bottom: 4px;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Kopfzeile ─────────────────────────────────────── */
.hdr {
  height: 56px;
  gap: 16px;
  padding: 0 24px;
}
.hdr__status {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 14px;
}
.hdr__brand-mark {
  border-radius: 4px;
  box-shadow: none;
}
.hdr__avatar {
  border-radius: 4px;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-stroke-strong);
  color: var(--color-text-primary);
  font-family: var(--font-plex-mono);
  font-weight: 500;
}
.dot--pulse {
  animation: none !important;
}

/* ── Seitenleiste ──────────────────────────────────── */
.side {
  width: 224px;
  background: var(--color-bg-primary);
  padding: 20px 12px;
}
.side__brand {
  font-family: var(--font-plex);
  font-weight: 600;
  font-size: 18px;
  padding: 0 8px 16px;
}
.side__section {
  padding: 16px 10px 4px;
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}
.side__link {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
}
.side__link.is-active {
  background: var(--color-bg-raised);
  box-shadow: none;
  font-weight: 500;
}
.side__outbound {
  font-size: 12px;
}
.side__footer {
  font-size: 14px;
}

/* ── Flächen: flach, 8px, eine Rahmenfarbe ─────────── */
.card {
  border-radius: 8px;
  background: var(--color-bg-secondary);
  border-color: var(--color-stroke-divider);
}
.card--hover:hover {
  background: var(--color-bg-raised);
  border-color: var(--color-stroke-strong);
}
.card__title {
  font-size: 16px;
  font-weight: 600;
}
.card__sub {
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.detail-bar {
  border-radius: 8px;
  background: var(--color-bg-secondary);
}
.detail-bar.is-active::before,
.tn-glow-ring {
  content: none;
  display: none;
  animation: none;
}
.detail-bar.is-active {
  border-color: var(--color-brand);
}

/* ── Kennzahlen: Etikett ohne Versalien, Wert in Plex Mono ── */
.kpi {
  gap: 8px;
}
.kpi__label {
  font-size: 14px;
  color: var(--color-text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.kpi__value {
  font-family: var(--font-plex-mono);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.01em;
}
.kpi__value--lg {
  font-size: 28px;
}
.kpi__sub {
  font-size: 12px;
}

/* ── Knöpfe wie Knopf.astro: rechteckig, 44px, primär im Markengrün ── */
.btn {
  height: auto;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 4px;
  font-family: var(--font-plex);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn--sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: 4px;
}
.btn--lg {
  min-height: 44px;
  padding: 0 24px;
  font-size: 14px;
}
.btn--solid {
  background: var(--color-brand);
  color: var(--color-text-dark);
  font-weight: 600;
}
.btn--solid:hover {
  background: var(--color-brand-hover);
  filter: none;
}
.btn--outline {
  border-color: var(--color-stroke-strong);
  color: var(--color-text-primary);
}
.btn--outline:hover {
  border-color: var(--color-text-secondary);
  background: var(--color-bg-raised);
}
.btn--danger {
  border-color: var(--color-error-stroke);
  color: var(--color-error);
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 4px;
}

/* ── Schalter in Kartenköpfen als Segment-Schalter ── */
.tabs {
  padding: 0;
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.tab {
  min-height: 36px;
  padding: 0 14px;
  margin: 0 -1px 0 0;
  border: 1px solid var(--color-stroke-strong);
  border-radius: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.tab:first-child {
  border-radius: 4px 0 0 4px;
}
.tab:last-child {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
}
.tab:only-child {
  border-radius: 4px;
}
.tab.is-active {
  background: var(--color-bg-raised);
  color: var(--color-text-primary);
}

/* ── Kennzeichen: rechteckig, 4px, Plex Mono ──────── */
.chip,
.trend,
.ex,
.state-chip {
  border-radius: 4px;
  font-size: 12px;
}
.chip,
.state-chip,
.trend {
  font-family: var(--font-plex-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.state-chip {
  text-transform: none;
}
.kbd {
  font-family: var(--font-plex-mono);
  font-size: 12px;
}

/* ── Tabellen ──────────────────────────────────────── */
.tbl {
  font-size: 14px;
}
.tbl thead th {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ── Felder: Rahmen mit 3:1, 4px ──────────────────── */
.search {
  min-height: 36px;
  border-radius: 4px;
  border-color: var(--color-stroke-strong) !important;
  background: var(--color-bg-secondary);
  font-size: 14px;
}
.search input {
  font-size: 14px;
}

/* Zeichen in den Kopf- und Formularsektionen, die bisher als Versal-Etikett liefen. */
.ng-keys-group-title,
.ng-notify-title,
.ng-onboard-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  color: var(--color-text-primary);
}

/* ── Formulare ─────────────────────────────────────── */
.ng-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: none;
  letter-spacing: 0;
}
.ng-input {
  min-height: 44px;
  padding: 10px 12px;
  border-color: var(--color-stroke-strong);
  border-radius: 4px;
  background: var(--color-bg-primary);
  font-size: 14px;
}
.ng-hint {
  font-size: 12px;
}
.ng-onboard-badge {
  border-radius: 4px;
  font-family: var(--font-plex-mono);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.02em;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-brand);
}
/* Auf Touch-Geräten 16px, sonst vergrößert iOS beim Antippen die Seite. */
@media (pointer: coarse) {
  .ng-input,
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    font-size: 16px;
  }
}

h1.page-title {
  margin: 0;
}
.hdr__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-plex);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Umschalter Einfach / Profi in der Seitenleiste ── */
.side__mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 12px 0 0;
}
.side__mode-btn {
  min-height: 36px;
  border: 1px solid var(--color-stroke-strong);
  background: none;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.side__mode-btn:first-child {
  border-radius: 4px 0 0 4px;
}
.side__mode-btn:last-child {
  border-radius: 0 4px 4px 0;
  margin-left: -1px;
}
.side__mode-btn:hover {
  color: var(--color-text-primary);
}
.side__mode-btn.is-active {
  background: var(--color-bg-raised);
  color: var(--color-text-primary);
}