/* /wiki/assets/css/admin_style.css */

/* --- ESTRUTURA GERAL DO ADMIN --- */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--cor-borda);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.admin-header h1 {
    margin: 0;
    font-size: 28px;
    color: var(--cor-secundaria);
}

.button, .button-secondary {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button { background-color: var(--cor-primaria); }
.button:hover { background-color: #c4006b; }
.button-secondary { background-color: var(--cor-secundaria); }
.button-secondary:hover { background-color: #1c2864; }

/* --- CARDS E FORMULÁRIOS --- */
.card {
    background-color: var(--cor-fundo-card);
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    padding: 30px;
    margin-bottom: 30px;
}

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

.card-header h2, .card-header h3 {
    margin: 0;
    color: var(--cor-secundaria);
}

form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

form input[type="text"], form input[type="email"], form input[type="date"], form input[type="time"], form input[type="password"], form select, form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

form input[type="text"]:focus, form select:focus, form textarea:focus {
    border-color: var(--cor-primaria);
    outline: none;
}

.decisao-row {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}
.decisao-row input { flex-grow: 1; }
.decisao-row select { flex-grow: 1; }

/* --- TABELAS --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
table th, table td {
    border-bottom: 1px solid var(--cor-borda);
    padding: 15px;
    text-align: left;
}
table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--cor-secundaria);
}
table tr:hover {
    background-color: #f8f9fa;
}
table .actions a {
    margin-right: 10px;
    font-weight: 500;
}
/* --- ESTILOS PARA O SELETOR DE ÍCONES (NOVO) --- */
.icon-picker-container {
    margin-bottom: 20px;
}

.icon-picker-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    font-size: 28px;
    color: var(--cor-primaria);
    margin-right: 15px;
    vertical-align: middle;
}

#open-icon-picker {
    vertical-align: middle;
}

.icon-picker-modal {
    display: none; /* Oculto por padrão */
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.icon-picker-modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    border-radius: 8px;
}

.icon-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.icon-picker-header h3 {
    margin: 0;
}

.icon-picker-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 15px;
    max-height: 400px;
    overflow-y: auto;
}

.icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    border: 1px solid #eee;
    border-radius: 5px;
    font-size: 24px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.icon-item:hover {
    background-color: var(--cor-primaria);
    color: white;
}
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; list-style-type: none; padding: 0; margin: 0; }
.dropdown-menu a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-menu a:hover { background-color: #f1f1f1; }
.dropdown:hover .dropdown-menu { display: block; }

/* =================================================================
   ESTRUTURA DO PAINEL ADMIN
   ================================================================= */
body {
    background-color: #f4f7fa; /* Um fundo levemente cinza para a área do admin */
}

.admin-container {
    max-width: 1400px;      /* Largura máxima do conteúdo */
    margin-left: auto;      /* Cria a margem esquerda */
    margin-right: auto;     /* Cria a margem direita */
    padding: 20px 30px;     /* Espaçamento interno (vertical e horizontal) */
}

/* =================================================================
   NOVO CABEÇALHO DO ADMIN (CORREÇÃO)
   ================================================================= */
.admin-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 0 25px;
    border-bottom: 1px solid #dee2e6;
    height: 65px;
    color: #333;
}

.admin-header-left {
    display: flex;
    align-items: center;
}

.admin-main-header .logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.admin-main-header .logo img {
    max-height: 35px;
    margin-right: 15px;
}

.admin-main-header .logo span {
    font-size: 1.2rem;
    font-weight: 600;
}

.admin-title-separator {
    margin: 0 15px;
    font-size: 1.5rem;
    color: #e0e0e0;
    font-weight: 100;
}

.admin-title {
    font-size: 1.1rem;
    color: #555;
}

/* NAVEGAÇÃO DO ADMIN */
.admin-nav {
    display: flex;
    align-items: center;
    height: 100%;
}

.admin-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 0 18px;
    text-decoration: none;
    color: #495057;
    font-size: 15px;
    height: 100%;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

.admin-nav .nav-link:hover,
.admin-nav .dropdown:hover .nav-link {
    background-color: #f8f9fa;
    border-bottom: 3px solid var(--cor-primaria);
    color: var(--cor-primaria);
}

/* USUÁRIO LOGADO E SAIR */
.admin-header-right {
    display: flex;
    align-items: center;
    margin-left: 20px;
    font-size: 14px;
}

.admin-header-right span {
    margin-right: 15px;
}

.admin-header-right .nav-link-logout {
    text-decoration: none;
    color: var(--cor-secundaria);
    font-weight: 500;
}
.admin-header-right .nav-link-logout:hover {
    text-decoration: underline;
}
/* =================================================================
   CORREÇÃO DE LARGURA DO CONTEÚDO (ADICIONAR NO FINAL DO ARQUIVO)
   ================================================================= */

