/* RESET BÁSICO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
    display: flex; /* Para o layout de coluna principal */
    flex-direction: column;
    min-height: 100vh; /* Ocupa a altura total da viewport */
}

/* HEADER */
header {
    background-color: #2c3e50; /* Azul escuro */
    color: #ecf0f1; /* Cinza claro */
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
}

.main-header {
    /* ADICIONADO: Cores do header genérico para o fixo */
    background-color: #2c3e50; /* Azul escuro - para evitar que o conteúdo passe por baixo */
    color: #ecf0f1; /* Cinza claro - para garantir a leitura do texto */

    padding: 10px 20px;
    border-bottom: 2px solid #ccc;
    height: 60px; /* Garante que a altura seja fixa */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;

    /* Configurações Flexbox (CORRETAS) */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-header h1 {
    /* Garante que o H1 não seja afetado pelo Flexbox, exceto pelo espaçamento */
    margin: 0;
    /* Adicione um espaçamento, se necessário */
    padding-right: 15px;
}

.header-logo {
    /* 4. Estilo do logo: Defina um tamanho fixo */
    height: 120px; /* Ajuste este valor conforme o tamanho do seu logo */
    width: auto;
    margin-top: 40px; /* Adiciona 40px de margem acima do logo, empurrando-o para baixo */

    /* Garante que o logo não encolha ou cresça */
    flex-shrink: 0;

    /* MOLDURA SIMPLES */
    border: 4px solid #bdc3c7; /* Linha cinza clara e sólida */
    padding: 1px; /* Espaçamento interno entre a imagem e a borda */
    border-radius: 4px; /* Cantos levemente arredondados */
}

/* LAYOUT PRINCIPAL (MAIN) */
main {
    display: flex; /* Habilita o Flexbox para MAIN */
    min-height: 100vh; /* Ocupa a altura total da viewport */
    padding-top: 60px; /* Espaço para o cabeçalho fixo (main-header) */
}

/* SIDEBAR MENU */
.sidebar-menu {
    width: 250px;
    flex-shrink: 0;
    background-color: #4c70a5;

    /* FIX CRÍTICO: Posiciona a barra 60px abaixo do topo (abaixo do header) */
    position: fixed;
    top: 60px;
    height: calc(100% - 60px); /* Ocupa o restante da tela */

    /* Adicionando scroll e limpando margens para estabilidade */
    margin: 0;
    padding-top: 0;
    overflow-y: auto; /* Adiciona scroll se o menu for muito longo */
}

.sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin-bottom: 0; /* Ajuste para espaçamento consistente */
}

