/* ==========================================================================
   EdgeTrading · Design System "Ion"  —  Komponenten
   Setzt ion-tokens.css voraus. Framework-agnostisch (plain CSS).
   Klassen sind mit .et- präfixiert, um Kollisionen zu vermeiden.
   ========================================================================== */

/* ---- Base ---- */
.et-app-bg{
  background:
    var(--et-glow-mint),
    var(--et-glow-blue),
    var(--et-bg);
  color: var(--et-text);
  font-family: var(--et-font-body);
  font-size: var(--et-fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---- Typografie-Helfer ---- */
.et-h1{ font-family:var(--et-font-display); font-size:var(--et-fs-display); font-weight:var(--et-fw-bold); letter-spacing:-.02em; }
.et-h2{ font-family:var(--et-font-display); font-size:var(--et-fs-h2); font-weight:var(--et-fw-bold); }
.et-h3{ font-family:var(--et-font-display); font-size:var(--et-fs-h3); font-weight:var(--et-fw-bold); }
.et-num{ font-family:var(--et-font-display); font-weight:var(--et-fw-bold); letter-spacing:-.02em; } /* alle Kennzahlen */
.et-label{ font-family:var(--et-font-mono); font-size:var(--et-fs-label); letter-spacing:var(--et-tracking-label);
           text-transform:uppercase; color:var(--et-text-mute); }
.et-data{ font-family:var(--et-font-mono); color:var(--et-text-dim); } /* Ticker, Zeiten, IDs */

/* ---- Buttons ---- */
.et-btn{
  font-family:var(--et-font-display); font-weight:var(--et-fw-medium);
  font-size:var(--et-fs-sm); padding:10px 16px; border-radius:var(--et-r-md);
  background:var(--et-panel); color:var(--et-text);
  border:1px solid var(--et-line-2); cursor:pointer; transition:var(--et-transition);
}
.et-btn:hover{ border-color:var(--et-blue); color:var(--et-blue); }
.et-btn--primary{ background:var(--et-grad-btn); color:var(--et-ink); border:none; }
.et-btn--primary:hover{ color:var(--et-ink); filter:brightness(1.05); }
.et-btn--mint{ background:var(--et-mint); color:var(--et-ink-dark); border:none; }

/* ---- Panels / Cards ---- */
.et-panel{
  background:linear-gradient(180deg, var(--et-panel-2), var(--et-panel));
  border:1px solid var(--et-line); border-radius:var(--et-r-xl); overflow:hidden;
}
.et-panel__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--et-line);
}
.et-card{
  background:var(--et-panel); border:1px solid var(--et-line);
  border-radius:var(--et-r-lg); padding:16px; transition:var(--et-transition-lg);
}
.et-card:hover{ border-color:var(--et-line-2); transform:translateY(-3px); }

/* ---- KPI-Karte (mit farbigem Akzentstreifen links) ---- */
.et-kpi{
  position:relative; overflow:hidden; padding:17px;
  background:linear-gradient(180deg, var(--et-panel-2), var(--et-panel));
  border:1px solid var(--et-line); border-radius:var(--et-r-lg); transition:var(--et-transition-lg);
}
.et-kpi:hover{ border-color:var(--et-line-2); transform:translateY(-2px); }
.et-kpi::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--et-blue); opacity:.9; }
.et-kpi--mint::before{ background:var(--et-mint); }
.et-kpi--pos::before{ background:var(--et-pos); }
.et-kpi__label{ font-family:var(--et-font-mono); font-size:var(--et-fs-label); letter-spacing:var(--et-tracking-label);
                text-transform:uppercase; color:var(--et-text-dim); }
.et-kpi__value{ font-family:var(--et-font-display); font-size:var(--et-fs-kpi); font-weight:var(--et-fw-bold);
                letter-spacing:-.02em; margin:10px 0 2px; }
.et-kpi__value .unit{ font-size:15px; color:var(--et-text-mute); }
.et-kpi__sub{ font-size:var(--et-fs-xs); color:var(--et-text-mute); }

