/* ===== Режим «Табло» — раскладка «как на доске», один экран 16:9 =====
   Всё внутри .stage масштабируется через container query units (cqw/cqh),
   поэтому табло целиком помещается на экран любого размера без прокрутки. */

html, body { height: 100%; }
body{
  overflow: hidden;                 /* без прокрутки — строго один экран */
  background: var(--bg);
  display: grid; place-items: center;
}
:root[data-theme="dark"] body{ background:#05070d; }
:root[data-theme="light"] body{ background:#c8d0de; }

#app{ width:100%; height:100%; }

/* --- Сцена 16:9: центрируется, при неточном соотношении — леттербокс --- */
.stage{
  width:  min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  container-type: size;             /* включает cqw/cqh для потомков */
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 82% -10%, var(--accent-soft), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
  box-shadow: 0 0 0 1px var(--border), 0 24px 80px -24px rgba(0,0,0,.6);
}

.board{
  display: grid;
  grid-template-columns: 18.5cqw 1fr;
  width: 100%; height: 100%;
}

/* Плавная смена темы день↔ночь — без резкого моргания */
body, .side, .clockbox, .head-card, .skpi, .pcard, .obj, .zone-head, .badge{
  transition: background-color .55s ease, border-color .55s ease, color .35s ease;
}

/* ======================= ЛЕВАЯ ПАНЕЛЬ ======================= */
.side{
  height: 100%; overflow: hidden;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 2.4cqh 1.4cqw;
  display: flex; flex-direction: column; gap: 1.35cqh;
}
.side .brand{ display:flex; align-items:center; gap: .9cqw; }
.side .brand .logo{
  width: 4.6cqh; height: 4.6cqh; border-radius: 1.1cqh; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:1.9cqh;
  background: linear-gradient(140deg, var(--accent), var(--night-dot));
  box-shadow: var(--shadow);
}
.side .brand h1{ font-size:1.75cqh; margin:0; line-height:1.15; letter-spacing:-.01em; }
.side .brand .date{ font-size:1.28cqh; color:var(--ink-2); margin-top:.35cqh; }
.side .brand .date b{ color:var(--ink); font-variant-numeric: tabular-nums; }

/* Часы + режим */
.clockbox{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, var(--accent-soft), transparent 60%),
    var(--panel-2);
  border:1px solid var(--border); border-radius: 1.4cqh;
  padding: 1.5cqh 1cqw 1.4cqh; text-align:center;
}
.clockbox .clock{
  display:inline-flex; align-items:flex-start; gap:2px;
  font-size: 4.6cqh; font-weight:850; letter-spacing:.005em; line-height:1;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);                /* fallback, если движок без background-clip:text */
  background: linear-gradient(135deg, var(--accent), var(--night-dot));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* Бейдж режима день/ночь — масштабировать вместе со сценой (cq), не px из theme.css */
.clockbox .mode .badge{ font-size:1.2cqh; padding:.35cqh .7cqw; gap:.5cqw; }
.clockbox .mode .badge .dot{ width:.9cqh; height:.9cqh; }
.clock .ss{
  -webkit-text-fill-color: var(--accent-ink); color:var(--accent-ink);
  background:var(--accent-soft); border:1px solid var(--border);
  font-size:1.4cqh; font-weight:750; padding:.2cqh .5cqw; border-radius:.7cqh;
  margin-left:.5cqw; margin-top:.3cqh;
  font-variant-numeric: tabular-nums; letter-spacing:.02em;
}
.clockbox .datefull{ font-size:1.25cqh; color:var(--ink-2); margin-top:.8cqh; text-transform:capitalize; }
.clockbox .mode{ margin-top:1cqh; display:flex; justify-content:center; }
.dayprog{
  position:relative; height:.6cqh; border-radius:.5cqh; margin-top:1.3cqh;
  border:1px solid var(--border);
  background: linear-gradient(90deg,
    var(--night-line) 0 29.17%,
    var(--day-line)  29.17% 79.17%,
    var(--night-line) 79.17% 100%);
}
.dp-mark{
  position:absolute; top:50%; left:0; width:1.3cqh; height:1.3cqh; border-radius:50%;
  background:var(--ink); border:2px solid var(--panel); box-shadow: var(--shadow);
  transform: translate(-50%, -50%); transition: left .5s linear;
}

/* Карточка руководителя — вертикальная, с крупным портретом */
.head-card{
  background: var(--panel-2); border:1px solid var(--border); border-radius: 1.2cqh;
  padding: 1cqh 1cqw 1.1cqh; position:relative; overflow:hidden; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.5cqh;
}
.head-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:.4cqh; background:linear-gradient(90deg, var(--accent), var(--night-dot)); }
.head-card .hc-ph{
  position:relative; aspect-ratio:4/5; height:16.5cqh; width:auto; max-width:100%;
  border-radius:1.1cqh; overflow:hidden; margin-top:.3cqh;
  border:1px solid var(--border-strong); background:var(--panel);
  display:grid; place-items:center;
}
.head-card .hc-ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.head-card .hc-ph .ini{ font-weight:800; color:var(--muted); font-size:5cqh; }
.head-card .hc-tag{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  font-size:1.2cqh; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff;
  padding:.4cqh 0; background:linear-gradient(0deg, rgba(37,99,235,.96), rgba(37,99,235,.15));
}
.head-card .hc-name{ font-size:1.85cqh; font-weight:800; line-height:1.15; letter-spacing:-.01em; margin-top:.3cqh; }
.head-card .hc-title{ font-size:1.3cqh; color:var(--ink-2); line-height:1.25; }

