/* Altura máxima para a lista de vagas com barra de rolagem. Ajustei para dar mais espaço. */
.job-list-container {
    max-height: calc(100vh - 120px); /* Usando 120px para incluir mais margem e cabeçalho */
    overflow-y: auto;
    padding-right: 15px; /* Mantido o padding para o scrollbar */
    /* Garante que o container ocupe 100% da largura em mobile antes do breakpoint */
    width: 100%; 
}

/* Estilo do Item Individual da Vaga */
.job-item {
    cursor: pointer;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid #e7eaec;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s;
    /* Adicionando box-shadow sutil para dar profundidade, mas é opcional */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03); 
}

/* Efeito de Destaque no Hover e Ativo */
.job-item:hover {
    /* Mantido o hover mais leve que o ativo para diferenciação */
    background-color: #f9f9f9; 
}

.job-item.active {
    border-left: 4px solid #1c84c6; /* Azul Inspinia (Primary) para melhor contraste e destaque */
    background-color: #eaf6ff; /* Fundo mais claro e azulado para o ativo */
    border-color: #1c84c6; /* Borda lateral acompanhando a cor do left-border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra um pouco mais forte para o ativo */
}

/* Título da Vaga */
.job-title {
    font-size: 17px; /* Leve aumento para mais destaque */
    font-weight: 700; /* Mais negrito */
    color: #1c84c6; /* Usando o azul Inspinia para o título */
    margin-bottom: 3px; /* Reduzido para aproximar do subtítulo */
    margin-top: 0;
    line-height: 1.2;
}

/* Empresa e Localização */
.job-company-location {
    font-size: 12px; /* Leve redução para parecer um subtítulo */
    color: #888;
    margin-bottom: 5px;
}

/* Snippet da Descrição */
.job-snippet {
    font-size: 13px; /* Leve ajuste no tamanho */
    color: #676a6c;
    /* Ajuste para 1 linha com altura definida pelo line-height */
    max-height: 1.2em; 
    line-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Painel de Detalhes da Vaga */
.job-detail-panel {
    background-color: #fff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    /* Mantido o scroll para desktop */
    max-height: calc(100vh - 120px); 
    overflow-y: auto;
}

/* Detalhe da vaga: cabeçalho da mídia */
.job-detail-panel .media-body {
    padding-left: 15px; /* Adiciona espaço entre a imagem e o texto */
}

/* LÓGICA MOBILE: MASTER-DETAIL TOGGLE (Mantida a lógica original do seu JS/Pug) */
@media (max-width: 991px) {

    /* Em mobile, remove a altura máxima e scrollbar para que o painel se ajuste ao conteúdo */
    .job-list-container, .job-detail-panel {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }

    /* Oculta o painel de detalhes por padrão em mobile */
    #job-details-wrapper {
        display: none;
        width: 100%;
    }

    /* Quando a classe 'mobile-view-details' está ativa (via JS), esconde a lista e mostra os detalhes */
    .mobile-view-details #job-list-wrapper {
        display: none;
    }

    .mobile-view-details #job-details-wrapper {
        display: block;
    }

    /* Torna o botão voltar sempre visível em mobile */
    .btn-mobile-back {
        display: inline-block !important;
    }
}

/* Oculta o botão voltar em desktop */
.btn-mobile-back {
    display: none;
}

/* Estilo Base para os Chips de Benefício (Sem alteração) */
.beneficio-chip {
    display: block; 
    padding: 8px 0;
    margin-bottom: 5px; 
    font-size: 14px;
    font-weight: 500;
}

/* Estilo para Benefícios Presentes na Vaga (Destaque) (Sem alteração) */
.beneficio-presente {
    color: #333; 
    opacity: 1;
    font-weight: 600; 
}

/* Ícone de check para o benefício presente (Sem alteração) */
.beneficio-presente i {
    color: #1ab394; 
}

/* ------------------------------------------------ */
/* AJUSTE: Benefícios Ausentes (Cor Mais Clara) */
/* ------------------------------------------------ */
.beneficio-ausente {
    /* Cor cinza muito clara (próxima ao fundo) */
    color: #c9c9c9; 
    /* Reduz a opacidade ainda mais, para um efeito "quase transparente" */
    opacity: 0.5; 
    font-weight: 500;
}

/* Ícone de círculo para o benefício ausente (Mais discreto) */
.beneficio-ausente i {
    color: #e0e0e0; /* Cor muito clara para o ícone de círculo */
}

/* Aumenta o tamanho da fonte para todos os parágrafos dentro da descrição completa */
.detalhes-completos p {
    font-size: 15px; /* Aumentado de 14px para 15px (ou use 16px se quiser maior) */
    line-height: 1.6; /* Aumenta a altura da linha para facilitar a leitura */
    color: #7c7e7d;    /* Cor mais escura para melhor contraste */
}

