/* ==================================================================================================================
   THE OFFICE WALL DISPLAYS (V1.63, Client\Apps\Wall; Docs\Office wall displays.md): /wall/1 and /wall/2 on two
   1920 x 1080 screens, read from 2 to 3 metres. Dark Refined Lode (wall.js sets html[data-theme="dark"] and the wall
   density), every colour from tokens.css, full width, no scroll: the grid fills the screen and a tile cuts what does
   not fit. Also the pairing page (wall-pair-) and Administration > Wall displays (wall-admin-).
   ================================================================================================================== */

.wall-root[data-density="wall"] {
  --os-font-scale: 1.6;          /* 22 px body: the wall's distance */
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--os-space-4);
  padding: var(--os-space-5) var(--os-space-6);
  background: var(--os-canvas);
  color: var(--os-text);
  font: var(--os-type-body);
  overflow: hidden;
  cursor: none;
}
.wall-root.is-black { background: var(--os-inverse); }
.wall-root.is-black > * { display: none; }

/* ---- The banner: red while a critical incident is not acknowledged ---- */
.wall-banner {
  display: flex;
  align-items: center;
  gap: var(--os-space-6);
  min-height: 0;
  border-radius: var(--os-radius-md);
}
.wall-banner.is-red {
  padding: var(--os-space-3) var(--os-space-5);
  background: var(--os-bad);
  color: var(--os-on-bad);
  animation: wall-pulse 2s var(--os-ease-standard) infinite;
}
.wall-banner.is-grey { padding: var(--os-space-2) var(--os-space-5); background: var(--os-neutral-soft); color: var(--os-text-2); }
.wall-banner-title { font: var(--os-type-h2); white-space: nowrap; }
.wall-banner-items { display: flex; flex-direction: column; gap: var(--os-space-1); overflow: hidden; }
.wall-banner-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes wall-pulse { 50% { opacity: 0.82; } }
@media (prefers-reduced-motion: reduce) { .wall-banner.is-red { animation: none; } }

/* ---- The header line ---- */
.wall-head { display: flex; align-items: baseline; gap: var(--os-space-6); }
.wall-head-title { font: var(--os-type-h1); color: var(--os-accent-brand); }
.wall-head-clock { margin-left: auto; font: var(--os-type-h3); color: var(--os-text-2); font-variant-numeric: tabular-nums; }
.wall-offline { padding: var(--os-space-1) var(--os-space-3); border-radius: var(--os-radius-pill); background: var(--os-warn-soft); color: var(--os-warn-text); }

/* ---- The grid of each screen (12 columns, the tiles by their id) ---- */
.wall-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: var(--os-space-4);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.wall-s1 .wall-grid {
  grid-template-rows: minmax(0, 0.85fr) minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas:
    "incidents incidents incidents incidents incidents incidents clients clients clients clients last24h last24h"
    "incidents incidents incidents incidents incidents incidents pisystem pisystem pisystem certificates certificates certificates"
    "onestop onestop onestop host host host sites sites sites azure azure azure";
}
.wall-s2 .wall-grid {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "pos pos pos pos pos pos money money money plan plan plan"
    "support support support support support agenda agenda agenda agenda daysoff daysoff daysoff";
}
[data-tile="incidents"] { grid-area: incidents; }
[data-tile="clients"] { grid-area: clients; }
[data-tile="last24h"] { grid-area: last24h; }
[data-tile="onestop"] { grid-area: onestop; }
[data-tile="host"] { grid-area: host; }
[data-tile="sites"] { grid-area: sites; }
[data-tile="azure"] { grid-area: azure; }
[data-tile="pos"] { grid-area: pos; }
[data-tile="money"] { grid-area: money; }
[data-tile="plan"] { grid-area: plan; }
[data-tile="support"] { grid-area: support; }
[data-tile="agenda"] { grid-area: agenda; }
[data-tile="daysoff"] { grid-area: daysoff; }
[data-tile="certificates"] { grid-area: certificates; }
[data-tile="pisystem"] { grid-area: pisystem; }

