/* Табло для екрана в холі. Кожна кімната — окрема колонка з плиток:
   великий поточний стан, наступне бронювання, черга далі.
   Розміри в vw/vh, щоб однаково читалось на моніторі й на телевізорі. */

/* Тему табло обирає адміністратор у налаштуваннях, а не глядач: екран
   у холі спільний, і особистих уподобань там нема. Світлі значення — база,
   темні вмикаються атрибутом data-theme або системною темою при «авто». */
:root {
  --tv-bg: #f2f4f8;
  --tv-surface: #ffffff;
  --tv-surface-2: #eef1f6;
  --tv-border: #dfe3ea;
  --tv-text: #14171d;
  --tv-muted: #667085;
  --tv-time: #b45309;

  --tv-free: #1e7b34;
  --tv-free-bg: #e6f6ec;
  --tv-free-line: rgba(30, 123, 52, .35);
  --tv-busy: #c0392b;
  --tv-busy-bg: #fdecec;
  --tv-busy-line: rgba(192, 57, 43, .35);
  --tv-soon: #9a5b06;
  --tv-soon-bg: #fdf1dd;
  --tv-soon-line: rgba(154, 91, 6, .35);

  --tv-veil: rgba(16, 24, 40, .08);

  --tv-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Темні значення визначені один раз. */
:root {
  --d-tv-bg: #0d0f13;
  --d-tv-surface: #171a21;
  --d-tv-surface-2: #1e222b;
  --d-tv-border: #2a2f3a;
  --d-tv-text: #f2f4f8;
  --d-tv-muted: #8d94a3;
  --d-tv-time: #ffc043;
  --d-tv-free: #2ecc8f;
  --d-tv-free-bg: #10281f;
  --d-tv-free-line: rgba(46, 204, 143, .35);
  --d-tv-busy: #ff5f5f;
  --d-tv-busy-bg: #2c1618;
  --d-tv-busy-line: rgba(255, 95, 95, .35);
  --d-tv-soon: #ffb020;
  --d-tv-soon-bg: #2c2213;
  --d-tv-soon-line: rgba(255, 176, 32, .35);
  --d-tv-veil: rgba(255, 255, 255, .08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tv-bg: var(--d-tv-bg);
    --tv-surface: var(--d-tv-surface);
    --tv-surface-2: var(--d-tv-surface-2);
    --tv-border: var(--d-tv-border);
    --tv-text: var(--d-tv-text);
    --tv-muted: var(--d-tv-muted);
    --tv-time: var(--d-tv-time);
    --tv-free: var(--d-tv-free);
    --tv-free-bg: var(--d-tv-free-bg);
    --tv-free-line: var(--d-tv-free-line);
    --tv-busy: var(--d-tv-busy);
    --tv-busy-bg: var(--d-tv-busy-bg);
    --tv-busy-line: var(--d-tv-busy-line);
    --tv-soon: var(--d-tv-soon);
    --tv-soon-bg: var(--d-tv-soon-bg);
    --tv-soon-line: var(--d-tv-soon-line);
    --tv-veil: var(--d-tv-veil);
  }
}

:root[data-theme="dark"] {
  --tv-bg: var(--d-tv-bg);
  --tv-surface: var(--d-tv-surface);
  --tv-surface-2: var(--d-tv-surface-2);
  --tv-border: var(--d-tv-border);
  --tv-text: var(--d-tv-text);
  --tv-muted: var(--d-tv-muted);
  --tv-time: var(--d-tv-time);
  --tv-free: var(--d-tv-free);
  --tv-free-bg: var(--d-tv-free-bg);
  --tv-free-line: var(--d-tv-free-line);
  --tv-busy: var(--d-tv-busy);
  --tv-busy-bg: var(--d-tv-busy-bg);
  --tv-busy-line: var(--d-tv-busy-line);
  --tv-soon: var(--d-tv-soon);
  --tv-soon-bg: var(--d-tv-soon-bg);
  --tv-soon-line: var(--d-tv-soon-line);
  --tv-veil: var(--d-tv-veil);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--tv-bg);
  color: var(--tv-text);
  font-family: var(--tv-font);
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 1.5vw, 24px);
  gap: clamp(10px, 1.4vh, 18px);
  cursor: none;
}
body.pointer { cursor: default; }

