/* =====================================================================
   Telas de solicitação e notificações.
   Usa os tokens de tokens.css e a família .badge / --st-* de styles.css,
   para os cartões novos lerem como os cartões que já existem.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Visibilidade por papel
   (o `admin-only` mora em styles.css, ancorado em :not(.papel-admin))
   --------------------------------------------------------------------- */
.papel-solicitante .nao-solicitante { display: none !important; }
.papel-operador .nao-operador { display: none !important; }

/* ---------------------------------------------------------------------
   Meus projetos: o solicitante acompanha, não executa.
   O checkbox continua VISÍVEL (é como ele vê o que já foi entregue), mas não
   recebe clique. O bloqueio de verdade é no servidor — isto é só para não
   mostrar botão que responderia 403.
   --------------------------------------------------------------------- */
.papel-solicitante .form-novo-processo,
.papel-solicitante .faixa-botoes,
.papel-solicitante .processo-botoes { display: none !important; }
.papel-solicitante .processo-check { pointer-events: none; }
.papel-solicitante .lista-topo .check-ocultar { display: none; }

/* Sem os botões, a área de ações do card fica um vão vazio no fim do accordion. */
.papel-solicitante .faixa-acoes { display: none; }

/* ---------------------------------------------------------------------
   Badge de contagem no menu
   --------------------------------------------------------------------- */
.nav-item .badge-conta {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: var(--sp-1);
  border-radius: var(--r-pill); text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  line-height: 18px;
  color: var(--text-on-accent); background: var(--accent);
}

/* ---------------------------------------------------------------------
   Cartão de solicitação
   --------------------------------------------------------------------- */
.solic-lista { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }

.solic {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4) var(--sp-5);
}

.solic-topo { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.solic-nome {
  flex: 1 1 auto; margin: 0;
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--text);
}
.solic-desc { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.solic-meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.solic-acoes { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }

.solic-motivo {
  margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--st-travado-edge); border-radius: var(--r-md);
  background: var(--st-travado-bg); color: var(--st-travado);
  font-size: var(--fs-body); line-height: var(--lh-body);
}

/* Selo de status do pedido — mesma escala dos badges do card de projeto. */
.badge-st.st-pendente { background: var(--st-andamento-bg); border-color: var(--st-andamento-edge); color: var(--st-andamento); }
.badge-st.st-aprovada { background: var(--st-concluido-bg); border-color: var(--st-concluido-edge); color: var(--st-concluido); }
.badge-st.st-recusada { background: var(--st-travado-bg);   border-color: var(--st-travado-edge);   color: var(--st-travado); }

/* ---------------------------------------------------------------------
   Conversa dentro da solicitação
   --------------------------------------------------------------------- */
.conversa { margin-top: var(--sp-4); border-top: 1px solid var(--border-hair); padding-top: var(--sp-3); }
.conversa-lista { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.conversa-vazia { margin: 0 0 var(--sp-3); color: var(--text-muted); font-size: var(--fs-body); }

.msg {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-hair); border-radius: var(--r-md);
  background: var(--ground-2);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text);
}
/* A própria mensagem puxa o verde-limão lavado, o mesmo do hover dos cards. */
.msg-eu { background: var(--accent-bg); border-color: var(--border); }
.msg-autor {
  display: block; margin-bottom: 2px;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-dim);
}

.conversa-form { display: flex; gap: var(--sp-2); }
.conversa-form .input { flex: 1 1 auto; }

/* ---------------------------------------------------------------------
   Notificações
   --------------------------------------------------------------------- */
.notif-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.notif-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }

.notif {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.notif-clicavel { cursor: pointer; }
.notif-clicavel:hover { background: var(--surface-2); border-color: var(--border-strong); }

.notif-ic { flex: 0 0 auto; font-size: var(--fs-base); line-height: var(--lh-snug); }
.notif-txt { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.notif-quando {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-dim);
}