/* ==========================================================================
   MY AGENTS -- the broker's sortable roster spreadsheet (my-agents.js)
   Its own file: styles.css is written by several sessions at once.

   ⚠ DARK SURFACE, EXPLICIT COLOURS. The dashboard is the navy --sv-* theme.
   The first version forced a WHITE table background and let text INHERIT,
   so the dashboard's cream text landed on white -- unreadable (Matt's
   screenshot, 2026-09-30). Every colour below is set explicitly from the
   --sv-* tokens, never inherited, so the table reads the same wherever it
   is mounted. Do not reintroduce a light background here.
   ========================================================================== */

.my-agents-panel .crm-record-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.my-agents-strip {
  margin: 4px 0 14px;
}

/* The summary tiles reuse .broker-score-grid, whose number and label colours
   (--lake-dark, --muted) are for LIGHT panels; the dashboard theme darkens
   the tile but not its text, so both vanished on navy (Matt, 2026-09-30).
   Explicit colours here, scoped to this panel only. */
.my-agents-panel .my-agents-strip span {
  background: var(--sv-surface, #16293a);
  border-color: var(--sv-line, #2a4257);
}

.my-agents-panel .my-agents-strip strong {
  color: var(--sv-heading, #e6cf8f);
}

.my-agents-panel .my-agents-strip small {
  color: var(--sv-text-muted, #b0c3d2);
}

.my-agents-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--sv-line, #2a4257);
  border-radius: 8px;
  background: var(--sv-surface, #16293a);
}

/* THE ALL-AGENTS SPREADSHEET SCROLLS INSIDE ITSELF (Matt, 2026-09-30: "fill
   the page and then have a scroll bar ... don't make that window too
   small"). It grows with the roster up to TWO browser-window heights,
   then scrolls; a floor of 1040px keeps it from ever becoming a slot on a
   short screen. The headings, the agent column and the totals row are all
   pinned, so a number can always be read against its agent and its column
   -- and the left-right scroll bar sits at the bottom of the box instead of
   the bottom of a very long page. Only the main table: the profile's small
   deal/listing tables (.my-agents-mini) stay full height. */
.my-agents-panel > .my-agents-table-wrap {
  overflow: auto;
  /* Matt, 2026-09-30 (second pass): TWICE as tall before it scrolls --
     two window-heights, never under 1040px. */
  max-height: max(1040px, calc(200vh - 240px));
  overscroll-behavior: contain;
  scrollbar-color: var(--sv-accent, #c9a24c) var(--sv-page, #0e1c2b);
}

.my-agents-panel > .my-agents-table-wrap thead th {
  position: sticky;
  z-index: 2;
}

/* Two header rows: the group row is a FIXED height so the label row can be
   pinned exactly beneath it. Change one, change the other. */
.my-agents-panel > .my-agents-table-wrap .my-agents-group-row th {
  top: 0;
  height: 34px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}

.my-agents-panel > .my-agents-table-wrap thead tr:nth-child(2) th {
  top: 34px;
}

.my-agents-panel > .my-agents-table-wrap tfoot th,
.my-agents-panel > .my-agents-table-wrap tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* The corner cells sit above both pinned edges. */
.my-agents-panel > .my-agents-table-wrap thead th.my-agents-group-agent,
.my-agents-panel > .my-agents-table-wrap thead th.my-agents-col-name,
.my-agents-panel > .my-agents-table-wrap tfoot th {
  position: sticky;
  left: 0;
  z-index: 3;
}

.my-agents-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.86rem;
  color: var(--sv-text, #ece5d5);
  background: var(--sv-surface, #16293a);
}

.my-agents-table th,
.my-agents-table td {
  padding: 9px 12px;
  text-align: right;
  white-space: nowrap;
  color: var(--sv-text, #ece5d5);
  border-bottom: 1px solid var(--sv-line, #2a4257);
  font-variant-numeric: tabular-nums;
}

.my-agents-table .is-text {
  text-align: left;
}

.my-agents-table thead th {
  color: var(--sv-text-muted, #b0c3d2);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  background: var(--sv-page, #0e1c2b);
  vertical-align: bottom;
}

.my-agents-group-row th {
  color: var(--sv-heading, #e6cf8f);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-align: center;
  border-bottom: 2px solid var(--sv-accent, #c9a24c);
}

.my-agents-group-row th + th {
  border-left: 1px solid var(--sv-line, #2a4257);
}

/* Sticky agent column so the name stays put while the figures scroll. */
.my-agents-table .my-agents-col-name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--sv-surface, #16293a);
  box-shadow: 1px 0 0 var(--sv-line, #2a4257);
}

.my-agents-table thead .my-agents-col-name,
.my-agents-table thead th.my-agents-group-agent,
.my-agents-table tfoot th {
  background: var(--sv-page, #0e1c2b);
}

.my-agents-sort {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  color: inherit;
  text-transform: inherit;
}

.my-agents-sort:hover,
.my-agents-sort:focus-visible {
  color: var(--sv-heading, #e6cf8f);
  text-decoration: underline;
}

.my-agents-sort:focus-visible {
  outline: 2px solid var(--sv-accent, #c9a24c);
  outline-offset: 2px;
}

.my-agents-arrow {
  display: inline-block;
  min-width: 0.8em;
  font-size: 0.75em;
}

.my-agents-table th[aria-sort="ascending"],
.my-agents-table th[aria-sort="descending"] {
  color: var(--sv-heading, #e6cf8f);
}

.my-agents-row {
  cursor: pointer;
}

.my-agents-row:hover td,
.my-agents-row:hover th {
  background: var(--sv-neutral-pill-bg, #1d3346);
}

.my-agents-name {
  all: unset;
  cursor: pointer;
  display: block;
  text-align: left;
}

.my-agents-name strong {
  display: block;
  color: var(--sv-text, #ece5d5);
  font-weight: 800;
}

.my-agents-name small {
  display: block;
  color: var(--sv-text-muted, #b0c3d2);
  font-weight: 400;
}

/* "Awaiting agent's acceptance": one small tag under the name, so the row
   stays the same height-ish and the hidden cells can stay a plain dash. */
.my-agents-awaiting {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border: 1px solid var(--sv-accent, #c9a24c);
  border-radius: 999px;
  color: var(--sv-heading, #e6cf8f);
  background: var(--sv-page, #0e1c2b);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.my-agents-awaiting-cell {
  color: var(--sv-text-muted, #b0c3d2);
  cursor: help;
}

.my-agents-name:hover strong,
.my-agents-name:focus-visible strong {
  color: var(--sv-heading, #e6cf8f);
  text-decoration: underline;
}

.my-agents-name:focus-visible {
  outline: 2px solid var(--sv-accent, #c9a24c);
  outline-offset: 2px;
}

.my-agents-totals th,
.my-agents-totals td {
  font-weight: 800;
  color: var(--sv-heading, #e6cf8f);
  border-top: 2px solid var(--sv-accent, #c9a24c);
  border-bottom: 0;
  background: var(--sv-page, #0e1c2b);
}

/* The explanatory note under the table: perf-note's own colour (--muted)
   is a dark grey meant for light panels and vanishes on navy. */
.my-agents-panel .perf-note {
  margin-top: 12px;
  color: var(--sv-text-muted, #b0c3d2);
}

.my-agents-mini td,
.my-agents-mini th {
  white-space: normal;
}

.my-agents-mini th[scope="row"] {
  font-weight: 700;
}

.my-agents-profile-deals,
.my-agents-profile-listings {
  margin-top: 16px;
}

@media (max-width: 720px) {
  .my-agents-table th,
  .my-agents-table td {
    padding: 7px 8px;
  }
}