/* dashboard.css — the screen behind the brand mark.

   TWO SCREENS IN ONE FILE, because they are the same screen read by two
   people. ROLE-01 says the app knows exactly two roles, so a rep opens this
   and sees their own week; a manager opens it and sees the location's week
   and every rep in it (ROLE-04, MGR-03, MGR-04). Nothing here is a control
   the user picks — the numbers you get are the ones your account is for.

   WEEKLY, because MGR-03 is weekly. A day is too short a window to say
   anything about a rep: one walk-in with a big project would make Tuesday
   look like a career. The six-week chart is the same reason at the other
   end — a single week means little without the five behind it (MGR-04).

   The live picture is deliberately NOT here for a rep: that is the Concierge
   board, and a second live surface competing with it would split the rep's
   attention between two screens that both claim to be current. A manager
   gets one live band and only one, because MGR-02 says what is going
   unanswered is the part of their job that needs them today. */

/* The ground under the cards. Every other screen on this surface sets it and
   this one did not, so the phone fell through to `--shell-bg` — the fixed grey
   desk the frame sits on, which is the same light value in both themes. In
   light it passed for the ground; in dark it was a white page behind dark blue
   cards. A screen must never take a colour from the furniture it is sitting
   on. */
.db .phone { background: var(--ground); }

/* ── Header ────────────────────────────────────────────────────────────── */

.db-top {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px 11px;
  background: var(--ground-top);
  border-bottom: 1px solid var(--line);
}

.db-top-row { display: flex; align-items: center; gap: 10px; }
.db-title { flex: 1 1 auto; line-height: 0; }

/* The lockup where the word "Dashboard" was. 29px is the height the minimal
   side sets it at (`.wk-logo`, `.lv-logo`), and it costs this denser header
   nothing: the avatar beside it is 34px, so the row's height is unchanged.
   `line-height: 0` on the heading above is what keeps it that way — an inline
   image otherwise reserves room for a descender that is not there.

   Two files rather than one recoloured by CSS: the mark carries gradients and
   a gold, and a filter that turned all of that white would be a different
   mark. `[data-mode="night"]` is set on the root by concepts.js for every
   dark colourway, so this follows the theme without naming any of them. */
.db-logo { height: 29px; width: auto; }
.db-logo--paper { display: none; }
[data-mode="night"] .db-logo--ink { display: none; }
[data-mode="night"] .db-logo--paper { display: block; }

/* Whose numbers these are, and over what. Two lines rather than one because
   they answer two different questions — who is being counted, and when. */
.db-scope {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--soft);
}

/* BEH-02 — a screen of numbers says when it was counted. A dashboard that
   does not is asking to be read as current long after it stopped being. */
.db-week {
  margin-top: 2px;
  font-size: 11px;
  color: var(--mute);
}

.db-pad {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 24px;
}

/* THE GAP HAS TO BE ON THE ROLE BLOCK, NOT ON `.db-pad`. The pad's children
   are the two `[data-role]` wrappers — one of which is always hidden — so a
   gap here separated a visible block from an invisible one and the tiles, the
   chart and the list inside it sat flush against each other with nothing
   between them at all.

   `:not([hidden])` is load-bearing: an author `display: flex` beats the user
   agent's `[hidden] { display: none }` no matter how specific it is, so
   without it the manager's half would render underneath the rep's. */
.db-pad > [data-role]:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── MGR-02 · what is going unanswered, right now ──────────────────────── */
/* The manager's first band and the only live thing on the screen. Everything
   below it is the week; this is the minute. It is orange for the same reason
   `.cb-now` is on the board — a client waiting with nobody answering is what
   the whole app exists to prevent (NOTIF-03). It was red until 0035, which
   said "broken" about the app's ordinary daily work. */

.db-alert {
  padding: 12px 13px 11px;
  border-radius: 7px;
  background: var(--urge-wash);
  box-shadow: inset 0 0 0 1px var(--urge);
}

.db-alert-h {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

.db-alert-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 9px;
  margin-top: 9px;
  border-top: 1px solid var(--urge);
}

.db-alert-say { flex: 1 1 auto; font-size: 12px; color: var(--ink); }
.db-alert-say b { font-weight: 700; }

/* The waiting time is the last thing on the row and sits against the right
   edge: it is what ranks the two rows against each other. */
.db-alert-for {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--soft);
}
.db-alert-for b { font-weight: 700; color: var(--urge-2); }

