/* ========================================================================== */
/* css/admin.css                                                              */
/* Estilos específicos para o painel administrativo (admin.html)              */
/* Versão: 23/Abr (Modularizada e Comentada)                                  */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Tabela de Cores Hexadecimais Usadas (Referência Tailwind)                  */
/* -------------------------------------------------------------------------- */
/*
    Cor Hex    | Tailwind Aprox. | Uso Principal
    -----------|-----------------|--------------------------------------------
    #f3f4f6    | bg-gray-100     | Fundo principal do body
    #4b5563    | text-gray-600   | Texto padrão das abas inativas
    #f9fafb    | bg-gray-50      | Fundo das abas inativas, fundo dos forms
    #1f2937    | text-gray-800   | Texto das abas no hover
    #1d4ed8    | text-blue-700   | Texto da aba ativa, badge popular
    #ffffff    | bg-white        | Fundo da aba ativa, fundo dos painéis, fundo item lista
    #e5e7eb    | border-gray-200 | Bordas gerais (painel, form, item lista)
    #9ca3af    | border-gray-400 | Borda dos inputs (contraste aumentado)
    #2563eb    | text-blue-600   | Botão Editar (texto), Feedback Loading
    #eff6ff    | bg-blue-50      | Botão Editar (fundo)
    #dbeafe    | border-blue-100 | Botão Editar (borda), Badge Popular (fundo)
    #bfdbfe    | border-blue-200 | Botão Editar (borda hover)
    #dc2626    | text-red-600    | Botão Excluir (texto), Feedback Erro
    #fee2e2    | bg-red-50       | Botão Excluir (fundo)
    #fecaca    | border-red-100  | Botão Excluir (borda)
    #fca5a5    | border-red-300  | Botão Excluir (borda hover)
    #b91c1c    | text-red-700    | Botão Excluir (texto hover)
    #e0e7ff    | bg-indigo-100   | Fundo Feature List Item (Planos)
    #4338ca    | text-indigo-700 | Texto Feature List Item (Planos)
    #6b7280    | text-gray-500   | Texto Feedback Info
    #16a34a    | text-green-600  | Texto Feedback Success
*/

/* --- Importação de Fonte --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* --- Estilos Globais do Body --- */
body {
    font-family: 'Poppins', sans-serif; /* Define a fonte padrão */
    background-color: #f3f4f6; /* bg-gray-100 - Cor de fundo cinza claro */
    color: #1f2937; /* text-gray-800 - Cor de texto padrão escura */
    line-height: 1.6; /* Espaçamento entre linhas padrão */
}

/* --- Container Principal Admin --- */
#admin-content {
    /* Estilos de largura/margem podem ser aplicados via Tailwind no HTML se necessário */
    /* Ex: <section id="admin-content" class="container mx-auto mt-8"> */
}

/* --- Estilos para as Abas de Navegação --- */
.admin-tab-button {
    padding: 0.75rem 1.5rem; /* Espaçamento interno */
    margin-right: 0.25rem; /* Pequeno espaço entre abas */
    margin-bottom: -1px; /* Sobrepõe a borda do painel para efeito de aba conectada */
    border: 1px solid transparent; /* Borda transparente por padrão */
    border-top-left-radius: 0.375rem; /* Canto superior esquerdo arredondado */
    border-top-right-radius: 0.375rem; /* Canto superior direito arredondado */
    font-weight: 500; /* Peso da fonte médio */
    color: #4b5563; /* Cor do texto cinza escuro (inativa) */
    background-color: #f9fafb; /* Fundo cinza muito claro (inativa) */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s; /* Transição suave */
    cursor: pointer; /* Cursor de mãozinha */
    white-space: nowrap; /* Impede que o texto da aba quebre linha */
}

.admin-tab-button:hover {
    color: #1f2937; /* Cor do texto mais escura no hover */
    background-color: #f3f4f6; /* Fundo igual ao body no hover */
}