.sidebar-menu .menu-item > a { /* Estilo para os itens de menu principais */
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: #ecf0f1;
    font-weight: bold;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.sidebar-menu .menu-item > a:hover {
    background-color: #2c3e50; /* Um pouco mais escuro ao passar o mouse */
}

/* SUBMENUS */
.sidebar-menu .submenu {
    list-style: none;
    padding-left: 25px; /* Indentação para submenus */
    margin-top: 0;
    border-left: 3px solid #7f8c8d; /* Linha vertical para indicar submenu */}

.sidebar-menu .submenu li {
    margin-bottom: 0;
}

.sidebar-menu .submenu a {
    display: block;
    padding: 6px 15px;
    text-decoration: none;
    color: #bdc3c7; /* Cor mais clara para itens de submenu */
    font-size: 0.95em;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.sidebar-menu .submenu a:hover {
    color: #ecf0f1; /* Clareia ao passar o mouse */
    background-color: #2c3e50;
    border-radius: 3px;
}

/* CONTEÚDO PRINCIPAL (FORMULÁRIOS E TABELAS) */
.content {
    /* Limpa a redundância e define a margem da barra lateral */
    flex-grow: 1;
    margin-left: 250px;

    /* CRÍTICO: Define o Padding Top (80px) + Right (20px) + Bottom (20px) + Left (20px) */
    /* Isso garante que o conteúdo não fique por baixo do cabeçalho */
    padding: 80px 20px 20px 20px;
}

.content h1 {
    font-size: 2.2em;
    color: #2c3e50;
    margin-bottom: 25px;
    border-bottom: 2px solid #3498db; /* Linha azul para destaque */
    padding-bottom: 10px;
}

.content h2 {
    font-size: 1.6em;
    color: #34495e;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* Adiciona margem abaixo das informações do cliente */
.client-info {
    margin-bottom: 25px; /* Altere 25px para o valor desejado (ex: 40px) */
    padding: 15px; /* Mantém o padding interno para visualização */
    border-bottom: 2px solid #ccc; /* Linha sutil para separar, se necessário */
}

.report-section.principal-status {
    margin-top: 30px; /* Espaçamento acima do bloco de status */
}

/* FORMULÁRIOS */
/* **MODIFICADO:** Adiciona display flex para organizar os campos em grid */
form {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin-bottom: 30px;

    /* Novas propriedades para layout flexível */
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    gap: 15px; /* Espaço entre os elementos do formulário */
    max-width: 800px; /* Limita a largura máxima do formulário para melhor leitura */
    margin-left: auto; /* Centraliza o formulário */
    margin-right: auto; /* Centraliza o formulário */
}

/* **ADICIONADO:** Contêiner para cada label + input/select */
.form-group {
    flex: 1 1 calc(50% - 10px); /* Ocupa ~50% da largura, descontando o gap.
                                   Ajuste '10px' para ser 'gap / 2' */
    display: flex; /* Torna o form-group um contêiner flexível */
    flex-direction: column; /* Coloca label e input/select um abaixo do outro */
    min-width: 200px; /* Garante uma largura mínima para evitar que fiquem muito estreitos */
}

/* **AJUSTADO:** Label dentro do .form-group */
form label {
    margin-bottom: 5px; /* Reduzido de 8px para 5px */
    font-weight: bold;
    color: #555;
    display: block; /* Garante que o label ocupe sua própria linha dentro do flex-direction: column */
}

/* **AJUSTADO:** Input, textarea E SELECT para ocupar 100% da largura do .form-group */
form input[type="text"],
form input[type="number"],
form input[type="date"],
form input[type="email"], /* Adicionado, caso use */
form textarea,
form select { /* **ADICIONADO: SELECT** */
    width: 100%; /* Faz com que input, select e textarea ocupem 100% da largura do seu form-group */
    padding: 10px;
    /* margin-bottom: 15px; REMOVIDO, pois o 'gap' do pai já lida com o espaçamento */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box; /* Inclui padding e border na largura total */
}

form textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
    min-height: 80px;
}

/* **MODIFICADO:** Botão de submit do formulário para ocupar 100% da largura */
#saveOrAddButton { /* <--- Mudei para usar o ID */
    flex: 1 1 100%; /* Faz o botão ocupar 100% da largura disponível, sob os campos */
    background-color: #3498db; /* Azul vibrante */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    margin-top: 10px; /* Adiciona um espaço acima do botão */
    transition: background-color 0.3s ease;
}

#saveOrAddButton:hover { /* <--- Mudei para usar o ID */
    background-color: #2980b9; /* Azul um pouco mais escuro */
}

/* --- ESTILOS ESPECÍFICOS DOS BOTÕES DE AÇÃO DA TABELA --- */
/* Agora mais específicos para sobrescrever estilos genéricos */
table .actions button.delete-btn { /* <--- Aumentei a especificidade */
    background-color: #dc3545; /* Vermelho padrão Bootstrap */
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 5px;
}

table .actions button.delete-btn:hover { /* <--- Aumentei a especificidade */
    background-color: #c82333;
}

table .actions button.edit-btn { /* <--- Aumentei a especificidade */
    background-color: #28a745; /* Verde padrão Bootstrap */
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 5px;
}

table .actions button.edit-btn:hover { /* <--- Aumentei a especificidade */
    background-color: #218838;
}

/* **ADICIONADO:** Estilos para a barra de busca (se você tiver uma, para ter consistência) */
.search-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
    max-width: 800px; /* Limita a largura para seguir o formulário */
    margin-left: auto; /* Centraliza a busca */
    margin-right: auto; /* Centraliza a busca */
}

