/* Estilo da mensagem de instrução que ocupa a tela cheia no início */
.mosaico-placeholder-global {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #222222; /* Fundo cinza escuro solicitado */
    justify-content: center;
    align-items: center;
    border: 1px solid #333;
    box-sizing: border-box;
}

/* Oculta o mosaico se ele não tiver nenhuma classe de estado (0 câmeras) */
.mosaico-container {
    display: none; /* Escondido até ter câmeras selecionadas */
    width: 100%;
    height: 100%;
    max-height: 100%;
    gap: 1px;
    padding: 1px;
    background-color: #333;
    box-sizing: border-box;
    overflow: hidden;
}

/* Só exibe o mosaico quando ele ganhar um estado ativo (1, 2, 3 ou 4) */
.mosaico-container.estado-1,
.mosaico-container.estado-2,
.mosaico-container.estado-3,
.mosaico-container.estado-4 {
    display: grid !important;
}


/* Elemento interno do vídeo */
.video-box {
    display: none;
    position: relative;
    /* ALTERADO: Fundo cinza escuro para quando a div abrir */
    background-color: #222222;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline 0.2s ease-in-out;
}

.video-box.visivel {
    display: block;
}

/* EFEITO DE DESTAQUE COLORIDO AO PASSAR O MOUSE (HOVER) */
.video-box.visivel:hover {
    cursor: pointer;
    /* Define uma borda de destaque (Exemplo: azul do ASP.NET/WebRTC, mude a cor se preferir) */
    outline: 2px solid #007acc;
    /* Mantém o vídeo acima dos outros para o efeito visual ficar perfeito */
    z-index: 10;
}

/* Força o WebRTC a ocupar todo o espaço do quadro */
.video-box video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* ALTERADO: Mostra o vídeo completo com faixas pretas nas sobras */
    display: block;
    /* ALTERADO: Cor das faixas que sobram nas laterais ou topo do vídeo */
    background-color: #222222;
}

/* Quando a câmera estiver reproduzindo com sucesso, muda o cursor para indicar clique duplo disponível */
.video-box.status-reproduzindo:hover {
    cursor: zoom-in; /* Exibe uma lupa com sinal de mais (+) ao passar o mouse */
}

/* Mantém as regras dos estados do mosaico idênticas */
.mosaico-container.estado-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.mosaico-container.estado-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.mosaico-container.estado-3,
.mosaico-container.estado-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}



/* Container que envolve todos os checkboxes */
.controles-video {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #1e1e1e; /* Fundo escuro combinando com o mosaico */
    border-radius: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* O elemento label que envelopa o input (transformado em um botão clicável) */
.controles-video label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #2d2d2d;
    color: #ffffff;
    border: 1px solid #404040;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    user-select: none;
    transition: all 0.2s ease-in-out;
}

/* Efeito de passar o mouse sobre o botão/label */
.controles-video label:hover {
    background-color: #3d3d3d;
    border-color: #007acc; /* Destaque azul sutil */
}

/* Estilização específica do input checkbox nativo */
.chk-video {
    appearance: none; /* Remove o visual padrão sem graça do navegador */
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #666;
    border-radius: 3px;
    background-color: transparent;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

/* Efeito quando o checkbox está marcado (Checked) */
.chk-video:checked {
    background-color: #007acc; /* Fundo azul de ativo */
    border-color: #007acc;
}

/* Cria o "V" de marcado (Checkmark) usando pseudo-elemento */
.chk-video:checked::before {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg) translate(1px, -1px);
}

/* Estilo visual quando o botão/label inteiro está ativo (opcional, para realçar o botão todo) */
.controles-video label:has(.chk-video:checked) {
    background-color: #1a364a;
    border-color: #007acc;
}

/* Camada genérica que cobre o vídeo */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* Escondido por padrão */
    background-color: #222222; /* Mantém o cinza escuro solicitado */
    z-index: 5;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Alinhamento interno dos textos e ícones */
.overlay-conteudo {
    text-align: center;
    color: #aaaaaa;
    font-family: sans-serif;
}

.icone-info {
    font-size: 28px;
    color: #007acc;
}

.icone-erro {
    font-size: 32px;
    color: #ff4d4d;
}