/* ---- A tile ---- */
.wall-tile {
  display: flex;
  flex-direction: column;
  gap: var(--os-space-3);
  min-width: 0;
  min-height: 0;
  padding: var(--os-space-4) var(--os-space-5);
  border: var(--os-border-w) solid var(--os-border-subtle);
  border-radius: var(--os-radius-lg);
  background: var(--os-surface);
  overflow: hidden;
}
.wall-tile.is-stale { background: var(--os-surface-sunken); color: var(--os-text-3); border-style: dashed; }
.wall-tile-head { display: flex; align-items: baseline; gap: var(--os-space-3); }
.wall-tile-title { margin: 0; font: var(--os-type-h3); color: var(--os-text); }
.wall-tile.is-stale .wall-tile-title { color: var(--os-text-3); }
.wall-tile-time { margin-left: auto; font: var(--os-type-small); color: var(--os-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wall-tile.is-stale .wall-tile-time { color: var(--os-warn-text); }

.wall-figures { display: flex; flex-wrap: wrap; gap: var(--os-space-3) var(--os-space-6); }
.wall-figure { display: flex; flex-direction: column; min-width: 0; }
.wall-figure-value { font: var(--os-type-kpi-lg); font-variant-numeric: tabular-nums; color: var(--os-text); }
.wall-figure-label { font: var(--os-type-small); color: var(--os-text-2); }
.wall-figure-sub { font: var(--os-type-small); color: var(--os-text-3); }
.wall-figure.is-ok .wall-figure-value { color: var(--os-good-text); }
.wall-figure.is-warn .wall-figure-value { color: var(--os-warn-text); }
.wall-figure.is-bad .wall-figure-value { color: var(--os-bad-text); }

.wall-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.wall-table th {
  padding: 0 var(--os-space-2) var(--os-space-1);
  text-align: left;
  font: var(--os-type-caption);
  color: var(--os-text-3);
  border-bottom: var(--os-border-w) solid var(--os-border-subtle);
  white-space: nowrap;
}
.wall-table td {
  padding: var(--os-space-1) var(--os-space-2);
  border-bottom: var(--os-border-w) solid var(--os-border-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 24ch;
}
.wall-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
/* A tile's figures stay on one line when there are several (Azure cost: three) */
[data-tile="azure"] .wall-figures { flex-wrap: nowrap; gap: var(--os-space-5); }
[data-tile="azure"] .wall-figure { flex: 1; min-width: 0; }
[data-tile="azure"] .wall-figure-value { font: var(--os-type-kpi); }
/* The smaller tiles of screen 1: their figures one size down, so their tables keep room */
[data-tile="pisystem"] .wall-figure-value, [data-tile="certificates"] .wall-figure-value, [data-tile="last24h"] .wall-figure-value { font: var(--os-type-kpi); }
[data-tile="certificates"] .wall-table td:first-child { max-width: 16ch; }
.wall-table td:first-child { border-left: 4px solid transparent; }
.wall-table tr.is-bad td:first-child { border-left-color: var(--os-bad); }
.wall-table tr.is-warn td:first-child { border-left-color: var(--os-warn); }
.wall-table tr.is-muted td, .wall-table td.is-muted { color: var(--os-text-3); }
.wall-table td.is-ok { color: var(--os-good-text); }
.wall-table td.is-warn { color: var(--os-warn-text); }
.wall-table td.is-bad { color: var(--os-bad-text); }
.wall-table .wall-bar-row td { padding-top: 0; border-bottom-width: 0; }

.wall-bar { display: block; height: 6px; border-radius: var(--os-radius-pill); background: var(--os-neutral-soft); overflow: hidden; }
.wall-bar-fill { display: block; height: 100%; background: var(--os-accent-brand); }
.wall-bar.is-over .wall-bar-fill { background: var(--os-warn); }

.wall-spark { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: var(--os-space-1); }
.wall-spark-bar { flex: 1; min-height: 2px; border-radius: var(--os-radius-xs) var(--os-radius-xs) 0 0; background: var(--os-spark); }
.wall-spark-bar.is-zero { background: var(--os-border-subtle); }
.wall-spark-axis { display: flex; justify-content: space-between; font: var(--os-type-caption); color: var(--os-text-3); }

.wall-more, .wall-note { margin: 0; font: var(--os-type-small); color: var(--os-text-3); }

/* ---- The lock button (bottom right, discreet, always there) ---- */
.wall-lock {
  position: fixed;
  right: var(--os-space-3);
  bottom: var(--os-space-3);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--os-radius-pill);
  background: transparent;
  color: var(--os-text-3);
  opacity: 0.45;
  cursor: pointer;
}
.wall-lock:hover, .wall-lock:focus-visible { opacity: 1; background: var(--os-surface-hover); }
.wall-root.is-black .wall-lock { display: grid; opacity: 0.15; }

/* ---- Private mode: the logo alone, the dot, the keypad ---- */
.wall-private { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--os-space-6); cursor: default; }
.wall-private-logo { padding: 0; border: 0; background: transparent; cursor: pointer; }
.wall-logo { width: 22vmin; height: 22vmin; --logo-ink: var(--os-text); }
.wall-dot { width: 8px; height: 8px; border-radius: var(--os-radius-pill); background: var(--os-good); opacity: 0.6; }
.wall-dot.is-bad { background: var(--os-bad); opacity: 0.9; }
.wall-dot.is-muted { background: var(--os-neutral); }
.wall-keypad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--os-space-4);
  padding: var(--os-space-5);
  border: var(--os-border-w) solid var(--os-border);
  border-radius: var(--os-radius-xl);
  background: var(--os-surface-raised);
  box-shadow: var(--os-shadow-3);
}
.wall-keypad-dots { display: flex; gap: var(--os-space-3); }
.wall-keypad-dot { width: 16px; height: 16px; border-radius: var(--os-radius-pill); border: var(--os-border-w-strong) solid var(--os-text-3); }
.wall-keypad-dot.is-on { background: var(--os-text); border-color: var(--os-text); }
.wall-keypad-message { margin: 0; color: var(--os-warn-text); font: var(--os-type-small); text-align: center; max-width: 28ch; }
.wall-keypad-keys { display: grid; grid-template-columns: repeat(3, 88px); gap: var(--os-space-2); }
.wall-key {
  height: 72px;
  border: var(--os-border-w) solid var(--os-border);
  border-radius: var(--os-radius-md);
  background: var(--os-surface);
  color: var(--os-text);
  font: var(--os-type-h2);
  cursor: pointer;
}
.wall-key.is-action { font: var(--os-type-button); }
.wall-key:active { background: var(--os-surface-pressed); }
.wall-key:disabled { opacity: 0.4; cursor: default; }

/* ---- The pairing page ---- */
.wall-pair { align-items: center; justify-content: center; text-align: center; cursor: default; }
.wall-pair-logo { width: 12vmin; height: 12vmin; --logo-ink: var(--os-text); }
.wall-pair-title { margin: 0; font: var(--os-type-h1); }
.wall-pair-code { margin: 0; font: var(--os-type-kpi-xl); letter-spacing: 0.3em; color: var(--os-accent-brand); font-family: var(--os-font-mono); }
.wall-pair-text { margin: 0; font: var(--os-type-h3); color: var(--os-text-2); }
.wall-pair-hint { margin: 0; color: var(--os-text-3); }

/* ---- Administration > Wall displays ---- */
.wall-admin-section { margin-bottom: var(--os-space-4); }
.wall-admin-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-3); }
.wall-admin-form > * { flex: 0 1 16rem; }
.wall-admin-actions { white-space: nowrap; text-align: right; }