/*
    The operations command view (slice 055).

    Two shapes from one markup: a desk screen read at arm's length, and — with .ops-wall — a
    wallboard read from six feet by somebody walking past. The difference is type size and the
    absence of controls, not a second page, because two pages drift apart and only one of them
    gets looked at when something is wrong.

    Every colour comes from the existing tokens. No new palette (E3): a screen that invented its
    own reds would be the one place in the product where red meant something slightly different.

    Logical properties throughout (I2) — this whole layout mirrors in Arabic without a second
    stylesheet.
*/

.ops {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---- Zone 1: the verdict ---------------------------------------------------------------- */

.ops-verdict {
  padding-block: 2rem;
  padding-inline: 1.5rem;
  border-radius: 0.75rem;
  text-align: center;
}

/*
    All clear is deliberately near-monochrome and calm.

    An empty attention list must look INTENTIONAL rather than like a page that failed to load
    (C4). Green everywhere would be a celebration; the quiet surface plus the timestamp beneath
    it says "we looked, and there is nothing" — which is the message, and it should not shout.
*/
.ops-verdict-clear {
  background: var(--surface-2);
  color: var(--text-2);
}

.ops-verdict-busy {
  background: var(--danger-soft);
  color: var(--status-danger);
}

.ops-verdict-line {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.ops-verdict-scope {
  margin-block-start: 0.5rem;
  margin-block-end: 0;
  font-size: 0.95rem;
  color: var(--text-3);
}

/*
    The live dot. Static, not pulsing.

    An overnight quiet period must stay calm (L3): a blinking indicator on a dark ward at 03:00
    is motion in the corner of somebody's eye all night, and filler animation on a screen whose
    job is to be ignorable is exactly wrong.
*/
.ops-live {
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-inline: 0.5rem;
  border-radius: 50%;
  background: var(--status-success);
  vertical-align: middle;
}

/* ---- Zone 2: what needs attention -------------------------------------------------------- */

.ops-attention {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ops-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border-radius: 0.5rem;
  background: var(--surface);

  /* Inline-start, so the severity stripe is on the leading edge in both scripts. */
  border-inline-start: 4px solid var(--status-neutral);
}

.ops-item-urgent {
  border-inline-start-color: var(--status-danger);
}

.ops-item-warning {
  border-inline-start-color: var(--status-warning);
}

.ops-item-notice {
  border-inline-start-color: var(--status-info);
}

.ops-item-what {
  font-weight: 600;
  color: var(--text-1);
}

.ops-item-where {
  grid-column: 1;
  font-size: 0.9rem;
  color: var(--text-3);
}

.ops-item-action {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  white-space: nowrap;
}

.ops-more {
  margin: 0;
  padding-inline: 1rem;
  color: var(--text-3);
}

/* ---- Zone 3: what went right ------------------------------------------------------------- */

.ops-ambient {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.ops-stat {
  display: flex;
  flex-direction: column;
  min-inline-size: 10rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--surface-2);
}

.ops-stat-value {
  font-size: 1.75rem;
  font-weight: 700;

  /* The journey's own end-state colour, borrowed rather than invented: these are the doses that
     completed their journey, which is exactly what that token means everywhere else. */
  color: var(--journey-administered);
}

.ops-stat-label {
  font-size: 0.85rem;
  color: var(--text-3);
}

/* ---- The wallboard ------------------------------------------------------------------------ */

/*
    Six feet, not eighteen inches. Everything roughly doubles, and the interactive affordances are
    already absent from the markup rather than hidden here — a link nobody can click is still a
    link a screen reader announces.
*/
.ops-wall .ops-verdict-line {
  font-size: 5rem;
}

.ops-wall .ops-verdict-scope {
  font-size: 1.5rem;
}

.ops-wall .ops-item-what {
  font-size: 2rem;
}

.ops-wall .ops-item-where {
  font-size: 1.25rem;
}

.ops-wall .ops-stat-value {
  font-size: 3.5rem;
}

.ops-wall .ops-stat-label {
  font-size: 1.25rem;
}

/*
    Respect a reduced-motion preference even though there is no animation here, because the rule
    is cheap and the next person to add one will not think of it.
*/
@media (prefers-reduced-motion: reduce) {
  .ops-live {
    animation: none;
  }
}

/* ---- Report charts ------------------------------------------------------------------------ */

/*
    Server-rendered SVG, no charting library. See Views/Reports/_Chart.cshtml for why.

    Every fill is a CSS custom property, so a theme switch restyles the chart with no redraw and no
    JavaScript — which is also what makes it correct in a print-out and with scripting off.
*/

.report-chart {
  margin-block-end: 1rem;
}

.report-chart-donut svg {
  inline-size: 100%;
  max-inline-size: 14rem;
  block-size: auto;
}

.report-chart-ring {
  fill: none;
  stroke: var(--surface-2);
  stroke-width: 5;
}

.report-chart-slice {
  fill: none;
  stroke-width: 5;

  /*
      No transition. A chart that animates on every dashboard poll is motion every fifteen seconds
      on a screen somebody is trying to read, and on the wallboard it would never stop.
  */
}

.report-chart-bars {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.report-bar-row {
  display: grid;

  /* Label, bar, value. The bar is the flexible column; the other two size to their content, so a
     long Arabic label does not squeeze every bar into nothing. */
  grid-template-columns: minmax(6rem, 12rem) 1fr auto;
  gap: 0.75rem;
  align-items: center;
}

.report-bar-label {
  font-size: 0.9rem;
  color: var(--text-2);

  /* Truncates rather than wrapping, so rows stay one line and the bars stay comparable. The full
     text is still in the legend beneath. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-bar-track {
  display: block;
  block-size: 1rem;
  border-radius: 0.5rem;
  background: var(--surface-2);
  overflow: hidden;
}

.report-bar-fill {
  display: block;
  block-size: 100%;

  /* Rounded on the leading edge only, so a bar reads as growing from the start of the line in both
     scripts rather than floating. */
  border-start-start-radius: 0.5rem;
  border-end-start-radius: 0.5rem;
}

.report-bar-value {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.report-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.report-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/*
    The swatch is beside the label, never instead of it. Q4: colour is never the only signal, and a
    legend is exactly where that rule gets forgotten.
*/
.report-legend-swatch {
  display: inline-block;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: 0.2rem;
}

/* ---- The ward strip ------------------------------------------------------------------------ */

/*
    A strip of tiles, not a floor plan. It sorts, it wraps, and the ward somebody is looking for is
    where the alphabet put it rather than where the architect did.
*/

.ops-wards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ops-ward-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.75rem;
}

.ops-ward {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--surface);

  /* One state colour per ward, on the leading edge so it mirrors in Arabic (F2). A tile showing
     three colours shows none, which is why the severity is decided in the service. */
  border-inline-start: 4px solid var(--status-neutral);
}

.ops-ward-clear {
  border-inline-start-color: var(--status-success);
}

.ops-ward-urgent {
  border-inline-start-color: var(--status-danger);
}

.ops-ward-warning {
  border-inline-start-color: var(--status-warning);
}

.ops-ward-notice {
  border-inline-start-color: var(--status-info);
}

.ops-ward-name {
  font-weight: 600;
}

.ops-ward-bar {
  block-size: 0.5rem;
  border-radius: 0.25rem;
  background: var(--surface-2);
  overflow: hidden;
}

.ops-ward-bar-fill {
  display: block;
  block-size: 100%;

  /* The journey's end state: these are the doses that finished their journey today. Borrowed, not
     invented (E3). */
  background: var(--journey-administered);
  border-start-start-radius: 0.25rem;
  border-end-start-radius: 0.25rem;
}

.ops-ward-figures {
  font-size: 0.85rem;
  color: var(--text-3);
}

.ops-ward-flags {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.ops-ward-flags li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ops-ward-link {
  margin-block-start: 0.25rem;
  font-size: 0.85rem;
}

/* On a wall the tiles grow and the links are already absent from the markup. */
.ops-wall .ops-ward-strip {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.ops-wall .ops-ward-name {
  font-size: 1.5rem;
}

.ops-wall .ops-ward-figures,
.ops-wall .ops-ward-flags {
  font-size: 1.1rem;
}