/* Esta regra força o card principal de páginas como "Configurações" 
  a ocupar 100% da largura do contêiner pai (.admin-container).
*/
.admin-container > .card {
    width: 100%;
    box-sizing: border-box; /* Garante que o padding não quebre o layout */
}

/* Esta regra corrige as páginas de duas colunas, como "Gerenciar Cidades",
  fazendo com que a div que agrupa os dois cards ocupe a largura total
  e ative o layout flexbox para alinhar as colunas.
*/
.admin-content-split {
    display: flex;
    gap: 30px;
    width: 100%;
}
/* =================================================================
   ESTILOS PARA A NOVA BARRA DE SUBMENU DO ADMIN
   ================================================================= */

.admin-submenu-bar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0 30px;
    height: 50px;
}

.admin-submenu-container {
    height: 100%;
    max-width: 1400px; /* Mesma largura do conteúdo principal */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-submenu-links {
    display: flex;
    align-items: center;
    height: 100%;
}

.admin-submenu-links a {
    display: flex;
    align-items: center;
    padding: 0 16px;
    text-decoration: none;
    color: #343a40;
    font-size: 15px;
    font-weight: 500;
    height: 100%;
    border-bottom: 3px solid transparent;
}

.admin-submenu-links a:hover {
    color: var(--cor-primaria);
    border-bottom: 3px solid var(--cor-primaria);
}

/* Dropdown do submenu */
.admin-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.admin-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 100;
    border: 1px solid #ddd;
    border-radius: 0 0 5px 5px;
}

.admin-dropdown-content a {
    color: #343a40;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    height: auto;
    border-bottom: none; /* Remove a borda inferior nos itens do dropdown */
}

.admin-dropdown-content a:hover {
    background-color: #f1f1f1;
    color: var(--cor-primaria);
}

.admin-dropdown:hover .admin-dropdown-content {
    display: block;
}

/* =================================================================
   ESTILOS GLOBAIS PARA FORMULÁRIOS DE FILTRO
   ================================================================= */

.filter-form {
    display: grid;
    /* Cria colunas responsivas: tenta encaixar o máximo de colunas com 200px de largura mínima */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    align-items: flex-end; /* Alinha os campos na parte inferior */
}

.filter-field {
    display: flex;
    flex-direction: column;
}

.filter-field label {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 14px;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    padding-bottom: 10px; /* Alinha os botões com os inputs */
}
/* =================================================================
   ESTILOS CORRIGIDOS PARA O FORMULÁRIO DE USUÁRIO
   ================================================================= */

/* Padroniza o layout de grid para os formulários */
.form-grid {
    display: grid;
    /* Tenta criar 3 colunas, mas se ajusta para 1 em telas menores */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px 30px; /* Espaçamento vertical e horizontal */
}

/* Define um campo de formulário (label + input) */
.form-field {
    /* Esta regra é importante para garantir que os elementos internos se alinhem corretamente */
    display: flex;
    flex-direction: column;
}

/* Estilo para o cabeçalho do card, agora com título e botão */
.card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* A margem negativa alinha o header perfeitamente com o padding do card */
    margin: -30px -30px 25px -30px;
    padding: 20px 30px;
    border-bottom: 1px solid #e9ecef;
}

.card .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

/* Estilo para o botão de expandir/recolher */
.card-toggle-btn {
    background: none;
    border: 1px solid #d0d0d0;
    color: #555;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.card-toggle-btn:hover {
    background-color: #f1f1f1;
    color: var(--cor-primaria);
}

/* O conteúdo do card que será ocultado/exibido */
.card-content.collapsed {
    display: none;
}
/* Estilos para a prévia da imagem de capa */
.thumbnail-preview {
    margin-top: 15px;
}
.thumbnail-preview p {
    margin-bottom: 5px;
    font-size: 14px;
    color: #555;
    font-weight: 600;
}
.thumbnail-preview img {
    max-width: 250px;
    max-height: 150px;
    border-radius: 5px;
    border: 1px solid #ddd;
    object-fit: cover;
}
/* =================================================================
   PADRONIZAÇÃO DE BOTÕES (ADICIONAR NO FINAL DO ARQUIVO)
   ================================================================= */

/* 1. Alinhamento dos botões de filtro ("Filtrar" e "Limpar") */
.filter-buttons {
    /* Esta propriedade garante que os botões tenham a mesma altura que os campos de texto ao lado */
    align-self: flex-end; 
}

/* 2. Tamanho padrão para os botões principais de formulário */
.filter-buttons .button,
.filter-buttons .button-secondary {
    height: 47px; /* Define uma altura fixa igual à dos campos de texto (padding 12px*2 + borda 1px*2 + font-size ~21px) */
    box-sizing: border-box; /* Garante que padding e borda não aumentem o tamanho final */
    display: flex;
    align-items: center; /* Centraliza o texto verticalmente */
    justify-content: center; /* Centraliza o texto horizontalmente */
}