.search-container input {
    flex-grow: 1; /* O input de busca ocupa o máximo de espaço possível */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.search-container button {
    padding: 10px 15px;
    background-color: #28a745; /* Verde */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.search-container button:hover {
    background-color: #218838;
}

.likert-scale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* Espaço entre os botões */
    flex-wrap: wrap; /* Permite quebrar linha em telas pequenas */
    margin-top: 5px;
}
.likert-scale label {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Regras para o CONTAINER do gráfico da Página diagnosticos.ejs*/
.detailed-analysis .chart-container {
    /* Força o empilhamento vertical e o alinhamento central */
    display: flex;
    flex-direction: column; /* CORREÇÃO: Força o empilhamento vertical */

    max-height: 450px;
    margin-top: 30px;
    margin-bottom: 10px;

    /* Centraliza o conteúdo horizontalmente dentro do container */
    align-items: center;
}

/* Regras para o elemento CANVAS em si */
#dimensaoChart {
    /* Garante que o Chart.js respeite o tamanho do container */
    max-height: 400px;
    width: 100% !important; /* Garante largura total */
    height: auto !important;
}

/* CSS para o posicionamento dos rótulos da Matriz */
.matrix-container {
    position: relative; /* Pai para posicionamento absoluto dos filhos */
    width: 100%;
    /* Altura ajustada para dar espaço aos rótulos laterais/verticais */
    height: 500px;
}
.matrix-label {
    position: absolute;
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
    z-index: 10;
    padding: 2px 5px;
}
.label-x-axis { /* Rótulos do Eixo X (Horizontal - Baixo) */
    top: calc(100% - 30px); /* Ajuste baseado na altura da caixa */
    text-align: center;
}
.label-y-axis { /* Rótulos do Eixo Y (Vertical - Esquerda/Direita) */
    /* Usaremos transform para girar os rótulos verticais */
    transform-origin: 0 0;
}

/* TABELAS */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden; /* Garante que os cantos arredondados funcionem com as bordas */
    max-width: 1000px; /* Limita a largura da tabela */
    margin-left: auto; /* Centraliza a tabela */
    margin-right: auto; /* Centraliza a tabela */
}

table thead {
    background-color: #ecf0f1; /* Cinza claro para o cabeçalho */
    color: #34495e;
}

table th, table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

table th {
    font-weight: bold;
    font-size: 1em;
    text-transform: uppercase;
}

table tbody tr:nth-child(even) { /* Linhas alternadas */
    background-color: #f4f4f4;
}

table tbody tr:hover {
    background-color: #e9e9e9;
}