/* ---- Badges / Deltas ---- */
.et-badge{ font-family:var(--et-font-mono); font-size:var(--et-fs-xs); padding:3px 8px; border-radius:6px; letter-spacing:.04em; }
.et-badge--blue{ background:var(--et-blue-soft); color:var(--et-blue); }
.et-badge--mint{ background:var(--et-mint-soft); color:var(--et-mint); }
.et-badge--pos{ background:rgba(46,230,182,.15); color:var(--et-pos); }
.et-badge--neg{ background:rgba(255,97,126,.15); color:var(--et-neg); }
.et-badge--solid-mint{ background:var(--et-mint); color:var(--et-ink-dark); font-weight:var(--et-fw-bold); }

/* ---- Sidebar-Navigation ---- */
.et-nav__item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  color:var(--et-text-dim); font-size:13px; font-weight:var(--et-fw-medium);
  border:1px solid transparent; transition:var(--et-transition); cursor:pointer;
}
.et-nav__item:hover{ background:var(--et-panel); color:var(--et-text); }
.et-nav__item.is-active{ background:var(--et-blue-soft); color:var(--et-blue); border-color:rgba(77,124,255,.3); }
.et-nav__item svg{ width:16px; height:16px; opacity:.8; }

/* ---- Pills / Filter ---- */
.et-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--et-panel); border:1px solid var(--et-line); border-radius:9px;
  padding:8px 12px; font-family:var(--et-font-mono); font-size:var(--et-fs-sm);
  color:var(--et-text-dim); cursor:pointer; transition:var(--et-transition);
}
.et-pill:hover{ border-color:var(--et-line-2); }
.et-pill .k{ color:var(--et-text-mute); letter-spacing:.08em; }
.et-pill .v{ color:var(--et-text); font-weight:var(--et-fw-bold); }

/* ---- Segmented Control ---- */
.et-seg{ display:inline-flex; background:var(--et-panel); border:1px solid var(--et-line); border-radius:9px; overflow:hidden; }
.et-seg button{ background:none; border:none; color:var(--et-text-dim); font-family:var(--et-font-mono);
                font-size:var(--et-fs-sm); padding:8px 13px; cursor:pointer; transition:var(--et-transition); }
.et-seg button.is-on{ background:var(--et-blue-soft); color:var(--et-blue); }
.et-seg--mint button.is-on{ background:var(--et-mint-soft); color:var(--et-mint); }

/* ---- Live-Dot ---- */
.et-live-dot{ width:8px; height:8px; border-radius:50%; background:var(--et-mint);
              box-shadow:0 0 8px var(--et-mint); animation:et-pulse 2s infinite; }
@keyframes et-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---- Tabelle (Report-Breakdown) ---- */
.et-table{ width:100%; border-collapse:collapse; font-size:13px; }
.et-table thead th{
  font-family:var(--et-font-mono); font-size:var(--et-fs-label); letter-spacing:.06em; text-transform:uppercase;
  color:var(--et-text-mute); text-align:right; padding:12px 16px; border-bottom:1px solid var(--et-line);
  white-space:nowrap; position:sticky; top:0; background:var(--et-panel);
}
.et-table thead th:first-child{ text-align:left; }
.et-table tbody td{ padding:13px 16px; border-bottom:1px solid var(--et-line); text-align:right; font-family:var(--et-font-mono); }
.et-table tbody td:first-child{ text-align:left; font-family:var(--et-font-body); font-weight:var(--et-fw-medium); color:var(--et-text); }
.et-table tbody tr:hover{ background:var(--et-panel-2); }
.et-table .pos{ color:var(--et-pos); } .et-table .neg{ color:var(--et-neg); }

/* ---- Avatar ---- */
.et-avatar{ width:34px; height:34px; border-radius:9px; background:var(--et-grad-brand);
            display:grid; place-items:center; font-family:var(--et-font-display);
            font-weight:var(--et-fw-bold); color:var(--et-ink-dark); font-size:13px; }