/* public/css/modal-change-password.css */

.modal-overlay {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    /* Aumentado para garantir que apareça sobre outros elementos */
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    overflow-y: auto;
    /* Allow scrolling if content is too tall */
}

/* Garantir que o modal esteja oculto por padrão */
#changePasswordModal {
    display: none;
    /* Garante que o modal comece oculto */
}

/* Quando o modal estiver visível */
#changePasswordModal[style*="display: flex"] {
    display: flex !important;
}

#changePasswordModal[style*="display:flex"] {
    display: flex !important;
}

/* Definições de tamanho específicas para este modal, se for diferente do modal-wrapper padrão */
#changePasswordModal .modal-wrapper {
    background-color: #fefefe;
    margin: 5% auto;
    border: 1px solid #888;
    max-width: 500px;
    /* Largura ideal para formulários */
    width: 90%;
    /* Garante responsividade */
    position: relative;
    display: flex;
    /* Para organizar o cabeçalho e o conteúdo verticalmente */
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    /* Garante que os cantos arredondados sejam aplicados ao conteúdo */
    transition: all 0.3s ease-in-out;
}

/* Estilos gerais do conteúdo do modal de alteração de senha */
.change-password-content {
    padding: 30px;
    /* Mantém o padding interno - mesmo valor do news-modal */
    flex-grow: 1;
    /* Permite que o conteúdo ocupe o espaço restante */
    overflow-y: auto;
    /* Adiciona scroll se o conteúdo for muito longo */
    border: 0 !important;
}

.change-password-instruction-title {
    font-size: 18px;
    color: #212529;
    margin-bottom: 5px;
    font-weight: 600;
    text-align: left;
}

.change-password-instruction {
    font-size: 14px;
    color: #858E96;
    margin-bottom: 20px;
    text-align: left;
    font-weight: 400;
}

/* Estilos do formulário */
.change-password-form .form-group-pass {
    margin-bottom: 15px;
    position: relative;
    /* Para posicionar ícones dentro do input group */
}

.change-password-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #212529;
    font-weight: 500;
}

#current-password {
    background-color: #F6F7FA;
}

.change-password-form input[type="password"] {
    width: 100%;
    padding: 10px 10px;
    border: 1px solid #E8E8E8;
    border-radius: 4px;
    font-size: 1em;
    color: #495057;
    box-sizing: border-box;
    /* Garante que padding e borda não aumentem o tamanho total */
    border-radius: 8px;
}

.change-password-form input[type="password"]:focus {
    outline: none;
    border-color: #bfbfbf;
}

.password-input-group {
    position: relative;
    /* FUNDAMENTAL para posicionar .password-icons */
    display: flex;
    /* Para alinhar input e ícone ou o container de ícones */
    align-items: center;
}

.password-input-group input {
    flex-grow: 1;
    /* Input ocupa o espaço disponível */
    /* Ajuste o padding-right para garantir espaço para os ícones.
       Para um ícone (olho), 40-50px deve ser suficiente. Para dois (checkmark + olho), 70-80px.
       Vamos usar um valor que atenda o caso mais amplo (2 ícones), como 80px. */
    padding-right: 70px;
    /* ... (restante dos estilos do input) ... */
}

.password-icons {
    position: absolute;
    /* Posiciona o container dos ícones ABSOLUTAMENTE */
    right: 10px;
    /* Alinha o container à direita, a 10px da borda do input-group */
    top: 50%;
    /* Centraliza verticalmente */
    transform: translateY(-50%);
    /* Ajuste fino para centralização vertical perfeita */
    display: flex;
    /* Usa Flexbox para colocar os ícones lado a lado (se houver mais de um) */
    align-items: center;
    /* Alinha os ícones verticalmente dentro do container */
    gap: 4px;
    /* Adiciona um espaço de 4px entre os ícones (se houver mais de um) */
}

/* Ícone de checkmark verde (para "Senha Atual") */
.password-input-group .green-check-icon {
    color: #28a745;
    /* Verde */
    font-size: 1.2em;
}

/* Ícone de olho para alternar visibilidade da senha */
/* REMOVA QUALQUER `position` ou `right` que estava aqui,
   pois o pai `.password-icons` já está cuidando do posicionamento absoluto. */
.password-input-group .password-toggle {
    /* REMOVA: position: absolute; */
    /* REMOVA: right: 10px; */
    color: #6c757d;
    cursor: pointer;
    font-size: 1.2em;
    padding: 5px;
    /* Facilita o clique */
}