/* FOOTER */
footer {
    background-color: #2c3e50;
    color: #ecf0f1;
    text-align: center;
    padding: 15px 20px;
    margin-top: auto; /* Empurra o footer para a parte inferior */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

/* Estilo para links de navegação no header se houver */
nav.main-nav ul {
    list-style: none;
    margin-left: auto; /* Alinha os itens à direita */
    display: flex;
}

nav.main-nav li {
    margin-left: 20px;
}

nav.main-nav a {
    color: #ecf0f1;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

nav.main-nav a:hover {
    color: #3498db; /* Azul ao passar o mouse */
}

/* MEDIA QUERIES para responsividade */
@media (max-width: 768px) {
    .sidebar-menu {
        width: 100%; /* Ocupa toda a largura em telas menores */
        height: auto;
        padding: 10px 0;
        box-shadow: none; /* Remove a sombra lateral */
        border-bottom: 1px solid #7f8c8d; /* Adiciona uma borda inferior */
    }
    .sidebar-menu ul {
        display: flex; /* Transforma o menu em uma linha */
        justify-content: space-around; /* Distribui os itens uniformemente */
        flex-wrap: wrap; /* Permite que os itens quebrem linha se necessário */
    }
    .sidebar-menu .menu-item {
        flex: 1 1 auto; /* Permite que os itens se ajustem */
        text-align: center;
    }
    .sidebar-menu .menu-item > a {
        padding: 10px 10px;
        font-size: 0.9em;
    }
    .sidebar-menu .submenu {
        display: none; /* Oculta submenus em telas pequenas, pode-se adicionar JS para toggle */
    }

    main {
        flex-direction: column; /* Conteúdo principal em coluna */
    }

    .content {
        margin: 10px; /* Margem menor em telas pequenas */
        padding: 15px;
    }

    /* Formulários e buscas também se tornam 100% de largura */
    form, .search-container {
        flex-direction: column;
        max-width: 95%; /* Ajusta para preencher mais a tela */
    }

    .form-group {
        flex: 1 1 100%; /* Cada campo ocupa 100% da largura em telas menores */
        min-width: unset; /* Remove a largura mínima */
    }

    table {
        font-size: 0.9em; /* Reduz a fonte da tabela */
        max-width: 98%; /* Ajusta para preencher mais a tela */
    }
    table th, table td {
        padding: 8px 10px;
    }
}

/* MODIFICAÇÃO PARA O BOTÃO SUBMIT:
  Esta regra tem alta especificidade para garantir que o estilo de link seja removido
  e que o botão seja estilizado corretamente, sobrepondo outras regras genéricas.
*/
div.form-container #evaluationForm button.submit-btn {
    text-decoration: none;
    background-color: #3498db;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

div.form-container #evaluationForm button.submit-btn:hover {
    background-color: #2980b9;
}

/* Estilo BÁSICO que dá formato ao botão */
.btn {
    padding: 8px 12px;
    border: 1px solid transparent;
    cursor: pointer;
    border-radius: 4px;
}

/* Regras de COR que dão a aparência */
.green-btn {
    background-color: #4CAF50;
    color: white;
}

.red-btn { /* Este é o que está faltando ou não está sendo aplicado */
    background-color: #F44336;
    color: white;
}

.blue-btn { /* Para o botão Editar */
    background-color: #2196F3;
    color: white;
}

/* Regra para posicionar os botões de Ação lado a lado */
.actions {
    display: flex; /* Habilita o Flexbox */
    flex-direction: row; /* Garante o fluxo horizontal */
    gap: 5px; /* Adiciona um pequeno espaço entre os botões */
    align-items: center; /* Alinha verticalmente os botões */
    flex-wrap: wrap; /* Permite que os botões quebrem para a linha de baixo, se necessário */
}

/* Opcional: Para evitar que o botão fique muito largo */
.actions .btn {
    white-space: nowrap; /* Garante que o texto do botão não quebre */
    flex-shrink: 0; /* Impede que o botão seja espremido demais */
}

/* Este seletor garante que o Flexbox se aplique à célula <td> que contém a classe 'actions' */
table.data-table td.actions, #questoes-table td.actions, #surveys-table td.actions, #movimentos-table td.actions,
#blocos-table td.actions{
    display: flex;
    flex-direction: row;      /* Alinha os botões horizontalmente */
    gap: 8px;                 /* Espaçamento entre os botões */
    align-items: center;      /* Alinha os botões verticalmente no centro */
    flex-wrap: nowrap;        /* Impede que o conteúdo quebre para a linha de baixo (mantém lado a lado) */
}

/* Regra para evitar que os botões internos ocupem toda a largura desnecessariamente */
.actions .btn {
    flex-shrink: 0;
}

/* Regras para a seção de Ações de Impressão */
.report-section.print-actions {
    /* Garante que o container ocupe a largura total da div .content */
    width: 100%;

    /* Esta regra é a que centraliza elementos de bloco ou inline-block */
    text-align: center;

    margin-top: 40px;
}

/* Opcional: Garante que o botão tenha um comportamento de bloco centralizável */
#exportPdfBtn {
    /* Faz o botão se comportar como um bloco para que text-align: center funcione,
       mas na verdade text-align: center deve bastar no pai (.print-actions) */
    margin: 0 auto;
}

/* ========================================================= */
/* ESTILOS PARA TELAS PEQUENAS (Max 768px - Smartphones/Tablets) */
/* ========================================================= */
@media (max-width: 768px) {

    /* 1. SIDEBAR MENU: Esconder ou Forçar Stack */
    .sidebar-menu {
        width: 100%;
        position: static; /* CRÍTICO: Desativa a posição fixa */
        height: auto;
        /* Adicione uma altura máxima e scroll aqui se for necessário */
    }

    /* 2. CONTEÚDO PRINCIPAL: Remover Margem Lateral */
    .content {
        margin-left: 0; /* CRÍTICO: Remove o offset de 250px da sidebar fixa */
        width: 100%;
        /* Ajuste o padding superior para que não haja um grande espaço em branco */
        padding-top: 60px;
    }

    /* 3. MENU LISTA: Ajustar itens do submenu */
    .sidebar-menu .submenu {
        padding-left: 15px; /* Reduz a indentação */
    }
}

