/* ===================================================== */
/* THEME VARIABLEN                                       */
/* ===================================================== */

:root{
  --bg:#f4f6f9;
  --sidebar-bg:#ffffff;
  --sidebar-text:#444;
  --sidebar-title:#111;
  --sidebar-hover:#eef1ff;
  --card-bg:#ffffff;
  --text:#111;
}

body.dark{
  --bg:#0f1117;
  --sidebar-bg:#141627;
  --sidebar-text:#b8c0ff;
  --sidebar-title:#ffffff;
  --sidebar-hover:rgba(255,255,255,0.08);
  --card-bg:#1c1f2e;
  --text:#f1f3ff;
}

/* ===================================================== */
/* GLOBAL                                                */
/* ===================================================== */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:Segoe UI,sans-serif;
}

html,body{
  width:100%;
  min-height:100%;
}

body{
  display:flex;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  transition:.3s;
  overflow-x:hidden;
}

h3{
  margin-bottom:18px;
}

/* ===================================================== */
/* SIDEBAR AS CARD                                       */
/* ===================================================== */

.sidebar{
  width:260px;
  min-width:260px;
  margin:14px 0 14px 14px;
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  align-self:flex-start;
  background:var(--card-bg);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.06);
}

.sidebar h2{
  margin-bottom:32px;
  color:var(--sidebar-title);
  font-size:18px;
  font-weight:700;
}

.sidebar a{
  color:var(--sidebar-text);
  text-decoration:none;
  padding:14px 16px;
  border-radius:12px;
  margin-bottom:10px;
  transition:all .2s ease;
}

.sidebar a:hover{
  background:var(--sidebar-hover);
  transform:translateX(4px);
}

.sidebar a.active{
  background:var(--sidebar-hover);
  font-weight:600;
}

/* ===================================================== */
/* CONTENT                                               */
/* ===================================================== */

.content{
  flex:1;
  padding:14px 14px 14px 20px;
  min-width:0;
}

.card{
  background:var(--card-bg);
  padding:24px 30px;
  border-radius:18px;
  margin-bottom:24px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.14);
  border:1px solid rgba(255,255,255,0.04);
}

/* ===================================================== */
/* INPUTS + BUTTONS                                      */
/* ===================================================== */

input{
  width:320px;
  max-width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.15);
  background:var(--card-bg);
  color:var(--text);
  outline:none;
}

button{
  padding:6px 20px;
  border:none;
  border-radius:6px;
  background:#4f6df5;
  color:white;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease;
}

button:hover{
  opacity:.92;
}

button:active{
  transform:translateY(1px);
}

/* ===================================================== */
/* API STATUS                                            */
/* ===================================================== */

