/*
 Theme Name:     Astra Child
 Template:       astra
 Version:        1.4.3
 Text Domain:    astra-child
*/

/* --- CONFIGURAÇÕES GERAIS E CORES --- */
:root {
    --fundo-container: #1a1a1a;
    --fundo-input: #2c2c2c;
    --cor-texto: #f0f0f0;
    --cor-dourada: #D4AF37;
    --cor-dourada-hover: #e6c565;
    --borda-cor: #444;
}

.container-cervejas {
    width: 95%; 
    max-width: 1600px; /* Aqui é o limite que fará ela crescer! */
    margin: 20px auto;
    padding: 25px;
    background-color: var(--fundo-container);
    border-radius: 12px;
    color: var(--cor-texto);
    border: 1px solid var(--borda-cor);
    box-sizing: border-box; 
}

/* --- ESTILOS PARA TODOS OS FORMULÁRIOS --- */
.container-cervejas .form-socio, 
.container-cervejas .form-inserir {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.container-cervejas .form-socio label, 
.container-cervejas .form-inserir label {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    color: var(--cor-texto);
    font-size: 0.9em;
}

/* Estilos de campos de formulário permanecem os mesmos */
.container-cervejas .form-socio input[type="text"],
.container-cervejas .form-socio input[type="password"],
.container-cervejas .form-socio input[type="email"],
.container-cervejas .form-socio input[type="number"],
.container-cervejas .form-socio input[type="date"],
.container-cervejas .form-socio textarea,
.container-cervejas .form-socio select,
.container-cervejas .form-inserir input[type="text"],
.container-cervejas .form-inserir input[type="number"],
.container-cervejas .form-inserir textarea,
.container-cervejas .form-inserir select {
    width: 100%;
    height: 45px;
    padding: 0 12px;
    margin-top: 5px;
    background-color: var(--fundo-input) !important;
    border: 1px solid var(--borda-cor) !important;
    border-radius: 6px !important;
    color: var(--cor-texto) !important;
    font-size: 1em;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 45px;
}
.container-cervejas .form-socio textarea,
.container-cervejas .form-inserir textarea {
    height: auto;
    min-height: 100px;
    padding: 12px;
    line-height: 1.5;
}
.container-cervejas .form-socio select, 
.container-cervejas .form-inserir select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23D4AF37%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: .65em auto;
}
.container-cervejas .form-socio input:focus,
.container-cervejas .form-socio textarea:focus,
.container-cervejas .form-socio select:focus,
.container-cervejas .form-inserir input:focus,
.container-cervejas .form-inserir textarea:focus,
.container-cervejas .form-inserir select:focus {
    outline: none;
    border-color: var(--cor-dourada);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

/* --- [NOVO] CORREÇÃO PARA AUTOFILL (TENTATIVA REFORÇADA) --- */
/* Para navegadores WebKit (Chrome, Safari, Edge). Aumentamos a especificidade adicionando o container pai. */
.container-cervejas input:-webkit-autofill,
.container-cervejas input:-webkit-autofill:hover,
.container-cervejas input:-webkit-autofill:focus,
.container-cervejas textarea:-webkit-autofill,
.container-cervejas textarea:-webkit-autofill:hover,
.container-cervejas textarea:-webkit-autofill:focus,
.container-cervejas select:-webkit-autofill,
.container-cervejas select:-webkit-autofill:hover,
.container-cervejas select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--cor-texto) !important;
    box-shadow: 0 0 0px 1000px var(--fundo-input) inset !important;
    border: 1px solid var(--borda-cor) !important; /* Garante que a borda não seja alterada */
    transition: background-color 5000s ease-in-out 0s;
}

/* Regra de sobreposição específica e reforçada para o campo de busca nos filtros */
.container-cervejas .area-filtros input:-webkit-autofill,
.container-cervejas .area-filtros input:-webkit-autofill:hover,
.container-cervejas .area-filtros input:-webkit-autofill:focus {
    -webkit-text-fill-color: white !important;
    box-shadow: 0 0 0px 1000px #444 inset !important;
    border: 1px solid #555 !important; /* Garante a borda específica do filtro */
}

