/* =============================================================
   Design System — Painel de Gestão de Colaboradores em Eventos
   Camada sobre Bootstrap 5. Importe Bootstrap ANTES deste arquivo.
   ============================================================= */

/* ---- Tokens ---------------------------------------------------- */
:root {
  /* Superfícies */
  --surface-app: #f6f7f9;      /* fundo geral */
  --surface-card: #ffffff;     /* cards, painéis */
  --surface-sunken: #eef0f3;   /* zonas rebaixadas, thead */

  /* Tinta / texto */
  --ink-900: #111827;          /* sidebar, títulos */
  --ink-700: #374151;          /* texto forte */
  --ink-500: #6b7280;          /* texto secundário */
  --ink-400: #9ca3af;          /* placeholder, meta */

  /* Bordas */
  --line: #e5e7eb;
  --line-strong: #d1d5db;

  /* Marca */
  --brand-600: #4338ca;        /* índigo — ação principal, nav ativa */
  --brand-700: #3730a3;        /* hover */
  --brand-050: #eef2ff;        /* fundo suave da marca */

  /* Status (mapeiam a máquina de estados da Inscrição) */
  --st-deferido:  #059669;  --st-deferido-bg:  #ecfdf5;
  --st-indeferido:#dc2626;  --st-indeferido-bg:#fef2f2;
  --st-analise:   #b45309;  --st-analise-bg:   #fffbeb;
  --st-cancelado: #6b7280;  --st-cancelado-bg: #f3f4f6;

  /* Elevação — sombra em camadas, discreta */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04),
               0 1px 3px rgba(16, 24, 40, .06);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, .05),
               0 8px 20px rgba(16, 24, 40, .08);

  --radius: 10px;
  --radius-sm: 7px;
  --sidebar-w: 244px;

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Base ------------------------------------------------------ */
body {
  font-family: var(--font-ui);
  background: var(--surface-app);
  color: var(--ink-700);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { color: var(--ink-900); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }

/* ---- Layout shell --------------------------------------------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--ink-900); color: #cbd2dd;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar__brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.15rem 1.25rem; color: #fff; font-weight: 600; font-size: 1.02rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar__brand .mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--brand-600); display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: .85rem;
}
.sidebar__nav { padding: .75rem .6rem; overflow-y: auto; flex: 1; }
.nav-section {
  color: #6b7688; font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; padding: .9rem .65rem .35rem;
}
.nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .65rem; border-radius: var(--radius-sm);
  color: #cbd2dd; font-weight: 500; margin-bottom: 2px;
  transition: background .12s ease, color .12s ease;
}
.nav-link svg { width: 18px; height: 18px; opacity: .85; flex: 0 0 18px; }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.active { background: var(--brand-600); color: #fff; }
.nav-link.active svg { opacity: 1; }
.nav-link .count {
  margin-left: auto; background: rgba(255,255,255,.14);
  border-radius: 20px; padding: 0 .5rem; font-size: .72rem; font-weight: 600;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 62px; background: var(--surface-card);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem; position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-size: 1.05rem; font-weight: 600; color: var(--ink-900); }
.topbar__spacer { flex: 1; }
.icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-500);
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { color: var(--ink-900); border-color: var(--line-strong); }
.icon-btn .dot {
  position: absolute; top: 7px; right: 8px; min-width: 16px; height: 16px;
  background: var(--st-indeferido); color: #fff; border-radius: 20px;
  font-size: .65rem; font-weight: 700; display: grid; place-items: center;
  padding: 0 4px; border: 2px solid #fff;
}
.user-chip { display: flex; align-items: center; gap: .6rem; }
.user-chip .avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-050);
  color: var(--brand-700); font-weight: 600; display: grid; place-items: center;
}
.user-chip .who { line-height: 1.2; }
.user-chip .who b { color: var(--ink-900); font-weight: 600; font-size: .86rem; }
.user-chip .who span { color: var(--ink-400); font-size: .74rem; }

.content { padding: 1.6rem; flex: 1; }
.page-head { display: flex; align-items: center; margin-bottom: 1.25rem; gap: 1rem; }
.page-head .sub { color: var(--ink-500); font-size: .9rem; margin-top: .1rem; }
.page-head .actions { margin-left: auto; display: flex; gap: .5rem; }

/* Ícone dentro de botão compacto (coluna de ações das listagens). Segue os
   SVGs da sidebar: traço em currentColor, então a cor vem do próprio botão. */
.btn .ico { width: 1rem; height: 1rem; vertical-align: -.15em; flex: 0 0 auto; }

/* ---- Cards ----------------------------------------------------- */
.card-x {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-x__head {
  padding: 1rem 1.15rem; border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--ink-900);
  display: flex; align-items: center; gap: .5rem;
}
.card-x__body { padding: 1.15rem; }

/* Cartão que é um link: o indicador do painel leva à tela onde se age sobre o
   número. Precisa de pista visual de que é clicável — sem sublinhar o texto,
   que estragaria o alinhamento do .stat. */
.card-x--link { display: block; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.card-x--link:hover { border-color: var(--brand-600); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.card-x--link:hover .stat .label { color: var(--brand-700); }

.stat { display: flex; flex-direction: column; gap: .35rem; }
.stat .label { color: var(--ink-500); font-size: .8rem; font-weight: 500; }
.stat .value { font-size: 1.7rem; font-weight: 700; color: var(--ink-900); letter-spacing: -.02em; }
.stat .delta { font-size: .78rem; font-weight: 600; }
.stat .delta.up { color: var(--st-deferido); }
.stat .delta.flat { color: var(--ink-400); }

/* ---- Botões ---------------------------------------------------- */
.btn { font-weight: 600; border-radius: var(--radius-sm); padding: .5rem .95rem; font-size: .88rem; }
.btn-brand { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.btn-brand:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.btn-ghost { background: #fff; border: 1px solid var(--line-strong); color: var(--ink-700); }
.btn-ghost:hover { background: var(--surface-sunken); color: var(--ink-900); }
.btn-approve { background: var(--st-deferido); border-color: var(--st-deferido); color: #fff; }
.btn-approve:hover { filter: brightness(.94); color: #fff; }
.btn-reject { background: #fff; border: 1px solid var(--st-indeferido); color: var(--st-indeferido); }
.btn-reject:hover { background: var(--st-indeferido-bg); }
.btn-sm { padding: .34rem .65rem; font-size: .8rem; }

/* ---- Badges de status (Inscrição) ----------------------------- */
.badge-st {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .22rem .6rem; border-radius: 20px; font-size: .76rem; font-weight: 600;
}
.badge-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-deferido   { color: var(--st-deferido);   background: var(--st-deferido-bg); }
.st-indeferido { color: var(--st-indeferido); background: var(--st-indeferido-bg); }
.st-analise    { color: var(--st-analise);    background: var(--st-analise-bg); }
.st-cancelado  { color: var(--st-cancelado);  background: var(--st-cancelado-bg); }

/* ---- Tabelas --------------------------------------------------- */
.table-x { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-x thead th {
  background: var(--surface-sunken); color: var(--ink-500);
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--line);
}
.table-x tbody td { padding: .8rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table-x tbody tr:hover { background: #fafbfc; }
.table-x .who b { color: var(--ink-900); font-weight: 600; display: block; font-size: .88rem; }
.table-x .who span { color: var(--ink-400); font-size: .76rem; }
.mono { font-variant-numeric: tabular-nums; }

/* Grade fixa: use com <colgroup> quando várias tabelas do mesmo tipo aparecem
   empilhadas (uma por sede, por grupo…). Sem isso cada tabela dimensiona as
   colunas pelo próprio conteúdo e elas desalinham verticalmente entre si. */
.table-x--fixa { table-layout: fixed; }
.table-x--fixa td, .table-x--fixa th { overflow-wrap: anywhere; }

/* Coluna "Ações": encolhe até o conteúdo e não quebra os botões em duas
   linhas, o que mantém a largura estável de uma linha para a outra. */
.col-acoes { width: 1%; white-space: nowrap; text-align: right; }

/* ---- Forms ----------------------------------------------------- */
.form-label { font-weight: 500; color: var(--ink-700); font-size: .85rem; margin-bottom: .3rem; }
.form-control, .form-select {
  border-color: var(--line-strong); border-radius: var(--radius-sm);
  padding: .5rem .7rem; font-size: .9rem; color: var(--ink-900);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-050);
}

/* ---- Estado vazio --------------------------------------------- */
.empty { text-align: center; padding: 3rem 1rem; color: var(--ink-500); }
.empty h3 { color: var(--ink-700); margin-bottom: .35rem; }

/* ---- Acessibilidade / responsivo ------------------------------ */
:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: -100%; z-index: 40; transition: left .2s ease; }
  .sidebar.open { left: 0; }
}

/* --- Autocomplete: input de busca com sugestões --------------------------
   Usado nas telas de listagem com ações (ver skill ui-design-thymeleaf).
   Sem dependência de JS de terceiros: o posicionamento é do CSS, o
   comportamento é jQuery na própria página. */
.autocomplete { position: relative; }

.autocomplete__lista {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px);
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 15rem; overflow-y: auto;
  padding: .25rem;
}

.autocomplete__item {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer;
  padding: .45rem .6rem; border-radius: var(--radius-sm);
  font-size: .88rem; color: var(--ink-700);
}
.autocomplete__item:hover,
.autocomplete__item:focus-visible,
.autocomplete__item[aria-selected="true"] {
  background: var(--brand-050); color: var(--ink-900);
}

/* Linha secundária da sugestão: e-mail, CPF MASCARADO — nunca o dado inteiro. */
.autocomplete__item .meta {
  display: block; font-size: .78rem; color: var(--ink-500);
}

.autocomplete__vazio {
  padding: .5rem .6rem; font-size: .84rem; color: var(--ink-500);
}

/* ---- Faixa de navegação do processo seletivo -------------------- */
/* Links de seção sob o cabeçalho do evento (eventos/_abas.html). A ativa
   ganha a cor de ação; as outras ficam quietas. */
.abas-evento { display: flex; flex-wrap: wrap; gap: .25rem; margin: -.5rem 0 1.25rem; border-bottom: 1px solid var(--line); }
.abas-evento a {
  padding: .45rem .75rem; font-size: .86rem; font-weight: 500; color: var(--ink-500);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.abas-evento a:hover { color: var(--ink-900); }
.abas-evento a.ativa { color: var(--brand-700); border-bottom-color: var(--brand-600); }
/* Segundo nível (atendimento especial): menor, sem a linha de baixo. */
.abas-evento--sub { margin-top: -.9rem; border-bottom: 0; }
.abas-evento--sub a { font-size: .8rem; padding: .3rem .6rem; border-radius: 999px; border-bottom: 0; margin-bottom: 0; }
.abas-evento--sub a.ativa { background: var(--surface-sunken, #eef0f5); }
/* Rótulo pequeno acima do título (ex.: "Processo seletivo" sobre o nome). */
.eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); font-weight: 600; }

/* ---- Impressão ------------------------------------------------ */
/* A lista de presença é levada no dia: na impressão sai só o conteúdo, sem
   sidebar, topbar e botões. Quem precisa aparecer SÓ no papel usa .print-only. */
.print-only { display: none; }
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .sidebar, .topbar, .page-head .actions, .no-print { display: none !important; }
  .content { padding: 0; }
  .card-x { box-shadow: none; border-color: #999; break-inside: avoid; }
  .table-x th, .table-x td { border-color: #999 !important; }
  .print-only { display: initial; }
  a { color: inherit; text-decoration: none; }
  tr { break-inside: avoid; }
}