/* ═══════════════════════════════════════════════════════════════════════════
   INGOO UI (H5) — tema do Ingoo CRM
   ───────────────────────────────────────────────────────────────────────────
   Fonte dos tokens: INGOO-H5 `src/shared/styles/design-tokens.css`
   (--orange #fa6900, --grey #1c1f23, Poppins) e `PrimaryBtn/index.vue`.

   Os mesmos valores já vestem o dashboard rj.ingooapp.com.br
   (apps/dashboard/src/lib/theme-h5.ts) e o painel operacao.superappingoo.com.br
   (ingoo-restore/web/ingoo-ui-h5.css). Três sistemas, um vocabulário.

   Carregada DEPOIS do <style> da página de propósito: vence na cascata sem
   precisar de !important e sai daqui com uma linha.

   O CRM já nasceu claro, então aqui a folha reescreve os tokens direto — não
   há modo escuro para preservar, como havia no painel de Operação.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ────────────────────────────────────────────────────────────
   O CSS da página inteira já lê estas variáveis; é daqui que vem a maior
   parte da mudança.                                                       */
:root {
  --orange:   #FA6900;                 /* era #F37228 — o laranja do H5 */
  --orange-d: #E05E00;
  --bg:       #F8F8F8;                 /* era #f5f6f8 */
  --panel:    #FFFFFF;
  --fg:       #1C1F23;                 /* --grey do H5 (era #1f2329) */
  --muted:    rgba(28, 31, 35, 0.64);  /* --color-text-2 */
  --muted2:   rgba(28, 31, 35, 0.52);  /* --color-text-3 */
  --line:     rgba(28, 31, 35, 0.10);
  --line2:    rgba(28, 31, 35, 0.15);
  --active:   rgba(250, 105, 0, 0.10); /* --orange-1 */

  /* Funcionais do H5. Púrpura e ciano ficam como estavam: no funil elas são
     identidade de etapa, não semântica de estado. */
  --green:  #0F7B3A;
  --red:    #6A0103;
  --yellow: #B26A00;
  --blue:   #002C6B;

  /* auxiliares desta folha */
  --h5-fill:      rgba(28, 31, 35, 0.04);
  --h5-orange-1:  rgba(250, 105, 0, 0.10);
  --h5-orange-2:  rgba(250, 105, 0, 0.20);
  --h5-orange-4:  rgba(250, 105, 0, 0.40);
  --h5-shadow1:   0 1px 2px 0 rgba(0, 0, 0, 0.08);
  --h5-shadow2:   0 4px 8px 0 rgba(0, 0, 0, 0.08);
  --h5-shadow3:   0 8px 16px 0 rgba(0, 0, 0, 0.08);
  --h5-panel:     0 10px 40px rgba(0, 0, 0, 0.12);
  --h5-radius:    12px;                /* 24rpx dos cards do H5 */
  --h5-radius-md: 8px;
}

/* ── 2. Tipografia ─────────────────────────────────────────────────────── */
body,
input, select, textarea, button {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── 3. Botões ────────────────────────────────────────────────────────────
   PrimaryBtn do H5: laranja, branco 700, sombra laranja e recuo no toque. */
.btn {
  border-radius: var(--h5-radius-md);
  font-weight: 700;
  box-shadow: 0 4px 9px var(--h5-orange-4);
  transition: background .15s, box-shadow .15s, transform .12s;
}
.btn:hover { box-shadow: 0 6px 14px var(--h5-orange-4); }
.btn:active { transform: scale(.97); }

.btn.ghost {
  background: var(--panel);
  border: 1px solid var(--line2);
  color: var(--fg);
  font-weight: 600;
  box-shadow: var(--h5-shadow1);
}
.btn.ghost:hover {
  background: var(--h5-orange-1);
  border-color: var(--orange);
  color: var(--orange);
}
.btn.red { box-shadow: 0 4px 9px rgba(106, 1, 3, .28); }

/* ── 4. Barra lateral ─────────────────────────────────────────────────── */
.side { border-right: 1px solid var(--line); }
.side .brand .mk { border-radius: var(--h5-radius-md); box-shadow: 0 4px 9px var(--h5-orange-4); }
.nav .it { border-radius: var(--h5-radius-md); color: var(--muted); font-weight: 500; }
.nav .it:hover { background: var(--h5-fill); color: var(--fg); }
.nav .it.on { background: var(--active); color: var(--orange-d); font-weight: 650; }
.nav .it.on::before { background: var(--orange); }
/* A caixa do ícone: mesma medida que o emoji ocupava, agora com o SVG dentro. */
.nav .it .ic { display: inline-flex; align-items: center; justify-content: center; width: 18px; flex-shrink: 0; }

/* ── 5. Cartões, KPIs e tabelas ───────────────────────────────────────── */
.kpi, .card, .col {
  border: 1px solid var(--line);
  border-radius: var(--h5-radius);
  box-shadow: var(--h5-shadow1);
}
.kpi { transition: box-shadow .15s, transform .15s; }
.kpi:hover { box-shadow: var(--h5-shadow2); transform: translateY(-1px); }
.kpi .l { color: var(--muted); }
.kc { border-radius: var(--h5-radius-md); box-shadow: var(--h5-shadow1); }
th { color: var(--muted); }

/* ── 6. Campos ─────────────────────────────────────────────────────────── */
input, select, textarea {
  border-radius: var(--h5-radius-md);
  border: 1px solid var(--line2);
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(250, 105, 0, .5);          /* --color-focus-border */
  box-shadow: 0 0 0 3px var(--h5-orange-1);     /* --color-focus-border-shadow */
}

/* ── 7. Modal, pílulas e chips ────────────────────────────────────────── */
.modal { border-radius: var(--h5-radius); box-shadow: var(--h5-panel); }
.pill { font-weight: 700; }
.chip { border-radius: var(--h5-radius-md); }

/* ── 8. Botão flutuante ─────────────────────────────────────────────────
   O emoji se centralizava sozinho pela caixa de texto; o SVG não. Vira flex
   para o ícone ficar no meio do círculo. */
.fab {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px var(--h5-orange-4);
}
.fab:hover { box-shadow: 0 12px 26px var(--h5-orange-4); }
.fab .ico { vertical-align: 0; }

/* ── 9. Ícones ─────────────────────────────────────────────────────────────
   Substituíram os emojis. Traço em currentColor: herdam a cor de onde estão —
   cinza na barra lateral parada, laranja no item ativo — coisa que emoji não
   fazia, além de mudar de desenho conforme o sistema de quem abria.        */
.ico { display: inline-block; vertical-align: -.18em; line-height: 0; flex-shrink: 0; }
.ico svg { display: block; }

/* ── 10. Login — fora do alcance desta folha ──────────────────────────────
   `#login` tem fundo #0a0a0a próprio e texto branco fixo. Devolver os tokens
   escuros dentro dele mantém a tela como sempre foi; as variáveis são
   herdadas, então basta redefini-las no container.                         */
#login {
  --panel: #141414;
  --fg:    #ffffff;
  --line:  #1f1f1f;
  --line2: #2a2a2a;
  --muted: rgba(255, 255, 255, .58);
}