.admin-tab-button.active {
    color: #1d4ed8; /* Cor do texto azul (ativa) */
    background-color: #ffffff; /* Fundo branco (ativa) */
    border-color: #e5e7eb #e5e7eb #ffffff; /* Bordas laterais e superior cinza, inferior branca (para conectar) */
    border-bottom-color: transparent; /* Remove a borda inferior visualmente */
    font-weight: 600; /* Texto em negrito (ativa) */
}

/* --- Estilos para os Painéis de Conteúdo das Abas --- */
.admin-section-panel {
    display: none; /* Painéis ficam ocultos por padrão */
    padding: 1.5rem; /* Espaçamento interno generoso */
    background-color: #ffffff; /* Fundo branco */
    border: 1px solid #e5e7eb; /* Borda cinza claro */
    border-top: none; /* Remove a borda superior para conectar com a aba */
    border-bottom-left-radius: 0.5rem; /* Cantos inferiores arredondados */
    border-bottom-right-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Sombra suave */
}

.admin-section-panel.active {
    display: block; /* Mostra apenas o painel ativo (controlado via JS) */
}

/* --- Estilos para Formulários dentro dos Painéis --- */
.admin-section-panel form {
    background-color: #f9fafb; /* Fundo cinza muito claro para destacar o form */
    padding: 1.5rem; /* Espaçamento interno do form */
    border-radius: 0.5rem; /* Cantos arredondados do form */
    border: 1px solid #e5e7eb; /* Borda cinza claro */
    margin-bottom: 2rem; /* Espaço abaixo do form, antes da lista */
}

/* --- Estilos para Inputs, Selects, Textareas --- */
.input-field {
    /* Estilos base aplicados via Tailwind CDN, mas definimos fallbacks/overrides aqui */
    width: 100%; /* Garante largura total */
    padding: 0.5rem 0.75rem; /* Espaçamento interno (py-2 px-3) */
    border: 1px solid #9ca3af; /* Borda cinza (gray-400) para MAIOR CONTRASTE */
    border-radius: 0.375rem; /* Cantos arredondados (rounded-md) */
    background-color: #ffffff; /* Fundo branco */
    color: #1f2937; /* Cor do texto escura */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Transição no foco */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Sombra interna sutil (shadow-sm) */
}
.input-field:focus {
    outline: none; /* Remove o outline padrão do navegador */
    border-color: #2563eb; /* Borda azul no foco (ring-blue-500) */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); /* Anel de foco azul (ring-2 ring-offset-0 ring-blue-300) */
}
/* Remove setas de input[type=number] (visual) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}
/* Garante altura consistente para selects e inputs de data/hora */
select.input-field, input[type=datetime-local].input-field {
     height: 2.5rem; /* Equivalente a h-10 no Tailwind */
     padding-top: 0.5rem; /* Ajusta padding vertical para centralizar texto */
     padding-bottom: 0.5rem;
}


/* --- Estilos para Listas de Itens (Depoimentos, FAQs, etc.) --- */
.admin-list {
    space-y: 1rem; /* Espaço vertical entre os itens da lista */
}

.admin-list-item {
    display: flex;
    flex-direction: column; /* Empilha conteúdo e ações em telas pequenas */
    gap: 0.75rem; /* Espaço entre conteúdo e ações quando empilhado */
    padding: 1rem; /* Espaçamento interno do item */
    border: 1px solid #e5e7eb; /* Borda cinza */
    border-radius: 0.375rem; /* Cantos arredondados */
    background-color: #ffffff; /* Fundo branco */
    transition: box-shadow 0.2s; /* Transição suave na sombra */
}
.admin-list-item:hover {
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Sombra maior no hover */
}

/* Layout para telas maiores (>= 640px) */
@media (min-width: 640px) {
    .admin-list-item {
        flex-direction: row; /* Conteúdo e ações lado a lado */
        align-items: flex-start; /* Alinha ambos no topo */
        justify-content: space-between; /* Empurra ações para a direita */
        gap: 1rem; /* Aumenta espaço entre conteúdo e ações */
    }
    .admin-list-item .actions {
        flex-direction: column; /* Empilha os botões de ação verticalmente */
        gap: 0.25rem; /* Espaço menor entre botões empilhados */
        align-items: flex-end; /* Alinha botões à direita */
        margin-top: 0; /* Remove margem superior desnecessária */
    }
}