/* ------------------------------------------------------------- шапка --- */
.tv-head {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}
.tv-brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.tv-mark {
  width: clamp(24px, 2.2vw, 38px);
  height: clamp(24px, 2.2vw, 38px);
  background: url('logo.svg') center / contain no-repeat;
  flex: 0 0 auto;
}
.tv-head h1 {
  display: flex;
  align-items: center;
  gap: .45em;
  min-width: 0;
  margin: 0;
  font-size: clamp(17px, 1.7vw, 30px);
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
}
/* Обрізати треба назву продукту, а не весь рядок: у flex-контейнері
   ellipsis працює на дитині, а не на батькові. */
.tv-head h1 #tvOffice { overflow: hidden; text-overflow: ellipsis; }

/* Материнський бренд приглушений, продукт — на повну силу. Розміри в em,
   бо сам заголовок тягнеться від 17px на телефоні до 30px на телевізорі:
   роздільник має рости разом із текстом, а не лишатися волосиною. */
.tv-parent { color: var(--tv-muted); font-weight: 600; }
.tv-div {
  width: max(1px, .05em);
  height: .95em;
  background: var(--tv-border);
  flex: 0 0 auto;
}
.tv-when { text-align: right; flex: 0 0 auto; }
.tv-clock {
  font-size: clamp(28px, 3.4vw, 60px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.tv-date {
  font-size: clamp(11px, 1vw, 17px);
  color: var(--tv-muted);
  margin-top: 3px;
  text-transform: capitalize;
}

/* ------------------------------------------------- колонки по кімнатах --- */
.tv-board {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 20px);
  min-height: 0;
}

.tv-loading { color: var(--tv-muted); font-size: 20px; }

.room-col {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 14px);
  min-height: 0;
  min-width: 0;
}

/* назва кімнати */
.room-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.room-title .swatch {
  width: clamp(10px, .9vw, 16px);
  height: clamp(10px, .9vw, 16px);
  border-radius: 4px;
  background: var(--room-color, var(--tv-muted));
  flex: 0 0 auto;
}
.room-title h2 {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 30px);
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------- плитки --- */
.tile {
  background: var(--tv-surface);
  border: 1px solid var(--tv-border);
  border-radius: 16px;
  padding: clamp(12px, 1.6vh, 24px) clamp(14px, 1.3vw, 26px);
  min-width: 0;
}

/* головна плитка стану */
.tile.state {
  flex: 2 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, .9vh, 14px);
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.tile.state.free { background: var(--tv-free-bg); border-color: var(--tv-free-line); }
.tile.state.busy { background: var(--tv-busy-bg); border-color: var(--tv-busy-line); }
.tile.state.soon { background: var(--tv-soon-bg); border-color: var(--tv-soon-line); }

