/* Customizações FlowConnect sobre Argon Dashboard */
/* Carregado após argon-dashboard.css */

/* Ajuste na sidebar para links escuros */
#sidenav-main .nav-link:not(.active) {
  color: #67748e !important;
}

/* O background do link ativo é controlado pela classe .bg-gradient-*
   (ex: bg-gradient-primary) que o JS do configurador altera.
   Aqui mantemos apenas cor do texto e sombra. */
#sidenav-main .nav-link.active {
  color: #fff !important;
  box-shadow: 0 4px 6px rgba(94, 114, 228, 0.3);
}

#sidenav-main .nav-link.active .ni,
#sidenav-main .nav-link.active i {
  color: #fff !important;
  opacity: 1 !important;
}

/* Ajuste nos cards de estatísticas do dashboard */
.card .icon.icon-shape {
  margin-bottom: 0;
}

/* Avatar inicial (placeholder) */
.avatar-char {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(310deg, #5e72e4 0%, #825ee4 100%);
  color: #fff;
  font-size: 3rem;
  margin: 0 auto;
}

/* File input customizado */
input[type="file"] {
  font-size: 0.875rem;
}

/* Ajuste no min-height do auth */
.page-header {
  min-height: 100vh;
}

/* Footer fixo relativo */
.footer {
  position: relative;
  bottom: 0;
  width: 100%;
}

/* Melhorias carousel */
.card-carousel .carousel-caption {
  background: transparent;
}

/* Alertas do Django */
.alert {
  border-radius: 0.75rem;
}

/* ===== Suporte para Página de Perfil ===== */

/* Card header com sobreposição (Argon style) */
.card-profile-bottom {
  margin-top: -6rem;
  position: relative;
  z-index: 5;
}

/* Transição suave do header */
.min-height-300 {
  min-height: 300px !important;
}

/* Badges de especialidade (fallback) */
.specialty-badge {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 50rem;
  background: linear-gradient(310deg, #eaecfb 0%, #e2e6fd 100%);
  color: #5e72e4;
}

/* Container principal: sem position+z-index para não criar
   stacking context que prende modais dentro dele. O banner
   escuro (position-absolute) já fica atrás por vir antes no DOM. */
.main-content .container-fluid.py-4 {
  position: relative;
}

/* Melhorias no select do estado */
select.form-control {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

/* Ajuste no position-relative para autocomplete */
.position-relative {
  position: relative !important;
}

.numbers .text-sm {
  font-size: 0.7rem !important;
}