/* ==========================================================================
   css/ui.css — componentes compartilhados do Portal GT Home (OPT-IN)
   Criado em 30/09/2026 com a skill design-portal (.claude/skills/design-portal).

   POR QUE EXISTE: cada módulo reinventou botão, card, indicador, pílula e tabela
   (.btn em 22 arquivos com 12 paddings; .card em 28 com 12 fundos; 49 toasts —
   docs/DESIGN_DIAGNOSTICO.md §4). Esta folha é a versão única, feita só de tokens.

   CONTRATO (não quebrar):
   - OPT-IN: vale só na página que linka /css/ui.css — DEPOIS de fonts.css,
     design-tokens.css e tema.css e ANTES do CSS da página. Não muda tela antiga.
   - Tudo com prefixo .ui-* (conferido: nenhuma classe do portal começava assim).
     Variante é outra classe com o mesmo prefixo (ui-btn ui-btn-primary), nunca
     modificador solto (.primary, .is-bad), que colidiria com CSS de página.
   - Só tokens do design-tokens.css: nenhuma cor cravada. O tema claro vem de
     graça pelo tema.css. Transparência de cor por color-mix().
   - Especificidade de UMA classe: a página ajusta sem !important.
   - Não estiliza elemento solto (body, table, button): quem usa pede pela classe.
   - Celular: @media SEMPRE "screen and" (o PDF usa window.print e não pode herdar
     o layout de celular). Tabela vira cartão com a classe gt-cardlist, que já
     existe no css/mobile.css — não duplicar aqui.
   ========================================================================== */

/* ── Página ─────────────────────────────────────────────────────────────── */
/* O menu (menu_topbar.php) já dá o recuo do rail e da barra do topo ao body. */
.ui-page {
  max-width: 1440px;
  margin: 0 auto;
  /* fundo generoso: os botões flutuantes (Sugestão, Check-in) não cobrem o fim */
  padding: var(--sp-6) var(--sp-6) calc(var(--sp-12) * 2);
  box-sizing: border-box;
}
.ui-page-narrow { max-width: 1180px; }

/* Cabeçalho da tela: título + subtítulo à esquerda, ações à direita.
   UM formato para o portal inteiro (antes eram três). */
.ui-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.ui-head-title {
  margin: 0;
  font-family: var(--font-display, 'Axiforma', 'Roboto', sans-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.ui-head-sub {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text-secondary);
  max-width: 72ch;
}
.ui-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ui-head-meta { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }

/* ── Seção e grade ──────────────────────────────────────────────────────── */
.ui-section { margin-bottom: var(--sp-8); }
.ui-section-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display, 'Axiforma', 'Roboto', sans-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
}
/* Colunas que se ajustam sozinhas; mínimo por coluna ajustável na página:
   style="--ui-col-min: 280px" */
.ui-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-col-min, 220px)), 1fr));
}
/* Grade de indicadores: colunas estreitas, e DUAS por linha no celular. */
.ui-grid-kpi { --ui-col-min: 190px; --ui-col-min-mob: 140px; gap: var(--sp-3); }

