/* =====================================================================
   dashboard.css  --  the public board that colleagues see.

   Reading order on a phone, top to bottom:
       1. WHERE IS HE          the hero, sized to answer the question alone
       2. REQUEST HAITHAM      the primary action, directly under it
       3. who he is with       currently serving
       4. who is waiting       the queue
       5. the numbers          counters

   The hero and the action are both above the fold on a small phone. That
   ordering is the whole design: a colleague either gets their answer and
   leaves, or asks for help without hunting for a button.
   ===================================================================== */

/* The page's one and only "Where is Haitham now?". The desktop tab used
   to repeat it word for word; that tab now says "Now", like the bottom
   bar always did, so this is the single place the question is asked.
   Drawn as a plate - thick border, hard shadow, bold - because it is the
   title of the thing the whole site exists to answer. */
.board-title {
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--accent-contrast);
  background: var(--accent);
  text-align: center;
  padding: var(--s-3) var(--s-4);
  border: var(--bd) solid var(--ink);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--s-2);
}

/* ---------- Status hero -----------------------------------------------
   The most important block on the site, so it gets the deepest shadow
   and the only full-bleed colour band in the design.
   -------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  border: var(--bd) solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: var(--s-5) var(--s-4) var(--s-4);
}

/* The tone band. A solid 12px bar, not a hairline: this is the first
   thing the eye lands on and it has to carry at a glance. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 12px;
  background: var(--hero-accent, var(--text-faint));
  border-bottom: var(--bd-hair) solid var(--ink);
}
.hero > :first-child { margin-top: var(--s-2); }

.hero[data-tone='ok']     { --hero-accent: var(--ok-fill); }
.hero[data-tone='warn']   { --hero-accent: var(--warn-fill); }
.hero[data-tone='info']   { --hero-accent: var(--info-fill); }
.hero[data-tone='danger'] { --hero-accent: var(--danger-fill); }
.hero[data-tone='muted']  { --hero-accent: var(--muted-fill); }

.hero-status {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.05;
}
/* A square marker, not a bead. It is filled with the tone colour and
   outlined in ink so it survives on any background. */
.hero-status .dot {
  width: 20px; height: 20px;
  background: var(--hero-accent, var(--text-faint));
  border: var(--bd-thin) solid var(--ink);
  flex: none;
}
.hero-status.live .dot { animation: blink 2.2s steps(1, end) infinite; }
@keyframes blink { 50% { background: var(--surface); } }

.hero-hint {
  color: var(--text-muted);
  font-size: var(--t-small);
  margin-top: var(--s-2);
}

