/* ================================================================== */
/* ADMIN STYLE - VERSÃO CONSOLIDADA E OTIMIZADA          */
/* ================================================================== */

/* --- 1. ESTILOS GERAIS E BASE --- */
:root {
    --cor-primaria: #005A9C;
    --cor-primaria-fundo: #004A7C;
    --cor-sidebar-fundo: #1e293b;
    --cor-sidebar-texto: #cbd5e1;
    --cor-sidebar-texto-hover: #ffffff;
    --cor-sidebar-fundo-hover: #334155;
    --cor-sidebar-ativo-borda: #3b82f6;
    --cor-fundo-pagina: #f4f7fa;
    --cor-container-fundo: #ffffff;
    --cor-borda-padrao: #dee2e6;
    --cor-fundo-hover: #f1f3f5;
    --cor-texto-padrao: #333;
    --cor-sucesso: #155724;
    --fundo-sucesso: #d4edda;
    --borda-sucesso: #c3e6cb;
    --cor-erro: #721c24;
    --fundo-erro: #f8d7da;
    --borda-erro: #f5c6cb;
    --raio-borda: 6px;
    --sombra-padrao: 0 4px 15px rgba(0,0,0,0.07);
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    color: var(--cor-texto-padrao);
    background-color: var(--cor-fundo-pagina);
    display: flex; /* Essencial para o layout com sidebar */
    flex-direction: row;
}

h1, h2 {
    color: var(--cor-primaria);
    margin-top: 0;
}

h3 {
    font-size: 18px;
    color: var(--cor-primaria-fundo);
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--cor-borda-padrao);
    padding-bottom: 10px;
}

/* --- 2. LAYOUT PRINCIPAL (SIDEBAR + CONTEÚDO) --- */

.admin-sidebar {
    width: 260px;
    height: 100vh;
    background-color: var(--cor-sidebar-fundo);
    color: var(--cor-sidebar-texto);
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-main-content {
    flex-grow: 1;
    height: 100vh;
    overflow-y: auto;
    width: calc(100% - 260px);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-container {
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 40px;
    flex-grow: 1; /* Empurra o footer para baixo */
}

footer {
    text-align: center;
    padding: 20px 15px;
    margin-top: auto;
    font-size: 13px;
    color: #5a6878;
    background-color: #e9ecef;
    border-top: 1px solid var(--cor-borda-padrao);
}
footer p { margin: 5px 0; }


/* --- 3. COMPONENTES DO SIDEBAR --- */

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px;
    height: 90px; /* Altura fixa para consistência */
}
.brand-icon {
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
    color: var(--cor-sidebar-texto-hover);
    flex-shrink: 0;
}
.brand-text-container {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
}
.brand-line-1 { font-size: 1.3rem; font-weight: 700; line-height: 1.1; color: var(--cor-sidebar-texto-hover); }
.brand-line-2 { font-size: 1.1rem; font-weight: 400; line-height: 1.2; color: #e2e8f0; }

.sidebar-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 20px;
}

.sidebar-nav {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px 0;
}
.sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    padding: 14px 25px;
    color: var(--cor-sidebar-texto);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    border-left: 4px solid transparent;
    gap: 15px;
    white-space: nowrap;
}
.sidebar-nav a:hover {
    background-color: var(--cor-sidebar-fundo-hover);
    color: var(--cor-sidebar-texto-hover);
}
.sidebar-nav a.active {
    background-color: var(--cor-sidebar-fundo-hover);
    color: var(--cor-sidebar-texto-hover);
    font-weight: 600;
    border-left-color: var(--cor-sidebar-ativo-borda);
}
.sidebar-nav i[data-lucide] {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    flex-shrink: 0;
}

.sidebar-footer {
    margin-top: auto;
    padding: 12px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.user-profile-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cor-sidebar-texto); flex-grow: 1; min-width: 0; }
