/* ===========================================================================
   ACABAMENTO — a camada que da o visual aos componentes comuns
   ---------------------------------------------------------------------------
   Carregada pelo `base.html` DEPOIS do CSS de pagina, de proposito. As duas
   folhas globais fazem trabalhos opostos:

     theme.css      vem PRIMEIRO  — define os tokens que a pagina consome.
     acabamento.css vem DEPOIS    — reveste os componentes que TODAS as telas
                                    usam (botao, campo, cartao, tabela, aviso).

   Estar por ultimo e o que permite revestir sem `!important`: mesma
   especificidade, e quem vem depois ganha. Nada aqui muda LAYOUT (tamanho,
   posicao, grid) — so superficie, borda, sombra e movimento. Assim o visual muda
   sem risco para o que ja funciona.

   Seletor de ELEMENTO (input, select, table...) vai sempre dentro de `:where()`,
   que tem especificidade ZERO: se a pagina tiver regra propria para aquele campo,
   a dela vence. Aqui e piso de qualidade, nao imposicao.
   =========================================================================== */

/* ============================ BOTOES ============================ */

/* Botao principal: degrade do verde do logo (vivo -> fundo), brilho de acento e
   um levantar de 1px no hover. O texto continua branco porque o degrade fica na
   faixa do `--accent-strong`, que sustenta contraste com branco negrito. */
.primary-button,
button.primary-button,
a.primary-button {
  background: var(--accent-grad);
  color: var(--on-accent);
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  border-radius: var(--r);
  box-shadow: var(--glow-soft);
  transition: transform var(--t-fast), box-shadow var(--t), filter var(--t);
}

.primary-button:hover:not(:disabled),
a.primary-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow);
  filter: saturate(115%);
}

.primary-button:active:not(:disabled) {
  transform: translateY(0) scale(0.995);
  box-shadow: var(--glow-soft);
}

.primary-button:disabled {
  filter: grayscale(35%);
  box-shadow: none;
  opacity: 0.65;
}

/* Botao secundario: vidro. No escuro ele "afunda" no fundo; no claro, sobe. */
.secondary-button,
button.secondary-button,
a.secondary-button {
  background: rgba(var(--edge-rgb), 0.06);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: background var(--t), border-color var(--t), transform var(--t-fast);
}

.secondary-button:hover:not(:disabled),
a.secondary-button:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--text);
  transform: translateY(-1px);
}

.danger-link,
.danger-button {
  color: var(--danger);
  transition: color var(--t), background var(--t);
}

.danger-link:hover,
.danger-button:hover {
  color: var(--danger-strong);
}

/* ============================ CAMPOS ============================ */