/* 3. Tamanho padrão para os botões de ação na tabela ("Ver", "Editar", "Excluir") */
.actions-cell .btn-action {
    min-width: 80px;      /* Garante uma largura mínima para todos os botões */
    text-align: center;   /* Garante que o texto esteja centralizado */
    box-sizing: border-box; /* Inclui padding na largura total, evitando que botões com texto maior fiquem mais largos */
    display: inline-block;
    padding: 8px 12px;
}
/* =================================================================
   CORREÇÃO FINAL DE ALINHAMENTO E TAMANHO DE BOTÕES
   ================================================================= */

/* 1. Alinhamento dos botões "Filtrar" e "Limpar" */
.filter-form {
    /* Garante que o grid se alinhe corretamente na base */
    align-items: flex-end;
}

.filter-buttons {
    /* Removemos o padding-bottom que causava o desalinhamento vertical.
       O alinhamento agora é controlado pelo 'align-items' do .filter-form pai. */
    padding-bottom: 0;
}

/* 2. Padronização dos botões de ação ("Ver", "Editar", "Excluir") */
.actions-cell {
    /* Garantimos que a célula da tabela use flexbox */
    display: flex;
    gap: 8px;
}

.actions-cell .btn-action {
    /* A propriedade 'flex: 1' é a chave aqui.
       Ela força todos os botões dentro da célula a se expandirem igualmente,
       resultando em larguras idênticas. */
    flex: 1;

    /* Mantemos as outras propriedades para um bom visual */
    padding: 8px 12px;
    text-align: center;
    min-width: fit-content; /* Garante que o texto não quebre em telas menores */
}
/* /admin/assets/css/admin_style.css */