.state-word {
  font-size: clamp(26px, 3.4vw, 62px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.tile.state.free .state-word { color: var(--tv-free); }
.tile.state.busy .state-word { color: var(--tv-busy); }
.tile.state.soon .state-word { color: var(--tv-soon); }

.state-left {
  font-size: clamp(18px, 2.1vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.state-meta {
  font-size: clamp(12px, 1.15vw, 21px);
  color: var(--tv-muted);
  font-variant-numeric: tabular-nums;
}
.state-who {
  font-size: clamp(14px, 1.4vw, 26px);
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.state-who .purpose {
  display: block;
  font-size: clamp(11px, 1vw, 18px);
  color: var(--tv-muted);
  font-weight: 400;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile.state .progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--tv-veil);
}
.tile.state .progress > i {
  display: block;
  height: 100%;
  background: var(--tv-busy);
  transition: width .6s linear;
}

/* смужка вільного вікна між бронюваннями */
.tile.gap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(7px, .9vh, 13px) clamp(14px, 1.3vw, 26px);
  background: var(--tv-free-bg);
  border-color: var(--tv-free-line);
}
.gap-dot {
  width: clamp(8px, .7vw, 12px);
  height: clamp(8px, .7vw, 12px);
  border-radius: 50%;
  background: var(--tv-free);
  flex: 0 0 auto;
}
.gap-text {
  font-size: clamp(13px, 1.25vw, 23px);
  font-weight: 600;
  color: var(--tv-free);
}
.gap-range {
  margin-left: auto;
  font-size: clamp(12px, 1.1vw, 20px);
  color: var(--tv-muted);
  font-variant-numeric: tabular-nums;
}

/* плитка «наступне бронювання» */
.tile.next {
  flex: 1 1 0;
  display: grid;
  align-content: center;
  gap: clamp(4px, .6vh, 8px);
}
.tile-label {
  font-size: clamp(10px, .8vw, 14px);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tv-muted);
}
.next-time {
  font-size: clamp(20px, 2.2vw, 40px);
  font-weight: 700;
  color: var(--tv-time);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.next-who {
  font-size: clamp(13px, 1.2vw, 22px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.next-meta {
  font-size: clamp(12px, 1.1vw, 20px);
  color: var(--tv-muted);
}
.next-meta b { color: var(--tv-text); font-weight: 600; }

/* черга далі */
.tile.later {
  flex: 1 1 0;
  display: grid;
  align-content: center;
  gap: clamp(4px, .6vh, 9px);
}
.later-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(12px, 1.1vw, 20px);
}
.later-item .lt {
  font-weight: 700;
  color: var(--tv-time);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.later-item .ln {
  color: var(--tv-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.later-item .ld { color: var(--tv-muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.later-more { font-size: clamp(11px, 1vw, 18px); color: var(--tv-muted); }

/* ------------------------------------------------------------- підвал --- */
.tv-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(10px, .85vw, 14px);
  color: var(--tv-muted);
}
.tv-foot .tv-updated { margin-left: auto; font-variant-numeric: tabular-nums; }
.tv-foot.stale { color: var(--tv-soon); }

/* кнопка повного екрана — з'являється лише коли рухається миша */
.tv-full {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--tv-border);
  background: var(--tv-surface-2);
  color: var(--tv-text);
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
body.pointer .tv-full { opacity: .85; pointer-events: auto; }
.tv-full:hover { opacity: 1; }

/* ==========================================================================
   Телефон. Екран лишається статичним: кімнати стають рядами й ділять висоту
   екрана, прокрутки немає. У горизонтальній орієнтації колонки лишаються
   поруч, бо там висоти замало.
   ========================================================================== */
@media (max-width: 760px) {
  html, body { height: 100vh; height: 100dvh; }
  body { padding: 10px; gap: 8px; }

  .tv-head { gap: 10px; }
  .tv-mark { width: 22px; height: 22px; }
  .tv-head h1 { font-size: 15px; }
  /* На вузькому екрані в шапці тісно, а знак ліворуч і так каже, чий продукт. */
  .tv-parent, .tv-div { display: none; }
  .tv-clock { font-size: 30px; }
  .tv-date { font-size: 10px; margin-top: 1px; }

  .tv-board { gap: 8px; overflow: hidden; }
  .room-col { gap: 6px; }
  .room-title { gap: 8px; }
  .room-title .swatch { width: 10px; height: 10px; }
  .room-title h2 { font-size: 15px; }

  .tile { padding: 10px 12px; border-radius: 12px; }
  .state-word { font-size: 30px; }
  .state-left { font-size: 20px; }
  .state-meta { font-size: 11px; }
  .state-who { font-size: 14px; }
  .state-who .purpose { display: none; }

  .next-time { font-size: 20px; }
  .next-who { font-size: 13px; }
  .next-meta { font-size: 11px; }

  /* черга далі не влазить у висоту телефона — деталі є в календарі */
  .tile.later { display: none; }

  .tv-foot { font-size: 10px; gap: 10px; }
  .tv-full { width: 36px; height: 36px; font-size: 15px; right: 10px; bottom: 10px; }
}

/* портрет: кімнати одна під одною, кожна отримує рівну частку висоти */
@media (max-width: 760px) and (orientation: portrait) {
  .tv-board {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(0, 1fr);
  }
}

/* дуже низький екран (телефон лежачи) — лишаємо тільки головний стан */
@media (max-height: 420px) {
  .tile.next, .tile.later { display: none; }
  .tv-foot { display: none; }
}