.user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #475569; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.user-avatar i[data-lucide] { width: 22px; height: 22px; color: #e2e8f0; }
.user-details { display: flex; flex-direction: column; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-name { font-weight: 600; color: var(--cor-sidebar-texto-hover); }
.user-role { font-size: 0.8rem; color: #94a3b8; }

.sidebar-controls { display: flex; align-items: center; gap: 5px; }
.control-btn { background: none; border: none; color: #94a3b8; padding: 8px; border-radius: var(--raio-borda); cursor: pointer; transition: background-color 0.2s, color 0.2s; display: inline-flex; text-decoration: none; }
.control-btn:hover { background-color: #475569; color: var(--cor-sidebar-texto-hover); }


/* --- 4. ESTADO DO MENU RECOLHIDO --- */
body.sidebar-collapsed .admin-sidebar { width: 80px; }
body.sidebar-collapsed .admin-main-content { width: calc(100% - 80px); }

body.sidebar-collapsed .brand-text-container,
body.sidebar-collapsed .sidebar-divider,
body.sidebar-collapsed .nav-item-label,
body.sidebar-collapsed .user-details {
    display: none;
}
body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 25px 0; }
body.sidebar-collapsed .brand-icon { width: 32px; height: 32px; }
body.sidebar-collapsed .sidebar-nav a { justify-content: center; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .sidebar-footer { flex-direction: column; justify-content: center; padding: 15px 0; gap: 15px; }
body.sidebar-collapsed .user-profile-link { justify-content: center; }
body.sidebar-collapsed .sidebar-controls { border: none; padding: 0; }


/* --- 5. COMPONENTES COMUNS (Botões, Alertas, Formulários) --- */

/* Alertas e Mensagens */
.message-feedback {
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: var(--raio-borda);
    font-size: 14px;
    border: 1px solid transparent;
}
.message-feedback.success { color: var(--cor-sucesso); background-color: var(--fundo-sucesso); border-color: var(--borda-sucesso); }
.message-feedback.error { color: var(--cor-erro); background-color: var(--fundo-erro); border-color: var(--borda-erro); }
.message-feedback.info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }

/* Botões */
.btn {
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--raio-borda);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}
.btn-primary { background-color: #0d6efd; color: white; }
.btn-primary:hover { background-color: #0b5ed7; }
.btn-success { background-color: #28a745; color: white; }
.btn-success:hover { background-color: #218838; }
.btn-secondary { background-color: #6c757d; color: white; }
.btn-secondary:hover { background-color: #5c636a; }

/* Formulários */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: var(--raio-borda);
    box-sizing: border-box;
    font-size: 14px;
}
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--cor-sidebar-ativo-borda);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}
.form-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--cor-borda-padrao);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* --- 6. COMPONENTES ESPECÍFICOS (Tabelas, Cards, Busca, Paginação) --- */

/* Tabelas */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
th, td { border: 1px solid var(--cor-borda-padrao); padding: 12px 15px; text-align: left; font-size: 14px; vertical-align: middle; }
th { background-color: #e9ecef; font-weight: 500; color: #495057; }
tr:nth-child(even) { background-color: #f8f9fa; }
tr:hover { background-color: var(--cor-fundo-hover); }

.actions-icons { text-align: center; white-space: nowrap; display: flex; align-items: center; gap: 12px; justify-content: center; }
.actions-icons a { display: inline-block; padding: 5px; text-decoration: none; border-radius: 4px; line-height: 1; transition: transform 0.2s; }
.actions-icons a:hover { transform: scale(1.15); }
.actions-icons .edit-icon { color: #17a2b8; }
.actions-icons .delete-icon { color: #dc3545; }
.actions-icons svg { width: 20px; height: 20px; stroke-width: 2.2; }

/* Cards do Dashboard */
.dashboard-stats { display: flex; flex-wrap: wrap; gap: 25px; margin-bottom: 30px; }
.stat-card { background-color: var(--cor-container-fundo); border: 1px solid #e7eaf3; border-radius: var(--raio-borda); padding: 25px; flex: 1; min-width: 220px; box-shadow: var(--sombra-padrao); display: flex; align-items: center; }
.stat-card-info h3 { font-size: 15px; color: #555e6d; margin: 0 0 5px 0; font-weight: 500; text-transform: uppercase; border: none; padding: 0; }
.stat-card-info .stat-number { font-size: 32px; font-weight: 700; color: var(--cor-primaria-fundo); margin: 0; line-height: 1.1; }

/* Busca */
.search-container { margin: 20px 0; padding: 15px; background-color: #f8f9fa; border: 1px solid var(--cor-borda-padrao); border-radius: var(--raio-borda); }
.search-container form { display: flex; gap: 10px; align-items: center; }
.search-container input[type="text"] { flex-grow: 1; }

/* Paginação */
.pagination-container { margin-top: 30px; text-align: center; }
.pagination-container a { color: var(--cor-sidebar-ativo-borda); text-decoration: none; padding: 8px 12px; margin: 0 4px; border: 1px solid var(--cor-borda-padrao); border-radius: 4px; transition: background-color 0.2s, color 0.2s; }
.pagination-container a:hover { background-color: var(--cor-fundo-hover); }
.pagination-container a.active { background-color: var(--cor-sidebar-ativo-borda); color: white; border-color: var(--cor-sidebar-ativo-borda); cursor: default; }


/* --- 7. RESPONSIVIDADE (MOBILE) --- */
@media screen and (max-width: 992px) {
    /* Esconde o menu em telas menores e o conteúdo ocupa tudo */
    .admin-sidebar {
        position: fixed;
        left: -260px; /* Esconde o menu fora da tela */
        z-index: 1100;
        transition: left 0.3s ease-in-out;
    }
    body.sidebar-mobile-visible .admin-sidebar {
        left: 0; /* Mostra o menu */
    }
    .admin-main-content {
        width: 100%; /* Conteúdo ocupa toda a tela */
    }
    /* Adicionar um botão "hambúrguer" para controlar a visibilidade */
    #mobile-menu-toggle {
        display: block; /* Mostrar o botão em mobile */
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1200;
        /* Estilize o botão como preferir */
    }
    body.sidebar-mobile-visible #mobile-menu-toggle {
        left: 275px; /* Empurra o botão junto com o menu */
    }
}

@media screen and (max-width: 768px) {
    .admin-container {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }
    h1 { font-size: 22px; }

    /* Tabelas Responsivas */
    table thead { display: none; }
    table tr { display: block; margin-bottom: 20px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #fff; }
    table td { display: flex; justify-content: space-between; align-items: center; text-align: right; border-bottom: 1px solid #f1f1f1; }
    table td:last-child { border-bottom: 0; }
    table td:before { content: attr(data-label); font-weight: bold; color: #333; text-align: left; padding-right: 15px; }
    td[data-label="Ações"]:before { display: none; }

    /* Formulários e Busca */
    .search-container form { flex-direction: column; align-items: stretch; }
    .search-container .btn { width: 100%; }
}

/* ================================================================== */
/* BLOCO DE COMPATIBILIDADE E CORREÇÕES (PÓS-REFATORAÇÃO) */
/* Adicione este bloco ao FINAL do seu arquivo CSS.          */
/* ================================================================== */

/* --- 1. Correção do Container Principal --- */
/* Isso devolve o fundo branco e a sombra para a área de conteúdo. */
.admin-container {
    background-color: var(--cor-container-fundo);
    border-radius: 8px;
    box-shadow: var(--sombra-padrao);
}

/* --- 2. Estilos dos botões antigos --- */
/* Restaura a aparência dos botões de formulários e links. */

/* Botão "Filtrar" e links como "Adicionar Usuário" */
.btn-secondary,
.add-user-link,
.search-container button {
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--raio-borda);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    background-color: #0d6efd;
    color: white;
}
.btn-secondary:hover,
.add-user-link:hover,
.search-container button:hover {
    background-color: #0b5ed7;
}

/* Botão "Salvar" e "Confirmar" */
.btn-confirm {
    padding: 12px 25px;
    border: none;
    border-radius: var(--raio-borda);
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    background-color: #28a745;
    color: white;
}
.btn-confirm:hover {
    background-color: #218838;
}

/* Botão "Cancelar" e "Limpar Filtros" */
.btn-cancel,
.search-container .clear-search-link {
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--raio-borda);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    background-color: #6c757d;
    color: white;
}
.btn-cancel:hover,
.search-container .clear-search-link:hover {
    background-color: #5c636a;
}
/* Ajuste para o link "Limpar Filtros" não ter fundo de botão */
.search-container a.clear-search-link {
    background-color: transparent;
    color: #0d6efd;
    padding: 0;
}
.search-container a.clear-search-link:hover {
    text-decoration: underline;
}

/* --- 3. Estilos do Dashboard (Ações Rápidas e Atividades) --- */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.quick-links h2, .activity-feed h2, .chart-container h2 {
    font-size: 18px;
    color: var(--cor-primaria-fundo);
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--cor-borda-padrao);
    padding-bottom: 10px;
}

.quick-link-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: var(--raio-borda);
    margin-bottom: 10px;
    text-decoration: none;
    color: var(--cor-texto-padrao);
    font-weight: 500;
    transition: background-color 0.2s, box-shadow 0.2s;
}
.quick-link-item:hover {
    background-color: #e9ecef;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.quick-link-item svg {
    margin-right: 15px;
    color: var(--cor-primaria);
    width: 22px;
    height: 22px;
}

.activity-feed ul { list-style: none; padding: 0; margin: 0; }
.activity-feed li { display: flex; align-items: center; padding: 12px 0; }
.activity-feed li:not(:last-child) { border-bottom: 1px solid #f1f3f5; }
.activity-icon { margin-right: 15px; color: #6c757d; }
.activity-details p { margin: 0; font-size: 14px; line-height: 1.4; }
.activity-details small { color: #6c757d; font-size: 12px; }


/* --- 4. Correção dos Gráficos --- */
/* O gráfico sumiu porque o container precisa de uma altura definida. */
.chart-container {
    background-color: var(--cor-container-fundo);
    padding: 20px;
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-padrao);
    height: 350px; /* ALTURA RESTAURADA */
    width: 100%;
    position: relative;
}
.chart-container canvas {
    max-width: 100% !important;
}

/* --- 5. Correção de Hierarquia e Permissões --- */

.colaborador-nome-hierarquia { display: flex; align-items: center; }
.colaborador-nome-hierarquia .hierarquia-simbolo { margin-right: 8px; color: #888; font-size: 1.2em; }

.permission-group {
    border: 1px solid var(--cor-borda-padrao);
    border-radius: var(--raio-borda);
    padding: 20px;
    margin-bottom: 25px;
}
.permission-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 10px;
}

/* ================================================================== */
/* BLOCO FINAL DE CORREÇÃO (MODAL + ÍCONES DE AÇÃO)       */
/* Adicione este bloco ao FINAL do seu arquivo CSS.         */
/* ================================================================== */

/* --- 1. Estilos para o Modal "Alterar Chefe" --- */
/* Isso fará com que o painel volte a se comportar como um pop-up. */

.modal-overlay {
    position: fixed; /* Fica por cima de todo o conteúdo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo escurecido */
    display: none; /* O MODAL COMEÇA ESCONDIDO */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Garante que fique na frente de tudo */
}

/* Adicione esta classe via JavaScript para MOSTRAR o modal */
.modal-overlay.visible {
    display: flex;
}

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
}

.modal-header {
    border-bottom: 1px solid var(--cor-borda-padrao);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    color: var(--cor-primaria-fundo);
    border: none; /* Remove a borda do H3 padrão */
}

.modal-footer {
    text-align: right;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--cor-borda-padrao);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}


/* --- 2. Estilos para os Botões de Ação na Tabela --- */
/* Isso restaura a aparência de ÍCONE para o botão "Alterar Chefe". */

.acoes-colaborador {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza os ícones na célula */
    gap: 12px;
}

/* A REGRA MAIS IMPORTANTE PARA OS ÍCONES */
.acoes-colaborador a,
.acoes-colaborador button {
    background: none !important; /* Remove o fundo do botão */
    border: none !important; /* Remove a borda do botão */
    color: #337ab7;
    cursor: pointer;
    padding: 5px; /* Adiciona uma área de clique */
    margin: 0;
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
}

.acoes-colaborador a:hover,
.acoes-colaborador button:hover {
    color: #23527c;
    background-color: #e9ecef; /* Adiciona um fundo sutil ao passar o mouse */
}

/* ================================================================== */
/* AJUSTE FINAL - RODAPÉ DO MENU RECOLHIDO                */
/* ================================================================== */

/* Altera o layout do rodapé para vertical quando o menu está recolhido */
body.sidebar-collapsed .sidebar-footer {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    gap: 10px; /* Espaço entre o avatar e o bloco de controles */
}

/* Garante que o link do perfil ocupe apenas o espaço do avatar */
body.sidebar-collapsed .user-profile-link {
    margin: 0;
    padding: 0;
}

/* Empilha os botões de controle (Sair e Recolher) */
body.sidebar-collapsed .sidebar-controls {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espaço entre o botão de sair e o de recolher */
}

/* Opcional: Gira o ícone de recolher para "apontar" para fora */
body.sidebar-collapsed #sidebar-toggle .lucide-chevrons-left {
    transform: rotate(180deg);
}

/* ================================================================== */
/* AJUSTE FINAL 2 - ESPAÇAMENTO DO RODAPÉ RECOLHIDO       */
/* ================================================================== */

/* Diminui o espaço entre o avatar e os botões de controle */
body.sidebar-collapsed .sidebar-footer {
    gap: 8px; /* Era 12px ou 15px, agora menor */
}

/* Diminui o espaço entre o botão de sair e o de recolher */
body.sidebar-collapsed .sidebar-controls {
    gap: 8px; /* Era 12px, agora menor */
}

/* ================================================================== */
/* AJUSTE DE LAYOUT - RODAPÉ DO MENU (USUÁRIO ACIMA DOS ÍCONES) */
/* ================================================================== */

/* 1. Altera o container principal do rodapé para empilhar os itens */
.sidebar-footer {
    flex-direction: column; /* Força o empilhamento vertical */
    align-items: stretch;   /* Faz os filhos ocuparem a largura total */
    padding: 0;             /* Remove o padding antigo para controle total */
    gap: 0;                 /* Remove o espaçamento antigo */
}

/* 2. Estiliza a nova área de informações do usuário */
.sidebar-user-info {
    padding: 12px 15px; /* Adiciona um respiro interno */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Linha divisória */
    transition: background-color 0.2s;
}

/* Efeito hover para a área do usuário */
.sidebar-user-info:hover {
    background-color: var(--cor-sidebar-fundo-hover);
}

/* 3. Estiliza a área dos botões de controle */
.sidebar-controls {
    display: flex;
    justify-content: space-around; /* Distribui os 3 ícones igualmente */
    align-items: center;
    padding: 6px 0; /* Um pequeno padding vertical */
}

/* 4. Garante que, quando o menu for recolhido, o layout se ajuste */
body.sidebar-collapsed .sidebar-user-info {
    padding: 10px 0;
    border-bottom: none; /* Remove a borda no modo recolhido */
}

body.sidebar-collapsed .user-profile-link {
    justify-content: center; /* Centraliza o ícone do avatar */
}

body.sidebar-collapsed .sidebar-controls {
    flex-direction: column; /* Empilha os 3 ícones verticalmente */
    gap: 12px;
    padding-bottom: 12px;
}

/* ================================================================== */
/* AJUSTE FINO - REMOVER SCROLLBAR DO MENU RECOLHIDO          */
/* ================================================================== */

/* O problema: O espaçamento (gap) entre os ícones do rodapé no modo
  recolhido estava muito grande, causando uma barra de rolagem.
  A solução: Reduzir o 'gap' e o 'padding' para que tudo caiba na tela.
*/

/* Alvo 1: O container principal do rodapé (que tem o avatar e o bloco de controles) */
body.sidebar-collapsed .sidebar-footer {
    gap: 8px; /* ANTES: 12px ou mais. Reduzimos o espaço entre o avatar e os botões. */
    padding-top: 8px;
    padding-bottom: 8px; /* ANTES: 15px. Reduzimos o respiro geral. */
}

/* Alvo 2: O container dos 3 botões de controle (Trocar, Sair, Menu) */
body.sidebar-collapsed .sidebar-controls {
    gap: 8px; /* ANTES: 12px. Reduzimos o espaço entre os próprios ícones de controle. */
}

/* ================================================================== */
/* LAYOUT MODERNIZADO - GRUPOS DE PERMISSÃO EXPANSÍVEIS         */
/* ================================================================== */

/* Container principal do grupo de permissão */
.permission-group {
    background-color: #fff;
    border: 1px solid var(--cor-borda-padrao);
    border-radius: var(--raio-borda);
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

/* Cabeçalho clicável do grupo */
.permission-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    user-select: none; /* Impede que o texto seja selecionado ao clicar */
}

/* Efeito de hover no cabeçalho */
.permission-group-header:hover {
    background-color: #f8f9fa;
}

/* Título e ícone no cabeçalho */
.permission-group-header .header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.permission-group-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--cor-primaria-fundo);
}
.permission-group-header .toggle-icon {
    color: var(--cor-primaria);
}

/* Links "Marcar/Desmarcar Todos" */
.permission-group-controls a {
    font-size: 12px;
    color: var(--cor-sidebar-ativo-borda);
    text-decoration: none;
    font-weight: 500;
}
.permission-group-controls a:hover {
    text-decoration: underline;
}
.permission-group-controls span {
    margin: 0 5px;
    color: var(--cor-borda-padrao);
}

/* Corpo do grupo (a parte que colapsa) */
.permission-group-body {
    padding: 0 20px; /* Padding horizontal, vertical será controlado pelo max-height */
    overflow: hidden;
    max-height: 1000px; /* Um valor alto para quando estiver aberto */
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
}

/* ESTADO RECOLHIDO (COLLAPSED) */
.permission-group.collapsed .permission-group-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Lógica para mostrar/esconder o ícone de + e - */
.permission-group .icon-minus { display: inline-block; }
.permission-group .icon-plus { display: none; }

.permission-group.collapsed .icon-minus { display: none; }
.permission-group.collapsed .icon-plus { display: inline-block; }


/* Estilos internos dos checkboxes (ajustados) */
.permission-checkbox {
    display: flex;
    gap: 12px;
    padding: 15px 10px;
    border-top: 1px solid #f1f3f5;
    align-items: flex-start;
}
.permission-checkbox:first-child {
    border-top: none;
}
.permission-checkbox .permission-details {
    display: flex;
    flex-direction: column;
}
.permission-checkbox strong {
    font-size: 14px;
    font-weight: 500;
}
.permission-checkbox small {
    font-size: 12px;
    color: #6c757d;
}

/* ================================================================== */
/* REFINAMENTO VISUAL - PÁGINA DE PERMISSÕES                    */
/* ================================================================== */

/* 1. Tornar as caixas mais compactas (menos padding interno) */
/* ---------------------------------------------------------- */

/* Alvo: Cabeçalho do grupo de permissão */
.permission-group-header {
    padding: 12px 20px; /* ANTES: 15px 20px. Isso diminui a altura do cabeçalho. */
}

/* Alvo: Corpo do grupo (a parte que abre) */
.permission-group-body {
     /* Adiciona um respiro na parte de baixo para não colar na borda */
    padding-bottom: 5px;
}

/* Alvo: Cada linha de permissão individual */
.permission-checkbox {
    /* ANTES: 15px 10px. Diminuímos o padding vertical de cada linha,
       o que terá o maior impacto em "encolher" a caixa quando aberta. */
    padding: 10px 10px;
}


/* 2. Melhorar o visual dos links "Marcar/Desmarcar Todos" */
/* ---------------------------------------------------------- */

/* Alvo: O container dos links */
.permission-group-controls {
    /* Adicionamos um gap para espaçar os "botões" sem precisar do "|" */
    gap: 8px; 
}

/* Alvo: Os links em si, transformando-os em "pílulas" (pills) */
.permission-group-controls a {
    font-size: 11px;
    font-weight: 500;
    padding: 5px 12px;           /* Aumenta a área interna para parecer um botão */
    border-radius: 15px;         /* Deixa as bordas bem arredondadas */
    background-color: #eef2f7;   /* Um fundo cinza bem claro, da cor do fundo da página */
    color: #495057;              /* Cor do texto um pouco mais escura */
    border: 1px solid #dee2e6;   /* Borda sutil */
    transition: all 0.2s ease;   /* Animação suave */
}

/* Efeito ao passar o mouse por cima */
.permission-group-controls a:hover {
    background-color: #dee2e6;
    border-color: #adb5bd;
    color: #212529;
    text-decoration: none; /* Remove o sublinhado do hover */
}

/* Alvo: A barrinha "|" que separava os links */
.permission-group-controls span {
    display: none; /* Não precisamos mais dela, o 'gap' já faz a separação */
}

/* ================================================================== */
/* ESTILO PARA O BADGE DE NOTIFICAÇÃO (USUÁRIOS PENDENTES)      */
/* Adicione este bloco ao final do seu arquivo admin_style.css    */
/* ================================================================== */

.quick-link-item .badge {
    margin-left: auto; /* Empurra o badge para a direita */
    background-color: #dc3545; /* Cor vermelha para destaque */
    color: white;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 50%; /* Deixa o formato perfeitamente redondo */
    min-width: 24px; /* Garante que mesmo com 1 dígito, o círculo tenha um tamanho bom */
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ================================================================== */
/* LAYOUT DE GRID PARA FORMULÁRIOS (FILTROS)                  */
/* ================================================================== */

.form-grid-container {
    display: grid;
    /* Cria colunas responsivas: no mínimo 250px de largura, 
       mas se ajustam para preencher o espaço (1fr) */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px; /* Espaçamento entre os campos de filtro */
    align-items: end; /* Alinha os itens na parte de baixo do grid */
}

/* ========================================================== */
/* ESTILOS PARA MODAL DE VINCULAÇÃO DE MATRÍCULA      */
/* ========================================================== */
.actions-icons .btn-vincular {
    background: none;
    border: none;
    color: #28a745; /* Verde */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}
.actions-icons .btn-vincular:hover {
    background-color: #e9ecef;
}
.actions-icons .btn-vincular span {
    vertical-align: middle;
}
.close-modal-btn {
    background: none;
    border: none;
    font-size: 28px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    line-height: 1;
}
#resultados-busca-sra .resultado-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
#resultados-busca-sra .resultado-item:last-child {
    border-bottom: none;
}
#resultados-busca-sra .resultado-item:hover {
    background-color: #f8f9fa;
}
.feedback-modal {
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
}
.feedback-modal.success { color: #155724; background-color: #d4edda; }
.feedback-modal.error { color: #721c24; background-color: #f8d7da; }

/* ========================================================== */
/* LAYOUT PARA PÁGINA DE EDIÇÃO DE USUÁRIO (2 COLUNAS)  */
/* ========================================================== */
.edit-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas de tamanho igual */
    gap: 30px; /* Espaçamento entre as colunas */
}

.info-card {
    background-color: #f8f9fa; /* Fundo levemente acinzentado */
    border: 1px solid #e9ecef;
    border-radius: var(--raio-borda);
    padding: 25px;
}

.info-card h3 {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}

.info-card .info-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f3f5;
}
.info-card .info-item:last-child {
    border-bottom: none;
}
.info-card .info-item strong {
    color: #495057;
}
.info-card .info-item span {
    color: #212529;
    text-align: right;
}

/* Responsividade para telas menores */
@media (max-width: 992px) {
    .edit-layout-grid {
        grid-template-columns: 1fr; /* Uma coluna em telas menores */
    }
}

/* ========================================================== */
/* ESTILOS PARA OPÇÕES DE RÁDIO (SYNC PAGE)             */
/* ========================================================== */
.radio-option {
    display: flex; /* Ativa o Flexbox, a base do alinhamento */
    align-items: flex-start; /* Alinha os itens pelo topo */
    gap: 10px; /* Cria um espaço entre o botão e o bloco de texto */
    padding: 15px 10px;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.radio-option:hover {
    background-color: #f0f0f0;
}

.radio-option input[type="radio"] {
    flex-shrink: 0; /* Impede que o botão encolha */
    width: 18px;
    height: 18px;
    margin-top: 2px; /* Pequeno ajuste para alinhar perfeitamente com o texto */
}

.radio-label-group {
    display: flex;
    flex-direction: column; /* Empilha o label e o small verticalmente */
}

.radio-label-group label {
    font-size: 14px;
    cursor: pointer;
    color: #333;
}

.radio-label-group small {
    font-size: 13px;
    color: #6c757d;
    line-height: 1.4;
    cursor: pointer;
}

/* ========================================================== */
/* AJUSTES VISUAIS PARA CARDS DE KPI DO DASHBOARD     */
/* ========================================================== */
.stat-card {
    /* Reforça o alinhamento vertical ao centro */
    align-items: center; 
    gap: 20px; /* Adiciona um espaço maior entre o ícone e o texto */
}

.stat-card i[data-lucide] {
    /* Aumenta o tamanho do ícone e o torna mais sutil */
    width: 36px;
    height: 36px;
    stroke-width: 1.5;
    color: var(--cor-primaria);
    flex-shrink: 0; /* Impede que o ícone seja esmagado */
}

.stat-card .stat-number {
    line-height: 1; /* Garante que o número grande não tenha espaçamento extra */
}

/* ========================================================== */
/* EFEITO HOVER PARA CARDS CLICÁVEIS (DASHBOARD)      */
/* ========================================================== */
a.stat-card-link {
    text-decoration: none;
    color: inherit; /* Herda a cor do texto normal */
    display: block;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

a.stat-card-link:hover {
    transform: translateY(-4px); /* Efeito de "levantar" o card */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* Sombra mais pronunciada */
}

.pagination-ellipsis {
    padding: 8px 12px;
    margin: 0 4px;
    color: #6c757d;
}

/* ========================================================== */
/* ESTILOS PARA DESTAQUE VISUAL (COLOR-CODING) DOS LOGS */
/* ========================================================== */

/* Cores de fundo para cada tipo de ação */
.log-row-danger { background-color: #f8d7da; }
.log-row-success { background-color: #d4edda; }
.log-row-warning { background-color: #fff3cd; }
.log-row-info { background-color: #d1ecf1; }

/* Garante que o efeito de hover ainda funcione e se destaque */
.log-row-danger:hover,
.log-row-success:hover,
.log-row-warning:hover,
.log-row-info:hover {
    background-color: #e9ecef; /* Um cinza neutro para o hover */
}
/* Adicione este CSS para estilizar os botões do perfil */
.back-link-wrapper {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
}
.profile-btn {
    flex: 1;
    padding: 10px;
    text-decoration: none;
    color: white !important;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s;
}
.profile-btn:hover {
    opacity: 0.9;
}
.btn-secondary { background-color: #6c757d; }
.btn-danger { background-color: #dc3545; }

/* ========================================================== */
/* LAYOUT DE GRID PARA PÁGINA DE SINCRONIZAÇÃO        */
/* ========================================================== */
.sync-layout-grid {
    display: grid;
    grid-template-columns: 1fr; /* Padrão de 1 coluna para mobile */
    gap: 30px;
    align-items: start;
}

@media (min-width: 992px) {
    .sync-layout-grid {
        /* 2 colunas em telas maiores, a segunda um pouco menor */
        grid-template-columns: 1.5fr 1fr; 
    }
}

/* Estilo para o futuro card de histórico */
.history-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    height: 100%;
}
.history-card h2 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.history-item {
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}
.history-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.history-item .meta {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 8px;
}
.history-item .summary {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Adicione este código ao seu arquivo CSS */

.badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 8px;
    color: #fff;
}

.badge-interno {
    background-color: #28a745; /* Verde */
    color: white;
}

.badge-externo-manual {
    background-color: #ffc107; /* Amarelo */
    color: #212529;
}

.badge-externo {
    background-color: #6c757d; /* Cinza */
    color: white;
}

/* ================================================================== */
/* AJUSTE CIRÚRGICO - BOTÕES DE AÇÃO EM TABELAS (SOLICITACOES.PHP) */
/* ================================================================== */

/* 1. Define um estilo base para todos os itens de ação, sejam links ou botões */
.actions-icons a,
.actions-icons button {
    display: inline-flex; /* Alinha ícone e texto perfeitamente */
    align-items: center;
    gap: 6px; /* Espaço entre o ícone e o texto */
    padding: 6px 12px;
    border-radius: var(--raio-borda);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent; /* Borda transparente por padrão */
}

/* 2. Estilo para os botões "neutros" ou de "sucesso" (como Definir Acessos) */
.actions-icons a.edit-icon {
    background-color: #eef2f7; /* Um cinza bem claro */
    color: #333;
    border-color: #dee2e6;
}
.actions-icons a.edit-icon:hover {
    background-color: #d1ecf1; /* Um azul claro no hover */
    border-color: #bee5eb;
}

/* 3. Estilo específico para o botão de "Reprovar" (ou qualquer ação de "perigo") */
.actions-icons button.delete-icon, /* Aplica ao botão Reprovar */
.actions-icons a.delete-icon {    /* Também aplicaria a um link de exclusão */
    background-color: var(--fundo-erro); /* Fundo vermelho claro que você já usa */
    color: var(--cor-erro);              /* Texto vermelho escuro que você já usa */
    border-color: var(--borda-erro);     /* Borda vermelha que você já usa */
}
.actions-icons button.delete-icon:hover,
.actions-icons a.delete-icon:hover {
    background-color: #f1b0b7; /* Um tom de vermelho um pouco mais escuro para o hover */
    border-color: #f1b0b7;
}

/* 4. Garante que o texto dentro dos botões de ação seja sempre visível */
.actions-icons button span {
    display: inline; /* Garante que o texto "Reprovar" apareça */
}

/* ================================================================== */
/* REFINAMENTO GERAL DE ESTILO PARA MODAIS                            */
/* ================================================================== */

/* 1. Adiciona estrutura ao cabeçalho e rodapé do modal */
.modal-header {
    /* Adiciona uma linha divisória abaixo do título */
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex; /* Garante alinhamento entre título e botão de fechar */
    justify-content: space-between;
    align-items: center;
}

.modal-footer {
    /* Adiciona uma linha divisória acima dos botões */
    border-top: 1px solid #e9ecef;
    padding-top: 20px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end; /* Alinha os botões à direita */
    gap: 10px; /* Adiciona um espaço entre os botões */
}

/* 2. Melhora a legibilidade do corpo do modal */
.modal-body p {
    font-size: 15px; /* Aumenta um pouco a fonte do texto */
    line-height: 1.6; /* Melhora o espaçamento entre as linhas */
    color: #495057; /* Um cinza escuro mais suave que o preto puro */
}

.modal-body strong {
    color: #212529; /* Garante que o texto em negrito tenha bom contraste */
}

/* 3. Estilos padronizados para os botões dentro do rodapé do modal */
.modal-footer button {
    padding: 10px 20px;
    border-radius: var(--raio-borda);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
}

.modal-footer .btn-cancel {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}
.modal-footer .btn-cancel:hover {
    background-color: #5a6268;
}

/* Novo estilo para o botão de perigo (Reprovar) que você já criou, mas agora dentro do modal */
.modal-footer .btn-danger {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}
.modal-footer .btn-danger:hover {
    background-color: #c82333;
}

/* ========================================================== */
/* ESTILOS PARA O MEDIDOR DE FORÇA DE SENHA (MEU PERFIL)      */
/* ========================================================== */

.strength-meter {
    margin-top: 8px;
    height: 20px; /* Altura total do container */
    position: relative;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.strength-meter-bar {
    height: 100%;
    width: 0; /* Começa com largura 0 */
    background-color: #ddd;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-meter-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 20px; /* Mesmo valor da altura do container */
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

/* Estilos para cada nível de força */
.strength-meter-bar.weak { width: 25%; background-color: #dc3545; }
.strength-meter-bar.medium { width: 60%; background-color: #ffc107; }
.strength-meter-bar.strong { width: 100%; background-color: #28a745; }

/* ========================================================== */
/* ESTILOS PARA O MINI ORGANOGRAMA (MEU PERFIL)               */
/* ========================================================== */

.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* Espaçamento entre os cards e as setas */
    margin-bottom: 25px;
}

.org-card {
    width: 90%;
    max-width: 350px;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: var(--raio-borda);
    text-align: center;
    background-color: #f8f9fa;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.org-card-title {
    font-weight: 600;
    color: #343a40;
    font-size: 15px;
}

.org-card-subtitle {
    font-size: 13px;
    color: #6c757d;
    margin-top: 4px;
}

/* Estilo específico para o card do usuário logado (Você) */
.org-card-you {
    background-color: #e6f0f7;
    border: 2px solid var(--cor-primaria);
}

.org-card-you .org-card-title {
    color: var(--cor-primaria);
    font-weight: 700;
}

.org-arrow {
    font-size: 24px;
    color: #adb5bd;
    line-height: 1;
}

/* ========================================================== */
/* ESTILOS PARA O DASHBOARD DE ACESSOS (MEU PERFIL)           */
/* ========================================================== */

.portal-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.portal-access-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 20px;
    border-radius: var(--raio-borda);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease-in-out;
}

.portal-access-card:hover {
    border-color: var(--cor-primaria);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

.portal-access-icon {
    font-size: 20px;
    color: var(--cor-primaria);
    margin-top: 2px;
}

.portal-access-info h4 {
    margin: 0 0 5px 0;
    color: var(--cor-primaria-fundo);
    font-size: 16px;
}

.portal-access-info p {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
    line-height: 1.5;
}