/* Начальник смены — компактная горизонтальная карточка под руководителем */
.chief-card{
  display:flex; align-items:center; gap:.9cqw;
  background: var(--panel-2); border:1px solid var(--border); border-radius:1.1cqh;
  padding:.7cqh .9cqw; position:relative; overflow:hidden;
}
.chief-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:.3cqw; background:var(--night-dot); opacity:.9; }
.chief-card .cc-ph{
  width:7cqh; height:7cqh; flex:0 0 auto; border-radius:.9cqh; overflow:hidden;
  border:1px solid var(--border-strong); background:var(--panel); display:grid; place-items:center;
}
.chief-card .cc-ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
.chief-card .cc-ph .ini{ font-weight:800; color:var(--muted); font-size:2.4cqh; }
.chief-card .cc-tx{ min-width:0; }
.chief-card .cc-title{ font-size:1.12cqh; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); line-height:1.2; }
.chief-card .cc-name{ font-size:1.7cqh; font-weight:800; line-height:1.15; letter-spacing:-.01em; }

/* Сводка */
.kpi-col .sk-title{ font-size:1.2cqh; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin-bottom:.7cqh; }
.kpi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7cqh .7cqw; }
.skpi{
  display:flex; align-items:center; gap:.6cqw;
  background: var(--panel-2); border:1px solid var(--border); border-radius: .9cqh;
  padding: .8cqh .7cqw; position:relative; overflow:hidden;
}
.skpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:.3cqw; background:var(--accent); opacity:.85; }
.skpi.k-op::before{ background:var(--day-dot); }
.skpi.k-city::before{ background:var(--city-b-ink); }
.skpi .v{ font-size:2.3cqh; font-weight:800; font-variant-numeric: tabular-nums; letter-spacing:-.02em; color:var(--ink); -webkit-text-fill-color: var(--ink); line-height:1; }
.skpi .l{ font-size:1.15cqh; color:var(--ink-2); line-height:1.1; }

/* Легенда */
.side-legend{ display:flex; flex-direction:column; gap:.65cqh; font-size:1.25cqh; color:var(--ink-2); }
.side-legend .sk-title{ font-size:1.2cqh; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin-bottom:.3cqh; }
.side-legend span{ display:inline-flex; align-items:center; gap:.6cqw; }
.side-legend .dot{ width:1cqh; height:1cqh; border-radius:50%; flex:0 0 auto; }
.side-legend .sq{ width:1cqh; height:1cqh; border-radius:.3cqh; flex:0 0 auto; }

.side-foot{ margin-top:auto; font-size:1.15cqh; color:var(--ink-2); border-top:1px solid var(--border); padding-top:1cqh; line-height:1.3; }

/* ======================= ОСНОВНАЯ ОБЛАСТЬ ======================= */
.main{
  min-width:0; min-height:0; height:100%;
  padding: 1.8cqh 1.3cqw;
  display: grid;
  grid-template-columns: 3fr 2fr;   /* Тюмень (3 кол) | Ноябрьск (2 кол) */
  gap: 1.4cqw;
}

