/* ============================================================
   STOCK MARKET screen styling.
   ============================================================ */
/* =============================================================
   STOCK-MARKET specific styling.
   ============================================================= */
.stock-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.stock-stat { background: rgba(0, 30, 20, 0.4); border: 1px solid #00aa66; border-radius: 6px; padding: 8px 12px; min-width: 140px; }
.stock-stat .stat-label { font-size: 0.78em; color: #66aaff; text-transform: uppercase; letter-spacing: 1px; }
.stock-stat .stat-value { font-size: 1.2em; font-weight: 700; color: #ffdd00; }
.stock-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.stock-card { background: rgba(0, 30, 20, 0.5); border: 1px solid #00aa66; border-radius: 6px; padding: 10px 12px; cursor: pointer; transition: all 0.2s; position: relative; }
.stock-card:hover { border-color: #00ff88; box-shadow: 0 0 10px rgba(0, 255, 136, 0.3); }
/* All stock cards use the default green border — badges indicate special status. */
.stock-card .stock-symbol { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.05em; color: #00ff88; letter-spacing: 1px; }
.stock-card .stock-name { font-size: 0.85em; color: #88ccaa; margin: 2px 0 6px; }
.stock-card .stock-category { font-size: 0.75em; color: #66aaff; text-transform: uppercase; letter-spacing: 0.5px; }
.stock-card .stock-price { font-size: 1.3em; font-weight: 700; color: #ffdd00; margin-top: 4px; }
.stock-card .stock-change.up { color: #00ff88; font-weight: 700; font-size: 0.9em; }
.stock-card .stock-change.down { color: #ff6666; font-weight: 700; font-size: 0.9em; }
.stock-card .stock-change.flat { color: #888; font-weight: 700; font-size: 0.9em; }
.stock-badge { position: absolute; top: 6px; right: 6px; font-size: 0.65em; padding: 2px 6px; border-radius: 8px; font-weight: 700; letter-spacing: 0.5px; }
.stock-badge.new { background: #00ddff; color: #000; }
.stock-badge.hot { background: #ffaa00; color: #000; }
.stock-badge.troubled { background: #ff6666; color: #000; }
.stock-badge.mega { background: #ffdd00; color: #000; }

.stock-detail { background: rgba(0, 30, 20, 0.5); border: 1px solid #00ff88; border-radius: 8px; padding: 16px; margin-bottom: 14px; }
.stock-detail h3 { color: #00ff88; margin-bottom: 4px; }
.stock-detail .stock-symbol { font-family: 'Orbitron', sans-serif; font-size: 1.2em; color: #ffdd00; letter-spacing: 2px; }
.stock-detail .stock-meta { color: #88ccaa; font-size: 0.9em; margin-bottom: 8px; }
.stock-chart { background: rgba(0, 20, 15, 0.6); border: 1px solid #00aa66; border-radius: 4px; padding: 8px; margin: 10px 0; }
.stock-trade { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.news-feed { max-height: 280px; overflow-y: auto; background: rgba(0, 20, 15, 0.4); border: 1px solid #00aa66; border-radius: 4px; padding: 8px; }
.news-item { padding: 6px 8px; border-bottom: 1px solid rgba(0, 170, 102, 0.3); font-size: 0.85em; }
.news-item:last-child { border-bottom: none; }
.news-item .news-date { color: #66aaff; font-size: 0.8em; }
.news-item.ipo { color: #00ddff; }
.news-item.bankrupt { color: #ff6666; }

/* =============================================================
   UPGRADED STOCK CHART styling (real-app-style interactive graph).
   ============================================================= */
.stock-chart-wrap { background: rgba(0, 20, 15, 0.6); border: 1px solid #00aa66; border-radius: 6px; padding: 10px 12px; margin: 10px 0; }
.stock-chart-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.stock-chart-date { color: #66aaff; font-size: 0.82em; letter-spacing: 1px; }
.stock-range-btns { display: flex; gap: 4px; }
.stock-range-btns .btn { padding: 3px 9px; font-size: 0.78em; margin: 0; min-width: 38px; text-align: center; }
.stock-chart-svg { width: 100%; height: auto; display: block; }
.stock-chart-help { color: #88ccaa; font-size: 0.74em; margin-top: 6px; line-height: 1.5; }
.stock-chart-help .kw { color: #66aaff; }

/* =============================================================
   TAB BAR (Your / New / Hot / Search)
   ============================================================= */
.stock-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.stock-tab-btn {
  background: rgba(0, 30, 20, 0.5);
  border: 1px solid #00aa66;
  color: #88ccaa;
  padding: 8px 18px;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.82em;
  letter-spacing: 1px;
  transition: all 0.2s;
}
.stock-tab-btn:hover {
  background: rgba(0, 60, 40, 0.6);
  border-color: #00ff88;
  color: #00ff88;
}
.stock-tab-btn.active {
  background: rgba(0, 100, 60, 0.7);
  border-color: #00ff88;
  color: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

/* =============================================================
   SEARCH & FILTER PANEL
   ============================================================= */
.stock-search-panel {
  background: rgba(0, 20, 15, 0.5);
  border: 1px solid #00aa66;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ss-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ss-row label {
  color: #66aaff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78em;
  letter-spacing: 0.5px;
  min-width: 70px;
}
.ss-row input,
.ss-row select {
  background: rgba(0, 8, 18, 0.8);
  border: 1px solid #1a4a3a;
  color: #88ccaa;
  padding: 5px 8px;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82em;
}
.ss-row input:focus,
.ss-row select:focus {
  outline: none;
  border-color: #00ff88;
}
.ss-row input[type="text"] {
  flex: 1;
  min-width: 160px;
}
.ss-row input[type="number"] {
  width: 90px;
}
.ss-row select {
  min-width: 160px;
  cursor: pointer;
}