/* 
======================================================
   PERFIL PhD - ESTRUTURA E LAYOUT
======================================================
*/
.profile-page-container {
  padding-top: 120px; /* Espaço para a navbar fixa */
}

.profile-sidebar {
  top: 120px; /* Offset para a navbar fixa */
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-forte);
  padding: 2rem;
}

/* 
======================================================
   PERFIL PhD - SIDEBAR E NAVEGAÇÃO
======================================================
*/
.profile-header .profile-picture {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid var(--cor-superficie);
  box-shadow:
    0 0 0 4px var(--cor-primaria),
    var(--sombra-media);
}
.profile-header .profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profile-picture-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 35px;
  height: 35px;
  background: var(--cor-gradiente-primario);
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border: 2px solid var(--cor-superficie);
  cursor: pointer;
  transition: transform var(--duracao-transicao);
}
.profile-picture:hover .profile-picture-overlay {
  transform: scale(1.1);
}

.profile-nav {
  margin-top: 2rem;
  border-top: 1px solid var(--cor-borda);
  padding-top: 1rem;
}
.profile-nav a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--raio-borda-suave);
  font-family: var(--fonte-titulos);
  font-weight: 600;
  color: var(--cor-texto-secundario);
  transition: all var(--duracao-transicao) var(--curva-animacao);
  position: relative;
}
.profile-nav a i {
  font-size: 1.3rem;
}
.profile-nav a:hover {
  background-color: var(--cor-fundo);
  color: var(--cor-texto-principal);
}
.profile-nav a.active {
  background-color: var(--cor-primaria);
  color: white;
  box-shadow: 0 5px 15px rgba(230, 57, 70, 0.4);
}
.profile-nav .logout-link {
  margin-top: 1rem;
  color: var(--cor-primaria);
}
.profile-nav .logout-link:hover {
  background-color: var(--cor-primaria);
  color: white;
}

/* 
======================================================
   PERFIL PhD - SECÇÕES DE CONTEÚDO
======================================================
*/
.profile-section-card {
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-forte);
  padding: 2.5rem;
  margin-bottom: 2rem;
}
.section-card-title {
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.section-card-subtitle {
  color: var(--cor-texto-secundario);
  margin-bottom: 2rem;
}

.form-label {
  font-family: var(--fonte-titulos);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.form-control {
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-suave);
  height: 55px;
  padding: 0 1rem;
}
.form-control:disabled {
  background-color: var(--cor-fundo);
}
.form-control:focus {
  background-color: var(--cor-fundo);
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.3);
}

/* Garante que o placeholder seja visível em ambos os temas 
   usando a variável de texto secundário do seu Design System
*/
.form-control::placeholder {
  color: var(--cor-texto-secundario) !important;
  opacity: 0.6; /* Mantém o aspecto de 'dica' sem sumir no fundo */
}

/* Compatibilidade para diferentes motores de busca */
.form-control::-webkit-input-placeholder {
  color: var(--cor-texto-secundario) !important;
  opacity: 0.6;
}
.form-control::-moz-placeholder {
  color: var(--cor-texto-secundario) !important;
  opacity: 0.6;
}
.form-control:-ms-input-placeholder {
  color: var(--cor-texto-secundario) !important;
  opacity: 0.6;
}

/* Ajuste específico para garantir que o texto digitado não seja afetado */
.form-control {
  color: var(--cor-texto-principal) !important;
}

/* Switches de Notificação */
.form-check-input {
  width: 3.5em;
  height: 1.75em;
}
.form-check-input:checked {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}
.list-group-item {
  background-color: transparent;
  padding: 1.5rem 0;
}
.notification-label {
  display: flex;
  flex-direction: column;
}
.notification-label small {
  color: var(--cor-texto-secundario);
  font-size: 0.9rem;
}

/* Cards de Avaliação */
.review-card {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-suave);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.review-place {
  font-family: var(--fonte-titulos);
  font-weight: 700;
  color: var(--cor-texto-principal);
  text-decoration: none;
}
.review-date {
  font-size: 0.8rem;
  color: var(--cor-texto-secundario);
  display: block;
}
.review-card-body {
  color: var(--cor-texto-secundario);
}

/* Danger Zone */
.danger-zone {
  background-color: rgba(230, 57, 70, 0.05);
  border-color: rgba(230, 57, 70, 0.2);
}
.danger-zone .section-card-title {
  color: var(--cor-primaria);
}

/* Container do campo de senha */
.col-md-6 {
  position: relative; /* Necessário para o posicionamento absoluto do botão */
}

/* Estilização do Botão de Olhinho */
/* Container pai precisa ser relativo para o absoluto funcionar */
.col-md-6,
.col-12 {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 22px;
  /* 48px costuma alinhar bem quando a label tem altura padrão. 
     Se a label sumir, esse valor precisaria ser menor. */
  top: 48px;
  border: none !important;
  background: transparent !important;
  color: var(--cor-texto-secundario) !important;
  padding: 0;
  z-index: 10;
  height: 35px;
  display: flex;
  align-items: center;
  transition: color var(--duracao-transicao);
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--cor-primaria) !important;
}

/* Aplica o padding em qualquer input que tenha um toggle depois dele */
.form-control:has(~ .password-toggle) {
  padding-right: 50px !important;
}

/* Garante que o ícone mude de cor no foco do input */
.form-control:focus ~ .password-toggle {
  color: var(--cor-primaria) !important;
}

/* Ajuste Mobile */
@media (max-width: 768px) {
  .password-toggle {
    top: 45px; /* Ajuste milimétrico para labels menores no mobile */
    right: 20px;
  }
}

/* Ajuste para Mobile */
@media (max-width: 768px) {
  .password-toogle {
    top: 46px; /* Pequeno ajuste para telas menores */
    right: 25px;
  }
}