/* Modo TV — gestão à vista.
 *
 * Painel de parede, não ferramenta de trabalho: ninguém clica, ninguém lê de
 * perto. A hierarquia inverte em relação ao quadro normal — cliente, pedido e
 * tempo em bucket são o que se lê a cinco metros; ação, comentário e vendedor
 * saem de cena.
 *
 * Mesma paleta do painel, com o contraste aberto para leitura a distância. O
 * cabeçalho continua no verde da marca, que emoldura o quadro e dá fundo ao
 * relógio.
 *
 * Tudo dimensionado em vw com clamp: o mesmo arquivo serve a um monitor de
 * 1080p e a uma TV 4K sem ajuste manual.
 */

body.modo-tv {
  --tv-fundo: #eef4f1;
  --tv-coluna: #e3ece7;
  --tv-card: #fff;
  --tv-borda: #cbdfd6;
  --tv-texto: #12271f;
  --tv-fraco: #5c7d72;
  --tv-alerta: #c0392b;
  background: var(--tv-fundo);
  color: var(--tv-texto);
  overflow: hidden;
  cursor: none;
}

/* Fora de cena: filtros, legendas, rodapé e o menu de sessão. */
body.modo-tv .toolbar,
body.modo-tv .board-header,
body.modo-tv .page-footer,
body.modo-tv .user-area,
body.modo-tv .move-button,
body.modo-tv .automatic-note,
body.modo-tv .inline-production-date,
body.modo-tv .permission-note,
body.modo-tv .card-meta span:last-child,
body.modo-tv .card-footer small,
body.modo-tv .spec {
  display: none !important;
}
body.modo-tv .column[data-stage] .sample-card:after {
  display: none !important;
}

/* ── Cabeçalho ─────────────────────────────────────────────────── */
body.modo-tv .topbar {
  height: auto;
  padding: clamp(10px, 1.1vw, 26px) clamp(16px, 1.8vw, 44px);
  background: var(--dark);
  box-shadow: 0 2px 14px rgba(8, 47, 38, .18);
}
body.modo-tv .brand-logo { width: clamp(96px, 7vw, 190px); height: auto; }
body.modo-tv .brand h1 { font-size: clamp(18px, 1.7vw, 42px); letter-spacing: -.01em; }
body.modo-tv .brand-kicker { font-size: clamp(9px, .62vw, 16px); letter-spacing: .22em; }

