/**
 * Agent Performance page.
 *
 * Every colour, radius and space is a token from variables.css, so the page
 * follows the CRM's own light/dark switch with no JS and no second palette.
 */

.ap-page { padding: var(--spacing-6); }

.ap-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--spacing-4); margin-bottom: var(--spacing-6); flex-wrap: wrap;
}
.ap-title { margin: 0; font-size: 1.5rem; font-weight: var(--font-semibold); color: var(--color-text-primary); }
.ap-sub   { margin: 4px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.ap-head-actions { display: flex; align-items: center; gap: var(--spacing-3); }
.ap-range { min-width: 140px; }
.ap-loading { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Rail + main. The rail collapses above the content on narrow screens rather
   than shrinking into an unusable column. */
.ap-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--spacing-4); align-items: start; }
@media (max-width: 1024px) { .ap-body { grid-template-columns: minmax(0, 1fr); } }

.ap-rail {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--spacing-3);
  display: flex; flex-direction: column; gap: var(--spacing-2);
  position: sticky; top: var(--spacing-4);
}
@media (max-width: 1024px) { .ap-rail { position: static; } }

.ap-search { width: 100%; }
.ap-agent-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }

.ap-agent {
  display: flex; align-items: center; gap: var(--spacing-2); width: 100%;
  padding: 8px; border: 0; background: transparent; cursor: pointer; text-align: left;
  border-radius: var(--radius-md); transition: background var(--transition-fast);
  color: var(--color-text-primary);
}
.ap-agent:hover { background: var(--color-bg-card-hover); }
.ap-agent.is-active { background: var(--color-primary-light); }
.ap-agent--all { border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md) var(--radius-md) 0 0; }

.ap-avatar {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--color-primary-light); color: var(--color-primary);
  display: grid; place-items: center; font-size: 11px; font-weight: var(--font-semibold);
}
.ap-avatar--all { background: var(--color-bg-input); color: var(--color-text-secondary); }
.ap-agent-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ap-agent-name { font-size: var(--text-sm); font-weight: var(--font-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-agent-role { font-size: var(--text-xs); color: var(--color-text-muted); }
.ap-agent-count { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.ap-main { display: flex; flex-direction: column; gap: var(--spacing-4); min-width: 0; }

.ap-card {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden;
}
.ap-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4); border-bottom: 1px solid var(--color-border);
}
.ap-card-title { margin: 0; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); }
.ap-card-body { padding: var(--spacing-4); }
.ap-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-4); }

/* Conversion rings */
.ap-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--spacing-4); }
.ap-ring { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ap-ring-art { position: relative; width: 80px; height: 80px; }
.ap-ring-svg { width: 80px; height: 80px; display: block; }
.ap-ring-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.05rem; font-weight: var(--font-semibold); color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.ap-ring-label { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-text-secondary); }
.ap-ring-foot { display: flex; gap: 6px; align-items: baseline; font-size: var(--text-xs); }
.ap-ring-pct { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.ap-ring-goal { color: var(--color-text-muted); }
.ap-ring-value { font-size: var(--text-xs); color: var(--color-success); font-weight: var(--font-medium); }

/* Stat strips */
.ap-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--spacing-3); margin-bottom: var(--spacing-4);
}
.ap-stat { display: flex; flex-direction: column; gap: 2px; }
.ap-stat-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ap-stat-value { font-size: 1.15rem; font-weight: var(--font-semibold); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

.ap-chart { width: 100%; height: 200px; display: block; }
.ap-legend { display: flex; gap: var(--spacing-3); flex-wrap: wrap; }
.ap-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--color-text-secondary); text-transform: capitalize; }
.ap-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* Heatmap. Fixed 24 columns so hours line up with the header whatever the width. */
.ap-heat { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.ap-heat-row {
  display: grid; grid-template-columns: 38px repeat(24, minmax(10px, 1fr)) 44px;
  gap: 3px; align-items: center;
}
.ap-heat-day   { font-size: var(--text-xs); color: var(--color-text-muted); }
.ap-heat-hh    { font-size: 9px; color: var(--color-text-muted); text-align: center; }
.ap-heat-total { font-size: var(--text-xs); color: var(--color-text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.ap-heat-cell  { height: 16px; border-radius: 3px; background: var(--color-bg-input); }
/* --v is set per cell by the page; one rule, no inline colour maths. */
.ap-heat-cell.has-v { background: color-mix(in srgb, var(--color-primary) calc(var(--v) * 100%), transparent); }

/* Donuts */
.ap-donut-wrap { display: flex; align-items: center; gap: var(--spacing-4); flex-wrap: wrap; }
.ap-donut { width: 120px; height: 120px; flex: 0 0 120px; }
.ap-donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 5px; }
.ap-donut-legend li { display: flex; align-items: center; gap: 7px; font-size: var(--text-xs); }
.ap-donut-name { flex: 1; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-donut-val  { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

.ap-empty    { padding: var(--spacing-6); text-align: center; color: var(--color-text-muted); }
.ap-empty-sm { padding: var(--spacing-4); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.ap-muted    { color: var(--color-text-muted); }
.ap-note     { font-size: var(--text-xs); }

.ap-disclosure {
  margin: 0; padding: var(--spacing-3) var(--spacing-4);
  border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6;
}