/* Adicional: Estiliza a cor do placeholder para consistência */
.container-cervejas input::placeholder,
.container-cervejas textarea::placeholder {
    color: #888;
    opacity: 1; /* Firefox aplica uma opacidade por padrão */
}


/* Estilos de botões permanecem os mesmos */
.btn-principal,
.form-inserir button[name="salvar_cerveja"] {
    background-color: var(--cor-dourada);
    color: #111;
    font-weight: bold;
    padding: 12px 20px;
    height: auto;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 1em;
    transition: background-color 0.3s ease;
}
.btn-principal:hover,
.form-inserir button[name="salvar_cerveja"]:hover {
    background-color: var(--cor-dourada-hover);
}
.btn-consultar, .btn {
    background-color: #333;
    color: var(--cor-texto);
    padding: 10px 18px;
    height: auto;
    border: 1px solid var(--borda-cor);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.btn-consultar:hover, .btn:hover {
    background-color: #444;
    border-color: #666;
}
td form button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4em;
    padding: 5px;
    transition: transform 0.2s ease;
}
td form button:hover {
    transform: scale(1.2);
}

.container-cervejas .form-socio .checkbox-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.container-cervejas .form-socio .checkbox-group label {
    font-weight: normal;
    margin-top: 0;
    flex-direction: row;
}

.container-cervejas .form-socio .checkbox-group input[type="checkbox"] {
    width: auto;
    height: auto;
    margin-top: 0;
}

/* --- ESTILOS DA TABELA E WRAPPER --- */
.tabela-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    border: 1px solid var(--borda-cor);
    border-radius: 8px;
}

.tabela-cervejas {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}
.tabela-wrapper .tabela-cervejas {
    border: none;
}
.tabela-wrapper .tabela-cervejas th {
      border-bottom: 2px solid var(--cor-dourada);
}
.tabela-wrapper .tabela-cervejas tr:last-child td {
    border-bottom: none;
}
.tabela-cervejas th,
.tabela-cervejas td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--borda-cor);
    white-space: nowrap;
}
.tabela-cervejas th {
    background-color: var(--fundo-input);
    color: var(--cor-dourada);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8em;
    vertical-align: middle;
}
.tabela-cervejas tr {
    background-color: transparent;
    transition: background-color 0.3s ease;
}
.tabela-cervejas tr:hover {
    background-color: #252525;
}
.tabela-cervejas .cabecalho-ordenavel {
    cursor: pointer;
    position: relative;
}
.tabela-cervejas .cabecalho-ordenavel::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -7px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    opacity: 0.3;
}
.tabela-cervejas .cabecalho-ordenavel.sorted-asc::after {
    content: '';
    border-bottom: 6px solid white;
    opacity: 1;
}
.tabela-cervejas .cabecalho-ordenavel.sorted-desc::after {
    content: '';
    border-top: 6px solid white;
    opacity: 1;
}

.tabela-cervejas .col-quebravel {
    word-break: break-word; 
    white-space: normal; 
}


/* Esconde as colunas de endereço por padrão */
.col-cep,
.col-logradouro,
.col-numero,
.col-complemento,
.col-email,
.col-telefone {
    display: none;
}

/* --- FILTROS E CONTROLES --- */
.area-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
    background-color: #333;
    padding: 15px;
    border-radius: 8px;
}
.area-filtros .filtro-item {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.area-filtros label {
    color: white;
    margin-bottom: 5px;
    font-size: 0.9em;
}
.area-filtros select,
.area-filtros input {
    padding: 8px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #555;
    background-color: #444;
    color: white;
    min-width: 200px;
}

.area-controles-colunas {
    background-color: #333;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 0.9em;
}
.area-controles-colunas > label {
    font-weight: bold;
    color: var(--cor-dourada);
}
.area-controles-colunas .opcoes-colunas {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.area-controles-colunas .opcoes-colunas label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--cor-texto);
}
.area-controles-colunas input[type="checkbox"] {
    cursor: pointer;
}

#contador-socios {
    color: white;
    margin-top: -10px;
    margin-bottom: 20px;
    font-style: italic;
}

/* --- ESTILOS DE LARGURA DE COLUNA PARA TABELAS --- */

