/*
  Formulário Inteligente — tema visual do painel.

  Só cores, bordas e fundo. Não esconde botões, não desliga cliques,
  não muda overflow de dropdowns/modais, não toca em GraphQL.

  O que continua igual (código HeyForm intacto):
  - filtro Caixa / Spam / Incompleto
  - seleção em massa, excluir, mover para spam
  - CSV, colunas, maximizar, paginação
  - modal de detalhe e células por tipo de pergunta

  Rollback: tirar o <link> de /static/fi-dashboard.css no view/index.html
  (backup em /opt/backups/dashboard-ao-vivo-20260829-0425).
*/

:root {
  --hf-background: 247, 249, 247;
  --hf-foreground: 255, 255, 255;
  --hf-input: 14, 77, 58, 12%;
  --hf-primary: 14, 77, 58;
  --hf-primary-light: 255, 255, 255;
  --hf-secondary: 91, 102, 97;
  --hf-secondary-light: 14, 77, 58, 4%;
  --hf-accent: 220, 227, 223;
  --hf-accent-light: 14, 77, 58, 6%;
  --hf-brand: 14, 77, 58;
  --hf-dashboard-zone: 14, 77, 58, 8%;
  --hf-dashboard-border: 220, 227, 223;
  --hf-dashboard-muted: 91, 102, 97;
  --hf-dashboard-radius: 0.85rem;
  --hf-dashboard-shadow: 0 10px 30px rgba(6, 43, 33, 0.06);
}

/* Este ficheiro carrega depois do SPA e ganhava do .dark do HeyForm. Sem este bloco, Claro/Escuro parecia morto. */
.dark {
  --hf-background: 8, 18, 16;
  --hf-foreground: 18, 28, 24;
  --hf-input: 198, 241, 53, 10%;
  --hf-primary: 241, 250, 208;
  --hf-primary-light: 18, 28, 24;
  --hf-secondary: 156, 175, 166;
  --hf-secondary-light: 198, 241, 53, 8%;
  --hf-accent: 42, 64, 54;
  --hf-accent-light: 255, 255, 255, 8%;
  --hf-brand: 30, 122, 91;
  --hf-dashboard-zone: 14, 77, 58, 25%;
  --hf-dashboard-border: 42, 64, 54;
  --hf-dashboard-muted: 156, 175, 166;
  --hf-dashboard-shadow: none;
}

/* Sidebar: item ativo em creme da marca */
.hf-sidebar-surface {
  background: #ffffff;
}

.hf-sidebar-link:hover {
  background: rgba(241, 250, 208, 0.7);
}

.hf-sidebar-link-active,
.hf-sidebar-link[data-state='active'] {
  background: #f1fad0;
  color: #0e4d3a;
}

.hf-sidebar-link-active::before,
.hf-sidebar-link[data-state='active']::before {
  background: #1e7a5b;
}

.hf-sidebar-link-active .hf-sidebar-link-icon,
.hf-sidebar-link[data-state='active'] .hf-sidebar-link-icon {
  color: #0e4d3a;
}

.hf-page-shell {
  background: #f7f9f7;
}

/* Tabela da caixa de entrada — chrome só; checkboxes e paginação ficam */
.hf-table-shell {
  border: 1px solid #dce3df;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(6, 43, 33, 0.04);
}

.hf-table thead {
  background: #f4f7f5;
}

.hf-table tbody tr:hover {
  background: #f8fce8;
}

/* Badges Completo / Incompleto já renderizados pelo React */
.hf-table tbody span.rounded-full.bg-green-100 {
  background: #e4f7ec !important;
  color: #0e4d3a !important;
}

.hf-table tbody span.rounded-full.bg-red-100 {
  background: #f4f1c8 !important;
  color: #6b5b16 !important;
}

.fi-inbox-list-pane .rounded-full.bg-green-100 {
  background: #e4f7ec !important;
  color: #0e4d3a !important;
}

.fi-inbox-list-pane .rounded-full.bg-red-100 {
  background: #f4f1c8 !important;
  color: #6b5b16 !important;
}

.hf-page-title,
h1.text-2xl,
h1.text-xl {
  letter-spacing: -0.02em;
}

/* Foco visível — não remove outline nativo, só pinta o anel da marca */
:focus-visible {
  outline-color: #1e7a5b;
}

#fi-print-root {
  display: none;
}