.tv-status { display: none; }
body.modo-tv .tv-status {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.4vw, 34px);
  color: #fff;
}
.tv-relogio {
  font-size: clamp(26px, 2.6vw, 66px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.tv-sincronia {
  font-size: clamp(10px, .72vw, 18px);
  color: var(--mint);
  text-transform: uppercase;
  letter-spacing: .14em;
  display: flex;
  align-items: center;
  gap: .6em;
}
.tv-sincronia i {
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: #4bd5a7;
  font-style: normal;
  box-shadow: 0 0 0 .28em rgba(75, 213, 167, .18);
  animation: tv-pulso 2.6s ease-in-out infinite;
}
@keyframes tv-pulso { 50% { opacity: .35 } }

/* ── Quadro ────────────────────────────────────────────────────── */
body.modo-tv main {
  padding: clamp(10px, 1vw, 26px) clamp(12px, 1.4vw, 36px) clamp(12px, 1.2vw, 30px);
}
body.modo-tv .board { gap: clamp(8px, .8vw, 20px); }

body.modo-tv .column {
  background: var(--tv-coluna);
  border: 1px solid var(--tv-borda);
  border-radius: clamp(8px, .7vw, 18px);
}
body.modo-tv .column > header {
  height: auto;
  padding: clamp(10px, 1vw, 26px) clamp(11px, 1vw, 26px);
  background: rgba(255, 255, 255, .8);
  border-bottom: 1px solid var(--tv-borda);
  gap: clamp(7px, .7vw, 16px);
}
body.modo-tv .stage-icon {
  width: clamp(24px, 2vw, 52px);
  height: clamp(24px, 2vw, 52px);
  background: #d7ebe2;
  color: var(--dark);
  font-size: clamp(10px, .78vw, 20px);
  border-radius: clamp(6px, .5vw, 13px);
}
body.modo-tv .column h3 { font-size: clamp(13px, 1.05vw, 27px); color: var(--dark); }
body.modo-tv .column header p { font-size: clamp(9px, .62vw, 15px); color: var(--tv-fraco); }

/* A contagem é o número que se lê do fim do corredor. */
body.modo-tv .count {
  min-width: auto;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--dark);
  font-size: clamp(26px, 2.4vw, 62px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
body.modo-tv .column-body {
  padding: clamp(8px, .7vw, 18px);
  gap: clamp(7px, .65vw, 16px);
  scrollbar-width: none;
}
body.modo-tv .column-body::-webkit-scrollbar { display: none; }
body.modo-tv .coluna-vazia { font-size: clamp(10px, .72vw, 18px); color: var(--tv-fraco); }

/* ── Cards ─────────────────────────────────────────────────────── */
body.modo-tv .sample-card {
  background: var(--tv-card);
  border: 1px solid var(--tv-borda);
  border-top: none;
  border-left: clamp(4px, .32vw, 9px) solid var(--priority);
  border-radius: clamp(6px, .5vw, 13px);
  padding: clamp(9px, .85vw, 22px);
  box-shadow: 0 1px 3px rgba(15, 80, 65, .06);
  cursor: default;
  transform: none !important;
}
body.modo-tv .priority { font-size: clamp(9px, .6vw, 15px); letter-spacing: .16em; }
body.modo-tv .origin {
  background: #e5f5ef;
  color: var(--dark);
  font-size: clamp(9px, .58vw, 15px);
  padding: .3em .7em;
}

/* Cliente vira o título: é por ele que se procura na parede. */
body.modo-tv .card-footer {
  border: 0;
  padding: 0;
  margin-bottom: clamp(6px, .5vw, 12px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
body.modo-tv .card-footer > div:first-child span {
  font-size: clamp(15px, 1.28vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  max-width: none;
  color: var(--tv-texto);
}
body.modo-tv .sample-card h4 {
  font-size: clamp(11px, .82vw, 21px);
  font-weight: 400;
  color: var(--tv-fraco);
  margin: clamp(4px, .35vw, 9px) 0 clamp(7px, .6vw, 15px);
  line-height: 1.3;
}
body.modo-tv .order-row {
  background: #f2f7f5;
  border-radius: clamp(5px, .4vw, 10px);
  padding: clamp(6px, .55vw, 14px) clamp(8px, .7vw, 17px);
  margin: 0;
}
body.modo-tv .order-row strong { font-size: clamp(15px, 1.3vw, 34px); color: var(--dark); }
body.modo-tv .order-row strong small { font-size: clamp(9px, .58vw, 15px); }
body.modo-tv .order-row span { font-size: clamp(10px, .7vw, 18px); color: var(--tv-fraco); }

body.modo-tv .aging {
  font-size: clamp(11px, .85vw, 22px);
  font-weight: 700;
  color: var(--tv-fraco);
}

/* Aging estourado é a razão de o painel estar na parede. */
body.modo-tv .aging.late {
  color: #fff;
  background: var(--tv-alerta);
  border-radius: 999px;
  padding: .18em .8em;
}
body.modo-tv .selos { gap: clamp(4px, .35vw, 9px); margin-top: clamp(6px, .5vw, 13px); }
body.modo-tv .selo-cancelada,
body.modo-tv .previsao {
  font-size: clamp(9px, .6vw, 15px);
  padding: .34em .8em;
}
body.modo-tv .sample-card.cancelada { opacity: .5; }

/* Urgente respira. É a única animação do painel: o olho é puxado sem que a
   tela vire árvore de natal. */
body.modo-tv .sample-card.priority-urgent {
  animation: tv-urgente 3.4s ease-in-out infinite;
}
@keyframes tv-urgente {
  50% {
    border-left-color: #e05a4b;
    box-shadow: -.16em 0 1.2em rgba(192, 57, 43, .22), 0 1px 3px rgba(15, 80, 65, .06);
  }
}

/* ── Botão de entrada ──────────────────────────────────────────── */
.tv-abrir {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  margin-right: 4px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.tv-abrir:hover { background: var(--green); border-color: var(--green); }
body.modo-tv .tv-abrir { display: none; }

@media (prefers-reduced-motion: reduce) {
  body.modo-tv .sample-card.priority-urgent,
  .tv-sincronia i { animation: none; }
}

/* ── Rodízio de páginas ────────────────────────────────────────── */

/* Coluna cheia não corta: troca de página a cada 15 s (js/tv.js). O que está
   fora da página não ocupa espaço nem entra na medição da próxima. */
.fora-da-pagina,
.fora-da-parede { display: none !important; }

/* O contador de página fica junto do total da coluna — o número grande
   continua sendo quantas amostras há ali, este diz onde o rodízio está. */
.tv-pagina { display: none; }
body.modo-tv .tv-pagina {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  margin-left: clamp(6px, .5vw, 13px);
  padding: .2em .6em;
  border-radius: 999px;
  background: var(--dark);
  color: var(--mint);
  font-size: clamp(10px, .72vw, 18px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.modo-tv .tv-pagina i { font-style: normal; opacity: .5; margin: 0 .1em; }

body.modo-tv .column-body.trocando { animation: tv-trocar-pagina .5s ease; }
@keyframes tv-trocar-pagina {
  from { opacity: 0; transform: translateY(1.2vh); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.modo-tv .column-body.trocando { animation: none; }
}

/* Fora do modo TV a página rola a altura da moldura, e o quadro mede uma tela
   menos o rodapé. Na parede não há rodapé nem rolagem: o quadro toma o que
   sobra do cabeçalho. */
body.modo-tv { height: 100vh; }
body.modo-tv main { height: auto; flex: 1 1 auto; min-height: 0; }