/* Institutional terminal, light theme */
:root {
  --bg: #FAFBFC;
  --text: #1A2233;
  --navy: #16365C;
  --pos: #0E7C4A;
  --neg: #C0392B;
  --sep: #E3E7EC;
  --muted: #6B7686;
  --panel: #FFFFFF;
  --mono: "SF Mono", "Roboto Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
}
.brand { font-weight: 700; letter-spacing: 0.12em; font-size: 12px; }
#ticker-form { display: flex; gap: 6px; }
#ticker-input {
  width: 220px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font: 600 13px var(--mono);
  text-transform: uppercase;
}
#ticker-input::placeholder { color: rgba(255,255,255,0.55); text-transform: none; font-weight: 400; }
#ticker-input:focus { outline: none; background: #fff; color: var(--text); }
#ticker-form button {
  padding: 5px 14px;
  border: none;
  border-radius: 3px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
}
.quote-strip {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  white-space: nowrap;
}
.quote-strip .qname { font-family: inherit; font-weight: 700; }
.quote-strip .qpx { font-size: 15px; font-weight: 700; }
.quote-strip .qmeta { color: rgba(255,255,255,0.7); font-size: 11px; }

/* ---------- tabs ---------- */
.tabs {
  display: flex;
  gap: 2px;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid var(--sep);
  position: sticky;
  top: 44px;
  z-index: 20;
}
.tab {
  padding: 9px 16px 7px;
  border: none;
  background: none;
  font: 600 13px inherit;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab.active { color: var(--navy); border-bottom-color: var(--navy); }

main { padding: 14px; max-width: 1340px; margin: 0 auto; }
.hidden { display: none !important; }

/* ---------- states ---------- */
.empty-state { padding: 60px 0; text-align: center; color: var(--muted); }
.empty-state .hint { font-size: 12px; }
.error-state {
  margin: 30px auto;
  max-width: 480px;
  padding: 14px 18px;
  border: 1px solid #E7B5AD;
  background: #FBEFED;
  color: var(--neg);
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
}
.loading-state { padding: 30px 0; }
.skeleton {
  height: 18px;
  margin: 10px 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #EDF0F3 25%, #F7F9FA 50%, #EDF0F3 75%);
  background-size: 400% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 14px; align-items: start; }
.dash-left, .dash-right { min-width: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--sep);
  border-radius: 3px;
  margin-bottom: 14px;
  overflow: hidden;
}
.panel-title {
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.title-badge {
  float: right;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 3px;
  padding: 0 7px;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.table-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--sep); border-radius: 3px; }
.panel .table-scroll { border: none; border-radius: 0; }

table.data-table { border-collapse: collapse; width: 100%; }
.data-table th, .data-table td {
  padding: 3px 10px;
  border-bottom: 1px solid var(--sep);
  font-size: 12px;
  white-space: nowrap;
}
.data-table th {
  position: sticky;
  top: 0;
  background: #F1F4F7;
  color: var(--navy);
  font-weight: 700;
  text-align: right;
  z-index: 5;
}
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table td.num, .data-table th.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.data-table tr.sec-header td {
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.data-table tr.sub td:first-child { padding-left: 22px; color: var(--muted); font-style: italic; }
.data-table td.neg { color: var(--neg); }
.data-table td.pos { color: var(--pos); }
.data-table tr:hover td { background: #F4F7FA; }
.data-table tr.sec-header:hover td { background: var(--navy); }

/* right-hand key/value panels */
.kv { width: 100%; border-collapse: collapse; }
.kv td {
  padding: 3px 10px;
  border-bottom: 1px solid var(--sep);
  font-size: 12px;
}
.kv td:last-child {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.kv tr:last-child td { border-bottom: none; }
.kv .neg { color: var(--neg); }
.kv .pos { color: var(--pos); }

.mini { width: 100%; border-collapse: collapse; }
.mini th, .mini td { padding: 3px 8px; border-bottom: 1px solid var(--sep); font-size: 11px; white-space: nowrap; }
.mini th { background: #F1F4F7; color: var(--navy); text-align: right; font-weight: 700; }
.mini th:first-child, .mini td:first-child { text-align: left; }
.mini td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.mini td.neg { color: var(--neg); }
.mini td.pos { color: var(--pos); }
.mini tr:last-child td { border-bottom: none; }

.footnote { color: var(--muted); font-size: 11px; margin-top: 8px; }

/* ---------- charts ---------- */
.chart-controls { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--sep); border-radius: 3px; overflow: hidden; background: #fff; }
.seg button {
  border: none;
  background: none;
  padding: 5px 12px;
  font: 600 12px inherit;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  border-right: 1px solid var(--sep);
}
.seg button:last-child { border-right: none; }
.seg button.active { background: var(--navy); color: #fff; }
.chart-legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); }
.lg::before { content: ""; display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 5px; }
.lg-ma50::before { background: #8A9BB0; }
.lg-ma200::before { background: #C9A227; }
#chart-container {
  height: 520px;
  background: #fff;
  border: 1px solid var(--sep);
  border-radius: 3px;
}

.returns-table th, .returns-table td { text-align: center !important; min-width: 64px; }
.returns-table td { font-size: 13px; padding: 6px 10px; }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
  .quote-strip { margin-left: 0; width: 100%; }
  .tabs { top: 0; position: static; }
  #ticker-input { width: 150px; }
  #chart-container { height: 380px; }
}