/* Trading Platform — tume teema */

:root {
  --taust:  #0d1117;
  --pind1:  #161b22;
  --pind2:  #1c2128;
  --piir:   #30363d;
  --tekst1: #e6edf3;
  --tekst2: #8b949e;
  --kuldne: #f0a500;
  --roheline: #3fb950;
  --punane:   #f85149;
  --sinine:   #58a6ff;
  --lilla:    #bc8cff;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--taust);
  color: var(--tekst1);
  font-size: 14px;
  height: 100vh;
  overflow: hidden;
}

/* ── Päis ── */
#paas {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .6rem 1rem;
  background: var(--pind1);
  border-bottom: 1px solid var(--piir);
  height: 52px;
}

#paas .logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--kuldne);
  white-space: nowrap;
}

#coin-nimi {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tekst1);
}

#praegune-hind {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--kuldne);
  min-width: 90px;
}

#hind-muutus {
  font-size: .9rem;
  min-width: 70px;
}
.muutus-yles  { color: var(--roheline); }
.muutus-alla  { color: var(--punane); }

/* Timeframe nupud */
#tf-nupud {
  display: flex;
  gap: .4rem;
  margin-left: auto;
}

.tf-nupp {
  padding: .3rem .8rem;
  background: var(--pind2);
  border: 1px solid var(--piir);
  color: var(--tekst2);
  border-radius: 4px;
  cursor: pointer;
  font-size: .85rem;
  transition: all .15s;
}
.tf-nupp:hover   { border-color: var(--kuldne); color: var(--tekst1); }
.tf-nupp.aktiivne {
  background: var(--kuldne);
  border-color: var(--kuldne);
  color: #000;
  font-weight: 600;
}

#valja-nupp {
  padding: .3rem .8rem;
  background: transparent;
  border: 1px solid var(--piir);
  color: var(--tekst2);
  border-radius: 4px;
  cursor: pointer;
  font-size: .85rem;
}
#valja-nupp:hover { border-color: var(--punane); color: var(--punane); }

/* ── Põhipaigutus ── */
#sisu {
  display: grid;
  grid-template-columns: 1fr 260px;
  grid-template-rows: 1fr auto auto auto;
  height: calc(100vh - 52px);
  gap: 0;
}

/* ── Graafiku paneel ── */
#graafik-paneel {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  border-right: 1px solid var(--piir);
  border-bottom: 1px solid var(--piir);
}

#graafik-konteiner {
  width: 100%;
  height: 100%;
}

/* ── RSI paneel ── */
#rsi-paneel {
  grid-column: 1;
  grid-row: 2;
  height: 120px;
  border-right: 1px solid var(--piir);
  border-bottom: 1px solid var(--piir);
  position: relative;
}

#rsi-konteiner {
  width: 100%;
  height: 100%;
}

/* ── MACD paneel ── */
#macd-paneel {
  grid-column: 1;
  grid-row: 3;
  height: 100px;
  border-right: 1px solid var(--piir);
  border-bottom: 1px solid var(--piir);
  position: relative;
}

#macd-konteiner {
  width: 100%;
  height: 100%;
}

/* ── TSI paneel ── */
#tsi-paneel {
  grid-column: 1;
  grid-row: 4;
  height: 100px;
  border-right: 1px solid var(--piir);
  position: relative;
}

#tsi-konteiner {
  width: 100%;
  height: 100%;
}

/* Paneeli pealkiri */
.paneel-pealkiri {
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: .75rem;
  color: var(--tekst2);
  z-index: 10;
  pointer-events: none;
}

/* ── Külgpaneel ── */
#kulg-paneel {
  grid-column: 2;
  grid-row: 1 / 5;
  background: var(--pind1);
  overflow-y: auto;
  padding: .8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* EMA nähtavuse lülitid */
#ema-lylitid h3 {
  font-size: .8rem;
  color: var(--tekst2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .5rem;
}

.ema-lylit {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem 0;
  cursor: pointer;
  user-select: none;
}
.ema-lylit input[type=checkbox] { cursor: pointer; accent-color: var(--kuldne); }
.ema-lylit span { font-size: .85rem; }

/* Mustrite legend */
#mustrid-legend h3 {
  font-size: .8rem;
  color: var(--tekst2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .5rem;
}

.legend-rida {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--piir);
  font-size: .8rem;
}
.legend-rida:last-child { border-bottom: none; }

.legend-marker {
  font-size: 1rem;
  line-height: 1.2;
  min-width: 16px;
  text-align: center;
}
.legend-rida.long   .legend-marker { color: var(--roheline); }
.legend-rida.short  .legend-marker { color: var(--punane); }
.legend-rida.neutral .legend-marker { color: var(--kuldne); }

.legend-tekst { color: var(--tekst2); line-height: 1.4; }
.legend-tekst b { color: var(--tekst1); }

/* Signaalid */
#signaalid-plokk h3 {
  font-size: .8rem;
  color: var(--tekst2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .5rem;
}

.signaal-rida {
  padding: .4rem .5rem;
  border-radius: 4px;
  margin-bottom: .3rem;
  font-size: .8rem;
  border-left: 3px solid transparent;
}
.signaal-long    { background: rgba(63,185,80,.1);  border-color: var(--roheline); }
.signaal-short   { background: rgba(248,81,73,.1);  border-color: var(--punane); }
.signaal-neutral { background: rgba(240,165,0,.1);  border-color: var(--kuldne); }

.signaal-rida .signaal-muster { font-weight: 600; }
.signaal-rida .signaal-info   { color: var(--tekst2); font-size: .75rem; }

#signaalid-tyhjas {
  color: var(--tekst2);
  font-size: .85rem;
  font-style: italic;
}

/* Laadimine */
#laadimine {
  position: fixed;
  inset: 0;
  background: rgba(13,17,23,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  font-size: 1rem;
  color: var(--kuldne);
}
#laadimine.peidetud { display: none; }

/* Tõrketeade */
#torketeade {
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: var(--punane);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 4px;
  font-size: .85rem;
  z-index: 200;
}