/* Mantém os títulos da descrição (criados com ###) com um tamanho apropriado */
.detalhes-completos h4 {
    font-size: 18px; /* Títulos menores */
    font-weight: 700;
    color: #2f4050;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Garante que o texto em negrito (criado com **) também use a nova fonte */
.detalhes-completos p.font-bold {
    font-size: 15px; /* Alinhado com o texto principal */
}
/* ------------------------------------------------ */
/* ESTILIZAÇÃO DOS TÍTULOS PRINCIPAIS DA SEÇÃO */
/* ------------------------------------------------ */

/* Aplica-se aos títulos "Descrição da Vaga" e "Benefícios Oferecidos" */
.ibox-content h3 {
    /* Cor de título mais forte do Inspinia */
    color: #2f4050; 
    
    /* Garante que seja negrito */
    font-weight: 700; 
    
    /* Aumenta levemente o tamanho para separá-lo do conteúdo h4 */
    font-size: 20px; 
    
    /* Adiciona margem na parte inferior para separar do conteúdo */
    margin-bottom: 15px; 
}

/* Garante que o container do menu de perfil se alinhe corretamente ao lado do breadcrumb */
.user-profile-menu {
    /* Ajuste para que o topo do menu coincida com o topo do breadcrumb */
    padding-top: 15px; 
}

/* Estilização da imagem de perfil */
.profile-photo {
    width: 38px;      /* Tamanho padrão para foto de perfil em barras superiores */
    height: 38px;
    border: 2px solid #ccc; /* Uma pequena borda sutil */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorção */
    vertical-align: middle;
}

/* Estilo do link de clique (para alinhar o ícone e a foto) */
.profile-link {
    display: flex;
    align-items: center;
    text-decoration: none !important; /* Remove sublinhado se houver */
}

/* Estilo da seta (fa-angle-down) */
.profile-link .fa-angle-down {
    font-size: 16px;
    color: #444; /* Cor mais escura */
}

/* Posiciona o menu flutuante corretamente */
.dropdown-menu-right {
    right: auto;
    left: 0;
}

/* Estiliza os links do menu flutuante */
.dropdown-menu-right a {
    font-size: 14px;
    padding: 8px 15px;
}

.dropdown-menu-right .fa {
    margin-right: 8px; /* Espaçamento entre ícone e texto */
    color: #1ab394; /* Cor verde Inspinia para os ícones */
}

.user-profile-menu .dropdown-menu {
    /* Remove qualquer margem vertical padrão que possa estar empurrando */
    margin-top: 0 !important; 
    
    /* Adiciona um pequeno espaço para descer o menu e não cobrir a foto */
    top: 100%; 
    
    /* Z-index pode ser necessário para garantir que ele fique na frente de outros elementos, mas geralmente o padrão é suficiente. */
}

.header-title-container {
    display: flex; 
    align-items: center; 
    margin-bottom: 5px; 
}

/* Estilização da Logo com tamanho fixo 96x96 */
.page-logo {
    /* Define o tamanho exato solicitado */
    height: 96px; 
    width: 96px; 
    
    /* Garante que a imagem preencha o espaço sem distorção (se for maior/menor) */
    object-fit: cover; 
    
    margin-right: 15px; /* Espaço entre a logo e o texto */
}

/* Estilização do Título (h2) (Mantida a hierarquia) */
h2.page-title {
    margin-top: 0; 
    margin-bottom: 0; 
    font-weight: 700;
    color: #2f4050; 
}

/* Cor padrão do botão */
.ibox-content .btn-primary {
    background-color: #1a75bb; /* Novo Azul: #1a75bb */
    border-color: #1a75bb;
    color: #FFF;
}

/* Efeito ao passar o mouse (Hover) */
.ibox-content .btn-primary:hover,
.ibox-content .btn-primary:focus,
.ibox-content .btn-primary:active {
    /* Sugestão: um tom ligeiramente mais escuro para o hover */
    background-color: #1765a0 !important; 
    border-color: #1765a0 !important;
    color: #FFF;
    opacity: 0.9;
}

/* Sobrescreve a cor e adiciona negrito para a linha da empresa/remuneração */
/* O seletor .ibox-content p.text-navy garante que apenas essa linha seja afetada */
.ibox-content p.text-navy {
    /* Cor solicitada */
    color: #5e0909 !important; 
    
    /* Aplica negrito */
    font-weight: 700; 
    
    /* Garante que o ícone também use a cor */
    /* Você pode adicionar estilos específicos para o ícone se ele não herdar a cor, mas geralmente herda: */
    /*
    .ibox-content p.text-navy i {
        color: #5e0909; 
    }
    */
}

.wizard > .content > .body {
    overflow-y: auto !important;
}