/* ========================================================= */
/* ESTILOS PARA A PÁGINA DE INFORMAÇÕES DE USO (GUIA RÁPIDO) */
/* ========================================================= */

/* ------------------------------------
   1. ESTILO GERAL DE DESTAQUE
   ------------------------------------ */
.text-primary {
    color: #007bff !important; /* Cor principal do Bootstrap (apenas se for necessário garantir o override) */
}

/* ------------------------------------
   2. ESTILO DA SEÇÃO 3 (AVALIAÇÃO)
   ------------------------------------ */
#avaliacao .row > div {
    padding: 15px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}
#avaliacao .row > div:hover {
    transform: translateY(-5px); /* Efeito sutil ao passar o mouse */
}

/* ------------------------------------
   3. ESTILO DO FLUXO VISUAL (SEÇÃO 6)
   ------------------------------------ */
.flowchart {
    position: relative;
    padding-left: 20px; /* Espaço para a linha vertical */
}

/* Linha vertical que conecta os passos */
.flowchart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 40px; /* Ajuste para alinhar a linha */
    height: 100%;
    width: 3px;
    background-color: #dee2e6; /* Cinza claro */
    z-index: 0;
}

.flowchart .step {
    /* Mantém as regras anteriores... */
    position: relative;
    padding: 20px 20px 20px 60px; /* AJUSTE CHAVE: Aumenta o padding esquerdo para 60px */
    margin-bottom: 25px;
    background-color: #ffffff;
    border-left: 5px solid #007bff;
    z-index: 1;
}

/* Ponto de conexão (Círculo na linha) */
.flowchart .step::after {
    content: '';
    position: absolute;
    top: 25px; /* Ajustado um pouco mais para cima para centralizar */
    left: 31px; /* AJUSTE CHAVE: Garante que o círculo fique centralizado na linha vertical (40px) */
    width: 16px;
    height: 16px;
    background-color: #007bff;
    border: 4px solid #f8f9fa;
    border-radius: 50%;
    z-index: 3; /* Aumentamos o z-index para garantir que fique acima de outros elementos de fundo */
}

/* Estilos para títulos dos passos */
.flowchart .step h5 {
    font-weight: 600;
    color: #343a40;
    margin-top: 0;
}

/* ESTILOS PARA ALINHAMENTO DA LISTA DENTRO DOS CARDS (ITENS 4 E 5) */
.card-body .small {
    padding-left: 20px;     /* Indentação total da lista */
    margin-bottom: 0;
}

.card-body .small li {
    padding-left: 0;
    margin-left: -20px;     /* Puxa o conteúdo de volta para alinhar com o padding */
    position: relative;
    line-height: 1.5;
}

/* Garante que o ícone de check se comporte como o bullet */
.card-body .small li .fas {
    margin-right: 5px; /* Espaço entre o ícone e o texto */
    width: 15px;       /* Garante alinhamento consistente do ícone */
    text-align: center;
}

/* Estilos do Wizard */

.wizard-step { display: none; }
.wizard-step.active { display: block; }

.wizard-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    background: #eee;
    padding: 10px;
    border-radius: 8px;
}

.step-indicator {
    flex: 1;
    text-align: center;
    padding: 10px;
    color: #999;
    font-weight: bold;
    border-bottom: 3px solid transparent;
}

.step-indicator.active {
    color: #012391;
    border-bottom: 3px solid #012391;
}

.wizard-navigation {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}


/* Estilo base para todos os indicadores */
.step-indicator {
    flex: 1;
    text-align: center;
    padding: 12px 5px;
    margin: 0 5px;
    border-radius: 5px;
    background-color: #e9ecef; /* Cinza claro para inativas */
    color: #6c757d;           /* Texto cinza para inativas */
    font-weight: normal;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none !important;  /* Removemos a borda de baixo para usar o fundo cheio */
}

/* Estilo para a aba ATIVA (Azul escuro com letra branca) */
.step-indicator.active {
    background-color: #012391 !important; /* Azul escuro */
    color: #ffffff !important;           /* Letra branca */
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}