/* Estilos da view Configurações (admin/configuracoes.js) e do rodapé da sidebar.
   Reaproveita tokens de :root (app.css) — nenhuma cor nova é declarada aqui. */

/* ---------------- rodapé da sidebar ---------------- */
.sidebar-rodape { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }

.rodape-usuario-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: none;
  padding: 8px; cursor: pointer; text-align: left; color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rodape-usuario-btn:hover { border-color: var(--line-2); background: var(--surface); }
.rodape-usuario-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.rodape-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
}
.rodape-avatar img { width: 100%; height: 100%; object-fit: cover; }

.rodape-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.rodape-nome { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rodape-email { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rodape-engrenagem { flex: none; display: grid; place-items: center; color: var(--muted); transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.rodape-engrenagem svg { width: 16px; height: 16px; }
.rodape-usuario-btn:hover .rodape-engrenagem { color: var(--accent); transform: rotate(35deg); }

/* ---------------- view: topo + subnav ---------------- */
.cfg-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.cfg-topo h2 { font-size: 1.35rem; }
#cfgSubnav { margin-bottom: 20px; }

/* ---------------- perfil: avatar ---------------- */
.cfg-avatar-row { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.cfg-avatar-preview {
  flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--line-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem;
}
.cfg-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.cfg-avatar-acoes { flex: 1; min-width: 220px; }
.cfg-avatar-botoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-avatar-acoes .desc { margin-top: 8px; }

/* ---------------- notificações: chips de assinatura ---------------- */
.cfg-notif-chip {
  display: inline-block; font-size: .74rem; padding: .1rem .45rem; border-radius: 5px;
  border: 1px solid var(--line-2); color: var(--muted); margin: 2px 3px 2px 0; white-space: nowrap;
}
.cfg-notif-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cfg-notif-acoes .btn { padding: .34rem .6rem; font-size: .76rem; }

/* ---------------- modal "adicionar pessoa" ---------------- */
.modal--notif { width: min(560px, 94vw); max-height: 88vh; overflow-y: auto; }

.cfg-notif-tipo-pessoa { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cfg-notif-tipo-pessoa label { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.cfg-notif-tipo-pessoa input { accent-color: var(--accent); }

.cfg-notif-tipos { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cfg-notif-tipo-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px;
}
.cfg-notif-tipo-item label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; flex: 1; min-width: 200px; }
.cfg-notif-tipo-item input { margin-top: 3px; accent-color: var(--accent); }
.cfg-notif-tipo-item span { display: flex; flex-direction: column; gap: 1px; }
.cfg-notif-tipo-item small { color: var(--muted); font-size: .78rem; }
.cfg-notif-tipo-projeto {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 5px 8px; font-size: .82rem; max-width: 180px;
}
.cfg-notif-tipo-projeto:disabled { opacity: .5; }

@media (max-width: 640px) {
  .cfg-avatar-row { flex-direction: column; align-items: flex-start; }
}