/* Div do conteúdo dentro do item da lista */
.admin-list-item .content {
    flex-grow: 1; /* Permite que o conteúdo ocupe o espaço disponível */
    word-break: break-word; /* Quebra palavras longas para evitar overflow */
}

/* Div das ações (botões) dentro do item da lista */
.admin-list-item .actions {
    flex-shrink: 0; /* Impede que a div de ações encolha */
    display: flex; /* Habilita flexbox para os botões */
    flex-direction: row; /* Botões lado a lado por padrão (telas pequenas) */
    gap: 0.5rem; /* Espaço entre os botões */
    align-items: center; /* Alinha botões verticalmente (útil se tiverem alturas diferentes) */
    margin-top: 0.5rem; /* Espaço acima das ações quando empilhado (telas pequenas) */
}


/* --- Estilos para Botões de Ação (Editar/Excluir) nas Listas --- */
.admin-list-item .btn-edit,
.admin-list-item .btn-delete {
    font-size: 0.75rem; /* Tamanho da fonte pequeno */
    padding: 0.25rem 0.6rem; /* Espaçamento interno pequeno */
    border-radius: 0.25rem; /* Cantos levemente arredondados */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s; /* Transições suaves */
    border: 1px solid transparent; /* Borda base */
    cursor: pointer; /* Cursor de mão */
    display: inline-flex; /* Para alinhar ícone e texto */
    align-items: center; /* Alinha ícone e texto verticalmente */
    white-space: nowrap; /* Impede quebra de linha no texto do botão */
    font-weight: 500; /* Peso médio */
}

/* Botão Editar Específico */
.admin-list-item .btn-edit {
    color: #2563eb; /* Texto azul */
    background-color: #eff6ff; /* Fundo azul claro */
    border-color: #dbeafe; /* Borda azul muito clara */
}
.admin-list-item .btn-edit:hover {
    background-color: #dbeafe; /* Fundo azul mais escuro no hover */
    border-color: #bfdbfe; /* Borda azul mais escura no hover */
    color: #1d4ed8; /* Texto azul mais escuro no hover */
}

/* Botão Excluir Específico */
.admin-list-item .btn-delete {
    color: #dc2626; /* Texto vermelho */
    background-color: #fee2e2; /* Fundo vermelho claro */
    border-color: #fecaca; /* Borda vermelha muito clara */
}
.admin-list-item .btn-delete:hover {
    background-color: #fecaca; /* Fundo vermelho mais escuro no hover */
    border-color: #fca5a5; /* Borda vermelha mais escura no hover */
    color: #b91c1c; /* Texto vermelho mais escuro no hover */
}

/* --- Estilos para Botões Principais (Salvar/Cancelar) nos Formulários --- */
.btn-save {
    /* Estilos base via Tailwind CDN (bg-green-600, text-white, etc.) */
    display: inline-flex; /* Alinha ícone e texto */
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem; /* py-2.5 px-6 - Um pouco maior */
    font-size: 0.875rem; /* text-sm */
}
.btn-cancel {
    /* Estilos base via Tailwind CDN (bg-gray-500, text-white, etc.) */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 0.875rem; /* text-sm */
}
.btn-cancel.hidden {
    display: none; /* Garante que a classe 'hidden' funcione */
}


/* --- Estilos para Badges e Itens Específicos --- */
/* Badge "Popular" (Planos) */
.badge-popular {
    font-size: 0.7rem; /* Tamanho bem pequeno */
    font-weight: 600; /* Semi-bold */
    background-color: #dbeafe; /* Fundo azul claro */
    color: #1d4ed8; /* Texto azul escuro */
    padding: 0.125rem 0.5rem; /* Espaçamento interno mínimo */
    border-radius: 9999px; /* Totalmente arredondado */
    margin-left: 0.5rem; /* Espaço à esquerda */
    vertical-align: middle; /* Alinha com o texto */
    display: inline-block; /* Comportamento de bloco inline */
}

