/* Trends chart chrome and the fee breakdown table's pinned month column (ISH-639,
   ISH-683).

   Shared because both pages now carry these panels: the Sales Report's Trends tab and
   broker detail's Trends view. The rules were inline in analytics.html; ISH-683 ported the
   chart and table to broker.html and, per AGENTS.md, a component on more than one page gets
   one stylesheet rather than a second copy. Both hosts link this file.

   NOT here: `.chart-tooltip` itself, which each page already had and styles slightly
   differently. The `.tt-*` rules below are the richer BODY that goes inside it — until
   ISH-639 it carried a single line of text — so they compose with either host's shell.

   Every var() resolves on both hosts: --card-bg / --text-secondary / --page-bg / --nav-bg /
   --green / --red come from css/tokens.css, and --border / --border-light / --radius /
   --radius-lg / --text / --text-label from each page's own :root. Audited per host. */

/* ISH-639. The Fee Breakdown table carries ten columns and scrolls sideways;
   the month is the one cell you cannot afford to lose track of while doing it,
   so it pins. Needs border-collapse: separate — a sticky cell in a
   border-collapse: collapse table loses its borders in Chrome. */
/* Class-scoped, not id-scoped (ISH-683). These were `#analytics-fee-breakdown-table`
   rules; broker.html's copy of this table has a different id, and duplicating the
   declarations under a second id is how two tables that are meant to behave identically
   start drifting. Both pages now carry `class="fee-breakdown-table"`; analytics.html keeps
   its id, which its JS addresses. */
.fee-breakdown-table {
  border-collapse: separate;
  border-spacing: 0;
}

.fee-breakdown-table th.fee-month-col,
.fee-breakdown-table td.fee-month-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card-bg);
  border-right: 1px solid var(--border-light);
}

/* ISH-639. Segmented-control button, shared by the Prior year toggle. Same
   chassis as .view-btn but pill-shaped and sized for a card header. */
.seg-btn {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.seg-btn:hover {
  border-color: #999999;
  color: var(--text);
}

.seg-btn.active {
  background: var(--nav-bg);
  border-color: var(--nav-bg);
  color: #ffffff;
  font-weight: 700;
}

/* Metric-aware summary tiles above the chart. */
.hero-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 0.9rem;
}

@media (max-width: 820px) {
  .hero-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hero-cell {
  padding: 0.8rem 1rem;
  border-left: 1px solid var(--border-light);
  min-width: 0;
}

.hero-cell:first-child {
  border-left: none;
  padding-left: 0;
}

.hero-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-label);
}

.hero-value {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

/* Reuses the .kpi-trend-delta green/red pair rather than inventing a second
   up/down palette for the same idea. */
.hero-value.is-pos {
  color: #137333;
}

.hero-value.is-neg {
  color: #c5221f;
}

.hero-sub {
  font-size: 0.75rem;
  color: var(--text-label);
  margin-top: 0.15rem;
}

.trend-legend {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.trend-key {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.trend-key-cur {
  width: 22px;
  border-top: 3px solid var(--red);
}

.trend-key-prior {
  width: 22px;
  border-top: 2px dashed #9e9e9e;
}

.trend-note {
  margin-left: auto;
  color: var(--text-label);
}

.yoy-wrap {
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  padding-top: 0.9rem;
}

.yoy-head {
  font-size: 0.9375rem;
  font-weight: 700;
}

.yoy-head span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-label);
  margin-left: 0.45rem;
}

.yoy-row {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin-top: 0.75rem;
}

.yoy-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.yoy-val {
  font-size: 0.6875rem;
  font-weight: 800;
  color: #137333;
  white-space: nowrap;
}

.yoy-val.is-neg {
  color: #c5221f;
}

.yoy-bar {
  width: 100%;
  max-width: 44px;
  background: #7cb342;
  border-radius: 3px 3px 0 0;
}

.yoy-bar.is-neg {
  background: var(--red);
}

.yoy-month {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--text-label);
}

/* Richer body for the existing .chart-tooltip, which until now carried a single
   line. The comparison figures are the point — a native <title> cannot show
   them, and they are what people actually want beside the value. */
.tt-month {
  font-weight: 800;
  font-size: 0.8125rem;
  margin-bottom: 0.3rem;
}

.tt-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1.6;
}

.tt-key {
  color: #b9b9b9;
}

.tt-val {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tt-val.is-pos {
  color: #7ee2a0;
}

.tt-val.is-neg {
  color: #ffa39e;
}

.tt-note {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid #3a3a3a;
  color: #d9b26a;
  font-weight: 700;
}

.fee-row-count {
  font-size: 0.75rem;
  color: var(--text-label);
  white-space: nowrap;
}