/* ============================================================
   Экран для телевизора. Светлая («белая») строгая тема.
   Формат школьного журнала: классы — колонками, дни недели —
   блоками сверху вниз (вертикальная подпись слева),
   узкая колонка номера урока прижата к блоку дня.
   ============================================================ */

html { font-size: clamp(14px, 1.18vw, 27px); }

body.display-theme {
  height: 100vh;
  overflow: hidden;
  background: #f4f6f9;
  color: #17202b;
  cursor: none;
}

#root { height: 100vh; display: flex; flex-direction: column; }

/* ---------------- шапка ---------------- */
.hd {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .4rem 1.2rem .35rem;
  background: #ffffff;
  border-bottom: 1px solid #e6eaf0;
}
.hd .title-block { min-width: 0; }
.hd .over {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.hd .date {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: .1rem;
}

.hd .right { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.hd .clock { display: flex; align-items: baseline; }
.hd .clock .hm { font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: .02em; }
.hd .clock .colon { animation: colonfade 2s ease-in-out infinite; }
@keyframes colonfade { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* название школы — строго по центру экрана (не между блоками) */
.hd .school-name {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: min(46rem, 55vw);
  text-align: center;
  font-size: 1.02rem;
  font-weight: 700;
  color: #17202b;
  line-height: 1.25;
  padding: 0 .5rem;
  pointer-events: none;
}

.hd .sync {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .3rem .75rem;
  white-space: nowrap;
}
.hd .sync.warn {
  color: #9a6b0a;
  background: #fdf3df;
  border: 1px solid #f0d9a6;
}

/* ---------------- строка статуса ---------------- */
.status {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.3rem;
  padding: .3rem 1.2rem;
  background: #fbfcfe;
  border-bottom: 1px solid #e6eaf0;
}
.status .phase {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: #e9f0ff;
  border: 1px solid #c7d8ff;
  padding: .26rem .7rem .18rem;
  border-radius: 7px;
  white-space: nowrap;
}
.status .phase.break { color: #9a6b0a; background: #fdf3df; border-color: #f0d9a6; }
.status .phase.free { color: #5c6675; background: #eef1f5; border-color: #dfe4eb; }
.status .what { font-size: .92rem; color: #5c6675; white-space: nowrap; }
.status .what b { color: #17202b; font-weight: 700; }

.status .timer { margin-left: auto; display: flex; align-items: baseline; gap: .8rem; }
.status .timer .digits { font-size: 1.6rem; font-weight: 800; letter-spacing: .03em; line-height: 1; }
.status .timer .target { font-size: .85rem; color: #98a1af; white-space: nowrap; }

.status .bar {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
}
.status .bar i { display: block; height: 100%; background: var(--accent-strong); transition: width 1s linear; }
.status .bar.break i { background: #f0b13e; }

/* ---------------- недельная таблица ---------------- */
.week { flex: 1; min-height: 0; padding: .35rem .3rem .3rem; display: flex; position: relative; }

/* режим редактирования: таблица плавно уходит, появляется вуаль */
.week .wframe, .week .empty-state {
  transition: opacity .65s ease, transform .65s ease, filter .65s ease;
}
.week.editing .wframe, .week.editing .empty-state {
  opacity: 0;
  transform: scale(.965) translateY(.6rem);
  filter: blur(10px);
  pointer-events: none;
}
.edit-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 0 2rem;
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity .7s ease .2s, transform .7s ease .2s;
  pointer-events: none;
}
.week.editing .edit-veil { opacity: 1; transform: translateY(0); }
.ev-icon {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: #eef4ff;
  border: 2px solid #c7d8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: evpulse 2.2s ease-in-out infinite;
}
@keyframes evpulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47, 109, 255, .0); }
  50% { transform: scale(1.07); box-shadow: 0 0 0 14px rgba(47, 109, 255, .08); }
}
.ev-title { font-size: 2.3rem; font-weight: 800; color: #17202b; letter-spacing: .01em; }
.ev-sub { font-size: 1.05rem; color: #5c6675; }

/* ---------------- пустое состояние ---------------- */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: #98a1af;
}
.empty-state .big { font-size: 2rem; font-weight: 700; color: #5c6675; }
.empty-state .sm { font-size: 1rem; }

/* ---------------- бегущая строка ---------------- */
.ticker {
  flex: none;
  height: 1.8rem;
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border-top: 1px solid #e6eaf0;
}
.ticker .tag {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 1.3rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent-strong);
  border-right: 1px solid #e6eaf0;
  background: #f8fafc;
}
.ticker .zone { flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker .track { display: flex; width: max-content; animation: tick linear infinite; }
.ticker .track span { font-size: .92rem; color: #3c4654; white-space: nowrap; padding-right: 4.5rem; }
.ticker .track span b { color: var(--accent-strong); padding-right: .8rem; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ticker .upd {
  flex: none;
  align-self: center;
  padding: 0 1.3rem;
  font-size: .68rem;
  font-weight: 600;
  color: #98a1af;
  border-left: 1px solid #e6eaf0;
  white-space: nowrap;
}

/* ---------------- адаптив узких экранов ---------------- */
@media (max-width: 1000px) {
  .hd .clock .hm { font-size: 1.9rem; }
  .status .what { display: none; }
  .week { padding: .4rem 1rem .4rem; }
}