/* ════════════════════════════════════════════
   STOCK.CSS — class names match market.js / crypto.js / miner.js
   ════════════════════════════════════════════ */

/* ── WRAPPER ── */
.stock-wrap { display:flex; flex-direction:column; height:100%; }

/* ── HEADER ── */
.stock-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px 8px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.stock-title {
  font-family:'Orbitron',monospace; font-size:0.82rem;
  font-weight:700; color:var(--text-bright); letter-spacing:1px;
}
.stock-header-stats { display:flex; gap:10px; align-items:center; }
.stock-total-val {
  font-family:'Orbitron',monospace; font-size:0.72rem;
  font-weight:700; color:var(--green);
}
.stock-mining-val { font-size:0.65rem; font-weight:700; color:#f4a030; }

/* ── TABS ── */
.stock-tabs {
  display:flex; border-bottom:1px solid var(--border); flex-shrink:0;
}
.stock-tab {
  flex:1; padding:9px; background:transparent; border:none;
  border-bottom:2px solid transparent; color:var(--text-dim);
  font-size:0.72rem; font-weight:700; cursor:pointer; transition:all 0.2s;
}
.stock-tab:hover { color:var(--text); }
.stock-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
.stock-content { flex:1; overflow-y:auto; }

/* ── STOCK TABLE ── */
.stock-table { display:flex; flex-direction:column; padding:6px 10px 12px; gap:2px; }

.stock-exchange-group { margin-bottom:6px; }

.stock-exchange-label {
  font-size:0.62rem; font-weight:700; color:var(--text-dim);
  letter-spacing:1px; padding:6px 4px 4px;
  border-bottom:1px solid var(--border); margin-bottom:3px;
}

.stock-row {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:9px; cursor:pointer;
  transition:background 0.15s; border:1px solid transparent;
}
.stock-row:hover { background:var(--bg2); border-color:var(--border2); }
.stock-row.selected { background:var(--bg2); border-color:var(--gold); }

.stock-sym {
  font-family:'Orbitron',monospace; font-size:0.68rem;
  font-weight:700; color:var(--text-bright); min-width:44px;
}
.stock-name {
  flex:1; font-size:0.62rem; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stock-price {
  font-family:'Orbitron',monospace; font-size:0.68rem;
  font-weight:700; color:var(--text-bright); min-width:70px; text-align:right;
}
.stock-chg {
  font-size:0.62rem; font-weight:700; min-width:62px; text-align:right;
}
.stock-chg.up { color:var(--green); }
.stock-chg.dn { color:var(--red); }
.stock-owned-dot { color:var(--gold); font-size:0.6rem; }

/* ── DETAIL VIEW ── */
.stock-detail {
  display:flex; flex-direction:column; gap:0; padding-bottom:16px;
}

.stock-back-btn {
  margin:10px 12px 6px; padding:7px 12px;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:8px; color:var(--text-dim); font-size:0.68rem;
  font-weight:700; cursor:pointer; display:inline-block;
  align-self:flex-start; transition:all 0.15s;
}
.stock-back-btn:hover { color:var(--text); border-color:var(--gold); }

.stock-detail-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:8px 14px 10px;
}
.stock-detail-sym {
  font-family:'Orbitron',monospace; font-size:1rem;
  font-weight:700; color:var(--text-bright);
}
.stock-detail-name { font-size:0.62rem; color:var(--text-dim); margin-top:3px; }
.stock-detail-price {
  font-family:'Orbitron',monospace; font-size:0.95rem;
  font-weight:700; color:var(--text-bright);
}
.stock-detail-chg { font-size:0.68rem; font-weight:700; margin-top:3px; text-align:right; }
.stock-detail-chg.up { color:var(--green); }
.stock-detail-chg.dn { color:var(--red); }

/* Chart */
.stock-chart-wrap {
  padding:8px 14px 6px;
  background:var(--bg2); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stock-chart-svg { width:100%; height:180px; display:block; }
.stock-chart-label {
  font-size:0.58rem; color:var(--text-dim);
  text-align:right; padding-top:4px;
}
.stock-chart-empty {
  height:100px; display:flex; align-items:center; justify-content:center;
  font-size:0.68rem; color:var(--text-dim);
}

/* Position bar */
.stock-position-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 14px; background:rgba(0,200,83,0.06);
  border-bottom:1px solid var(--border); font-size:0.65rem;
  color:var(--text-dim); gap:8px; flex-wrap:wrap;
}
.stock-position-bar .up { color:var(--green); font-weight:700; }
.stock-position-bar .dn { color:var(--red); font-weight:700; }

/* Trade panel */
.stock-trade-panel {
  padding:12px 14px; display:flex; flex-direction:column; gap:10px;
}
.stock-trade-pcts { display:flex; gap:6px; }
.stock-pct-btn {
  flex:1; padding:7px; background:var(--bg2);
  border:1px solid var(--border2); border-radius:7px;
  color:var(--text-dim); font-size:0.65rem; font-weight:700;
  cursor:pointer; transition:all 0.15s;
}
.stock-pct-btn:hover { border-color:var(--gold); color:var(--gold); }

.stock-qty-input {
  width:100%; padding:9px 11px; background:var(--bg2);
  border:1px solid var(--border2); border-radius:8px;
  color:var(--text); font-size:0.75rem; outline:none;
  box-sizing:border-box; transition:border-color 0.15s;
}
.stock-qty-input:focus { border-color:var(--accent); }

.stock-trade-btns { display:flex; gap:8px; }
.stock-buy-btn {
  flex:1; padding:11px; background:rgba(0,200,83,0.1);
  border:1px solid var(--green); border-radius:9px;
  color:var(--green); font-weight:700; font-size:0.7rem;
  cursor:pointer; transition:all 0.2s;
}
.stock-buy-btn:hover:not(:disabled) { background:var(--green); color:#000; }
.stock-sell-btn {
  flex:1; padding:11px; background:rgba(255,68,85,0.08);
  border:1px solid var(--red); border-radius:9px;
  color:var(--red); font-weight:700; font-size:0.7rem;
  cursor:pointer; transition:all 0.2s;
}
.stock-sell-btn:hover:not(:disabled) { background:var(--red); color:#fff; }
.stock-buy-btn:disabled, .stock-sell-btn:disabled {
  opacity:0.35; cursor:not-allowed;
}

.stock-balance-info {
  font-size:0.65rem; color:var(--text-dim); text-align:center;
}

/* ── CRYPTO ── */
/* crypto.js dùng .crypto-row, .crypto-emoji + inherit .stock-* classes */
.crypto-row {
  display:flex; align-items:center; gap:9px;
  padding:9px 10px; border-radius:10px; cursor:pointer;
  border:1px solid transparent; transition:all 0.15s;
}
.crypto-row:hover { background:var(--bg2); border-color:var(--border2); }
.crypto-row.selected { background:var(--bg2); border-color:var(--gold); }
.crypto-emoji { font-size:1.3rem; flex-shrink:0; width:28px; text-align:center; }

/* ── MINER ── */
.miner-wrap { display:flex; flex-direction:column; padding:10px 12px; gap:12px; }

.miner-summary {
  display:flex; gap:8px;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:12px; padding:10px 12px;
}
.miner-stat { flex:1; text-align:center; }
.miner-stat-label { display:block; font-size:0.58rem; color:var(--text-dim); margin-bottom:3px; }
.miner-stat-val {
  font-family:'Orbitron',monospace; font-size:0.75rem;
  font-weight:700; color:var(--text-bright);
}
.miner-stat.broken .miner-stat-val { color:var(--red); }

.miner-section { display:flex; flex-direction:column; }
.miner-section-title {
  font-size:0.72rem; font-weight:700; color:var(--text-dim);
  margin-bottom:7px; letter-spacing:0.5px; display:flex;
  justify-content:space-between; align-items:center;
}
.miner-restock-timer { font-size:0.62rem; color:#f4a030; font-weight:600; }

.miner-gpu-list, .miner-shop-list { display:flex; flex-direction:column; gap:7px; }

.miner-gpu-row, .miner-shop-row {
  display:flex; align-items:center; gap:8px;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:10px; padding:8px 10px; transition:border-color 0.15s;
}
.miner-gpu-row.has-broken { border-color:rgba(255,68,85,0.4); }
.miner-shop-row.unavail { opacity:0.45; }

.miner-gpu-emoji { font-size:1.4rem; flex-shrink:0; }
.miner-gpu-info { flex:1; min-width:0; }
.miner-gpu-name { font-size:0.72rem; font-weight:700; color:var(--text-bright); }
.miner-gpu-sub { font-size:0.6rem; color:var(--text-dim); margin-top:1px; }
.miner-gpu-count { font-size:0.62rem; text-align:right; flex-shrink:0; }

.miner-shop-price {
  font-family:'Orbitron',monospace; font-size:0.68rem;
  font-weight:700; color:var(--gold);
}
.miner-shop-stock { font-size:0.58rem; color:var(--text-dim); margin-top:1px; }

.miner-buy-btn {
  flex-shrink:0; padding:7px 10px;
  background:rgba(212,175,55,0.1); border:1px solid var(--gold);
  border-radius:7px; color:var(--gold); font-size:0.62rem;
  font-weight:700; cursor:pointer; transition:all 0.15s; white-space:nowrap;
}
.miner-buy-btn:hover:not(:disabled) { background:var(--gold); color:#000; }
.miner-buy-btn:disabled {
  opacity:0.4; cursor:not-allowed;
  background:var(--bg3); border-color:var(--border); color:var(--text-dim);
}

.miner-repair-btn {
  flex-shrink:0; padding:7px 10px;
  border:1px solid var(--red); border-radius:7px;
  color:var(--red); background:rgba(255,68,85,0.07);
  font-size:0.62rem; font-weight:700; cursor:pointer;
  transition:all 0.15s; white-space:nowrap;
}
.miner-repair-btn:hover { background:var(--red); color:#fff; }

.miner-gpu-actions { display:flex; gap:5px; flex-shrink:0; }
.miner-sell-gpu-btn {
  padding:6px 8px; background:rgba(255,68,85,0.08);
  border:1px solid rgba(255,68,85,0.4); border-radius:7px;
  color:var(--red); font-size:0.6rem; font-weight:700;
  cursor:pointer; transition:all 0.15s; white-space:nowrap;
}
.miner-sell-gpu-btn:hover { background:var(--red); color:#fff; }

/* MOBO */
.miner-mobo-card {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:10px; padding:10px 12px;
  display:flex; flex-direction:column; gap:8px; margin-bottom:8px;
}
.miner-mobo-slots { display:flex; gap:4px; flex-wrap:wrap; }
.miner-slot {
  width:20px; height:20px; border-radius:4px;
  border:1px solid var(--border2); background:var(--bg3); transition:all 0.2s;
}
.miner-slot.used { background:rgba(0,200,83,0.3); border-color:var(--green); }
.miner-slot.broken { background:rgba(255,68,85,0.3); border-color:var(--red); }
.miner-slot.empty { opacity:0.4; }

.miner-mobo-upgrade-btn {
  width:100%; padding:11px; background:rgba(212,175,55,0.1);
  border:1px solid var(--gold); border-radius:10px; color:var(--gold);
  font-family:'Orbitron',monospace; font-size:0.65rem; font-weight:700;
  cursor:pointer; transition:all 0.2s; text-align:center;
}
.miner-mobo-upgrade-btn:hover:not(:disabled) { background:var(--gold); color:#000; }
.miner-mobo-upgrade-btn:disabled { opacity:0.4; cursor:not-allowed; }

/* ── EMPTY STATE ── */
.re-empty {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; padding:40px 20px;
  color:var(--text-dim); font-size:0.72rem; text-align:center;
}

/* ── TIME RANGE SELECTOR ── */
.chart-range-bar {
  display:flex; gap:4px; padding:8px 14px 4px;
  border-bottom:1px solid var(--border);
}
.chart-range-btn {
  flex:1; padding:5px 4px; background:var(--bg2);
  border:1px solid var(--border2); border-radius:6px;
  color:var(--text-dim); font-size:0.62rem; font-weight:700;
  cursor:pointer; transition:all 0.15s;
}
.chart-range-btn:hover { border-color:var(--gold); color:var(--gold); }
.chart-range-btn.active {
  background:rgba(212,175,55,0.12);
  border-color:var(--gold); color:var(--gold);
}

/* Override chart size - tự scale theo aspect ratio */
.stock-chart-svg { width:100% !important; height:auto !important; aspect-ratio:2/1; }
.stock-chart-empty { height:120px; }