/* valuemap.css — Stock Insights → Value Map
   Base treemap/tile/legend classes (.treemap-container, .tm-sector,
   .tm-industry, .tm-tile, .map-header, .map-footer, .map-legend*) already
   exist in style.css (shared with the Market Overview returns map) and are
   reused as-is. This file only covers what's new to the Value Map: the
   sector drill-down breadcrumb, the discount/premium legend gradient, and
   the Valuation & Moat distribution chart + ticker drill-down grid. */

.vm-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #8a8a90;
  margin: -8px 0 14px;
}

.vm-updated {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: #5A5957;
}

.vm-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.vm-back-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid #2a2a30;
  border-radius: 6px;
  color: #CDCCCA;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.vm-back-btn:hover {
  background: rgba(255,255,255,0.12);
}
.vm-breadcrumb-current {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vm-treemap {
  height: 640px;
}

.vm-sector-clickable {
  transition: filter 0.12s;
}
.vm-sector-clickable:hover {
  filter: brightness(1.1);
}

.vm-legend-bar {
  background: linear-gradient(to right, #BF1820, #A82424, #782824, #323236, #206A38, #1E8E3E, #18B248);
}

.vm-empty {
  padding: 40px 20px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #8a8a90;
}

/* ── Valuation & Moat distribution chart ── */
.vm-valmoat-section {
  margin-top: 20px;
}
.vm-valmoat-summary {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #b0bec5;
  margin-bottom: 14px;
}
.vm-valmoat-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vm-gantt-row {
  display: grid;
  grid-template-columns: 190px 1fr 140px;
  align-items: center;
  gap: 14px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.vm-gantt-row:hover {
  background: rgba(255,255,255,0.04);
}
.vm-gantt-row-active {
  background: rgba(255,255,255,0.07);
}
.vm-gantt-label-main {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}
.vm-gantt-label-sub {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #5A5957;
}
.vm-gantt-barwrap {
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
  height: 26px;
}
.vm-gantt-bar {
  height: 100%;
  display: flex;
  min-width: 2px;
  transition: width 0.3s ease;
}
.vm-gantt-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(0,0,0,0.65);
  overflow: hidden;
  white-space: nowrap;
}
.vm-seg-none { background: #BF1820; color: #fff; }
.vm-seg-narrow { background: #d4a017; }
.vm-seg-wide { background: #18B248; color: #fff; }
.vm-seg-unknown { background: #4a4a50; color: #ccc; }
.vm-gantt-count {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: #b0bec5;
  text-align: right;
  white-space: nowrap;
}

.vm-moat-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
}
.vm-moat-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #b0bec5;
}
.vm-moat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.vm-moat-none { background: #BF1820; }
.vm-moat-narrow { background: #d4a017; }
.vm-moat-wide { background: #18B248; }

.vm-bucket-tickers {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(42,42,48,0.4);
}
.vm-bucket-title {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.vm-bucket-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vm-ticker-chip {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transition: filter 0.12s;
}
.vm-ticker-chip:hover {
  filter: brightness(1.15);
}

@media (max-width: 900px) {
  .vm-gantt-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .vm-gantt-count {
    text-align: left;
  }
  .vm-treemap {
    height: 480px;
  }
}