/*
 * TVs de chão de fábrica (app/docs/tv-dashboards.md). Sobre o core.css do
 * tema (variáveis --bs-*), sem editá-lo. Tamanhos em vh/vw: lido de longe,
 * de 32" HD a 75" 4K. O cartão do quadro escala pelo font-size que o JS
 * calcula para a grade (tudo dentro dele em em).
 */

html,
body {
    height: 100%;
}

body.tv {
    margin: 0;
    overflow: hidden;
    cursor: none;
    background: var(--bs-body-bg, #25293c);
    color: var(--bs-body-color, #acabc1);
    font-family: "Public Sans", sans-serif;
}

.tv-app {
    display: flex;
    flex-direction: column;
    gap: 1.6vh;
    height: 100vh;
    padding: 2vh 1.8vw;
    box-sizing: border-box;
}

/* ---- Topo ------------------------------------------------------------ */

.tv-topo {
    display: flex;
    align-items: center;
    gap: 1.6vw;
    font-size: 2.2vh;
    min-height: 5vh;
}

.tv-topo > * {
    flex-shrink: 0;
}

.tv-topo img {
    height: 4vh;
}

/* Só o título cede espaço (relógio e resumo sempre inteiros). */
.tv-topo > .tv-cabecalho {
    flex-shrink: 1;
    min-width: 0;
}

.tv-cabecalho > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-titulo {
    color: var(--bs-heading-color, #e1def5);
    font-size: 3.2vh;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
}

.tv-subtitulo {
    color: var(--bs-secondary-color, #76778e);
    font-size: 2vh;
}

.tv-topo > .tv-espaco {
    flex: 1 1 0;
}

.tv-relogio {
    color: var(--bs-heading-color, #e1def5);
    font-size: 4.4vh;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tv-conexao .status-dot {
    font-size: 2.6vh;
}

.tv-sem-conexao {
    display: none;
    padding: .3em .8em;
    border-radius: .4em;
    background: var(--bs-danger, #ff4c51);
    color: #fff;
    font-weight: 600;
}

body.tv-offline .tv-sem-conexao {
    display: inline-block;
}

.tv-conteudo {
    flex: 1;
    min-height: 0;
}

/* ---- Telas de mensagem (código, indisponível) ------------------------ */

.tv-centro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6vw;
    height: 100%;
    text-align: center;
}

.tv-mensagem h1 {
    color: var(--bs-heading-color, #e1def5);
    font-size: 5vh;
    font-weight: 600;
    margin: 0 0 2vh;
}

.tv-mensagem p {
    font-size: 2.6vh;
    margin: 0 auto 1.2vh;
    max-width: 48vw;
}

.tv-codigo {
    display: flex;
    justify-content: center;
    gap: 1vw;
    margin: 4vh 0;
}

.tv-codigo span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7.5vw;
    height: 12vh;
    border-radius: 1vh;
    background: var(--bs-paper-bg, #2f3349);
    color: var(--bs-heading-color, #e1def5);
    font-size: 8vh;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tv-qr {
    padding: 2vh;
    border-radius: 1.5vh;
    background: #fff;
    width: 34vh;
    height: 34vh;
    box-sizing: content-box;
}

.tv-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tv-qr-legenda {
    margin-top: 1.6vh;
    font-size: 2.2vh;
}

/* ---- Quadro de máquinas ---------------------------------------------- */

.tv-resumo {
    display: flex;
    gap: 1.4vw;
    white-space: nowrap;
    font-size: 2.4vh;
    font-weight: 600;
}

.tv-resumo span::before {
    content: "";
    display: inline-block;
    width: .7em;
    height: .7em;
    margin-right: .35em;
    border-radius: 50%;
    background: var(--tv-cor);
}

.tv-grade {
    display: grid;
    height: 100%;
}

.tv-card {
    display: flex;
    flex-direction: column;
    gap: .25em;
    min-width: 0;
    overflow: hidden;
    padding: .6em .8em .6em .9em;
    border-left: .45em solid var(--tv-cor);
    border-radius: .5em;
    background: var(--bs-paper-bg, #2f3349);
    line-height: 1.25;
}

/* Sem isto o flex encolhe as linhas (e corta o texto) em vez de respeitar a altura. */
.tv-card > * {
    flex-shrink: 0;
}

[data-cor="success"] { --tv-cor: var(--bs-success, #28c76f); }
[data-cor="danger"] { --tv-cor: var(--bs-danger, #ff4c51); }
[data-cor="info"] { --tv-cor: var(--bs-info, #00bad1); }
[data-cor="secondary"] { --tv-cor: var(--bs-secondary, #808390); }

/* Nome em até 2 linhas (nomes de máquina costumam ser longos e parecidos). */
.tv-card-nome {
    display: -webkit-box;
    overflow: hidden;
    color: var(--bs-heading-color, #e1def5);
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tv-card-status {
    color: var(--tv-cor);
    font-size: .9em;
    font-weight: 700;
    letter-spacing: .04em;
}

.tv-card-linha {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-card-linha i {
    width: 1em;
    height: 1em;
    margin-right: .35em;
    font-size: 1em;
    vertical-align: -.12em;
    opacity: .7;
}

.tv-card-vazio {
    opacity: .5;
}

.tv-card-progresso {
    margin-top: auto;
}

.tv-barra {
    height: .45em;
    margin-top: .25em;
    overflow: hidden;
    border-radius: .25em;
    background: rgba(255, 255, 255, .08);
}

.tv-barra div {
    height: 100%;
    background: var(--tv-cor);
}

.tv-grade-vazia {
    font-size: 3vh;
}