/* Connect+ Dashboard Editor - Wallboard mode styles (screens/wall.js).
   Loaded on every page but only takes effect once <body> has .wall-active. */

/* livepulse keyframe (also defined in base.css; kept here so wall.css is
   self-sufficient for the LIVE indicator + any live pills in wall mode). */
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

body.wall-active { overflow: hidden; }

.wall-root {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--tx);
  z-index: 1000;
}

/* ── fixed top bar (64px) ── */
.wall-bar {
  height: 64px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--ln);
}

.wall-brand { display: flex; align-items: center; gap: 9px; }
.wall-wordmark {
  font: 600 17px/1 var(--font-display, sans-serif);
  letter-spacing: .5px;
  color: var(--tx);
}
.wall-wordmark .plus { color: var(--ac); }

.wall-sep { width: 1px; height: 30px; background: var(--ln); flex: none; }

.wall-tenant { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wall-tenant-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--sf2); color: var(--ac);
  font: 600 13px var(--font-display, sans-serif);
}
.wall-titles { display: flex; flex-direction: column; min-width: 0; }
.wall-tenant-name {
  font: 600 12px var(--font-body, sans-serif);
  color: var(--tx2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wall-dash-name {
  font: 600 15px var(--font-display, sans-serif);
  color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Rotation position ("2/3") - only rendered for `?wall=A,B&rotate=N`. */
.wall-rotate-pos {
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--ln); background: var(--sf2); color: var(--tx2);
  font: 600 11px var(--font-body, sans-serif);
  letter-spacing: .04em;
}
.wall-rotate-pos[hidden] { display: none; }

.wall-dots { display: flex; align-items: center; gap: 6px; }
.wall-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ln);
}
.wall-dot.is-active { background: var(--ac); }

.wall-spacer { flex: 1; }

.wall-live {
  display: flex; align-items: center; gap: 7px;
  font: 600 12px var(--font-body, sans-serif);
  letter-spacing: 2px;
  color: var(--ac);
  flex: none;
}
.wall-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac);
  animation: livepulse 1.6s infinite;
}

.wall-clock {
  font: 600 26px/1 var(--font-display, sans-serif);
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  flex: none;
}

.wall-version {
  font: 600 11px var(--font-body);
  color: var(--tx2);
  opacity: 0.7;
  white-space: nowrap;
}

.wall-token {
  font: 600 11px var(--font-body, monospace);
  color: var(--tx2);
  padding: 4px 8px;
  border: 1px solid var(--ln);
  border-radius: 6px;
  white-space: nowrap;
  flex: none;
}

.wall-exit {
  font: 600 12px var(--font-body, sans-serif);
  color: var(--tx);
  background: var(--sf2);
  border: 1px solid var(--ln);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  flex: none;
}
.wall-exit:hover { border-color: var(--ac); color: var(--ac); }

/* ── full-bleed read-only grid ── */
.wall-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}
.wall-grid { position: relative; width: 100%; }

/* Stale-data banner: must be readable from across a room, because that is
   where the person who can act on it is standing. */
.wall-stale {
  margin-bottom: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  /* Derived from --amb (not a literal): the text color below already
     follows the tenant's theme, so the tint behind it must too, or a theme
     with a very different amber (e.g. High Contrast's #B77400) gets amber
     text over a mismatched glow. */
  border: 1px solid color-mix(in srgb, var(--amb) 55%, transparent);
  background: color-mix(in srgb, var(--amb) 12%, transparent);
  color: var(--amb);
  font: 600 15px var(--font-body);
  text-align: center;
  animation: connpulse 1.8s ease-in-out infinite;
}
@keyframes connpulse {
  50% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-stale { animation: none; }
}

.wall-empty {
  display: grid;
  place-items: center;
  height: 100%;
  text-align: center;
  color: var(--tx2);
  font: 600 15px var(--font-body, sans-serif);
}
.wall-empty-sub {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--tx2);
  opacity: .8;
}