/* O PDF tem de fluir em várias páginas: sem height:100%, flex nem overflow hidden */
@media print {
  @page {
    margin: 14mm;
  }

  html:has(body.fi-print-submission),
  body.fi-print-submission {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #fff !important;
  }

  body.fi-print-submission > *:not(#fi-print-root) {
    display: none !important;
  }

  body.fi-print-submission #fi-print-root {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #fff !important;
    color: #062b21 !important;
  }

  body.fi-print-submission #fi-print-root [data-print-submission],
  body.fi-print-submission #fi-print-root .flex,
  body.fi-print-submission #fi-print-root .flex-col,
  body.fi-print-submission #fi-print-root .flex-1,
  body.fi-print-submission #fi-print-root .h-full,
  body.fi-print-submission #fi-print-root .scrollbar {
    display: block !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.fi-print-submission #fi-print-root .divide-y > * {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.fi-print-submission #fi-print-root img {
    max-width: 100% !important;
    height: auto !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Análise — mesmos GraphQL (formAnalytic, formReport, answers); só chrome */
.fi-analytics-page .fi-analytics-card {
  border: 1px solid #dce3df;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(6, 43, 33, 0.04);
}

.fi-analytics-page .fi-analytics-card--accent {
  background: linear-gradient(180deg, #f8fce8 0%, #ffffff 48%);
}

.fi-analytics-page .fi-analytics-card--queue {
  background: linear-gradient(180deg, #fff8e8 0%, #ffffff 52%);
}

.fi-analytics-page .fi-analytics-rate {
  margin-top: 0.75rem;
  height: 0.4rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eee9;
}

.fi-analytics-page .fi-analytics-rate-fill {
  height: 100%;
  border-radius: 999px;
  background: #1e7a5b;
}

.fi-analytics-page .fi-analytics-funnel {
  padding: 1rem 1.25rem;
  border: 1px solid #dce3df;
  border-radius: 1rem;
  background: #ffffff;
}

.fi-analytics-page .fi-analytics-funnel-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  color: #5b6661;
}

.fi-analytics-page .fi-analytics-funnel-row span:last-child {
  font-weight: 600;
  color: #062b21;
}

.fi-analytics-page .fi-analytics-funnel-track {
  margin: 0.4rem 0 0.85rem;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: #eef3ef;
}

.fi-analytics-page .fi-analytics-funnel-fill {
  height: 100%;
  border-radius: 999px;
}

.fi-analytics-page .fi-analytics-funnel-fill--visits {
  width: 100%;
  background: #0e4d3a;
}

.fi-analytics-page .fi-analytics-funnel-fill--submissions {
  min-width: 0;
  background: #c6f135;
}

.fi-analytics-page .fi-analytics-report {
  --heyform-report-heading: #062b21;
  --heyform-report-heading-a60: rgba(6, 43, 33, 0.6);
  --heyform-report-question: #062b21;
  --heyform-report-question-a60: rgba(6, 43, 33, 0.6);
  --heyform-report-question-a05: rgba(6, 43, 33, 0.08);
  --heyform-report-chart: #1e7a5b;
  --heyform-report-chart-a15: rgba(30, 122, 91, 0.2);
  --heyform-report-chart-a025: rgba(30, 122, 91, 0.06);
  --heyform-report-button-text: #ffffff;
}

.fi-analytics-page .fi-analytics-report-card,
.fi-analytics-page .heyform-report-item {
  padding: 1.15rem 1.25rem;
  border: 1px solid #dce3df;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(6, 43, 33, 0.04);
  list-style: none;
}

.fi-analytics-page .heyform-report-items {
  padding-left: 0;
}

.fi-analytics-page .heyform-report-chart-item {
  border-radius: 0.65rem;
}

.fi-analytics-page .fi-analytics-empty {
  padding: 1.5rem 1.25rem;
  border: 1px dashed #dce3df;
  border-radius: 1rem;
  background: #f7f9f7;
  color: #5b6661;
}

@media (max-width: 639px) {
  .fi-analytics-page .fi-analytics-toolbar .hf-section-title {
    margin-left: 1.5rem;
  }
}

/* Integrações — mesmos apps/GraphQL; mostra HMAC e abandono que o servidor já tem */
.fi-integrations-intro {
  max-width: 40rem;
}

.fi-integrations-advanced {
  display: grid;
  gap: 1rem;
  padding-top: 0.25rem;
}

.fi-integrations-advanced-toggle {
  justify-content: center;
}

.fi-integrations-guide {
  padding: 1.15rem 1.25rem;
  border: 1px solid #dce3df;
  border-radius: 1rem;
  background: linear-gradient(180deg, #f8fce8 0%, #ffffff 55%);
}

.fi-integrations-lead {
  margin-top: 0.4rem;
  max-width: 42rem;
  color: #5b6661;
  font-size: 0.875rem;
  line-height: 1.45;
}

.fi-integrations-events {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.fi-integrations-events li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  align-items: baseline;
  font-size: 0.8125rem;
  color: #5b6661;
}

.fi-integrations-events code {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.4rem;
  background: #0e4d3a;
  color: #c6f135;
}

.fi-integrations-card {
  box-shadow: 0 1px 2px rgba(6, 43, 33, 0.04);
}

.fi-integrations-card--webhook {
  background: linear-gradient(180deg, #f8fce8 0%, #ffffff 42%);
}

.fi-integrations-badge-on {
  background: #e4f7ec;
  color: #0e4d3a;
}

.fi-integrations-badge-off {
  background: #f4f1c8;
  color: #6b5b16;
}

.fi-integrations-endpoint {
  color: #5b6661;
}

.fi-integrations-abandoned {
  color: #0e4d3a;
  font-weight: 500;
}

.fi-integrations-empty {
  padding: 1.5rem 1.25rem;
  border: 1px dashed #dce3df;
  border-radius: 1rem;
  background: #f7f9f7;
  color: #5b6661;
}

/* Painel — WorkspaceService.overview + recentForms; FormItem intacto */
.fi-painel-hero {
  margin-left: 1.5rem;
  margin-right: 0;
  padding: 1.5rem 1.5rem 1.35rem;
  border: 1px solid #dce3df;
  border-left: 4px solid #c6f135;
  border-radius: 1rem;
  background: linear-gradient(180deg, #f8fce8 0%, #ffffff 62%);
}

.fi-painel-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1e7a5b;
}

.fi-painel-lead,
.fi-painel-section-lead {
  margin: 0.55rem 0 0;
  max-width: 42rem;
  color: #5b6661;
  font-size: 0.875rem;
  line-height: 1.45;
}

.fi-painel-section-lead {
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.fi-painel-card-icon {
  display: flex;
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: 0.85rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: #f1fad0;
  color: #0e4d3a;
}

.fi-painel-hint {
  margin: 0.4rem 0 0;
  color: #5b6661;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.fi-painel-page .fi-painel-card {
  border: 1px solid #dce3df;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(6, 43, 33, 0.04);
}

.fi-painel-page .fi-painel-card--accent {
  background: linear-gradient(180deg, #f8fce8 0%, #ffffff 48%);
}

.fi-painel-page .fi-painel-card--accent .fi-painel-card-icon {
  background: #c6f135;
  color: #062b21;
}

.fi-painel-recent {
  overflow: hidden;
  border: 1px solid #dce3df;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(6, 43, 33, 0.04);
}

.fi-painel-page .fi-painel-recent a.group,
.fi-painel-page .fi-painel-recent .group {
  border-bottom: 1px solid #eef3ef;
}

.fi-painel-page .fi-painel-recent a.group:last-child,
.fi-painel-page .fi-painel-recent .group:last-child {
  border-bottom: none;
}

.fi-painel-page .fi-painel-recent a.group:hover,
.fi-painel-page .fi-painel-recent a.group:has([data-state='open']) {
  background: #f8fce8 !important;
}

.fi-painel-empty {
  padding: 1.5rem 1.25rem;
  border: 1px dashed #dce3df;
  border-radius: 1rem;
  background: #f7f9f7;
}

@media (max-width: 639px) {
  .fi-painel-hero {
    margin-left: 0;
  }
}

.dark .hf-sidebar-surface,
.dark .hf-table-shell,
.dark .fi-analytics-page .fi-analytics-card,
.dark .fi-analytics-page .fi-analytics-funnel,
.dark .fi-analytics-page .fi-analytics-report-card,
.dark .fi-analytics-page .heyform-report-item,
.dark .fi-integrations-card,
.dark .fi-painel-page .fi-painel-card,
.dark .fi-painel-recent {
  background: #121c1a;
  border-color: #2a3f36;
  box-shadow: none;
}

.dark .hf-page-shell {
  background: #081210;
}

.dark .hf-sidebar-link:hover {
  background: rgba(30, 122, 91, 0.22);
}

.dark .hf-sidebar-link-active,
.dark .hf-sidebar-link[data-state='active'] {
  background: #1a332c;
  color: #f1fad0;
}

.dark .hf-sidebar-link-active .hf-sidebar-link-icon,
.dark .hf-sidebar-link[data-state='active'] .hf-sidebar-link-icon {
  color: #c6f135;
}

.dark .hf-table thead {
  background: #1a332c;
}

.dark .hf-table tbody tr:hover,
.dark .fi-painel-page .fi-painel-recent a.group:hover,
.dark .fi-painel-page .fi-painel-recent a.group:has([data-state='open']) {
  background: #1a332c !important;
}

.dark .fi-analytics-page .fi-analytics-card--accent,
.dark .fi-analytics-page .fi-analytics-card--queue,
.dark .fi-integrations-guide,
.dark .fi-integrations-card--webhook,
.dark .fi-painel-hero,
.dark .fi-painel-page .fi-painel-card--accent {
  background: linear-gradient(180deg, #1a332c 0%, #121c1a 55%);
}

.dark .fi-painel-kicker {
  color: #c6f135;
}

.dark .fi-painel-lead,
.dark .fi-painel-section-lead,
.dark .fi-painel-hint {
  color: #9cafa6;
}

.dark .fi-painel-card-icon {
  background: #1a332c;
  color: #c6f135;
}

.dark .fi-painel-page .fi-painel-card--accent .fi-painel-card-icon {
  background: #c6f135;
  color: #062b21;
}

.dark .fi-analytics-page .fi-analytics-empty,
.dark .fi-integrations-empty,
.dark .fi-painel-empty {
  background: #081210;
  border-color: #2a3f36;
  color: #9cafa6;
}

.dark .fi-analytics-page .fi-analytics-funnel-row,
.dark .fi-integrations-lead,
.dark .fi-integrations-endpoint {
  color: #9cafa6;
}

.dark .fi-analytics-page .fi-analytics-funnel-row span:last-child,
.dark .fi-integrations-abandoned {
  color: #f1fad0;
}

.dark .fi-analytics-page .fi-analytics-report {
  --heyform-report-heading: #f1fad0;
  --heyform-report-heading-a60: rgba(241, 250, 208, 0.65);
  --heyform-report-question: #f1fad0;
  --heyform-report-question-a60: rgba(241, 250, 208, 0.65);
  --heyform-report-question-a05: rgba(241, 250, 208, 0.1);
  --heyform-report-chart: #c6f135;
  --heyform-report-chart-a15: rgba(198, 241, 53, 0.22);
  --heyform-report-chart-a025: rgba(198, 241, 53, 0.06);
}

.dark .fi-painel-page .fi-painel-recent a.group,
.dark .fi-painel-page .fi-painel-recent .group {
  border-bottom-color: #2a3f36;
}

/* Envios: classes Tailwind com hex claro (bg-[#f4f7f5], bg-white) ignoram --hf-* */
.dark .fi-inbox-list-pane {
  background: #0d1a16 !important;
  border-color: #2a3f36 !important;
}

.dark .fi-inbox-list-pane .bg-white,
.dark .fi-inbox-list-pane [class*='bg-white'] {
  background-color: #121c1a !important;
}

.dark .fi-inbox-list-pane [class*='hover:bg-white']:hover,
.dark .fi-inbox-list-pane .hover\:bg-white:hover {
  background-color: #1a332c !important;
}

.dark div:has(> .fi-inbox-list-pane) > aside,
.dark div:has(.fi-inbox-list-pane) > aside {
  background-color: #121c1a !important;
  border-color: #2a3f36 !important;
}

.dark .bg-\[\#f4f7f5\],
.dark .hover\:bg-\[\#f4f7f5\]:hover {
  background-color: #0d1a16 !important;
}

.dark .hover\:bg-\[\#f8fafc\]:hover,
.dark .data-\[selected\]\:bg-\[\#f8fafc\][data-selected] {
  background-color: #1a332c !important;
}

.dark .border-\[\#dce3df\] {
  border-color: #2a3f36 !important;
}