/* WOTTT 04.55.2 r14a — Leaderboard / Users presentation completion.
   VISUAL ONLY: existing trusted reportsWorkspaceView and read-only saved data.
   Leaderboard continues to show separate activity counts, NOT a performance ranking.
   Users 'Active' means staff account status, NOT online presence.
   No new CRM models, scores, mutable controls, providers, or backend APIs. */

/* Shared, lightly tinted header highlights limited to these two report sections. */
.reports-shell .rh-report-body:has(> .rh-panel > .rh-table) > .rh-panel,
.reports-shell .rh-report-body:has(> .rh-panel > .rh-user-grid) > .rh-panel {
  padding:23px 24px 26px;
  overflow:hidden;
  background:radial-gradient(ellipse 48% 115px at 100% 0%, rgba(104,145,235,.075), transparent 90%),var(--ra-surface);
}
.reports-shell .rh-report-body:has(> .rh-panel > .rh-table) > .rh-panel > header,
.reports-shell .rh-report-body:has(> .rh-panel > .rh-user-grid) > .rh-panel > header {
  margin-bottom:20px;
  border-bottom:1px solid var(--ra-line);
  padding:1px 0 19px;
  position:relative;
}
.reports-shell .rh-report-body:has(> .rh-panel > .rh-table) > .rh-panel > header::before,
.reports-shell .rh-report-body:has(> .rh-panel > .rh-user-grid) > .rh-panel > header::before {
  content:"";flex:0 0 5px;width:5px;height:35px;
  background:linear-gradient(180deg,#5e8cf0,#9a80ea);
  border-radius:7px;
  margin-right:5px;
}
.reports-shell .rh-report-body:has(> .rh-panel > .rh-table) > .rh-panel > header,
.reports-shell .rh-report-body:has(> .rh-panel > .rh-user-grid) > .rh-panel > header {justify-content:flex-start;gap:10px;align-items:center}
.reports-shell .rh-report-body:has(> .rh-panel > .rh-table) > .rh-panel > header h2,
.reports-shell .rh-report-body:has(> .rh-panel > .rh-user-grid) > .rh-panel > header h2 {
  font-size:17px;letter-spacing:-.3px;
}

/* Activity view: a distinct, readable set of four metric cards for each staff member.
   Column labels are the existing report labels; values are untouched. */
.reports-shell .rh-report-body .rh-table {
  display:grid;
  gap:11px;
  border:0;
  overflow:visible;
  border-radius:0;
  background:transparent;
}
.reports-shell .rh-report-body .rh-table-head {
  display:grid;
  grid-template-columns:minmax(180px,1.6fr) repeat(4,minmax(90px,1fr));
  gap:13px;
  padding:0 16px;
  min-height:33px;
  background:transparent;
  border:0;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ra-muted);
  font-size:10px;
  font-weight:720;
}
.reports-shell .rh-report-body .rh-table-head span:not(:first-child){text-align:center}
.reports-shell .rh-report-body .rh-table-row {
  display:grid;
  grid-template-columns:minmax(180px,1.6fr) repeat(4,minmax(90px,1fr));
  gap:13px;
  min-height:116px;
  align-items:stretch;
  border:1px solid var(--ra-line);
  border-radius:15px;
  background:var(--ra-surface);
  padding:16px;
  box-shadow:0 8px 22px rgba(40,76,119,.055);
}
.reports-shell .rh-report-body .rh-table-row:nth-child(2n){background:var(--ra-surface)}
.reports-shell .rh-report-body .rh-table-row strong {
  display:flex;align-items:center;
  gap:11px;
  min-width:0;
  padding:10px 13px;
  border-radius:12px;
  background:linear-gradient(100deg,color-mix(in srgb,#6190ed 9%,var(--ra-surface)),transparent 90%);
  color:var(--ra-ink);
  font-size:14px;font-weight:780;
  line-height:1.45;
}
.reports-shell .rh-report-body .rh-table-row strong::before {
  content:"";display:block;flex:none;
  width:10px;height:36px;
  border-radius:5px;
  background:linear-gradient(180deg,#5e8bf1,#ad8be7);
}
.reports-shell .rh-report-body .rh-table-row span {
  --metric:#5987e8;
  --metric-soft:color-mix(in srgb,var(--metric) 9%,var(--ra-surface));
  display:grid;place-items:center;
  min-width:0;
  font-weight:790;font-size:25px;line-height:1.2;
  padding:10px 6px;
  text-align:center;
  font-variant-numeric:tabular-nums;
  color:var(--metric);
  border:1px solid color-mix(in srgb,var(--metric) 16%,var(--ra-line));
  border-radius:12px;
  background:var(--metric-soft);
}
.reports-shell .rh-report-body .rh-table-row span:nth-of-type(2){--metric:#906fce}
.reports-shell .rh-report-body .rh-table-row span:nth-of-type(3){--metric:#25977f}
.reports-shell .rh-report-body .rh-table-row span:nth-of-type(4){--metric:#cb833d}
.reports-shell .rh-report-body .rh-table-empty {
  border:1px dashed var(--ra-line);
  border-radius:12px;
  background:var(--ra-soft);
  padding:40px 24px;
}

/* Authorized staff directory: status is account-active, NEVER an online indicator. */
.reports-shell .rh-report-body .rh-user-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:15px;
}
.reports-shell .rh-report-body .rh-user {
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  gap:18px;
  min-height:144px;
  padding:22px 24px;
  border:1px solid color-mix(in srgb,#6f8be7 23%,var(--ra-line));
  border-radius:15px;
  box-shadow:0 8px 23px rgba(39,77,133,.07);
  background:linear-gradient(108deg,color-mix(in srgb,#638fec 9%,var(--ra-surface)),var(--ra-surface) 60%);
}
.reports-shell .rh-report-body .rh-user::before {
  content:"";position:absolute;top:0;left:0;bottom:0;
  width:4px;border-radius:4px;
  background:linear-gradient(180deg,#6692fa,#9c7de5);
}
.reports-shell .rh-report-body .rh-user::after {
  content:"";position:absolute;z-index:-1;
  width:165px;height:165px;right:-50px;top:-95px;
  border-radius:50%;
  background:rgba(114,145,231,.075);
}
.reports-shell .rh-report-body .rh-user .avatar {
  flex:none;width:65px;height:65px;
  display:grid;place-items:center;
  border-radius:19px;
  color:#3f65c0;
  background:linear-gradient(145deg,#e5efff,#d7e5ff 58%,#eee3fa);
  border:1px solid rgba(104,142,214,.20);
  box-shadow:0 5px 15px rgba(62,107,178,.11);
  font-weight:790;font-size:21px;
  line-height:1;
}
.reports-shell .rh-report-body .rh-user > div {min-width:0;display:flex;align-items:flex-start;flex-direction:column;gap:8px}
.reports-shell .rh-report-body .rh-user strong {
  font-size:16px;font-weight:770;line-height:1.4;
  color:var(--ra-ink);
  overflow-wrap:anywhere;
}
.reports-shell .rh-report-body .rh-user small {
  display:inline-flex;align-items:center;
  width:fit-content;
  min-height:25px;
  padding:5px 11px;
  border:1px solid color-mix(in srgb,#5e8de6 24%,var(--ra-line));
  border-radius:999px;
  background:color-mix(in srgb,#6896e8 10%,var(--ra-surface));
  color:var(--ra-ink);
  font-size:11px;font-weight:700;
  line-height:1.2;
}

/* Responsive: keep each person's stats labeled by existing column headers;
   preserve horizontal scroller at narrow widths rather than hide any field. */
@media(max-width:960px){
 .reports-shell .rh-report-body .rh-table{overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
 .reports-shell .rh-report-body .rh-table-head,
 .reports-shell .rh-report-body .rh-table-row{min-width:750px}
}
@media(max-width:600px){
 .reports-shell .rh-report-body:has(> .rh-panel > .rh-table) > .rh-panel,
 .reports-shell .rh-report-body:has(> .rh-panel > .rh-user-grid) > .rh-panel{padding:17px 14px 20px}
 .reports-shell .rh-report-body .rh-user-grid{grid-template-columns:1fr}
 .reports-shell .rh-report-body .rh-user{min-height:112px;padding:17px 16px;gap:14px}
 .reports-shell .rh-report-body .rh-user .avatar{width:55px;height:55px;font-size:18px;border-radius:16px}
 .reports-shell .rh-report-body .rh-user strong{font-size:14px}
}
html[data-theme='dark'] .reports-shell .rh-report-body .rh-user .avatar{
  background:color-mix(in srgb,#5d80ce 22%,var(--ra-surface));
  color:#a6c4ff;
}
@media(prefers-reduced-motion:reduce){.reports-shell .rh-report-body .rh-table-row,.reports-shell .rh-report-body .rh-user{transition:none}}

@media(max-width:600px){
 .reports-shell .rh-report-body:has(> .rh-panel > .rh-table) > .rh-panel > header,
 .reports-shell .rh-report-body:has(> .rh-panel > .rh-user-grid) > .rh-panel > header {
   flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;
 }
 .reports-shell .rh-report-body:has(> .rh-panel > .rh-table) > .rh-panel > header::before,
 .reports-shell .rh-report-body:has(> .rh-panel > .rh-user-grid) > .rh-panel > header::before {
   flex:0 0 5px;width:5px;min-height:35px;
 }
}