.overlay-conteudo p {
    margin: 10px 0 0 0;
    font-size: 14px;
    line-height: 1.4;
}

/* Ícone de Informação (Aguardando) */
.icone-info {
    font-size: 28px;
    color: #007acc; /* Azul sutil */
    display: inline-block;
}

/* Ícone e Identidade Visual de Erro */
.icone-erro {
    font-size: 32px;
    color: #ff4d4d; /* Vermelho Alerta */
    animation: pulsar 1.5s infinite ease-in-out;
}

/* Efeito pulsar sutil no ícone de erro para chamar atenção */
@keyframes pulsar {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* CONTROLE DE ESTADOS VIA CLASSES */

/* GERENCIAMENTO DE ESTADOS INTERNOS */
.video-box.status-carregando .overlay-loading {
    display: flex !important;
}

.video-box.status-carregando .overlay-placeholder,
.video-box.status-carregando .overlay-erro {
    display: none !important;
}

.video-box.status-aguardando .overlay-placeholder {
    display: flex !important;
}

.video-box.status-aguardando .overlay-loading,
.video-box.status-aguardando .overlay-erro {
    display: none !important;
}

.video-box.status-erro .overlay-erro {
    display: flex !important;
    background-color: #281c1c;
}

.video-box.status-erro .overlay-placeholder,
.video-box.status-erro .overlay-loading {
    display: none !important;
}

.video-box.status-reproduzindo .video-overlay {
    display: none !important;
}

/* Estilização do botão de Tentar Novamente */
.btn-tentar-novamente {
    margin-top: 15px;
    padding: 8px 18px;
    background-color: #ff4d4d; /* Vermelho combinando com o ícone de alerta */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out;
}

/* Efeito de passar o mouse */
.btn-tentar-novamente:hover {
    background-color: #ff3333;
}

/* Efeito de clique */
.btn-tentar-novamente:active {
    transform: scale(0.97);
}

/* NOVO: Estilização do Indicador de Carregamento Giratório */
.spinner-loading {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: #007acc; /* Cor azul de carregamento */
    border-radius: 50%;
    display: inline-block;
    animation: girarSpinner 0.8s linear infinite;
}

@keyframes girarSpinner {
    to {
        transform: rotate(360deg);
    }
}

/* Botão de Snapshot posicionado no canto superior direito */
.btn-snapshot {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 8; /* Fica acima do vídeo, mas abaixo de eventuais modais */
    background-color: rgba(0, 0, 0, 0.6); /* Fundo escuro transparente */
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    display: none; /* Escondido por padrão */
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out;
}

/* Efeito de passar o mouse no botão */
.btn-snapshot:hover {
    background-color: #007acc; /* Fica azul */
    border-color: #007acc;
    transform: scale(1.05);
}

/* Efeito de clique */
.btn-snapshot:active {
    transform: scale(0.95);
}

/* REGRA DE VISIBILIDADE: Só exibe o botão quando o vídeo estiver reproduzindo com sucesso */
.video-box.status-reproduzindo .btn-snapshot {
    display: flex;
}



/* Quando a página entra em tela cheia, esconde TUDO que está no primeiro nível do body */
body.modo-tela-cheia > * {
    display: none !important;
}

/* Força o contêiner/form do ASP.NET a continuar existindo na renderização */
body.modo-tela-cheia form {
    display: block !important;
}

/* Oculta todos os filhos diretos do form para limpar o layout */
body.modo-tela-cheia form > * {
    display: none !important;
}

/* Força estritamente a div do mosaico e TODOS os seus pais a ficarem visíveis no fluxo */
body.modo-tela-cheia #divMaeMosaico,
body.modo-tela-cheia #divMaeMosaico *,
body.modo-tela-cheia #divMaeMosaico.parent,
body.modo-tela-cheia :has(#divMaeMosaico) {
    display: block !important;
    visibility: visible !important;
}

/* Garante o comportamento de grid/flex original dos quadros de vídeo internos */
body.modo-tela-cheia #divMaeMosaico .video-box {
    display: inline-block !important; /* Ou use flex/grid caso seu layout original use */
}

/* Remove margens e joga o mosaico para o topo absoluto do monitor */
body.modo-tela-cheia #divMaeMosaico {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999999 !important;
    background-color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
}