/* CrystalWell — DJIA & S&P 500 Dashboard styles (extends styles.css tokens) */

.dash-header {
  background: var(--navy-950);
  color: #fff;
  padding: 52px 0 0;
}
.dash-header h1 { color: #fff; font-size: clamp(26px, 3.4vw, 34px); margin-top: 12px; }
.dash-header p { margin-top: 10px; color: rgba(229,238,250,0.68); font-size: 14.5px; max-width: 64ch; }
.dash-header-row {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px;
  padding-bottom: 28px;
}
.dash-updated {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--blue-400);
  text-align: right;
}
.dash-updated .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--up); margin-right: 6px;
}

/* tab bar */
.dash-tabs {
  display: flex; gap: 4px; overflow-x: auto;
  border-top: 1px solid var(--line-dark);
}
.dash-tab {
  background: none; border: none; color: rgba(229,238,250,0.6);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 15px 18px; white-space: nowrap;
  border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 8px;
}
.dash-tab:hover { color: #fff; }
.dash-tab.active { color: var(--blue-400); border-bottom-color: var(--blue-400); }
.tab-count {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 10px;
  background: rgba(107, 160, 224, 0.16); color: var(--blue-400);
}
.tab-count.tc-red { background: rgba(179, 66, 59, 0.18); color: #f2a39d; }
.tab-count.tc-green { background: rgba(46, 125, 91, 0.2); color: #7fd6b0; }

.dash-body { padding: 40px 0 100px; }
.dash-panel { display: none; }
.dash-panel.active { display: block; }

/* stat cards */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 40px;
}
.stat-row.stat-row-5 { grid-template-columns: repeat(5, 1fr); }
.stat-card { background: var(--paper); padding: 20px 20px; }
.stat-card .stat-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.stat-card .stat-value {
  font-family: var(--font-mono); font-size: 26px; font-weight: 600; margin-top: 8px; color: var(--navy-900);
}
.stat-card .stat-sub { margin-top: 5px; font-size: 11.5px; color: var(--ink-faint); }
.stat-value.up { color: var(--up); }
.stat-value.down { color: var(--down); }
.stat-value.amber { color: var(--brass); }
@media (max-width: 900px) { .stat-row, .stat-row.stat-row-5 { grid-template-columns: repeat(2, 1fr); } }

/* section framing */
.dash-section { margin-bottom: 44px; }
.dash-section-head {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px;
  margin-bottom: 14px;
}
.dash-section-head h2 { font-size: 17px; font-family: var(--font-display); }
.dash-section-head .hint { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-top: 4px; display: block; }

.table-search {
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 12.5px;
  width: 220px;
  color: var(--ink);
}
.table-search::placeholder { color: var(--ink-faint); }

/* data tables */
.data-table-wrap { overflow-x: auto; border: 1px solid var(--line); max-height: 560px; overflow-y: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
table.data-table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; padding: 10px 13px; background: var(--paper-dim);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--line); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
table.data-table td {
  padding: 10px 13px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); color: var(--ink); white-space: nowrap; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis;
}
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover { background: var(--blue-100); }
.ticker-pill { display: inline-block; font-weight: 600; color: var(--blue-700); }
.val-up { color: var(--up); font-weight: 600; }
.val-down { color: var(--down); font-weight: 600; }
.val-muted { color: var(--ink-faint); }

.role-badge {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 3px;
  border: 1px solid transparent; white-space: nowrap;
}
.role-ceo { background: var(--blue-100); color: var(--blue-700); border-color: rgba(53,119,201,0.3); }
.role-cfo { background: var(--brass-soft); color: #6b5220; border-color: rgba(181,138,63,0.35); }
.role-dir { background: var(--paper-dim); color: var(--ink-soft); border-color: var(--line); }

.squeeze-badge {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 3px;
  background: rgba(179, 66, 59, 0.12); color: var(--down); border: 1px solid rgba(179,66,59,0.28); white-space: nowrap;
}

.filing-link { color: var(--blue-600); font-family: var(--font-body); font-size: 11.5px; font-weight: 600; }
.filing-link:hover { color: var(--blue-500); }

/* day-cell for price movement tables */
.day-cell { display: flex; flex-direction: column; gap: 2px; }
.day-pct { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; }
.day-date { font-size: 10px; color: var(--ink-faint); font-family: var(--font-body); }

.rsi-pill {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.rsi-oversold { background: rgba(46,125,91,0.14); color: var(--up); border: 1px solid rgba(46,125,91,0.3); }
.rsi-overbought { background: rgba(179,66,59,0.14); color: var(--down); border: 1px solid rgba(179,66,59,0.3); }
.rsi-weak { background: rgba(179,66,59,0.07); color: #c07871; border: 1px solid rgba(179,66,59,0.16); }
.rsi-strong { background: rgba(46,125,91,0.07); color: #6ba98c; border: 1px solid rgba(46,125,91,0.16); }
.rsi-neutral { background: var(--paper-dim); color: var(--ink-faint); border: 1px solid var(--line); }

.vs200-up { color: var(--up); font-family: var(--font-mono); }
.vs200-down { color: var(--down); font-family: var(--font-mono); }
.vs200-sub { font-size: 10px; color: var(--ink-faint); font-family: var(--font-body); }

.vol-badge {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.vol-light { background: var(--brass-soft); color: #6b5220; }
.vol-heavy { background: rgba(179,66,59,0.12); color: var(--down); }
.vol-normal { color: var(--ink-faint); font-family: var(--font-body); font-weight: 400; }

.signal-chip-wrap { position: relative; display: inline-block; }
.signal-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 3px;
  white-space: nowrap; cursor: default;
}
.sig-red { background: rgba(179,66,59,0.12); color: var(--down); border: 1px solid rgba(179,66,59,0.28); }
.sig-amber { background: var(--brass-soft); color: #6b5220; border: 1px solid rgba(181,138,63,0.35); }
.sig-green { background: rgba(46,125,91,0.12); color: var(--up); border: 1px solid rgba(46,125,91,0.28); }
.sig-muted { background: var(--paper-dim); color: var(--ink-faint); border: 1px solid var(--line); }
.signal-chip-wrap .tip {
  visibility: hidden; opacity: 0; position: absolute; z-index: 20; width: 240px;
  bottom: 130%; left: 50%; transform: translateX(-50%);
  background: var(--navy-950); color: #fff; font-size: 11.5px; line-height: 1.5;
  padding: 10px 12px; border-radius: 2px; transition: opacity 0.15s ease; pointer-events: none;
}
.signal-chip-wrap:hover .tip { visibility: visible; opacity: 1; }

/* legend */
.signal-legend {
  margin-top: 20px; padding: 16px 18px; background: var(--paper-dim); border: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 12.5px; color: var(--ink-soft);
}
.signal-legend .legend-item { display: flex; align-items: center; gap: 8px; }

.dash-source-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); }
.dash-loading { padding: 40px; text-align: center; color: var(--ink-faint); font-family: var(--font-mono); font-size: 13px; }
.dash-empty { padding: 30px; text-align: center; color: var(--ink-faint); font-size: 13.5px; }