/* =============================================================================
   Office Scout — managed-office watchlist
   -----------------------------------------------------------------------------
   Provider research panel above the listing feed. Tokens and primitives come
   from ds-tokens.css / ds-dashboard.css, and the summary/metric/meter
   primitives come from styles.css (loaded before this file); only what shapes
   the watchlist itself lives here.
   ============================================================================= */

.managed-watchlist {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.managed-watchlist-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.managed-watchlist-head h3 {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--font-size-md);
}

.managed-watchlist-meta {
  font-family: var(--current-font-technical);
  font-size: var(--font-size-xs);
  color: var(--dash-muted);
  text-align: right;
}

/* Reuses .summary-cell from styles.css so the watchlist rollup and the result
   summary under the feed head read identically. */
.managed-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--dash-sunken);
  border-radius: var(--radius-sm);
}

/* Wrapping row rather than fixed tracks, for the same reason as .controls in
   styles.css: fixed track widths overflow the shell instead of reflowing. */
.managed-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.managed-controls .search { flex: 1 1 240px; min-width: 190px; }
.managed-controls select { flex: 1 1 190px; min-width: 170px; }
.managed-controls .smallbtn { flex: 0 0 auto; }

.managed-provider-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-sm);
  align-items: start;
}

.managed-provider {
  min-width: 0;
  padding: var(--spacing-md);
  background: var(--dash-surface);
  border: var(--border-width-hairline) solid var(--dash-border);
  border-radius: var(--radius-md);
}

.managed-provider-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.managed-name {
  font-family: var(--current-font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--dash-heading);
}

.managed-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.managed-link {
  font-family: var(--current-font-technical);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-decoration: none;
  color: var(--dash-accent-text);
}

.managed-link:hover { text-decoration: underline; }

.managed-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* `priceSignal` is an append-only research log — 13 KB on the largest provider.
   Only the newest signal is shown at rest; the rest sits behind the disclosure
   below so the watchlist cannot bury the listing feed again. */
.managed-signal { margin-top: var(--spacing-md); }

.managed-signal-head {
  font-family: var(--current-font-technical);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--dash-muted);
}

.managed-signal p {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--dash-body);
}

.managed-details {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: var(--border-width-hairline) solid var(--dash-border);
}

.managed-details summary {
  font-family: var(--current-font-technical);
  font-size: var(--font-size-xs);
  color: var(--dash-accent-text);
  cursor: pointer;
}

.managed-details p,
.managed-details ul {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--dash-muted);
}

.managed-details ul { padding-left: var(--spacing-md); }
.managed-details li { margin-bottom: var(--spacing-xs); }

/* A long log stays inside its own scroll container rather than stretching the
   provider card past its neighbours. */
.managed-details p {
  max-height: 260px;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.managed-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.managed-pager-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.managed-pager-range {
  font-family: var(--current-font-technical);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--dash-muted);
}

.managed-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--spacing-lg);
  font-size: var(--font-size-xs);
  text-align: center;
  color: var(--dash-muted);
}

/* Providers with no current offer stay listed but visibly parked. */
.managed-muted {
  opacity: 0.62;
  background: transparent;
  border-style: dashed;
}

/* Office Scout's own breakpoint ladder (see styles.css). */
@media (max-width: 1220px) {
  .managed-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
  .managed-provider-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .managed-watchlist-head { align-items: flex-start; flex-direction: column; }
  .managed-watchlist-meta { text-align: left; }
  .managed-provider-items { grid-template-columns: 1fr; }
  .managed-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .managed-controls .search,
  .managed-controls select { flex: 1 1 100%; }
}