/* vistoriador.css */

/* Definição de variáveis CSS para facilitar a manutenção das cores */
:root {
    --color-title: #1F34A6;
    --color-primary-blue: #04B2D9;
    --color-secondary-orange: #F29F05;
    --color-danger-red: #F2360C;
    --color-dark-gray: #0D0D0D; /* Cor para texto geral e alguns elementos */
    --color-white: #FFFFFF;
    --color-light-gray-bg: #f4f7f6; /* Fundo geral, mantido para contraste com blocos */
    --color-block-bg: #FFFFFF; /* Fundo dos blocos de conteúdo */
    --color-disabled-button: #cccccc;
    --color-disabled-text: #666;
    --color-status-text: #555;
    --color-border: #ddd;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    background-color: var(--color-white); /* Fundo da tela agora é branco */
    color: var(--color-dark-gray); /* Cor do texto padrão */
}

h1 {
    color: var(--color-title); /* Títulos em #1F34A6 */
    margin-bottom: 20px;
}

/* Contêiner principal para as duas colunas (vídeo e controles) */
.main-content-container {
    display: flex;
    flex-direction: row; /* Colunas lado a lado */
    gap: 20px; /* Espaço entre as colunas */
    width: 100%;
    max-width: 1200px; /* Largura máxima para o layout */
    margin-bottom: 20px;
    flex-wrap: wrap; /* Permite que as colunas quebrem em telas menores */
    justify-content: center; /* Centraliza em telas menores */
}

/* Coluna do vídeo */
.video-column {
    flex: 2; /* Ocupa mais espaço */
    min-width: 320px; /* Largura mínima para o vídeo em telas pequenas */
    background-color: var(--color-dark-gray); /* Fundo escuro para o vídeo */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative; /* Para posicionar o timer de gravação */
    display: flex; /* Para centralizar o vídeo se ele for menor */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Garante que o vídeo não saia dos limites */
}

#remoteVideo {
    width: 100%;
    height: auto;
    max-height: 500px; /* Altura máxima para o vídeo */
    display: block; /* Remove espaço extra abaixo do vídeo */
}

/* Estilo para o status da gravação */
#recordingStatus {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--color-white);
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    visibility: hidden; /* Escondido por padrão, controlado por JS */
}

#recordingBullet {
    width: 10px;
    height: 10px;
    background-color: var(--color-danger-red); /* Bullet em vermelho */
    border-radius: 50%;
    animation: pulse 1s infinite alternate; /* Animação de pulsação */
}

@keyframes pulse {
    from { opacity: 1; }
    to { opacity: 0.5; }
}

/* Coluna de controles e status */
.controls-column {
    flex: 1; /* Ocupa menos espaço que o vídeo */
    min-width: 280px; /* Largura mínima para os controles */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre os blocos dentro da coluna */
}

/* Estilo para cada bloco (localização, botões, status) */
.control-block {
    background-color: var(--color-block-bg); /* Fundo dos blocos em branco */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.control-block h2 {
    /* REMOVIDO: margem-top 0 e margin-bottom 15px
       REMOVIDO: color: #007bff;
       REMOVIDO: font-size: 1.2em;
    */
    /* Agora controlaremos o estilo do h2 com classes específicas ou deixaremos no padrão */
    display: none; /* Oculta os títulos 'Controles de Vistoria' e 'Galeria de Fotos' */
}

.control-block h2.visible-title { /* Para 'Localização do Cliente' e 'Logs de Status' */
    display: block; /* Reexibe o título para esses elementos */
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--color-title); /* Títulos em #1F34A6 */
    font-size: 1.2em; /* Tamanho da fonte padrão para títulos de bloco */
}

/* Diminui o tamanho da fonte para os títulos de 'Localização do Cliente' e 'Logs de Status' */
.control-block h2.small-font-title {
    font-size: 1em; /* Tamanho menor para esses títulos */
}


.control-block button {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 10px; /* Espaço entre os botões */
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: var(--color-white); /* Cor do texto padrão para botões */
}

/* Cores dos botões conforme as novas especificações */
#connectButton { background-color: var(--color-primary-blue); } /* Azul */
#hangupButton { background-color: var(--color-primary-blue); } /* Azul, como o connect */
#takePictureButton { background-color: var(--color-primary-blue); } /* Azul */
#startRecordingButton { background-color: var(--color-secondary-orange); color: var(--color-dark-gray); } /* Laranja com texto escuro */
#stopRecordingButton { background-color: var(--color-danger-red); } /* Vermelho */

.control-block button:hover:enabled {
    opacity: 0.9;
}

.control-block button:disabled {
    background-color: var(--color-disabled-button);
    cursor: not-allowed;
    color: var(--color-disabled-text);
}

/* Div de Status (logs) */
#status {
    min-height: 70px; /* Altura mínima para o log */
    max-height: 70px;
    overflow-y: auto; /* Scroll se o conteúdo for grande */
    white-space: pre-wrap; /* Mantém quebras de linha */
    word-break: break-all;
    font-size: 0.85em; /* Mantido o tamanho padrão para o texto do log */
    color: var(--color-status-text);
    line-height: 1.4;
}

/* NOVO: Estilo para o geoStatusDiv para interpretar \n */
#geoStatus {
    white-space: pre-wrap; /* Esta propriedade faz com que \n sejam interpretados como quebras de linha */
    word-break: break-all;
}

/* Galeria de Fotos */
.photo-gallery-container {
    width: 100%;
    max-width: 1200px;
    background-color: var(--color-block-bg); /* Fundo dos blocos em branco */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.photo-gallery-container h2 {
    display: none; /* Oculta o título 'Galeria de Fotos' */
}

.photo-strip {
    display: flex;
    overflow-x: auto; /* Scroll horizontal para as fotos */
    gap: 15px;
    padding-bottom: 10px; /* Para não cortar a sombra ou scrollbar */
    justify-content: flex-start; /* Alinha as fotos à esquerda */
    align-items: flex-start;
}

.photo-item {
    flex-shrink: 0; /* Impede que as fotos encolham */
    width: 150px; /* Largura fixa para cada foto na galeria */
    height: 112px; /* Proporção 4:3 para largura 150px */
    background-color: #eee;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    overflow: hidden;
    display: flex; /* Para centralizar o texto "FOTO" */
    align-items: center;
    justify-content: center;
    color: var(--color-disabled-text);
    font-size: 0.9em;
    position: relative;
    cursor: pointer;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o item sem distorção */
    display: block;
}

/* Responsividade básica */
@media (max-width: 768px) {
    .main-content-container {
        flex-direction: column; /* Colunas empilham em telas menores */
        align-items: center;
    }
    .video-column, .controls-column {
        width: 95%; /* Ocupa quase toda a largura em telas pequenas */
        max-width: none; /* Remove a largura máxima */
    }
    .photo-strip {
        justify-content: flex-start; /* Mantém as fotos à esquerda */
    }
}