/* Order Entry KPI Snapshot — the Vonage KPI Snapshot's look (web/cs-calls/calls.css, itself the
   Warehouse KPI Snapshot's), laid out once at 1920×1080 and zoomed whole by board.js, so nothing
   ever scrolls. Three tiles across the top, the top person and everybody's numbers underneath. */

:root {
  --navy: #0B2A5B;
  --ink: #1C2B45;
  --soft: #5B6B85;
  --line: rgba(11, 42, 91, .12);
  --card: rgba(255, 255, 255, .82);
  --in: #16A34A;
  --out: #2D6CC0;
  --miss: #DC2626;
  --gold: #C99A1E;
  --script: #2D6CC0;
  --ground: linear-gradient(168deg, #FFFFFF 0%, #F3F7FC 38%, #E6F0FA 72%, #DCEAF8 100%);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--ground);
}

.stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  background: var(--ground); overflow: hidden; visibility: hidden;   /* board.js zooms and centres it */
}
.stage.is-fit { visibility: visible; }
.ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.ground-line { fill: none; stroke: #FFFFFF; stroke-opacity: .7; stroke-width: 2; }

.sheet { position: relative; height: 100%; padding: 52px 72px 34px; display: flex; flex-direction: column; }

.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
h1 { margin: 0; font-size: 84px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); line-height: 1.02; }
.states { margin: 14px 0 0; font-size: 28px; font-weight: 600; letter-spacing: .28em; color: var(--navy); }
.states i, .tag i { font-style: normal; color: #2BB673; padding: 0 .35em; }
.motto {
  margin: 4px 24px 0 0; font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 30px; line-height: 1.15;
  color: var(--script); text-align: center; transform: rotate(-6deg); opacity: .85;
}

.card, .tile, .top-card, .people-card {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 26px;
  box-shadow: 0 14px 48px rgba(11, 42, 91, .09), 0 1px 2px rgba(11, 42, 91, .06);
  /* No backdrop blur: it puts the cards on their own layer and softens the text on them. */
}

/* the three tiles — the same thin band as the Vonage page: label on top, then the number with
   its two lines beside it. */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 24px; height: 176px; flex: none; }
.tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 22px;
  min-width: 0; padding: 16px 28px 14px; border-top: 7px solid var(--navy); }
.tile-head { grid-column: 1 / -1; }
.tile .value { grid-row: 2 / 4; align-self: end; }
.tile .time { grid-column: 2; grid-row: 2; align-self: end; }
.tile .note { grid-column: 2; grid-row: 3; }
.tile-people { border-top-color: var(--in); }
.tile-bot { border-top-color: var(--out); }
.tile-head { display: flex; align-items: center; gap: 14px; }
.icon { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile-people .icon { stroke: var(--in); }
.tile-bot .icon { stroke: var(--out); }
.label { margin: 0; font-size: 22px; font-weight: 600; color: var(--soft); }
.value {
  margin: 0; font-size: 92px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tile-people .value { color: var(--in); }
.tile-bot .value { color: var(--out); }
.time { margin: 0; font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.note { margin: 2px 0 8px; font-size: 17px; color: var(--soft); min-height: 22px; line-height: 1.2; }

/* the lower half: the top rep, and every rep beside it */
.lower { flex: 1; min-height: 0; margin-top: 24px; display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 28px; }
.toprep, .people { min-height: 0; display: flex; }
.top-card { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 30px 36px; min-width: 0; border-top: 8px solid var(--gold); }
.trophy { width: 96px; height: 96px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
/* Two lines for a long name rather than an ellipsis (2026-10-06: "Shanique Alsbe…"). */
.top-name { margin: 8px 0 0; font-size: 60px; font-weight: 800; color: var(--navy); line-height: 1.05; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.top-line { margin: 16px 0 0; font-size: 44px; font-weight: 800; color: var(--gold); }
.top-sub { margin: 6px 0 0; font-size: 22px; font-weight: 600; color: var(--soft); }

.people-card { background: rgba(255, 255, 255, .95); flex: 1; display: flex; flex-direction: column; padding: 22px 30px 16px; min-width: 0; min-height: 0; overflow: hidden; }
/* What is left for rows: board.js measures it and sets how many fit on a page. */
.reps-box { flex: 1; min-height: 0; overflow: hidden; }
.people-head { display: flex; justify-content: space-between; align-items: baseline; }
.pager { margin: 0; font-size: 20px; color: var(--soft); }
.reps { width: 100%; border-collapse: collapse; margin-top: 10px; table-layout: fixed; }
.reps th { font-size: 18px; font-weight: 700; color: #3E4E68; text-transform: uppercase; letter-spacing: .03em; padding: 0 6px 8px;
  border-bottom: 2px solid var(--line); text-align: right; white-space: nowrap; }
.reps td { font-size: 31px; color: #0F1D33; font-weight: 600; padding: 0 8px; height: 46px; border-bottom: 1px solid var(--line); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reps tr:last-child td { border-bottom: 0; }
.reps .c-rank { width: 56px; text-align: left; color: #3E4E68; }
.reps .c-name { width: 34%; text-align: left; font-weight: 700; color: var(--navy); }
.reps .c-money { width: 19%; }
.reps .c-time { width: 17%; }
.reps tr.is-first td { color: var(--navy); font-weight: 800; }
.reps tr.is-first .c-rank { color: var(--gold); }
.reps td.none { text-align: left; color: var(--soft); }

.foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 24px; height: 30px; flex: none; }
.when { margin: 0; font-size: 18px; color: var(--soft); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { flex: none; margin: 0; font-size: 22px; font-weight: 600; letter-spacing: .22em; color: var(--navy); }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }