/* =======================
   BASE
======================= */
body {
  background:#0b0e11;
  color:#eaecef;
  font-family:Arial, sans-serif;
  margin:0;
  font-size:14px;
}

.up {color:#0ecb81}
.down {color:#f6465d}

.trade-page {
  padding:10px;
  max-width:1200px;
  margin:auto;
}

/* =======================
   HEADER
======================= */
.trade-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.trade-pair {
  font-weight:bold;
  font-size:18px;
}

.trade-price {
  font-size:24px;
}

/* =======================
   STATS
======================= */
.trade-stats {
  display:flex;
  gap:18px;
  margin:6px 0;
}

.trade-stats span {
  display:block;
  color:#94a3b8;
  font-size:12px;
}

/* =======================
   TABS (FIXED)
======================= */
.trade-tabs-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.trade-tabs-nav button {
  flex: 1;
  padding: 7px;
  background: #13161c;
  border: none;
  color: #9ca3af;
  font-size: 14px;
  cursor: pointer;
}

.trade-tabs-nav button.active {
  background: #181a20;
  color: #fff;
}

/* ===== FIX FOR TAB CONTENT ===== */
/* НЕ используем display:none — ломает grid */
.trade-block {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Активная вкладка */
.trade-block.active {
  position: relative;
  visibility: visible;
  pointer-events: auto;
}

/* =======================
   LAYOUT
======================= */
.trade-layout {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:10px;
}

/* =======================
   ORDERBOOK
======================= */
.orderbook-box {
  background:#080a0d;
  border-radius:8px;
  padding:8px;
  min-height:420px;
}

.orderbook-header,
.ob-row {
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  column-gap:8px;
  align-items:center;
}

/* =======================
   HEADER
======================= */
.orderbook-header {
  color:#94a3b8;
  font-size:13px;
  border-bottom:1px solid #1f2933;
  padding-bottom:4px;
  margin-bottom:4px;
}

/* header column align */
.orderbook-header span:nth-child(1) {
  text-align:left;
  padding-left:2px;
}

.orderbook-header span:nth-child(2) {
  text-align:right;
  padding-right:6px;
}

.orderbook-header span:nth-child(3) {
  text-align:right;
  padding-right:6px;
}

/* =======================
   LIST
======================= */
.orderbook-list {
  margin-top:4px;
}

/* =======================
   ROW
======================= */
.ob-row {
  font-size:14px;
  padding:5px 7px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

.ob-row:hover {
  background:rgba(255,255,255,.05);
}

.ob-row span {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
  z-index:2;
}

/* row column align */
.ob-row span:nth-child(1) {
  text-align:left;
  padding-left:2px;
}

.ob-row span:nth-child(2) {
  text-align:right;
  padding-right:6px;
}

.ob-row span:nth-child(3) {
  text-align:right;
  padding-right:6px;
  opacity:.9;
}

/* =======================
   COLORS
======================= */
.ob-ask span {
  color:#f6465d;
}

.ob-bid span {
  color:#0ecb81;
}

/* =======================
   DEPTH BAR
======================= */
.ob-row::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--w,0%);
  z-index:1;
}

.ob-ask::before {
  background:rgba(246,70,93,.13);
}

.ob-bid::before {
  background:rgba(14,203,129,.13);
}

/* =======================
   MID PRICE
======================= */
.ob-mid {
  text-align:center;
  font-size:11px;
  color:#f0b90b;
  font-weight:normal;
  margin:8px 0;
}

/* =======================
   FLASHES
======================= */
.flash-buy {
  background:rgba(14,203,129,.25)!important;
}

.flash-sell {
  background:rgba(246,70,93,.25)!important;
}


/* =======================
   FORMS
======================= */
.trade-forms-box {
  background:#080a0d;
  padding:12px;
  border-radius:8px;
  min-height:420px;
}

.trade-buy-sell-tabs {
  display:flex;
  margin-bottom:10px;
}

.trade-buy-sell-tabs button {
  flex:1;
  padding:9px;
  background:#13161c;
  border:none;
  font-size:15px;
  color:#9ca3af;
}

.trade-buy-sell-tabs button.active {
  background:#0ecb81;
  color:#000;
}

#sellTab.active {
  background:#f6465d;
  color:#fff;
}

.tf-row {margin-bottom:9px;}

label {
  font-size:14px;
  color:#9ca3af;
}

input {
  width:100%;
  background:#020617;
  border:1px solid #1f2933;
  color:#fff;
  padding:8px;
  font-size:16px;
}

.percent-row {
  display:flex;
  gap:6px;
}

.percent-row button {
  flex:1;
  border:1px solid #1f2933;
  background:#111827;
  color:#fff;
  padding:7px;
  cursor:pointer;
}

/* buttons */
.trade-btn {
  width:100%;
  padding:12px;
  border:none;
  border-radius:4px;
  font-size:17px;
  font-weight:bold;
  cursor:pointer;
  margin-top:10px;
}

.buy-btn {background:#0ecb81;color:#000;}
.sell-btn {background:#f6465d;color:#fff;}

.hidden {display:none;}

/* =======================
   TABLES
======================= */
table {
  width:100%;
  border-collapse:collapse;
}

thead {
  color:#94a3b8;
  border-bottom:1px solid #1f2933;
}

td,th {
  padding:8px;
  text-align:center;
  font-size:15px;
}

/* =======================
   BUTTONS
======================= */
.cancel-btn {
  background:#1f2933;
  color:#f6465d;
  border:1px solid #f6465d;
  padding:5px 9px;
  font-size:14px;
  cursor:pointer;
  border-radius:4px;
}

.cancel-btn:hover {background:#f6465d;color:#fff;}

/* =======================
   LAST TRADES (small)
======================= */
.last-trades {
  margin-top:18px;
  overflow-y:auto;
  background:#05070a;
  border:1px solid #1f2933;
  border-radius:7px;
  padding:6px;
}

.last-trades-header,
.last-trades-row {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
}

.last-trades-header {
  font-size:9px;
  color:#94a3b8;
  border-bottom:1px solid #1f2933;
  margin-bottom:4px;
  padding-bottom:3px;
}

.last-trades-row {
  font-size:9px;
  line-height:1.2;
  background:#020617;
  margin:2px 0;
  padding:3px 6px;
  border-radius:4px;
}

/* BUY / SELL color in last trades */
.trade-buy {color:#0ecb81;}
.trade-sell{color:#f6465d;}

/* =======================
   BALANCE
======================= */
#balBase,
#balQuote {
  margin-top:8px;
}

/* зелёный компактный блок */
.balance-box {
  background:rgba(14,203,129,.08);
  border:1px solid #0ecb81;
  color:#0ecb81;
  padding:4px 8px;
  border-radius:6px;
  font-size:11px;
  display:inline-block;
  font-weight:bold;
}

/* старые стили можно оставить – вдруг пригодятся ещё */
.bal-label {
  display:inline-block;
  font-size:10px;
  border:1px solid #0ecb81;
  padding:2px 6px;
  border-radius:4px;
  margin-right:6px;
}

#balBase b,
#balQuote b {
  font-weight:normal;
  color:#0ecb81;
}

/* =======================
   RESPONSIVE
======================= */
@media (max-width:720px) {
  .trade-layout {grid-template-columns:1fr;}
  .trade-price {font-size:22px;}
  .ob-row {font-size:13px;}
  .last-trades-row {font-size:9px;}
}

/* =======================
   DESKTOP PRO
======================= */
@media (min-width:900px) {
  .trade-layout {grid-template-columns:2.6fr 1.4fr;}
 
  .orderbook-box,
  .trade-forms-box {min-height:560px;}
  .trade-tabs-nav button {font-size:15px;}
}

/* =======================
   MOBILE FIX FOR TABLE
======================= */
@media (max-width:720px) {

  .orderbook-box {
    overflow-x: auto;
  }

  table {
    min-width: 640px;
  }

  td, th {
    white-space: nowrap;
    font-size: 12px;
  }
}


/* =======================
   TOGGLE LAST TRADES BUTTON
======================= */
.toggle-trades-btn {
  background: #13161c;
  color: #9ca3af;
  border: 1px solid #1f2933;
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 5px;
  cursor: pointer;
  margin: 6px 0;
}

.toggle-trades-btn:hover {
  background: #1f2933;
  color: #fff;
}

.toggle-trades-btn.hide {
  color: #f6465d;
  border-color: #f6465d;
}

.toggle-trades-btn.show {
  color: #0ecb81;
  border-color: #0ecb81;
}


/* =======================
   ORDERBOOK EXTRA
======================= */
.orderbook-separator {
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 4px 0;
}

.orderbook-scroll {
  display: flex;
  flex-direction: column;
  height: 570px;
}

.orderbook-sell,
.orderbook-buy {
  overflow-y: auto;
  flex: 1;
}

.ob-mid {
  text-align: center;
  font-weight: bold;
  padding: 6px;
  background: #020617;
}


/* =======================
   CHART
======================= */
.chart-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.chart-toolbar button {
  background: #111827;
  color: #e5e7eb;
  border: 0;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.chart-toolbar button.active {
  background: #2563eb;
}

#chartCanvas {
  width: 100%;
  height: 480px;
  background: #020617;
  display: block;
  border-radius: 6px;
}

.hidden {
  display: none;
}

.trade-stats-left {
  display: flex;
  gap: 6px;
  align-items: center;
}


/* =======================
   ANDROID DESKTOP MODE FIX
   (ОБЯЗАТЕЛЬНО)
======================= */
.orderbook-box,
.orderbook-box * {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* =======================
   MOBILE DEVICE (DESKTOP MODE)
   Телефон + версия для ПК
======================= */
@media (pointer: coarse) {

  .ob-row {
    font-size: 10px;
  }

  .ob-row span {
    font-size: 10px;
    line-height: 1.15;
  }

}