/* Painel de configuracoes: barra lateral fixa + conteudo rolando ao lado.
   Depende de comunidades.css, que ja' desenha `.modal-overlay`, `.modal` e o
   botao de fechar -- aqui so' mora o que e' proprio desta tela.

   Carregue depois de comunidades.css. */

.modal-config {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  width: 940px;
  max-width: 96vw;
  height: 84vh;
  max-height: 84vh;
  padding: 0;
  overflow: hidden;
}

/* --- Barra lateral --- */

.config-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 1.1rem 0.7rem;
  overflow-y: auto;
  background: var(--color-sidebar);
  border-right: 1px solid var(--color-border);
}

.config-nav-titulo {
  font-family: var(--font-sans);
  margin: 0 0 0.6rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.config-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: var(--control-h-md);
  padding: 0 0.55rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
}

.config-nav-item svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* Empurra o contador de pendentes pro fim da linha, depois do rotulo. */
.config-nav-item .nav-badge {
  margin-left: auto;
  flex: none;
}

.config-nav-item:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-foreground);
}

.config-nav-item.ativo {
  background: var(--color-elevado);
  color: var(--color-foreground);
}

/* --- Conteudo --- */

.config-conteudo {
  min-width: 0;
  overflow: hidden;
}

.config-painel {
  height: 100%;
  padding: 1.6rem 1.8rem 2rem;
  overflow-y: auto;
}

.modal-config .config-titulo {
  margin: 0 0 1.2rem;
  font-size: 1.25rem;
}

.config-card {
  margin-bottom: 1.1rem;
  padding: 1.1rem 1.2rem;
}

.config-card > *:last-child {
  margin-bottom: 0;
}

/* .card trava em 320px (largura pensada pra formulario de login/cadastro).
   A fila de admin precisa de mais espaco -- e-mail + dois botoes de acao
   numa linha fica apertado demais nisso. Mesma ideia de .perfil-form-card em
   perfil.css, so' que so' pra secao de Administracao. */
.config-card-largo {
  width: 100%;
}

/* O editor de perfil entra inteiro nesta secao. Ele ja' tem a propria grade
   (`.conta-body`, form + previa), entao aqui so' se tira o respiro extra que
   ele carregava de quando era pagina. */
.config-painel .conta-body {
  padding: 0;
}

.config-leitura-rotulo {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  color: var(--color-muted-foreground);
}

.config-leitura {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.config-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 1rem;
}

/* Confirmacao verde reusando o `.form-error` do formulario: a caixa e o
   espacamento sao os mesmos, so' a cor muda. */
.form-ok {
  color: var(--color-accent);
}

/* --- Interruptor ---

   Os seletores abaixo carregam `.modal-config` na frente de proposito: em
   comunidades.css o modal ja' manda em `label` e em `input`, e sem o prefixo
   aquelas regras (mais especificas que uma classe solta) venceriam. */

.modal-config .config-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.9rem;
  cursor: pointer;
}

.modal-config .config-switch:last-child {
  margin-bottom: 0;
}

.config-switch-texto {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.config-switch-rotulo {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-foreground);
}

.config-switch-hint {
  font-size: 0.78rem;
  color: var(--color-muted-foreground);
}

/* O checkbox de verdade continua na arvore (so' invisivel) para o teclado e o
   leitor de tela continuarem funcionando; o trilho ao lado e' so' pintura. */
.modal-config .config-switch input[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.config-switch-trilho {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-secondary);
  transition: background var(--transition-fast);
}

.config-switch-bolinha {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tinta);
  transition: transform var(--transition-fast);
}

.modal-config .config-switch input:checked + .config-switch-trilho {
  background: var(--color-accent);
}

.modal-config .config-switch input:checked + .config-switch-trilho .config-switch-bolinha {
  transform: translateX(18px);
}

.modal-config .config-switch input:focus-visible + .config-switch-trilho {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* --- Deslizante --- */

.config-slider {
  margin-bottom: 1rem;
}

.config-slider-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  color: var(--color-muted-foreground);
}

.config-slider-valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-foreground);
}

.modal-config .config-slider input[type='range'] {
  display: block;
  width: 100%;
  margin: 0;
  accent-color: var(--color-accent);
}

/* --- Teste do microfone --- */

.config-teste {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

.config-teste button {
  flex: none;
}

/* `.form-hint` nasce com `margin-top: -0.5rem` para encostar num `label`, que
   tem margem embaixo. Depois da linha do teste (ou de um deslizante) nao ha
   margem para consumir e a dica subia por cima do botao. */
.config-teste + .form-hint,
.config-slider + .form-hint {
  margin: 0.7rem 0 0;
}

.config-teste button.ativo {
  background: var(--color-destructive);
}

.config-medidor {
  display: flex;
  flex: 1;
  gap: 3px;
  align-items: center;
  min-width: 0;
  height: 22px;
}

.config-medidor span {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: var(--color-secondary);
  transition: background 60ms linear;
}

.config-medidor span.acesa {
  background: var(--color-accent);
}

.config-amostra-chat {
  margin: 0.6rem 0 0;
  color: var(--color-muted-foreground);
}

/* --- Estreito --- */

@media (max-width: 760px) {
  .modal-config {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: 92vh;
    max-height: 92vh;
  }

  .config-nav {
    flex-direction: row;
    gap: 0.3rem;
    overflow-x: auto;
    padding: 0.6rem;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .config-nav-titulo {
    display: none;
  }

  .config-nav-item {
    width: auto;
    flex: none;
  }

  .config-nav-item span {
    white-space: nowrap;
  }

  .config-painel {
    padding: 1.1rem 1rem 1.6rem;
  }

  .config-teste {
    flex-wrap: wrap;
  }
}

@media (max-width: 860px) {
  /* O minimo automatico do grid vinha da largura intrinseca do formulario.
     A trilha precisa poder encolher ate' a area real do painel do modal. */
  .config-painel .conta-body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Os filhos tambem precisam ceder: so' limitar a trilha deixava o card
     e a previa escaparem por cima da coluna seguinte. */
  .config-painel .perfil-edit,
  .config-painel .perfil-previa {
    min-width: 0;
  }

  /* O recuo de desktop consumia quase um terco do formulario no celular,
     comprimindo campos compostos e a paleta antes de faltar tela. */
  .config-painel .perfil-form-card {
    padding: 1rem;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 760px) {
  /* As secoes devem continuar visiveis sem arrastar uma faixa lateral.
     O recuo direito reserva o lugar do fechar, que fica sobre o modal. */
  .config-nav {
    flex-wrap: wrap;
    padding-right: 3.25rem;
    overflow-x: hidden;
  }
}

@media (pointer: coarse) {
  /* Navegar entre secoes tambem precisa tolerar um toque impreciso;
     a altura com mouse continua sendo a do controle compacto. */
  .config-nav-item {
    min-height: 40px;
    min-width: 40px;
  }
}

@media (min-width: 861px) {
  /* O grid de desktop ultrapassava o painel por poucos pixels. Trazer a
     previa para dentro do vao mantem suas dimensoes e elimina a rolagem. */
  /* So' o formulario rola: a previa fica presa no topo do painel para mostrar
     o efeito de cada campo enquanto a pessoa desce ate' ele. Em uma coluna
     (<= 860px) ela volta a rolar junto, senao cobriria o formulario. */
  .config-painel .perfil-previa {
    margin-left: -0.5rem;
    position: sticky;
    top: 0;
  }
}