/* Tabela Todas as Cervejas e Minhas Cervejas */
.tabela-cervejas .col-socio {
    min-width: 200px;
}
.tabela-cervejas .col-nome-cerveja {
    min-width: 180px; 
}
.tabela-cervejas .col-estilo {
    min-width: 150px;
}
.tabela-cervejas .col-descricao {
    min-width: 250px;
}
.tabela-cervejas .col-litros,
.tabela-cervejas .col-abv,
.tabela-cervejas .col-ibu {
    min-width: 70px;
    text-align: center;
}
.tabela-cervejas .col-chopeira {
    min-width: 120px;
}
.tabela-cervejas .col-alterar,
.tabela-cervejas .col-excluir {
    min-width: 80px;
    text-align: center;
}


/* Tabela Gestão de Sócios */
.tabela-cervejas th.col-nome,
.tabela-cervejas td.col-nome {
    min-width: 200px;
}
.tabela-cervejas th.col-validade,
.tabela-cervejas td.col-validade {
    min-width: 100px;
    text-align: center;
}
.tabela-cervejas th.col-email,
.tabela-cervejas td.col-email {
    min-width: 250px;
}
.tabela-cervejas th.col-cpf,
.tabela-cervejas td.col-cpf {
    min-width: 125px;
}
.tabela-cervejas th.col-rg,
.tabela-cervejas td.col-rg {
    min-width: 120px;
}
.tabela-cervejas th.col-nascimento,
.tabela-cervejas td.col-nascimento {
    min-width: 115px;
}
.tabela-cervejas th.col-telefone,
.tabela-cervejas td.col-telefone {
    min-width: 125px;
}
.tabela-cervejas th.col-cidade,
.tabela-cervejas td.col-cidade {
    min-width: 180px;
}
.tabela-cervejas th.col-cep,
.tabela-cervejas td.col-cep {
    min-width: 100px;
}
.tabela-cervejas th.col-logradouro,
.tabela-cervejas td.col-logradouro {
    min-width: 300px;
}
.tabela-cervejas th.col-numero,
.tabela-cervejas td.col-numero {
    min-width: 90px;
}
.tabela-cervejas th.col-complemento,
.tabela-cervejas td.col-complemento {
    min-width: 150px;
}
.tabela-cervejas th.col-editar,
.tabela-cervejas td.col-editar {
    min-width: 90px;
    text-align: center;
}
.tabela-cervejas th.col-registro,
.tabela-cervejas td.col-registro {
    min-width: 110px;
}
.tabela-cervejas th.col-data-alteracao,
.tabela-cervejas td.col-data-alteracao {
    min-width: 110px;
}

.col-data-registro,
.col-data-alteracao {
    display: none;
}

.campo-invalido-msg {
    color: #ff9d9d;
    font-size: 0.9em;
    display: block;
    margin-top: 5px;
}

/* =======================================================
   REGRAS DE RESPONSIVIDADE (CELULARES E TABLETS PEQUENOS)
   ======================================================= */
@media (max-width: 768px) {
    /* Diminui o espaço interno do container para dar mais tela ao conteúdo */
    .container-cervejas {
        padding: 15px 10px;
    }

    /* Otimização de Tabelas para Celular */
    .tabela-wrapper {
        border-radius: 4px;
        box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.5); /* Sombra indicando que dá pra rolar pro lado */
    }
    .tabela-cervejas th,
    .tabela-cervejas td {
        padding: 10px 8px; /* Reduz o espaço em branco entre as letras */
        font-size: 0.85em; /* Diminui a fonte levemente */
    }
    
    /* Previne o zoom automático irritante do iPhone ao clicar em inputs */
    .container-cervejas input, 
    .container-cervejas select, 
    .container-cervejas textarea {
        font-size: 16px !important; 
    }

    /* Ajusta botões para não ficarem tão grandes no toque */
    .btn-principal, .btn-consultar {
        font-size: 0.9em;
        padding: 10px 15px;
    }

    /* Formulários lado a lado quebram para uma coluna no celular */
    .container-cervejas div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .container-cervejas div[style*="display:grid"] {
        grid-template-columns: 1fr !important;
    }
}