/**
 * profile-modal.css — redesign do modal "Meu Perfil".
 *
 * O design anterior (sidebar vertical + content pane) vivia em
 * brand-system.css, que está desativado no index.html (custava GPU no
 * body inteiro por causa de gradients/noise não relacionados ao modal).
 * Sem aquele arquivo, o modal caía nos defaults nus do navegador — por
 * isso as abas quebravam linha e as linhas de info (Plano/Status/etc)
 * empilhavam ao invés de ficar lado a lado.
 *
 * Este arquivo reconstrói só o necessário, isolado, usando os tokens de
 * design que o resto do app (redesign/tokens.css) já usa — mesmo visual
 * "Soft Dark Premium", sem o custo de performance do arquivo antigo.
 * Layout inspirado nas telas de configuração do Google/Slack/Notion:
 * sidebar de navegação fixa à esquerda + conteúdo espaçoso à direita.
 */

/* Altura FIXA (não max-height) — trocar de aba não pode redimensionar o
   modal, senão fica estranho (usuário reportou). Calibrada pra caber bem
   no conteúdo da aba mais alta (Conta, com avatar + assinatura) sem
   sobrar vão grande nas abas mais curtas (Segurança, Estudos). Se algum
   dia uma aba tiver mais conteúdo do que isso, .profile-settings-content
   (que já tem overflow-y-auto no HTML) rola por dentro, sem redimensionar
   o modal. */
#profile-modal-content.profile-settings-modal {
  /* Mais estreito e vertical (~29% menor que os 760px antigos) — menos espaço
     vazio e linhas mais curtas na área de conteúdo. */
  width: min(540px, 94vw);
  height: min(560px, 86vh);
}

/* O HTML usa a utility Tailwind grid-cols-[200px_minmax(0,1fr)], mas ela
   não existe no tailwind.generated.css (arquivo estático, compilado antes
   dessa classe existir) — sem essa regra explícita o grid vira 1 coluna só
   e a sidebar/conteúdo empilham em vez de ficar lado a lado. */
.profile-settings-body {
  display: grid !important;
  grid-template-columns: 186px minmax(0, 1fr) !important;
  /* Sem isso, align-content:stretch (default do grid) distribuía o
     espaço vertical sobrando entre as duas linhas implícitas (nav+conteúdo
     e rodapé) — o rodapé virava um bloco esticado e os botões dentro dele
     (que são flex e herdam align-items:stretch) ficavam altos e tortos,
     tamanho diferente em cada aba conforme o conteúdo. Travando a linha
     do rodapé em "auto", só a linha de cima (nav+conteúdo) cresce. */
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 0;
}

/* --- Sidebar de navegação (vertical, estilo Notion/Linear/Google) --- */
.profile-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 10px;
  border-right: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.16));
  background: var(--bg-0, #0d1117);
}

.profile-tab-btn {
  display: flex;
  align-items: center;
  /* base.css tem um reset global "button { justify-content: center }" —
     sem essa linha, o ícone+texto ficava centralizado em vez de alinhado
     à esquerda, mesmo com text-align:left (que não afeta itens flex). */
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-md, 10px);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3, #94a3b8);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.profile-tab-btn:hover {
  background: var(--bg-2, #1e293b);
  color: var(--text-1, #e2e8f0);
}

.profile-tab-btn.is-active {
  background: var(--accent-soft, rgba(46, 219, 127, 0.14));
  color: var(--accent-strong, #58e89c);
  font-weight: 600;
}

.profile-tab-btn i,
.profile-tab-btn [data-lucide],
.profile-tab-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.8;
}

.profile-tab-btn.is-active i,
.profile-tab-btn.is-active svg {
  opacity: 1;
}

/* --- Área de conteúdo --- */
.profile-settings-content {
  padding: 24px 24px;
}

.profile-tab-pane h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1, #e2e8f0);
  margin-bottom: 4px;
}

.profile-tab-pane > p:first-of-type {
  color: var(--text-3, #94a3b8);
  font-size: 13px;
  margin-bottom: 26px;
}

.profile-section-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--text-3, #94a3b8) !important;
  border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.16)) !important;
}

/* --- Avatar --- */
#profile-preview-initial {
  background: var(--accent-soft, rgba(46, 219, 127, 0.14));
  color: var(--accent-strong, #58e89c);
}

/* --- Linhas de info (estilo Linear/GitHub Settings): label à esquerda,
   valor em destaque à direita, divisores sutis entre linhas. --- */
.profile-info-list {
  margin: 0;
  padding: 0;
}

.profile-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
}

.profile-info-row dt {
  font-size: 13px;
  color: var(--text-3, #94a3b8);
  margin: 0;
}

.profile-info-row dd {
  margin: 0;
  font-size: 13px;
  color: var(--text-1, #e2e8f0);
  font-weight: 600;
  text-align: right;
}

.profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.profile-pill--plan {
  background: oklch(0.7 0.14 240 / 0.14);
  border-color: oklch(0.7 0.14 240 / 0.35);
  color: oklch(0.8 0.12 240);
}

.profile-pill--status {
  background: var(--accent-soft, rgba(46, 219, 127, 0.14));
  border-color: oklch(0.74 0.16 152 / 0.35);
  color: var(--accent-strong, #58e89c);
}

/* Função/cargo (Administrador/Aluno) — cor distinta do plano (violeta). */
.profile-pill--role {
  background: oklch(0.62 0.19 295 / 0.16);
  border-color: oklch(0.62 0.19 295 / 0.4);
  color: oklch(0.8 0.14 295);
}

/* --- Rodapé --- */
.profile-settings-footer {
  /* O rodapé é o 3º filho direto do grid .profile-settings-body (junto
     com nav e content) — sem isso ele ficava preso na coluna da sidebar
     em vez de ocupar a largura toda embaixo. */
  grid-column: 1 / -1;
  background: var(--bg-0, #0d1117);
}

/* --- Mobile: sidebar vira faixa horizontal com scroll no topo --- */
@media (max-width: 640px) {
  #profile-modal-content.profile-settings-modal {
    width: 100%;
    height: min(600px, 92vh);
  }

  .profile-settings-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .profile-settings-nav {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.16));
    padding: 10px 12px;
  }

  .profile-tab-btn {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .profile-settings-content {
    padding: 20px;
  }
}