/* ---------- Facts: where, and doing what ------------------------------ */
.hero-facts {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--s-4);
  border: var(--bd-hair) solid var(--border);
}
.fact {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  font-size: 17px;
  font-weight: 600;
  min-width: 0;
}
.fact + .fact { border-top: var(--bd-hair) solid var(--border); }
.fact .ico {
  line-height: 1;
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--accent);
  border: var(--bd-hair) solid var(--ink);
}
.fact .k {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.fact .v { display: block; overflow-wrap: anywhere; }

/* ---------- The clock panel -------------------------------------------
   Everything a machine computed: started at, expected until, free when.
   Mono throughout, on its own sunken ground, so it reads as instrument
   output rather than prose.
   -------------------------------------------------------------------- */
.hero-time {
  margin-top: var(--s-4);
  padding: var(--s-3);
  background: var(--surface-2);
  border: var(--bd-hair) solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.hero-time .k {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-time .v {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* "Free at 12:40" is the single number most people came for. */
.hero-time .v.big {
  font-size: 24px;
  font-weight: 700;
  display: inline-block;
  margin-top: 2px;
  padding: 2px var(--s-2);
  background: var(--accent);
  color: var(--accent-contrast);
  border: var(--bd-thin) solid var(--ink);
}

.hero-foot {
  margin-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
}

.expired-note {
  margin-top: var(--s-3);
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  padding: var(--s-3);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--t-small);
  font-weight: 600;
  border: var(--bd-thin) solid var(--warn);
}

/* ---------- Primary call to action ------------------------------------
   Sits immediately under the hero. Nothing else on this page is yellow
   and 68px tall, so there is never a question about where to press.
   -------------------------------------------------------------------- */
.cta-wrap { padding: var(--s-1) 0; }
.cta {
  width: 100%;
  min-height: 68px;
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow: var(--shadow-lg);
}
.cta:active { transform: var(--press-deep); box-shadow: var(--shadow-flat); }

/* ---------- Currently serving ----------------------------------------- */
.serving { border-inline-start: 12px solid var(--ok-fill); }
.serving-person {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: var(--track-tight);
}

/* ---------- Queue ------------------------------------------------------ */
.queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.queue-item {
  display: flex;
  align-items: center;
  /* The urgency badge never shrinks and "Life & death" is a wide one, so
     on a narrow phone it drops to its own line underneath rather than
     squeezing the requester's name into a two-line column. */
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  background: var(--surface);
  border: var(--bd-thin) solid var(--border);
  border-inline-start: 10px solid var(--muted-fill);
  box-shadow: var(--shadow-sm);
}
.queue-item[data-priority='urgent']      { border-inline-start-color: var(--urgent-fill); }
.queue-item[data-priority='very_urgent'] { border-inline-start-color: var(--danger-fill); }
.queue-item[data-priority='life_death']  { border-inline-start-color: var(--critical-fill); }
.queue-item[data-priority='normal']      { border-inline-start-color: var(--ok-fill); }

/* Position in the queue, as a stamped number. */
.queue-rank {
  font-family: var(--mono);
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-contrast);
  border: var(--bd-thin) solid var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.queue-main { min-width: 0; flex: 1 1 140px; }
.queue-item > .badge { margin-inline-start: auto; }
/* Both are <span>s inside a <span>, so they need blockifying by hand or
   the name and the location run together on one line. */
.queue-name { display: block; font-weight: 700; font-size: 16px; }
.queue-meta { display: block; font-size: 13px; color: var(--text-muted); }

/* ---------- Counters ---------------------------------------------------
   Three instrument readouts. Big mono figures, flat ground, hard edge.
   -------------------------------------------------------------------- */
/* Four readouts, and the admin board sometimes shows five. Two columns
   on a phone, four once there is room; equal widths come from 1fr and
   equal heights come from the grid row, so nothing has to be measured.
   A trailing odd tile - the fifth, or a third of three - spans the full
   width instead of sitting alone against empty space. */
.counters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  align-items: stretch;
}
.counters > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.counter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.counter {
  text-align: center;
  padding: var(--s-3) var(--s-2);
  min-height: 78px;
  background: var(--surface);
  border: var(--bd-thin) solid var(--border);
  box-shadow: var(--shadow-sm);
}
.counter .n {
  display: block;
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.counter .l {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.counter[data-tone='danger'] { border-color: var(--danger-fill); border-width: var(--bd); }
.counter[data-tone='danger'] .n { color: var(--danger); }
.counter[data-tone='urgent'] { border-color: var(--urgent-fill); border-width: var(--bd); }
.counter[data-tone='urgent'] .n { color: var(--urgent); }
/* Life and death is the only readout drawn inverted. */
.counter[data-tone='critical'] {
  background: var(--critical-soft);
  border-color: var(--ink);
  border-width: var(--bd);
}
.counter[data-tone='critical'] .n,
.counter[data-tone='critical'] .l { color: var(--critical); }

/* ---------- My requests ------------------------------------------------ */
.req-card {
  display: block;
  width: 100%;
  text-align: start;
  padding: var(--s-3);
  border: var(--bd-thin) solid var(--border);
  border-inline-start: 10px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .05s ease, background .12s ease;
}
.req-card[data-priority='urgent']      { border-inline-start-color: var(--urgent-fill); }
.req-card[data-priority='very_urgent'] { border-inline-start-color: var(--danger-fill); }
.req-card[data-priority='life_death']  { border-inline-start-color: var(--critical-fill); }
.req-card[data-priority='normal']      { border-inline-start-color: var(--ok-fill); }
.req-card:hover  { background: var(--accent-soft); }
.req-card:active { transform: var(--press); box-shadow: var(--shadow-flat); }

.req-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
}
/* All <span>s inside a <button>, so they are blockified here rather than
   relying on the markup. */
.req-num { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.req-title { display: block; font-weight: 700; font-size: 16px; }
.req-sub { display: block; font-size: 13px; color: var(--text-muted); }
.req-desc {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* ---------- Request timeline ------------------------------------------- */
.timeline {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  padding-inline-start: var(--s-5);
  border-inline-start: var(--bd) solid var(--border);
}
.timeline li {
  position: relative;
  padding: 0 0 var(--s-3);
  padding-inline-start: var(--s-3);
  font-size: var(--t-small);
}
.timeline li::before {
  content: '';
  position: absolute;
  inset-inline-start: -28px; top: 5px;
  width: 11px; height: 11px;
  background: var(--surface);
  border: var(--bd-thin) solid var(--ink);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { background: var(--accent); }
.timeline time {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
}