/* Wall screen: a single dark look on purpose — it runs 24/7 in an office. Sized in vw/vh
   so it fills a TV at 1080p or 4K without zoom; readable from about 3 m. */

:root {
  color-scheme: dark;
  --bg: #070c10;
  --panel: #0e171d;
  --line: #1c2a33;
  --row: #121e25;
  --ink: #dce6ec;
  --dim: #7e919e;
  --ok: #34c27e;
  --warn: #f0b429;
  --crit: #ff5a5a;
  --na: #3a4a55;
  --ap: #5db7d3;
  --cs: #b79cf0;
  --mono: "Cascadia Mono", "JetBrains Mono", "IBM Plex Mono", Consolas, "DejaVu Sans Mono", monospace;
  --sans: "Segoe UI", "IBM Plex Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs: clamp(12px, 0.9vw, 34px);
}

* { box-sizing: border-box; }
/* `display: grid` on .overlay would otherwise beat the attribute. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--sans); font-size: var(--fs); line-height: 1.35; overflow: hidden; cursor: default; }

.wall {
  height: 100%;
  padding: 1.1em 1.3em;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.9em;
  transition: transform 1s ease;
}

/* ── top bar ── */
.top { display: flex; align-items: center; gap: 1.2em; }
.brand { font-weight: 700; font-size: 1.5em; letter-spacing: 0.08em; }
.envs { display: flex; gap: 0.5em; }
.env {
  font: 500 0.95em var(--mono);
  padding: 0.35em 1em;
  border-radius: 0.4em;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  cursor: pointer;
}
.env:hover { border-color: var(--dim); color: var(--ink); }
.env:focus-visible { outline: 2px solid var(--ap); outline-offset: 2px; }
.env.on { background: #12242d; border-color: var(--ap); color: var(--ink); }
.env.crit:not(.on) { border-color: var(--crit); color: var(--crit); }
.clock { margin-left: auto; display: flex; gap: 1.3em; align-items: baseline; font-family: var(--mono); color: var(--dim); }
.clock b { color: var(--ink); font-weight: 500; font-size: 1.4em; font-variant-numeric: tabular-nums; }

.dot { width: 0.65em; height: 0.65em; border-radius: 50%; display: inline-block; flex: none; background: var(--na); }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.crit { background: var(--crit); animation: pulse 1.6s ease-in-out infinite; }

/* ── halves ── */
.halves { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; min-height: 0; }
.half {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ap);
  border-radius: 0.6em;
  padding: 0.9em 1em;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 0.75em;
  min-height: 0;
}
.half.cs { border-top-color: var(--cs); }
.half.is-crit { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit) inset; }
.h { display: flex; align-items: baseline; gap: 0.8em; }
.h h2 { margin: 0; font-size: 1.35em; font-weight: 700; }
.state { margin-left: auto; font: 500 0.9em var(--mono); padding: 0.2em 0.8em; border-radius: 99px; background: rgba(126, 145, 158, 0.15); color: var(--dim); }
.state.ok { background: rgba(52, 194, 126, 0.14); color: var(--ok); }
.state.warn { background: rgba(240, 180, 41, 0.14); color: var(--warn); }
.state.crit { background: rgba(255, 90, 90, 0.18); color: var(--crit); }

.svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45em; }
.tile {
  border: 1px solid var(--line);
  border-radius: 0.4em;
  padding: 0.35em 0.55em;
  display: flex;
  align-items: center;
  gap: 0.45em;
  font: 0.85em var(--mono);
  white-space: nowrap;
  overflow: hidden;
}
.tile .lbl { overflow: hidden; text-overflow: ellipsis; }
.tile .val { margin-left: auto; color: var(--dim); }
.tile.crit { border-color: rgba(255, 90, 90, 0.6); }
.tile.crit .val { color: var(--crit); }
.tile.warn .val { color: var(--warn); }
.tile.unknown { opacity: 0.6; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5em; }
.kpi { border: 1px solid var(--line); border-radius: 0.4em; padding: 0.45em 0.6em; display: flex; flex-direction: column; gap: 0.15em; }
.kpi .l { color: var(--dim); font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.08em; }
.kpi .v { font: 500 1.9em var(--mono); font-variant-numeric: tabular-nums; }
.kpi .v.crit { color: var(--crit); }
.kpi .v.warn { color: var(--warn); }
.kpi svg { width: 100%; height: 1.3em; display: block; }
.kpi svg polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.kpi svg polygon { stroke: none; opacity: 0.18; }
.ap .kpi svg polyline { stroke: var(--ap); }
.ap .kpi svg polygon { fill: var(--ap); }
.cs .kpi svg polyline { stroke: var(--cs); }
.cs .kpi svg polygon { fill: var(--cs); }
.kpi.crit svg polyline { stroke: var(--crit); }
.kpi.crit svg polygon { fill: var(--crit); }
.kpi.warn svg polyline { stroke: var(--warn); }
.kpi.warn svg polygon { fill: var(--warn); }

.reasons { font-size: 0.85em; color: var(--warn); display: flex; flex-wrap: wrap; gap: 0.3em 1.2em; min-height: 0; }
.reasons:empty { display: none; }
.reasons .crit { color: var(--crit); }

.feed { border: 1px solid var(--line); border-radius: 0.4em; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.fh { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); padding: 0.4em 0.7em; border-bottom: 1px solid var(--line); display: flex; }
.fh span:last-child { margin-left: auto; }
.rows { overflow: hidden; min-height: 0; }
.row {
  display: grid;
  grid-template-columns: 5.2em 4.6em 6.5em minmax(0, 1fr);
  gap: 0.6em;
  padding: 0.3em 0.7em;
  font: 0.85em var(--mono);
  border-bottom: 1px solid var(--row);
  align-items: center;
}
.row.fresh { animation: flash 2.5s ease-out; }
.row .t { color: var(--dim); font-variant-numeric: tabular-nums; }
.row .mod { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .x { color: var(--dim); }
.lv { font-size: 0.85em; text-transform: uppercase; padding: 0 0.4em; border-radius: 0.25em; text-align: center; }
.lv.error { background: rgba(255, 90, 90, 0.16); color: var(--crit); }
.lv.warning { background: rgba(240, 180, 41, 0.14); color: var(--warn); }
.lv.info { background: rgba(183, 156, 240, 0.14); color: var(--cs); }
.empty { padding: 0.8em; color: var(--dim); font-size: 0.85em; }

.notice { border: 1px dashed var(--na); border-radius: 0.4em; padding: 0.55em 0.7em; color: var(--dim); font-size: 0.85em; }

/* ── footer ── */
.bottom { display: flex; gap: 1.2em; align-items: center; font: 0.85em var(--mono); color: var(--dim); border-top: 1px solid var(--line); padding-top: 0.6em; }
.items { display: flex; gap: 1.3em; flex-wrap: wrap; min-width: 0; }
.item { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }
.item.crit { color: var(--crit); }
.item.warn { color: var(--warn); }
.fresh { margin-left: auto; color: var(--ok); white-space: nowrap; }

/* ── stale data: the whole screen says so ── */
.wall.stale .halves { opacity: 0.45; filter: grayscale(0.6); }
.wall.stale .fresh { color: var(--warn); font-weight: 700; }
.wall.stale { box-shadow: inset 0 0 0 6px var(--warn); }

.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(7, 12, 16, 0.88); }
.overlay-box { max-width: 42em; border: 1px solid var(--warn); border-radius: 0.6em; padding: 1.5em 2em; background: var(--panel); }
.overlay-box h2 { margin: 0 0 0.4em; color: var(--warn); }
.overlay-box p { margin: 0; color: var(--ink); }

@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes flash { from { background: rgba(93, 183, 211, 0.22); } to { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .dot.crit, .row.fresh { animation: none; }
  .wall { transition: none; }
}

/* A laptop or a small window: stack the halves rather than shrink them. */
@media (max-width: 900px) {
  body { overflow: auto; }
  .halves { grid-template-columns: 1fr; }
  .svc, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top { flex-wrap: wrap; }
}