/* Warehouse monitor: wall screens (/ops/monitor, dark, readable from a distance) and the
   laptop page (/logistics/operations/monitor, light, inside the portal). Global rather than scoped because
   the slides are separate components that share every rule. */

.monitor-board {
  --monitor-bg: #ffffff;
  --monitor-panel: #f6f7f9;
  --monitor-text: #1f2430;
  --monitor-muted: #6b7280;
  --monitor-border: #e3e6ea;
  --monitor-green: #1e9e5a;
  --monitor-orange: #e08a00;
  --monitor-red: #d93636;
  --monitor-grey: #8a919c;
  --monitor-scale: 1;

  background: var(--monitor-bg);
  color: var(--monitor-text);
  font-size: calc(14px * var(--monitor-scale));
}

.monitor-board--kiosk {
  --monitor-bg: #0f1218;
  --monitor-panel: #1a1f29;
  --monitor-text: #f2f4f7;
  --monitor-muted: #9aa3b2;
  --monitor-border: #2b3240;
  --monitor-green: #2fbf71;
  --monitor-orange: #ffa62b;
  --monitor-red: #ff5252;
  --monitor-grey: #7d8696;
  --monitor-scale: 1.6;

  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 1.2vw 1.6vw;
  overflow: hidden;
}

.monitor-board--full {
  border-radius: 6px;
}

.monitor-board--stale .monitor-slide,
.monitor-board--stale .monitor-section,
.monitor-offline-mode .monitor-board > * {
  opacity: 0.45;
  filter: grayscale(1);
}

/* Status colours: one class drives border, badge and number colour. */
.monitor-status-green  { --monitor-status: var(--monitor-green); }
.monitor-status-orange { --monitor-status: var(--monitor-orange); }
.monitor-status-red    { --monitor-status: var(--monitor-red); }
.monitor-status-grey   { --monitor-status: var(--monitor-grey); }
.monitor-status-done   { --monitor-status: var(--monitor-green); }

/* Header */
.monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: 0.5em 0.9em;
  margin-bottom: 0.8em;
  border-radius: 6px;
  background: var(--monitor-status, var(--monitor-grey));
  color: #fff;
}

.monitor-header__title { display: flex; align-items: baseline; gap: 0.8em; }
.monitor-header__screen { opacity: 0.85; font-size: 0.9em; }
.monitor-header__headline { font-size: 1.5em; font-weight: 700; }
.monitor-header__meta { display: flex; align-items: baseline; gap: 1.4em; font-size: 0.95em; }
.monitor-header__clock { font-size: 1.6em; font-weight: 700; font-variant-numeric: tabular-nums; }

.monitor-board--kiosk .monitor-header.monitor-status-red { animation: monitor-pulse 2s ease-in-out infinite; }

@keyframes monitor-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