/* Item da Lista de Features (Planos) */
.feature-list-item {
    background-color: #e0e7ff; /* Fundo índigo claro */
    color: #4338ca; /* Texto índigo escuro */
    padding: 0.125rem 0.5rem; /* Espaçamento interno */
    border-radius: 0.25rem; /* Cantos arredondados */
    font-size: 0.75rem; /* Texto pequeno */
    margin-right: 0.25rem; /* Espaço à direita */
    margin-bottom: 0.25rem; /* Espaço abaixo */
    display: inline-block; /* Comportamento inline */
}


/* --- Estilos para Mensagens de Feedback --- */
.form-feedback {
    margin-top: 0.75rem; /* Espaço acima da mensagem */
    font-size: 0.875rem; /* Tamanho da fonte */
    min-height: 1.25rem; /* Altura mínima para evitar "pulos" na interface */
    font-weight: 500; /* Peso médio */
    transition: color 0.3s; /* Transição suave da cor */
    text-align: center; /* Centraliza o texto por padrão */
}
.form-feedback:not(:empty) { /* Adiciona padding apenas se houver mensagem */
    padding: 0.5rem;
    border-radius: 0.375rem;
}
.form-feedback.info {
    color: #374151; /* text-gray-700 */
    background-color: #f3f4f6; /* bg-gray-100 */
    border: 1px solid #e5e7eb; /* border-gray-200 */
    font-weight: normal;
}
.form-feedback.success {
    color: #047857; /* text-green-700 */
    background-color: #d1fae5; /* bg-green-100 */
    border: 1px solid #a7f3d0; /* border-green-200 */
}
.form-feedback.error {
    color: #b91c1c; /* text-red-700 */
    background-color: #fee2e2; /* bg-red-100 */
    border: 1px solid #fecaca; /* border-red-200 */
}
.form-feedback.loading {
    color: #1d4ed8; /* text-blue-700 */
    background-color: #dbeafe; /* bg-blue-100 */
    border: 1px solid #bfdbfe; /* border-blue-200 */
    font-style: italic;
}

/* --- Estilos para Galeria de Imagens AI --- */
#ai-image-gallery-container {
    /* Estilos base via Tailwind no HTML */
}
#ai-image-thumbnails .relative { /* Wrapper da miniatura */
    /* Estilos base via Tailwind no HTML */
    border: 1px solid #e5e7eb; /* Adiciona uma borda padrão */
}
#ai-image-thumbnails img {
    /* Estilos base via Tailwind no HTML */
}
.use-ai-image-btn {
    /* Estilos base via Tailwind no HTML */
}
.upload-status {
    /* Estilos base via Tailwind no HTML */
    display: flex; /* Garante alinhamento do texto */
    align-items: center;
    justify-content: center;
}
/* Estilo para miniatura selecionada */
#ai-image-thumbnails .relative.border-green-500 {
    border-width: 2px; /* Torna a borda verde mais visível */
    border-color: #22c55e; /* Cor verde */
}

/* --- Ajustes Gerais --- */
label {
    margin-bottom: 0.25rem; /* Pequeno espaço abaixo do label */
    display: block; /* Garante que a margem funcione */
    color: #374151; /* text-gray-700 */
    font-weight: 500; /* medium */
}

/* Garante que fieldsets não tenham borda padrão estranha */
fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
legend {
    padding: 0; /* Remove padding padrão do legend */
    display: block; /* Garante que o espaçamento funcione */
    width: 100%; /* Ocupa a largura para a borda inferior funcionar bem */
    padding-bottom: 0.5rem; /* Espaço abaixo do título da seção */
    border-bottom: 1px solid #e5e7eb; /* Linha separadora abaixo do legend */
}

/* --- Fim dos Estilos Admin --- */