/* ── Rótulo em caixa-alta (eyebrow) ─────────────────────────────────────── */
.ui-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Card ───────────────────────────────────────────────────────────────── */
/* No escuro o card se separa pela BORDA; sem sombra, sem borda colorida. */
.ui-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  min-width: 0;
  box-sizing: border-box;
}
.ui-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.ui-card-title {
  margin: 0;
  font-family: var(--font-display, 'Axiforma', 'Roboto', sans-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.ui-card-link {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.ui-card-link:hover { color: var(--brand-txt); text-decoration: underline; }
/* mesma aparência quando é botão (abre modal em vez de navegar) */
button.ui-card-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit;
}
/* Card em ALERTA (e só nesse caso): borda tingida do vermelho de status. */
.ui-card-alert { border-color: color-mix(in srgb, var(--bad) 55%, var(--border)); }

/* ── Indicador (KPI) ────────────────────────────────────────────────────── */
/* Rótulo em cima, valor grande, apoio embaixo; ícone opcional no canto, numa
   coluna própria — nunca por cima do valor (o bug da home no celular). */
.ui-kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label icon"
    "value value"
    "sub   sub";
  row-gap: var(--sp-1);
  column-gap: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  min-width: 0;
  box-sizing: border-box;
}
.ui-kpi-label {
  grid-area: label;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 0;
}
.ui-kpi-icon { grid-area: icon; font-size: var(--fs-md); color: var(--text-muted); }
.ui-kpi-value {
  grid-area: value;
  font-family: var(--font-display, 'Axiforma', 'Roboto', sans-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  /* dígitos da Axiforma são proporcionais: sem isto os números não alinham */
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-kpi-sub {
  grid-area: sub;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  min-width: 0;
}
.ui-kpi-sub .ui-bar { flex: 1 1 100%; margin-top: var(--sp-1); }
/* Status: SÓ quando o número é alerta/êxito de fato. Filete de 3px à esquerda +
   cor do valor. Indicador neutro fica neutro (acabou o "arco-íris"). */
.ui-kpi-bad  { box-shadow: inset 3px 0 0 var(--bad); }
.ui-kpi-bad  .ui-kpi-value { color: var(--bad); }
.ui-kpi-good { box-shadow: inset 3px 0 0 var(--good); }
.ui-kpi-good .ui-kpi-value { color: var(--good); }
.ui-kpi-warn { box-shadow: inset 3px 0 0 var(--warn); }
.ui-kpi-warn .ui-kpi-value { color: var(--warn); }
/* Indicador que é link (abre o detalhe) */
a.ui-kpi { text-decoration: none; color: inherit; }
a.ui-kpi:hover, button.ui-kpi:hover { border-color: var(--border-md); background: var(--bg-hover); }
button.ui-kpi { font: inherit; text-align: left; cursor: pointer; }

/* ── Barra de progresso ─────────────────────────────────────────────────── */
/* Largura por variável: <div class="ui-bar"><span style="--ui-pct:18.7%"></span></div> */
.ui-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--bg-hover);
  overflow: hidden;
}
.ui-bar > span {
  display: block;
  height: 100%;
  width: var(--ui-pct, 0%);
  max-width: 100%;
  border-radius: inherit;
  background: var(--text-secondary);   /* neutra: progresso não é status */
}
.ui-bar-good > span { background: var(--good); }
.ui-bar-bad  > span { background: var(--bad); }
.ui-bar-warn > span { background: var(--warn); }
.ui-bar-info > span { background: var(--info); }

/* ── Lista rótulo → valor (o miolo dos cards de resumo) ─────────────────── */
.ui-kv { margin: 0; padding: 0; }
.ui-kv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-md);
}
.ui-kv-row:first-child { border-top: 0; padding-top: 0; }
.ui-kv-row > :first-child { color: var(--text-secondary); min-width: 0; margin: 0; }
.ui-kv-row > :last-child {
  margin: 0;
  color: var(--text-primary);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
/* o seletor acima (duas classes) ganharia de .ui-pos/.ui-neg soltos: repete aqui com o mesmo peso */
.ui-kv-row > .ui-pos { color: var(--good); }
.ui-kv-row > .ui-neg { color: var(--bad); }

/* ── Lista de eventos/itens ─────────────────────────────────────────────── */
.ui-list { list-style: none; margin: 0; padding: 0; }
.ui-list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-md);
  color: var(--text-primary);
  min-width: 0;
}
.ui-list-item:first-child { border-top: 0; padding-top: 0; }
.ui-list-item > i { width: 16px; text-align: center; color: var(--text-muted); flex: none; }
.ui-list-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-list-meta { margin-left: auto; flex: none; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }

/* ── Botões ─────────────────────────────────────────────────────────────── */
/* Gramática: UM primário (laranja) por tela = a ação principal. O resto é
   secundário (contorno neutro) ou fantasma. Vermelho só para destrutivo. */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--ctl-h);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans, 'Roboto', system-ui, sans-serif);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ui-btn:hover { background: var(--bg-hover); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ui-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* texto PRETO sobre o laranja: branco dá 3,24:1 e reprova o WCAG AA */
.ui-btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.ui-btn-primary:hover { background: var(--brand); filter: brightness(1.08); }
.ui-btn-ghost { border-color: transparent; color: var(--text-secondary); }
.ui-btn-ghost:hover { color: var(--text-primary); }
.ui-btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.ui-btn-danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.ui-btn-sm { height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
/* Só ícone: aria-label OBRIGATÓRIO no HTML */
.ui-btn-icon { width: var(--ctl-h); padding: 0; }
.ui-btn-icon.ui-btn-sm { width: 30px; }

/* Alternador (Mensal | Anual): escolha de VISÃO, não ação — sem laranja. */
.ui-seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  background: var(--bg-input);
}
.ui-seg > button, .ui-seg > a {
  height: calc(var(--ctl-h) - 6px);
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font: var(--fw-medium) var(--fs-md)/1 var(--font-sans, 'Roboto', system-ui, sans-serif);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.ui-seg > [aria-pressed="true"], .ui-seg > [aria-current="true"] {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border-md);
}

/* ── Pílulas (status) ───────────────────────────────────────────────────── */
.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}
.ui-pill-good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.ui-pill-bad  { background: color-mix(in srgb, var(--bad) 16%, transparent);  color: var(--bad); }
.ui-pill-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.ui-pill-info { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); }
/* Identidade (a SUA alçada, "você"), nunca status */
.ui-pill-brand { background: var(--brand-soft); color: var(--brand-txt); }

/* ── Aviso em faixa ─────────────────────────────────────────────────────── */
.ui-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}
.ui-note > i { margin-top: 3px; color: var(--text-muted); }
.ui-note-good { border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); }
.ui-note-good > i { color: var(--good); }
.ui-note-bad  { border-color: color-mix(in srgb, var(--bad) 40%, transparent);  background: color-mix(in srgb, var(--bad) 8%, transparent); }
.ui-note-bad > i { color: var(--bad); }
.ui-note-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.ui-note-warn > i { color: var(--warn); }
.ui-note-info { border-color: color-mix(in srgb, var(--info) 40%, transparent); background: color-mix(in srgb, var(--info) 8%, transparent); }
.ui-note-info > i { color: var(--info); }