/* ── The week, in four numbers ─────────────────────────────────────────── */
/* Stacked rather than side by side: at two tiles per row a horizontal
   [value] [label] pair leaves the label with about nine characters, and
   "Time To First Response" is not nine characters. Value first, label tight
   under it, sub-line under that. */

.db-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.db-tile {
  padding: 11px 12px 12px;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}

.db-tile-v {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}

.db-tile-l {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--soft);
}

.db-tile-s {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--mute);
}

/* A number that is only ever bad news. Escalations are sessions where nobody
   answered inside the three minutes (NOTIF-03) — zero is the target, so the
   figure is coloured rather than left to read like the other three. */
.db-tile--bad .db-tile-v { color: var(--alarm); }

/* Getting slower is the one movement on this screen worth colouring. */
.db-tile-s .is-worse { color: var(--alarm); font-weight: 600; }
.db-tile-s .is-better { color: var(--good); font-weight: 600; }

/* ── Cards ─────────────────────────────────────────────────────────────── */

.db-card {
  padding: 13px 14px 14px;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}

.db-card-h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

.db-card-s {
  margin-top: 2px;
  font-size: 11px;
  color: var(--mute);
}

/* ── The six weeks (MGR-04) ────────────────────────────────────────────── */
/* Drawn rather than plotted by a library: six bars is six rectangles, and a
   charting dependency on a prototype phone screen would be the largest thing
   in the page by an order of magnitude.

   The viewBox is 330 wide, which is exactly the card's inner width at 390px —
   so the 10px axis labels render at 10px and honour the font floor rather
   than being scaled to something smaller by the SVG. */

.db-chart { width: 100%; height: auto; margin-top: 11px; }

.db-bar     { fill: var(--accent); }
.db-bar-sub { fill: var(--accent); opacity: .34; }   /* a tint of the same
                blue, never a second token — `--accent-wash` is within a
                shade of `--surface` in navy and the segment disappears */

.db-ax {
  fill: var(--mute);
  font-size: 10px;
  font-weight: 500;
  text-anchor: middle;
}

.db-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }

.db-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--mute);
}
.db-key i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }

.db-key--a i   { background: var(--accent); }
.db-key--b i   { background: var(--accent); opacity: .34; }

/* ── The list ──────────────────────────────────────────────────────────── */

.db-rows { margin-top: 4px; }

.db-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0 10px;
}
.db-row + .db-row { border-top: 1px solid var(--line-soft); }
.db-row:last-child { padding-bottom: 0; }

.db-rank {
  flex: 0 0 auto;
  width: 13px;
  padding-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
}

.db-who { flex: 1 1 auto; min-width: 0; }

.db-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

.db-what {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--mute);
}

/* Each stat is its own [value] [label] pair, kept tight, so the eye never has
   to carry a number across the row to find what it counts. */
.db-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1px 9px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--mute);
}
.db-stats b { font-weight: 700; color: var(--soft); }

/* MGR-04 — the point of ranking a team is seeing who is slipping, which is a
   figure on one row, not a badge on the whole person. */
.db-stats b.is-slip { color: var(--alarm); }

/* The last thing on the row, against the right edge: on the team list it is
   what the ranking is by, and on the rep's list it is the clock. */
.db-end {
  flex: 0 0 auto;
  padding-top: 1px;
  text-align: right;
  font-size: 12px;
  color: var(--soft);
}
.db-end b { font-size: 13px; font-weight: 700; color: var(--ink); }
.db-end.is-due b { color: var(--alarm); }

/* ── Review chrome · which role is being looked at ─────────────────────── */
/* NOT part of the design. A rep never sees it and neither does a manager —
   the app knows which one signed in (ROLE-01). It is a reviewer's control for
   reading two versions of one screen without editing a URL.

   Nothing for it here: it is `.pal-switch.role-switch`, drawn in frame.css
   beside the layout and theme toggles it stacks on top of. It borrows rather
   than redraws because the review chrome has one look and already knows what
   to do on a dark ground — a pill here that wrote its own blue would be the
   one control on the surface that ignores the theme, which is exactly what
   this was until the second layout arrived. */

/* The figure above each bar. Requested outright: six columns say the SHAPE of
   a rep's six weeks and nothing about their size, and a rep asked what they
   are worth is holding a number, not a silhouette. 10px is the floor and this
   is the least important line in the card — the tiles above carry the week
   that matters. */
.db-val {
  fill: var(--soft);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}