/* Adicione este bloco no final do arquivo */
.button-details {
    display: inline-block;
    padding: 8px 15px;
    background-color: var(--cor-primaria, #E6007E);
    color: white !important; /* Importante para sobrescrever outras regras de link */
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    font-size: 0.9em;
    text-align: center;
    border: none;
    transition: all 0.2s ease-in-out;
}

.button-details:hover {
    background-color: #c4006b; /* Um tom mais escuro da cor primária */
    color: white !important;
}
/* =================================================================
   UNIFORMIZAÇÃO DOS BOTÕES DE AÇÃO DA TABELA
   ================================================================= */

/* 1. Transforma a célula da tabela em um contêiner flexível */
.actions-cell {
    display: flex;       /* Alinha os botões horizontalmente */
    align-items: center; /* Centraliza os botões verticalmente na célula */
    gap: 8px;            /* Cria um espaçamento consistente entre os botões */
}

/* 2. Aplica um estilo base e uniforme para TODOS os botões dentro da célula */
.actions-cell a,
.actions-cell button {
    flex-grow: 1;            /* Força todos os botões a se expandirem e ocuparem o mesmo espaço */
    padding: 8px 10px;       /* Padroniza o espaçamento interno */
    text-align: center;      /* Garante que o texto esteja sempre centralizado */
    font-size: 0.85em;       /* Uniformiza o tamanho da fonte */
    white-space: nowrap;     /* Impede que o texto quebre em duas linhas */
    justify-content: center; /* Centraliza o conteúdo (ícone + texto) */
    display: inline-flex !important; /* Garante o alinhamento correto do conteúdo interno */
    align-items: center;
}

/* 3. Garante que o formulário do botão Excluir não ocupe espaço extra */
.actions-cell form {
    flex-grow: 1;      /* Faz o formulário se comportar como um botão flexível */
    display: flex;     /* Garante que o botão interno preencha o formulário */
}
.actions-cell form button {
    width: 100%; /* Faz o botão preencher todo o espaço do formulário */
}
/* =================================================================
   UNIFORMIZAÇÃO DOS BOTÕES DE AÇÃO DA TABELA
   ================================================================= */

/* 1. Transforma a célula da tabela em um contêiner flexível */
.actions-cell {
    display: flex;       /* Alinha os botões horizontalmente */
    align-items: center; /* Centraliza os botões verticalmente na célula */
    gap: 8px;            /* Cria um espaçamento consistente entre os botões */
}

/* 2. Aplica um estilo base e uniforme para TODOS os botões e links dentro da célula */
.actions-cell a,
.actions-cell button,
.actions-cell .status-badge {
    flex-grow: 1;            /* Força todos os itens a se expandirem e ocuparem o mesmo espaço */
    padding: 8px 10px;       /* Padroniza o espaçamento interno */
    text-align: center;      /* Garante que o texto esteja sempre centralizado */
    font-size: 0.85em;       /* Uniformiza o tamanho da fonte */
    white-space: nowrap;     /* Impede que o texto quebre em duas linhas */
    justify-content: center; /* Centraliza o conteúdo (ícone + texto) */
    display: inline-flex !important; /* Garante o alinhamento correto do conteúdo interno */
    align-items: center;
    box-sizing: border-box;  /* Garante que padding não aumente o tamanho final */
    height: 35px; /* Define uma altura fixa para todos os elementos na célula */
}

/* 3. Garante que o formulário do botão Excluir não ocupe espaço extra */
.actions-cell form {
    flex-grow: 1;      /* Faz o formulário se comportar como um botão flexível */
    display: flex;     /* Garante que o botão interno preencha o formulário */
}
.actions-cell form button {
    width: 100%;       /* Faz o botão preencher todo o espaço do formulário */
}

/* 4. Estilo específico para o cabeçalho da coluna de ações */
.admin-table thead th:nth-child(5) {
    text-align: center;
}

/* =================================================================
   RESPONSIVIDADE PARA DISPOSITIVOS MÓVEIS (ADMIN)
   ================================================================= */

@media (max-width: 768px) {

    /* --- CABEÇALHO E SUBMENU --- */
    .admin-main-header, .admin-header-left, .admin-header-right {
        flex-direction: column;
        height: auto;
        padding: 15px;
    }
    .admin-title, .admin-title-separator {
        display: none; /* Esconde elementos menos essenciais */
    }
    .admin-nav {
        margin-top: 15px;
        width: 100%;
        justify-content: center;
    }
    .admin-header-right {
        margin-top: 10px;
    }
    .admin-submenu-container {
        justify-content: flex-start; /* Alinha links à esquerda */
        overflow-x: auto; /* Permite rolar o submenu horizontalmente */
        white-space: nowrap;
    }

    /* --- LAYOUTS GERAIS E CARDS --- */
    .admin-container {
        padding: 15px;
    }
    .admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .card {
        padding: 20px;
    }
    .admin-content-split {
        flex-direction: column; /* Empilha as colunas */
    }

    /* --- TABELAS RESPONSIVAS --- */
    .table-responsive-wrapper {
        overflow-x: auto; /* A CHAVE para tabelas responsivas */
        -webkit-overflow-scrolling: touch; /* Melhora a rolagem em iOS */
        border: 1px solid var(--cor-borda);
        border-radius: 5px;
    }
    /* Você precisará envolver suas tabelas com <div class="table-responsive-wrapper"> no HTML */
    table {
        min-width: 700px; /* Força a tabela a ter uma largura mínima, ativando a rolagem */
    }

    /* --- FORMULÁRIOS --- */
    .form-grid {
        grid-template-columns: 1fr; /* Força uma única coluna para os formulários */
    }
    .filter-form {
        grid-template-columns: 1fr; /* Força uma única coluna para os filtros */
    }
    .filter-buttons {
        padding-bottom: 0;
        justify-content: stretch; /* Faz os botões ocuparem a largura total */
    }
    .filter-buttons .button, .filter-buttons .button-secondary {
        flex-grow: 1; /* Força os botões a crescerem igualmente */
    }
}
/* CSS para o submenu 
*/

/* O container do submenu (item "WhatsApp") precisa de posicionamento relativo */
.admin-submenu {
    position: relative;
}

/* O link "WhatsApp" deve se parecer com os outros links do dropdown */
.admin-submenu > a {
    display: block;
    padding: 10px 15px; /* Ajuste o padding para ser igual aos seus outros links <a> */
    color: #333; /* Ajuste a cor */
    text-decoration: none;
    white-space: nowrap;
    cursor: default; /* Pode usar 'default' ou 'pointer' */
}

/* O conteúdo do submenu (HSM, Flows) */
.admin-submenu-content {
    display: none; /* Escondido por padrão */
    position: absolute;
    top: 0; /* Alinha com o topo do item "WhatsApp" */
    left: 100%; /* Posiciona à direita do item "WhatsApp" */
    background-color: #f9f9f9; /* Cor de fundo (pode ser a mesma do seu dropdown) */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Garante que fique por cima de outros elementos */
}

/* Links dentro do submenu */
.admin-submenu-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}

/* Efeito de hover nos links do submenu */
.admin-submenu-content a:hover {
    background-color: #f1f1f1;
}

/* Mostra o submenu ao passar o mouse sobre o item "WhatsApp" */
.admin-submenu:hover > .admin-submenu-content {
    display: block;
}

/* [Opcional] Muda a cor do link "WhatsApp" quando o submenu está ativo */
.admin-submenu:hover > a {
    background-color: #ddd; /* Ajuste para a cor de hover do seu menu */
}