/* ── Abas ───────────────────────────────────────────────────────────────── */
.ui-tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.ui-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-secondary);
  font: var(--fw-medium) var(--fs-md)/1.2 var(--font-sans, 'Roboto', system-ui, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ui-tab:hover { color: var(--text-primary); }
.ui-tab[aria-selected="true"], .ui-tab[aria-current="page"] {
  color: var(--text-primary);
  border-bottom-color: var(--brand);
}

/* ── Filtros e campos ───────────────────────────────────────────────────── */
.ui-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
}
.ui-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 160px; }
.ui-field-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ui-input, .ui-select {
  height: var(--ctl-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font-sans, 'Roboto', system-ui, sans-serif);
  font-size: var(--fs-md);
  box-sizing: border-box;
}
.ui-input::placeholder { color: var(--text-muted); }
.ui-input:focus-visible, .ui-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── Tabela ─────────────────────────────────────────────────────────────── */
.ui-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-card);
}
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.ui-table th {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-md);
  white-space: nowrap;
}
.ui-table td {
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover { background: var(--bg-hover); }
.ui-table .ui-num { text-align: right; white-space: nowrap; }
.ui-table tr.ui-row-total td { font-weight: var(--fw-bold); border-top: 1px solid var(--border-md); }
.ui-table-sticky th { position: sticky; top: 0; z-index: 1; }

/* ── Números e texto ────────────────────────────────────────────────────── */
.ui-num { font-variant-numeric: tabular-nums; }
/* Cor de sinal SÓ junto do sinal (+/−) ou seta: vermelho e laranja se confundem */
.ui-pos { color: var(--good); }
.ui-neg { color: var(--bad); }
.ui-muted { color: var(--text-muted); }

/* ── Estado vazio ───────────────────────────────────────────────────────── */
.ui-empty {
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}
.ui-empty > i { display: block; margin-bottom: var(--sp-3); font-size: var(--fs-2xl); opacity: .7; }

/* ── Gráfico ────────────────────────────────────────────────────────────── */
/* Altura fixa no contêiner (Chart.js com maintainAspectRatio:false). */
.ui-chart { position: relative; height: var(--ui-chart-h, 260px); min-width: 0; }

/* ── Celular (≤920px) ───────────────────────────────────────────────────── */
@media screen and (max-width: 920px) {
  .ui-page { padding: var(--sp-4) var(--mob-gutter, 12px) calc(var(--sp-12) * 2); }
  .ui-head { align-items: flex-start; margin-bottom: var(--sp-5); }
  .ui-head-title { font-size: var(--fs-xl); }
  .ui-card { padding: var(--sp-4); }
  .ui-card-head { flex-wrap: wrap; }   /* título + ferramentas não cabem numa linha de 390px */
  .ui-kpi { padding: var(--sp-3) var(--sp-4); }
  .ui-kpi-value { font-size: var(--fs-xl); }
  .ui-btn, .ui-input, .ui-select, .ui-seg > button, .ui-seg > a { min-height: var(--tap-min, 44px); }
  /* 16px no campo: abaixo disso o Safari do iPhone dá zoom ao focar */
  .ui-input, .ui-select { font-size: var(--mob-input-fs, 16px); }
  .ui-field { min-width: 0; flex: 1 1 100%; }
  /* no celular vale --ui-col-min-mob (se a grade definir); senão o mínimo normal —
     card de resumo (300px) vira uma coluna, indicador (.ui-grid-kpi) fica em duas */
  .ui-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-col-min-mob, var(--ui-col-min, 220px))), 1fr)); }
}

/* ── Impressão (Ctrl+P / window.print) ─────────────────────────────────── */
@media print {
  /* Papel: o navegador não imprime fundo por padrão, então o texto claro do tema escuro some no
     branco. Na impressão os tokens viram a paleta de papel (os valores do tema claro, medidos).
     html:root (0,1,1) ganha do :root (0,1,0) do design-tokens.css, que o menu carrega de novo no
     <body>, DEPOIS desta folha. Página que exporta PDF "com as cores do tema" via js/gt-pdf.js
     (print-color-adjust: exact) deve rever isto antes de adotar o ui.css. */
  html:root {
    --bg-body: #ffffff;  --bg-card: #ffffff;  --bg-hover: #f2f2f2;  --bg-input: #ffffff;
    --border: rgba(0, 0, 0, 0.18);  --border-md: rgba(0, 0, 0, 0.28);
    --text-primary: #000000;  --text-secondary: #333333;  --text-muted: #555555;
    --brand-txt: #AD4118;
    --good: #1C6E3C;  --bad: #C0342E;  --danger: #C0342E;  --warn: #786711;  --info: #002373;
  }
  .ui-head-actions, .ui-btn, .ui-filters, .ui-seg { display: none; }
  .ui-card, .ui-kpi { break-inside: avoid; }
}