.api-row{
  display:grid;
  grid-template-columns:100px 14px auto;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

.api-status{
  display:flex;
  align-items:center;
  gap:6px;
}

.api-row span:first-child{
  text-align:left;
}

/* ===================================================== */
/* LED SYSTEM                                            */
/* ===================================================== */

.led{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
  transform:translateY(1px);
}

.led-ok{background:#2ecc71;}
.led-error{background:#e74c3c;}
.led-off{background:#999;}

.led-pulse{
  animation:ledPulse 1.2s infinite;
}

@keyframes ledPulse{
  0%{box-shadow:0 0 0 rgba(46,204,113,0.8)}
  50%{box-shadow:0 0 6px rgba(46,204,113,1)}
  100%{box-shadow:0 0 0 rgba(46,204,113,0.8)}
}

/* ===================================================== */
/* MARKET WIDGET                                         */
/* ===================================================== */

.market-card{
  min-height:130px;
  overflow:hidden;

  /* ------------------------------------- */
  /* PARAMETRIERBARE SPALTEN               */
  /* symbol | dir | price | change | spark */
  /* signal | hit | timer                  */
  /* ------------------------------------- */
  --col-symbol: 90px;
  --col-dir: 16px;
  --col-price: 120px;
  --col-change: 72px;
  --col-signal: 92px;
  --col-hit: 20px;
  --col-timer: 140px;

  --market-row-gap: 14px;

  --timer-height: 6px;
  --timer-radius: 999px;
  --timer-track: rgba(255,255,255,0.12);
  --timer-fill: #4f6df5;
  --timer-done-track: rgba(46,204,113,0.18);
  --timer-done-fill: #2ecc71;
  --timer-idle-track: rgba(255,255,255,0.10);
  --timer-idle-fill: rgba(255,255,255,0.18);
}

.market-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:14px;
  align-items:stretch;
  width:100%;
}

/* ===================================================== */
/* MARKET ROW GRID                                       */
/* ===================================================== */

.market-item{
  display:grid;
  grid-template-columns:
    var(--col-symbol)
    var(--col-dir)
    var(--col-price)
    var(--col-change)
    minmax(260px, 1fr)
    var(--col-signal)
    var(--col-hit)
    var(--col-timer);
  align-items:center;
  gap:var(--market-row-gap);
  padding:6px 0;
  width:100%;
  min-width:0;
  font-family:"JetBrains Mono", monospace;
  font-variant-numeric:tabular-nums;
}

/* ===================================================== */
/* 8 LOGISCHE ELEMENTE                                   */
/* ===================================================== */

.market-symbol{
  grid-column:1;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.market-dir{
  grid-column:2;
  width:var(--col-dir);
  text-align:center;
  white-space:nowrap;
}

.market-price-value{
  grid-column:3;
  display:inline-block;
  min-width:var(--col-price);
  text-align:right;
  white-space:nowrap;
}

.market-change{
  grid-column:4;
  display:inline-block;
  min-width:var(--col-change);
  text-align:right;
  font-size:12px;
  opacity:0.7;
  white-space:nowrap;
}

.spark{
  grid-column:5;
  width:100%;
  min-width:180px;
  height:28px;
  display:block;
  margin-right:8px;
}

.market-signal{
  grid-column:6;
  text-align:left;
  font-weight:700;
  font-size:13px;
  min-width:var(--col-signal);
  white-space:nowrap;
  padding-left:4px;
}

.market-hit{
  grid-column:7;
  width:var(--col-hit);
  text-align:center;
  font-weight:bold;
  font-size:14px;
  white-space:nowrap;
}

.signal-time{
  grid-column:8;
  width:var(--col-timer);
  min-width:var(--col-timer);
  display:flex;
  align-items:center;
  justify-self:end;
  justify-content:flex-end;
  margin-top:6px;
}

/* ===================================================== */
/* TIMER ALS LINIE                                       */
/* ===================================================== */

.signal-timer-track{
  position:relative;
  display:block;
  width:100%;
  height:var(--timer-height);
  background:var(--timer-track);
  border-radius:var(--timer-radius);
  overflow:hidden;
}

.signal-timer-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:100%;
  background:var(--timer-fill);
  border-radius:var(--timer-radius);
  transform-origin:left center;
  transition:width .35s ease;
}

.signal-timer-done .signal-timer-track{
  background:var(--timer-done-track);
}

.signal-timer-done .signal-timer-fill{
  width:0 !important;
  background:var(--timer-done-fill);
}

.signal-timer-idle .signal-timer-track{
  background:var(--timer-idle-track);
}

.signal-timer-idle .signal-timer-fill{
  width:0 !important;
  background:var(--timer-idle-fill);
}

/* ===================================================== */
/* PRICE ANIMATION                                       */
/* ===================================================== */

.price-up{
  color:#2ecc71;
  animation:flashUp .4s;
}

.price-down{
  color:#e74c3c;
  animation:flashDown .4s;
}

@keyframes flashUp{
  0%{background:rgba(46,204,113,0.3)}
  100%{background:transparent}
}

@keyframes flashDown{
  0%{background:rgba(231,76,60,0.3)}
  100%{background:transparent}
}

/* ===================================================== */
/* SIGNAL FARBEN                                         */
/* ===================================================== */

.signal-buy{color:#2ecc71;}
.signal-hold{color:#f1c40f;}
.signal-sell{color:#e74c3c;}

.signal-text{
  font-weight:700;
  font-size:13px;
}

.signal-accuracy{
  font-size:12px;
  opacity:0.75;
  font-weight:500;
  margin-left:6px;
}

/* ===================================================== */
/* HIT INDICATOR                                         */
/* ===================================================== */

.hit-true{color:#2ecc71;}
.hit-false{color:#e74c3c;}

/* ===================================================== */
/* WIDGET TRANSITION                                     */
/* ===================================================== */

#marketWidgetContainer{
  transition:opacity .25s ease, transform .25s ease;
  width:100%;
  margin-bottom:20px;
}

/* ===================================================== */
/* STRATEGY PERFORMANCE                                  */
/* ===================================================== */

.strategy-performance{
  font-size:14px;
  font-weight:600;
  color:#cfd6ff;
  letter-spacing:0.5px;
}

.strategy-performance span{
  margin:0 4px;
}

.strategy-buy{color:#00d084;}
.strategy-sell{color:#ff4d4d;}
.strategy-hold{color:#ffd24d;}
.strategy-total{color:#8ab4ff;}

/* ===================================================== */
/* RESPONSIVE                                            */
/* ===================================================== */

@media (max-width: 1100px){
  .sidebar{
    width:230px;
    min-width:230px;
  }

  .market-card{
    --col-symbol: 80px;
    --col-dir: 16px;
    --col-price: 96px;
    --col-change: 58px;
    --col-signal: 64px;
    --col-hit: 20px;
    --col-timer: 120px;
    --market-row-gap: 10px;
  }
}

@media (max-width: 900px){
  body{
    display:block;
    overflow-x:hidden;
  }

  .sidebar{
    width:auto;
    min-width:0;
    margin:14px;
  }

  .content{
    padding:0 14px 14px 14px;
  }

  .market-item{
    grid-template-columns:
      var(--col-symbol)
      var(--col-dir)
      var(--col-price)
      var(--col-change)
      minmax(160px, 1fr)
      var(--col-signal)
      var(--col-hit)
      var(--col-timer);
  }
}