.zone{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.zone-head{
  display:flex; align-items:baseline; gap:.8cqw; margin-bottom:1.1cqh; flex:0 0 auto;
  padding-bottom:.8cqh; border-bottom:2px solid var(--border-strong);
}
.zone-head .zh-name{ font-size:2.5cqh; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:.7cqw; }
.zone-head .zh-dot{ width:1.6cqh; height:1.6cqh; border-radius:.4cqh; flex:0 0 auto; }
.zone.city-a .zh-dot{ background:var(--city-a-ink); }
.zone.city-b .zh-dot{ background:var(--city-b-ink); }
.zone.city-a .zh-name{ color:var(--city-a-ink); }
.zone.city-b .zh-name{ color:var(--city-b-ink); }
.zone-head .zh-meta{ font-size:1.35cqh; color:var(--ink-2); font-variant-numeric: tabular-nums; margin-left:auto; }

.zone-grid{
  flex:1 1 auto; min-height:0;
  display:grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(3, 1fr);   /* карточки одинаковой высоты в обеих зонах */
  gap: 1cqh .9cqw;
}

/* ======================= КАРТОЧКА ПОСТА ======================= */
.pcard{
  min-width:0; min-height:0; overflow:hidden;
  background: var(--panel);
  border:1px solid var(--border-strong);
  border-radius: 1.2cqh;
  padding: .62cqh .8cqw;
  display:flex; flex-direction:column; gap:.38cqh;
  box-shadow: 0 1px 6px rgba(15,23,42,.10), 0 14px 30px -16px rgba(15,23,42,.30);
}
:root[data-theme="dark"] .pcard{ box-shadow: 0 1px 8px rgba(0,0,0,.5), 0 18px 38px -18px rgba(0,0,0,.75); }
.pcard.city-a{ border-top:.4cqh solid var(--city-a-ink); }
.pcard.city-b{ border-top:.4cqh solid var(--city-b-ink); }

/* Пост без операторов: статус вместо пары день/ночь */
.pp-note{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:1.7cqh; font-weight:750; line-height:1.25; color:var(--ink);
  background:var(--panel-2); border:.15cqh dashed var(--border-strong); border-radius:.9cqh;
  padding:1cqh .8cqw; margin-top:.2cqh;
}
.pp-note.pp-empty{ color:var(--muted); font-weight:600; font-style:italic; }

.pp-head{ display:flex; align-items:baseline; gap:.6cqw; }
.pp-head .spacer{ flex:1 1 auto; }
.pp-num{ display:inline-flex; align-items:baseline; gap:.5cqw; }
.pp-no{ font-size:2.35cqh; font-weight:850; line-height:1; letter-spacing:-.02em; }
.pcard.city-a .pp-no{ color:var(--city-a-ink); }
.pcard.city-b .pp-no{ color:var(--city-b-ink); }
.pp-lbl{ font-size:1.5cqh; font-weight:700; color:var(--ink); }
.pp-tel{ font-size:1.2cqh; }
.pp-tel .tel{ font-variant-numeric: tabular-nums; white-space:nowrap; }

/* Пара операторов день/ночь */
.pp-people{ display:grid; grid-template-columns:1fr 1fr; gap:.7cqw; }
.pmini{ min-width:0; display:flex; flex-direction:column; }
.pm-ph{
  position:relative; width:100%; height:9.6cqh; border-radius:.9cqh; overflow:hidden;
  border:1px solid var(--border); background:var(--panel-2); flex:0 0 auto;
}
.pm-ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }
.pm-ph.noimg{ display:grid; place-items:center; color:var(--muted); }
.pm-ph.noimg .ini{ font-size:3cqh; font-weight:800; }
.pmini.unassigned .pm-ph{
  background: repeating-linear-gradient(45deg, var(--panel-2), var(--panel-2) 6px, var(--panel) 6px, var(--panel) 12px);
}
.pm-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  font-size:1.15cqh; font-weight:750; color:#fff; padding:.25cqh 0; text-align:center; letter-spacing:.02em;
}
.shift-day  .pm-bar{ background:linear-gradient(0deg, rgba(180,83,9,.96), rgba(180,83,9,.30)); }
.shift-night .pm-bar{ background:linear-gradient(0deg, rgba(67,56,202,.96), rgba(67,56,202,.30)); }
.pm-name{
  font-size:1.25cqh; font-weight:650; line-height:1.12; margin-top:.25cqh;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pm-name.dim{ color:var(--muted); font-weight:600; font-style:italic; }

/* Объекты */
.obj-list{ display:flex; flex-direction:column; gap:.22cqh; margin-top:0; }
.obj{
  display:flex; align-items:baseline; gap:.6cqw; font-size:1.25cqh; line-height:1.14;
  padding:.2cqh .55cqw; background:var(--panel-2); border-radius:.6cqh;
}
.obj .of{ font-weight:600; color:var(--ink); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.obj .ow{ color:var(--ink-2); font-variant-numeric: tabular-nums; white-space:nowrap; }
.obj .ow b{ color:var(--ink); font-weight:700; }
.obj .ow .sep{ margin:0 .25cqw; color:var(--muted); }

.tel{ color:var(--ink-2); text-decoration:none; }