/* Link "Esqueci minha senha" */
.forgot-password-link {
    display: block;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: #F15F56;
    /* Vermelho */
    text-decoration: none;
    margin-top: 8px;
}

.forgot-password-link:hover {
    color: #c0392b;
    text-decoration: underline;
}

.form-divider {
    border: none;
    /* Remove a borda padrão do <hr> */
    border-top: 1px solid #E0E0E0;
    /* Cor e espessura da linha divisãria */
    margin: 25px 0;
    /* Espaçamento acima e abaixo da linha */
}

/* Ajuste e centralização do texto de ajuda da senha (disclaimer) */
.password-helper-text {
    font-size: 12px;
    /* Ou o tamanho exato que está no Figma, ex: 13px */
    color: #ACB5BD;
    margin-top: 0px;
    /* Remove margem superior, pois a HR já tem espaçamento */
    margin-bottom: 25px;
    /* Adiciona espaçamento inferior para separar do próximo campo */
    line-height: 1.4;
    text-align: left;
}

/* Botões de Ação do Formulário */
.form-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* Centraliza o grupo de botões */
    gap: 10px;
    /* Espaço entre os botões */
    margin-top: 25px;
}

.form-actions button {
    flex-grow: 1;
    /* Faz com que os botões se expandam para preencher o espaço disponível igualmente */
    /* Remover: min-width: 120px; */
    /* Não precisamos mais de um tamanho mínimo fixo */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    text-align: center;
}

/* Botão principal (Alterar Senha) - Vermelho */
.form-actions .btn-primary-red {
    background-color: #F15F56;
    color: #fff;
    transition: background-color 0.3s ease;
}

.form-actions .btn-primary-red:hover {
    background-color: #c0392b;
}

/* Botão secundário (Cancelar) - Cinza/Branco */
.form-actions .btn-secondary-gray {
    background-color: #ffffff;
    /* Fundo branco */
    color: #495057;
    /* Texto em cinza escuro */
    border: 1px solid #ACB5BD;
    /* Borda fina em cinza escuro */
}

.form-actions .btn-secondary-gray:hover {
    background-color: #f8f9fa;
    /* Um leve cinza no hover para dar feedback visual */
    border-color: #212529;
    /* Aumenta o tom da borda no hover */
    color: #212529;
    /* Aumenta o tom da cor da fonte no hover */
}

/* Responsividade para telas menores */
@media (max-width: 600px) {
    .form-actions {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
    }

    .form-actions button {
        width: 100%;
        min-width: unset;
    }
}

/* CORREÇÃO ESPECÍFICA PARA O HEADER DO MODAL DE ALTERAÇÃO DE SENHA */
#changePasswordModal .modal-header-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Espaça os elementos */
    background-color: #EFF0F4;
    /* Cor de fundo da barra */
    padding: 8px 30px;
    /* Preenchimento interno */
    color: #333;
    font-size: 0.9em;
    flex-shrink: 0;
    /* Impede que a barra encolha */
}

#changePasswordModal .modal-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Espaço entre o título e a barra de endereço */
    flex-grow: 1;
    /* Permite que esta seção ocupe mais espaço */
}

#changePasswordModal .modal-header-title {
    font-weight: 500;
    white-space: nowrap;
    /* Impede que o título quebre linha */
    color: #495057;
    font-size: 14px;
}

#changePasswordModal .modal-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Espaço entre os três botões */
}

#changePasswordModal .modal-header-action-btn {
    background: none;
    /* Remove qualquer background padrão */
    border: none;
    /* Remove borda padrão */
    cursor: pointer;
    /* Indica que é clicável */
    color: #666;
    /* Cor base unificada para o ícone */
    padding: 0 5px;
    /* Padding interno do botão */

    /* Centraliza o ícone dentro do botão */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Define um tamanho fixo para maior consistência visual entre os botões */
    width: 28px;
    /* Largura do botão */
    height: 28px;
    /* Altura do botão */
    border-radius: 4px;
    /* Bordas arredondadas */
    transition: background-color 0.2s ease;
    /* Transição suave */
}

#changePasswordModal .modal-header-action-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    /* Fundo sutil no hover */
}

#changePasswordModal .modal-header-action-btn i {
    font-size: 14px;
    color: #495057;
}