:where(input:not([type='checkbox']):not([type='radio']):not([type='range']),
       select,
       textarea) {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

:where(input, select, textarea):focus {
  border-color: rgba(var(--accent-rgb), 0.7);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
  outline: none;
}

:where(input, textarea)::placeholder {
  color: var(--muted-2);
}

/* Caixa de selecao e radio no verde do sistema, em vez do azul do navegador. */
:where(input[type='checkbox'], input[type='radio']) {
  accent-color: var(--accent);
}

/* ====================== CARTOES E PAINEIS ====================== */

/* O cartao ganha vidro e uma borda de luz no topo — o detalhe que faz a
   superficie parecer iluminada de cima, e o que mais "moderniza" a tela escura.
   `position: relative` so entra se o elemento nao posicionar nada (por isso o
   pseudo-elemento fica em cartoes especificos, nao em todo mundo). */
.settings-card,
.panel,
.panel-card {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

@supports not (backdrop-filter: blur(2px)) {
  .settings-card,
  .panel,
  .panel-card { background: var(--surface); }
}

.panel-head {
  border-bottom: 1px solid var(--border);
}

/* ============================ TABELAS ============================ */

:where(table) {
  border-color: var(--border);
}

:where(thead th) {
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: transparent;
}

:where(tbody tr) {
  transition: background var(--t-fast);
}

:where(tbody tr:hover) {
  background: rgba(var(--accent-rgb), 0.06);
}

:where(td) {
  border-color: var(--border);
}

/* ======================= AVISOS (toast) =======================
   O toast passa a ser vidro escuro com uma barra de cor a esquerda: fica legivel
   sobre qualquer tela e a cor diz o tipo sem precisar de icone.

   ⚠️ A FORMA tambem mora aqui (canto, grade, fechar, entrada), e nao no CSS de pagina:
   o HTML do aviso esta no `base.html`, entao o estilo tem de estar num arquivo que o
   `base.html` carrega SEMPRE. Ate 20/10/2026 ela estava so no dashboard.css e no
   password_recovery.css, e as telas que carregam so o login.css (entrar no master,
   trocas de senha, inscricao, pagamento, Mensalidade) mostravam o aviso como texto solto
   no topo. Acima de qualquer janela (1300): o aviso responde ao que se fez nela. */
.toast-container {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1300;
  display: grid;
  gap: 10px;
  width: min(100vw - 36px, 400px);
  pointer-events: none;
}

.toast-message {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 15px;
  line-height: 1.45;
  animation: toast-enter 0.24s ease-out;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  color: var(--text);
}

.toast-marker {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--accent-grad);
}

.toast-content {
  font-size: 0.95rem;
  font-weight: 500;
}

.toast-success .toast-marker { background: var(--accent-grad); }
.toast-error .toast-marker,
.toast-danger .toast-marker { background: var(--danger); }
.toast-warning .toast-marker { background: var(--amber); }
.toast-info .toast-marker { background: var(--blue); }

.toast-close {
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: none;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-fast);
}

.toast-close:hover {
  color: var(--text);
}

.toast-hiding {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-message {
    animation: none;
  }
}

/* ===================== JANELAS (modal) =====================
   Fundo com desfoque: separa a janela do que esta atras sem escurecer tudo. */
[class$='-modal-backdrop'],
[class*='-modal-backdrop '] {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

[class$='-modal-dialog'],
[class*='-modal-dialog '] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}

/* ================== BARRA LATERAL (acabamento) ==================
   A barra e escura nos DOIS temas: e onde o logo vive. O que muda aqui e o
   acabamento — luz na borda direita, item ativo com trilho de acento e brilho. */
.sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35);
}

.sidebar-logo {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 6px 18px rgba(var(--accent-rgb), 0.45));
}

.sidebar-brand strong {
  letter-spacing: -0.2px;
}

/* Item do menu: o ativo ganha um trilho de acento a esquerda e um veu verde.
   Antes ativo e hover eram iguais — dava para passar o mouse e nao saber mais em
   que tela estava. */
.nav-item {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: background var(--t), border-color var(--t), transform var(--t-fast), color var(--t);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateX(2px);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.05));
  border-color: rgba(var(--accent-rgb), 0.35);
  color: #ffffff;
  transform: none;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--accent-grad-lime);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
}

.nav-icon {
  transition: background var(--t), box-shadow var(--t), transform var(--t-fast);
}

.nav-item.active .nav-icon {
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55);
  transform: scale(1.06);
}

/* Pe da barra: o botao de tema desce para o fim da coluna. */
.sidebar-foot {
  margin-top: auto;
  padding-top: 8px;
}

/* ================== ENTRADA DA TELA ==================
   O conteudo principal sobe 8px ao carregar. Uma vez, rapido, sem loop: da a
   sensacao de "montou agora" e nao atrapalha quem navega rapido. */
.dashboard-main > * {
  animation: zp-rise var(--t-slow) both;
}

.dashboard-main > *:nth-child(1) { animation-delay: 0ms; }
.dashboard-main > *:nth-child(2) { animation-delay: 45ms; }
.dashboard-main > *:nth-child(3) { animation-delay: 90ms; }
.dashboard-main > *:nth-child(4) { animation-delay: 135ms; }
.dashboard-main > *:nth-child(n + 5) { animation-delay: 170ms; }

/* A tela de Conversas NAO entra animada: ela e uma area de trabalho com rolagem
   e lista virtual, e animar a montagem dela atrapalha quem esta lendo. */
.conversations-page .dashboard-main > * {
  animation: none;
}