.monitor-stale,
.monitor-offline {
  padding: 0.5em 0.9em;
  margin-bottom: 0.8em;
  border-radius: 6px;
  background: var(--monitor-grey, #7d8696);
  color: #fff;
  font-weight: 600;
}

.monitor-offline {
  position: fixed;
  left: 2vw;
  right: 2vw;
  bottom: 2vw;
  z-index: 10000;
  font-size: 24px;
  text-align: center;
}

.monitor-empty {
  padding: 2em;
  text-align: center;
  font-size: 1.3em;
  color: var(--monitor-muted);
}

.monitor-slide { flex: 1; overflow: hidden; }
.monitor-section { margin-bottom: 1.5em; }
.monitor-section__title { color: var(--monitor-text); margin: 0.6em 0; }

.monitor-dots {
  display: flex;
  justify-content: center;
  gap: 1.5em;
  padding-top: 0.5em;
  color: var(--monitor-muted);
  font-size: 0.8em;
}

.monitor-dot--active { color: var(--monitor-text); font-weight: 700; border-bottom: 2px solid var(--monitor-text); }

/* Cutoff rows */
.monitor-cutoffs { display: flex; flex-direction: column; gap: 0.6em; }

.monitor-cutoff {
  display: grid;
  grid-template-columns: 11em 9em 1fr 12em;
  align-items: center;
  gap: 1em;
  padding: 0.6em 0.9em;
  background: var(--monitor-panel);
  border-left: 0.45em solid var(--monitor-status, var(--monitor-grey));
  border-radius: 4px;
}

.monitor-cutoff__time { display: flex; flex-direction: column; }
.monitor-cutoff__clock { font-size: 2em; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.monitor-cutoff__lanes { color: var(--monitor-muted); font-size: 0.85em; }
.monitor-cutoff__countdown { font-weight: 600; font-variant-numeric: tabular-nums; }
.monitor-cutoff__open { display: flex; flex-direction: column; }
.monitor-cutoff__funnel { display: flex; flex-wrap: wrap; gap: 0.4em; }
.monitor-cutoff__forecast { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2em; }
.monitor-cutoff__shortfall { color: var(--monitor-status); font-weight: 700; }
.monitor-cutoff__capacity { color: var(--monitor-muted); font-size: 0.85em; }

.monitor-big { font-size: 2.2em; font-weight: 800; line-height: 1; color: var(--monitor-status, var(--monitor-text)); font-variant-numeric: tabular-nums; }
.monitor-label { color: var(--monitor-muted); font-size: 0.8em; }

.monitor-chip {
  padding: 0.15em 0.55em;
  border-radius: 999px;
  border: 1px solid var(--monitor-border);
  white-space: nowrap;
}

.monitor-chip--zero { opacity: 0.35; }
.monitor-chip--muted { color: var(--monitor-muted); }

.monitor-badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 4px;
  background: var(--monitor-status, var(--monitor-grey));
  color: #fff;
  font-weight: 700;
}

.monitor-footnote { color: var(--monitor-muted); font-size: 0.8em; margin-top: 0.4em; }
.monitor-muted { color: var(--monitor-muted); }

/* Blockers */
.monitor-blockers { display: grid; grid-template-columns: 3fr 2fr; gap: 0.8em; }
.monitor-blockers__side { display: flex; flex-direction: column; gap: 0.8em; }

.monitor-panel {
  padding: 0.6em 0.9em;
  background: var(--monitor-panel);
  border-left: 0.45em solid var(--monitor-status, var(--monitor-grey));
  border-radius: 4px;
}

.monitor-panel__title { color: var(--monitor-text); font-size: 1.1em; margin: 0 0 0.4em; }
.monitor-panel__ok { color: var(--monitor-muted); margin: 0; }
.monitor-count { color: var(--monitor-status); font-weight: 800; margin-left: 0.3em; }
.monitor-summary { list-style: none; padding: 0; margin: 0; }
.monitor-summary li { padding: 0.1em 0; }

/* Tables */
.monitor-table { width: 100%; border-collapse: collapse; color: var(--monitor-text); }
.monitor-table th { color: var(--monitor-muted); font-weight: 600; font-size: 0.8em; text-align: left; padding: 0.25em 0.4em; }
.monitor-table td { padding: 0.3em 0.4em; border-top: 1px solid var(--monitor-border); }
.monitor-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.monitor-customers tr[class*="monitor-status-"] td:first-child { border-left: 0.35em solid var(--monitor-status); }
.monitor-customers__contract td:first-child { font-weight: 700; }
.monitor-band-green { color: var(--monitor-green); }
.monitor-band-orange { color: var(--monitor-orange); }
.monitor-band-red { color: var(--monitor-red); font-weight: 700; }

@media (max-width: 900px) {
  .monitor-cutoff { grid-template-columns: 1fr 1fr; }
  .monitor-blockers { grid-template-columns: 1fr; }
}

/* Alert bar (wall screens): open alerts from the alert rules, above the slides. */
.monitor-alerts { display: flex; flex-direction: column; gap: 0.4em; margin-bottom: 0.8em; }

.monitor-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em 0.8em;
  padding: 0.45em 0.9em;
  border-radius: 6px;
  background: var(--monitor-alert-color, var(--monitor-orange));
  color: #fff;
}

.monitor-alert--critical { --monitor-alert-color: var(--monitor-red); }
.monitor-alert--warning { --monitor-alert-color: var(--monitor-orange); }
.monitor-alert--info { --monitor-alert-color: var(--monitor-grey); }
.monitor-alert--ack { opacity: 0.6; }
.monitor-alert--more { background: var(--monitor-panel); color: var(--monitor-muted); }

.monitor-board--kiosk .monitor-alert--critical:not(.monitor-alert--ack) { animation: monitor-pulse 2s ease-in-out infinite; }

.monitor-alert__title { font-weight: 800; }
.monitor-alert__message { opacity: 0.95; }
.monitor-alert__ack { margin-left: auto; font-style: italic; }