/* Wallboard: large figures readable across a room, one tile per agent. Dark by default (V-4). */

.wallboard { display: flex; flex-direction: column; gap: var(--space-6); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--space-3); }
.kpi {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  container-type: inline-size;
}
.kpi__label { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 500; }
.kpi__value { font-size: clamp(1.75rem, 26cqi, 3.5rem); line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi__value--danger { color: var(--danger); }
.kpi__note { font-size: var(--text-xs); color: var(--text-tertiary); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2); }
.tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  font-size: var(--text-sm);
}
.tile__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile__state { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.tile__time { margin-left: auto; color: var(--text); }
.tile__schedule { font-size: var(--text-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; }
.tile__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); flex: none; }

/* State marks: shape and label carry the meaning; colour stays calm. */
.tile--on-call .tile__dot { background: var(--text); }
.tile--available .tile__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--text); }
.tile--acw .tile__dot { background: var(--text-secondary); }
.tile--break .tile__dot { background: var(--activity-break-text); }
.tile--offline { opacity: .55; }

/* Meaning: out of adherence, and time-in-state alarms */
.tile--out { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.tile--out .tile__schedule { color: var(--danger); }
.tile[data-alarm="warning"] { background: var(--warning-tint); border-color: var(--warning); }
.tile[data-alarm="danger"] { background: var(--danger-tint); border-color: var(--danger); }
.tile[data-alarm] .tile__time { font-weight: 600; }

/* TV mode: no chrome, bigger type */
.tv .content { padding: var(--space-5); }
.tv .tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tv .tile { font-size: var(--text-base); }

/* Out of the way on the wall; shows while the mouse is over the page or the link has focus. Esc exits too. */
.tv__exit {
  position: fixed; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); z-index: 1;
  opacity: 0; transition: opacity 150ms;
}
.tv:hover .tv__exit, .tv__exit:focus-visible { opacity: 1; }

.tv .wallboard__filters { display: none; }
/* Styled like the segmented controls beside it: same height, border, type and chevron scale. */
.wallboard__team .select {
  width: auto; min-height: 0; height: 100%;
  border-color: var(--border);
  font-size: var(--text-sm); font-weight: 500;
  padding-right: calc(var(--space-3) + 14px + var(--space-2)); background-size: 14px;
}

.wallboard__views { gap: var(--space-2); }
.wallboard__views [aria-current="page"] { background: var(--surface-muted); color: var(--text); }
.wallboard__save[open] { display: flex; align-items: center; gap: var(--space-2); }
.wallboard__save summary { list-style: none; }