/* ═══════════════════════════════════════════════════════════════════════════
   FiFlow — CAMADA DE PADRONIZAÇÃO VISUAL (carregada por último)
   ---------------------------------------------------------------------------
   Fonte única de tokens e regras para cards, ícones, badges, filtros, botões e
   tipografia. Qualquer componente novo deve usar estas classes/tokens — não
   criar estilos inline nem variações locais.

   Regras:
   • 1 estilo de card (borda, raio, sombra, padding iguais em todas as telas).
   • 5 tons semânticos: green (positivo/marca), teal (informativo), orange
     (atenção), red (crítico), neutral (sem juízo). Valem para ícone, badge e
     barra de progresso.
   • Controles (inputs, selects, gatilhos de filtro e botões): mesma altura
     (36px; 30px na variante -sm), mesmo raio (10px) e mesma borda.
   • Badges são rótulos, não botões: formato pílula, 22px de altura.
   • O canto direito do cabeçalho do card é só para AÇÕES.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-fiflow-version="3"] {
  --fi-ink: #12211C;
  --fi-text-2: #5C6E66;
  --fi-text-3: #8A9A93;
  --fi-line: #E3EAE5;
  --fi-line-strong: #D3DFD8;
  --fi-surface: #FFFFFF;
  --fi-surface-2: #F6F9F7;

  --fi-green: #0C4F41;   --fi-green-bg: #E3EEE8;
  --fi-teal: #175E4E;    --fi-teal-bg: #DCEDE7;
  --fi-orange: #9C6B1F;  --fi-orange-bg: #F6ECDB;
  --fi-red: #A23B2E;     --fi-red-bg: #F6E4E0;
  --fi-neutral: #5C6E66; --fi-neutral-bg: #EEF3F0;

  --fi-radius-card: 16px;
  --fi-radius-ctrl: 10px;
  --fi-pad-card: 20px;
  --fi-gap: 16px;
  --fi-shadow: 0 1px 2px rgba(18, 33, 28, .04), 0 4px 16px rgba(18, 33, 28, .04);
  --fi-shadow-hover: 0 2px 4px rgba(18, 33, 28, .05), 0 10px 24px rgba(12, 79, 65, .08);
  --fi-ctrl-h: 36px;
  --fi-ctrl-h-sm: 30px;
}

/* ── CARDS ─────────────────────────────────────────────────────────────── */
html[data-fiflow-version="3"] body :is(.v3-card, .fiflow-card, .v3-metric-card, .predict-panel, .v3-compass-panel, .ai-side-card, .ai-chat-card, .v3-strategy-card) {
  background: var(--fi-surface) !important;
  border: 1px solid var(--fi-line) !important;
  border-radius: var(--fi-radius-card) !important;
  box-shadow: var(--fi-shadow) !important;
  color: var(--fi-ink);
}
html[data-fiflow-version="3"] body :is(.v3-card, .predict-panel, .v3-compass-panel, .ai-side-card, .ai-chat-card) {
  padding: var(--fi-pad-card) !important;
}
/* Tabelas ocupam o card de ponta a ponta */
html[data-fiflow-version="3"] body :is(.v3-table-card, .v3-dre-card) { padding: 0 !important; overflow: hidden; }
html[data-fiflow-version="3"] body :is(.v3-table-card, .v3-dre-card) > .v3-filter-bar { padding: 14px var(--fi-pad-card); border-bottom: 1px solid var(--fi-line); }
/* Blocos internos (dentro de um card) são planos — sem "card dentro de card" */
html[data-fiflow-version="3"] body .ai-side-block {
  background: var(--fi-surface-2) !important; border: 1px solid var(--fi-line) !important;
  border-radius: 12px !important; box-shadow: none !important; padding: 14px !important;
}
html[data-fiflow-version="3"] body .ai-kpi { background: var(--fi-surface) !important; border: 1px solid var(--fi-line) !important; box-shadow: none !important; border-radius: 10px !important; }

/* Card de métrica — estrutura única */
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) {
  display: flex; flex-direction: column; gap: 14px;
  padding: var(--fi-pad-card) !important; min-height: 168px; height: 100%;
  background-image: none !important; transform: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card)::after,
html[data-fiflow-version="3"] body .v3-strategy-card::after { content: none !important; display: none !important; }
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card):hover { transform: none !important; box-shadow: var(--fi-shadow) !important; }
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card).is-clickable { cursor: pointer; }
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card).is-clickable:hover,
html[data-fiflow-version="3"] body .v3-strategy-card:hover,
html[data-fiflow-version="3"] body .v3-strategy-card.active { box-shadow: var(--fi-shadow-hover) !important; border-color: #B9CEC4 !important; transform: none !important; }
html[data-fiflow-version="3"] body .v3-strategy-card.active { border-color: var(--fi-green) !important; }

html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 0; border: 0; background: none; min-height: 40px; }
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) .card-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) .card-title {
  font-size: 13px; font-weight: 600; color: var(--fi-text-2); line-height: 1.3;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) .card-link {
  flex-shrink: 0; border: 0; background: none; padding: 4px 0; cursor: pointer;
  font: 600 12.5px/1.2 inherit; font-family: inherit; color: var(--fi-green); white-space: nowrap;
}
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) .card-link:hover { text-decoration: underline; opacity: 1; }
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) .card-value {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
  font-size: 28px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; color: var(--fi-ink);
}
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) .card-value .currency { font-size: 15px; font-weight: 600; color: var(--fi-text-3); }
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) .card-value.is-text { font-size: 15px; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) .card-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; min-width: 0; }
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) .card-compare { font-size: 12px; color: var(--fi-text-3); line-height: 1.35; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; }
html[data-fiflow-version="3"] body .v3-metric-progress-bar { margin: 0; }
html[data-fiflow-version="3"] body .v3-card-extra { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--fi-line); font-size: 12px; color: var(--fi-text-2); }
html[data-fiflow-version="3"] body .v3-card-extra-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
html[data-fiflow-version="3"] body .v3-card-extra-row strong { color: var(--fi-ink); font-weight: 650; }
html[data-fiflow-version="3"] body .v3-card-extra details summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--fi-green); }
html[data-fiflow-version="3"] body .v3-card-extra details summary::-webkit-details-marker { display: none; }
html[data-fiflow-version="3"] body .v3-card-extra details[open] > div { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }

/* ── ÍCONES ────────────────────────────────────────────────────────────── */
html[data-fiflow-version="3"] body .card-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
  display: grid; place-items: center; background: var(--fi-green-bg); color: var(--fi-green);
}
html[data-fiflow-version="3"] body .card-icon > svg { width: 20px; height: 20px; }
html[data-fiflow-version="3"] body .card-icon.tone-teal { background: var(--fi-teal-bg); color: var(--fi-teal) !important; }
html[data-fiflow-version="3"] body .card-icon.tone-orange { background: var(--fi-orange-bg); color: var(--fi-orange) !important; }
html[data-fiflow-version="3"] body .card-icon.tone-red { background: var(--fi-red-bg); color: var(--fi-red) !important; }
html[data-fiflow-version="3"] body .card-icon.tone-neutral { background: var(--fi-neutral-bg); color: var(--fi-neutral) !important; }
html[data-fiflow-version="3"] body .card-icon.tone-green { color: var(--fi-green) !important; }
/* Ícones do menu e do cabeçalho seguem a cor do texto (ativo/inativo) */
html[data-fiflow-version="3"] body .nav-item .nav-icon { color: inherit; display: grid; place-items: center; width: 18px; height: 18px; }
html[data-fiflow-version="3"] body .nav-item .nav-icon svg { width: 17px; height: 17px; }
html[data-fiflow-version="3"] body .nav-item { color: var(--fi-text-2); }
html[data-fiflow-version="3"] body .nav-item:hover { color: var(--fi-ink); }
html[data-fiflow-version="3"] body .nav-item.active { color: var(--fi-green); }
html[data-fiflow-version="3"] body .v3-icon-button { color: var(--fi-text-2); }
html[data-fiflow-version="3"] body .v3-search svg { color: var(--fi-text-3); flex-shrink: 0; }

/* ── BADGES (um único sistema) ─────────────────────────────────────────── */
html[data-fiflow-version="3"] body :is(.fi-badge, .v3-badge, .badge, .card-badge, .predict-confidence-badge, .v3-period-total-badge, .v3-dup-badge, .v3-analytics-badge) {
  display: inline-flex !important; align-items: center; gap: 5px; height: 22px; padding: 0 9px !important;
  border-radius: 999px !important; border: 0 !important; white-space: nowrap; flex-shrink: 0;
  font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important;
  background: var(--fi-green-bg) !important; color: var(--fi-green) !important;
}
html[data-fiflow-version="3"] body :is(.fi-badge, .v3-badge, .badge) svg { width: 12px; height: 12px; flex-shrink: 0; }
html[data-fiflow-version="3"] body .v3-badge::before { width: 5px; height: 5px; }
html[data-fiflow-version="3"] body :is(.fi-badge, .v3-badge).tone-teal, html[data-fiflow-version="3"] body .badge:is(.badge-blue, .badge-purple), html[data-fiflow-version="3"] body .v3-badge.tone-purple, html[data-fiflow-version="3"] body .v3-badge.tone-blue { background: var(--fi-teal-bg) !important; color: var(--fi-teal) !important; }
html[data-fiflow-version="3"] body :is(.fi-badge, .v3-badge).tone-orange, html[data-fiflow-version="3"] body .badge.badge-orange, html[data-fiflow-version="3"] body .v3-dup-badge { background: var(--fi-orange-bg) !important; color: var(--fi-orange) !important; }
html[data-fiflow-version="3"] body :is(.fi-badge, .v3-badge).tone-red, html[data-fiflow-version="3"] body .badge.badge-red { background: var(--fi-red-bg) !important; color: var(--fi-red) !important; }
html[data-fiflow-version="3"] body :is(.fi-badge, .v3-badge).tone-neutral, html[data-fiflow-version="3"] body .badge.badge-neutral, html[data-fiflow-version="3"] body :is(.card-badge, .v3-period-total-badge, .v3-analytics-badge) { background: var(--fi-neutral-bg) !important; color: var(--fi-neutral) !important; }
html[data-fiflow-version="3"] body .predict-confidence-badge.confidence-baixa { background: var(--fi-orange-bg) !important; color: var(--fi-orange) !important; }

/* ── PROGRESSO ─────────────────────────────────────────────────────────── */
html[data-fiflow-version="3"] body .v3-progress { height: 6px; border-radius: 999px; background: var(--fi-neutral-bg); overflow: hidden; }
html[data-fiflow-version="3"] body .v3-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--fi-green); background-image: none !important; }
html[data-fiflow-version="3"] body .v3-progress > span.tone-teal { background: var(--fi-teal); }
html[data-fiflow-version="3"] body .v3-progress > span.tone-orange { background: var(--fi-orange); }
html[data-fiflow-version="3"] body .v3-progress > span.tone-red { background: var(--fi-red); }
html[data-fiflow-version="3"] body .v3-progress > span.tone-neutral { background: var(--fi-neutral); }

/* ── TIPOGRAFIA DE SEÇÃO ───────────────────────────────────────────────── */
html[data-fiflow-version="3"] body .v3-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
html[data-fiflow-version="3"] body :is(.v3-section-header h2, .predict-panel-header .card-title, .ai-side-card > h2, .v3-agent-heading strong, .v3-compass-header h2) {
  margin: 0; font-size: 15px !important; font-weight: 750 !important; color: var(--fi-ink) !important; letter-spacing: -.01em; line-height: 1.3;
}
html[data-fiflow-version="3"] body :is(.v3-section-header p, .predict-panel-subtitle, .v3-compass-header p) { margin: 3px 0 0; font-size: 12px !important; color: var(--fi-text-2) !important; line-height: 1.45; }
html[data-fiflow-version="3"] body :is(.v3-section-kicker, .ai-side-title) { font-size: 10.5px !important; font-weight: 750 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--fi-text-3) !important; }
html[data-fiflow-version="3"] body .predict-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 0; border: 0; }

/* ── CONTROLES: inputs, selects, gatilhos e botões ─────────────────────── */
html[data-fiflow-version="3"] body :is(.v3-filter-bar, .v3-table-actions, .v3-page-toolbar, .modal, .v3-settings-row, .v3-rule-form, .v3-compass-profile, .ai-input-row) :is(input[type="text"], input[type="search"], input[type="number"], input:not([type]), select),
html[data-fiflow-version="3"] body :is(.form-input, .tx-select, .v3-filter-search, #txSort, #dreCategorySelect, #compassProfileSelect, #chatInput) {
  height: var(--fi-ctrl-h) !important; min-height: var(--fi-ctrl-h); padding: 0 12px !important;
  border: 1px solid var(--fi-line-strong) !important; border-radius: var(--fi-radius-ctrl) !important;
  background-color: var(--fi-surface) !important; color: var(--fi-ink) !important;
  font-size: 12.5px !important; font-family: inherit; box-shadow: none !important; outline: none;
}
html[data-fiflow-version="3"] body select:is(.form-input, .tx-select, #txSort, #dreCategorySelect, #compassProfileSelect),
html[data-fiflow-version="3"] body .v3-filter-popover select { padding-right: 28px !important; cursor: pointer; }
html[data-fiflow-version="3"] body :is(.form-input, .tx-select, .v3-filter-search, #txSort, #dreCategorySelect, #compassProfileSelect, #chatInput):focus,
html[data-fiflow-version="3"] body .v3-filter-popover select:focus { border-color: var(--fi-green) !important; box-shadow: 0 0 0 3px rgba(12, 79, 65, .12) !important; }
html[data-fiflow-version="3"] body textarea.form-input { height: auto !important; padding: 10px 12px !important; }

/* Gatilho do período (único, no cabeçalho) e gatilho "Filtros" — mesmo formato dos controles */
html[data-fiflow-version="3"] body :is(.fiflow-date-trigger, .v3-filter-trigger) {
  display: inline-flex !important; align-items: center; gap: 8px; height: var(--fi-ctrl-h) !important; padding: 0 12px !important;
  border: 1px solid var(--fi-line-strong) !important; border-radius: var(--fi-radius-ctrl) !important;
  background: var(--fi-surface) !important; color: var(--fi-ink) !important; box-shadow: none !important;
  font-size: 12.5px !important; font-weight: 600 !important; white-space: nowrap; cursor: pointer;
}
html[data-fiflow-version="3"] body :is(.fiflow-date-trigger, .v3-filter-trigger) svg { width: 15px; height: 15px; color: var(--fi-text-2); flex-shrink: 0; }
html[data-fiflow-version="3"] body :is(.fiflow-date-trigger, .v3-filter-trigger):hover { border-color: #B9CEC4 !important; background: var(--fi-surface-2) !important; }
html[data-fiflow-version="3"] body :is(.fiflow-date-trigger.active, .v3-filter-trigger.active) { border-color: var(--fi-green) !important; background: var(--fi-green-bg) !important; color: var(--fi-green) !important; }
html[data-fiflow-version="3"] body :is(.fiflow-date-trigger.active, .v3-filter-trigger.active) svg { color: var(--fi-green); }
html[data-fiflow-version="3"] body .fiflow-date-trigger-label { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
html[data-fiflow-version="3"] body .fiflow-date-arrow { font-size: 10px; color: var(--fi-text-3); }
html[data-fiflow-version="3"] body .fiflow-date-filter-wrap { display: inline-flex; align-items: center; gap: 6px; }
html[data-fiflow-version="3"] body .fiflow-date-clear-btn {
  width: var(--fi-ctrl-h); height: var(--fi-ctrl-h); padding: 0; justify-content: center; align-items: center;
  border: 1px solid var(--fi-line-strong); border-radius: var(--fi-radius-ctrl); background: var(--fi-surface); color: var(--fi-text-2); font-size: 16px; cursor: pointer;
}
html[data-fiflow-version="3"] body .fiflow-date-clear-btn:hover { color: var(--fi-red); border-color: var(--fi-red); }
html[data-fiflow-version="3"] body .v3-filter-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--fi-green); color: #fff; font-size: 10.5px; font-weight: 700; }
html[data-fiflow-version="3"] body .v3-filter-count[hidden] { display: none; }

/* Botões */
html[data-fiflow-version="3"] body .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--fi-ctrl-h) !important; min-height: 0; padding: 0 16px !important;
  border-radius: var(--fi-radius-ctrl) !important; font-size: 12.5px !important; font-weight: 650 !important; line-height: 1 !important; white-space: nowrap; box-shadow: none !important;
}
html[data-fiflow-version="3"] body .btn.btn-sm { height: var(--fi-ctrl-h-sm) !important; padding: 0 12px !important; font-size: 12px !important; }
html[data-fiflow-version="3"] body .btn svg { width: 15px; height: 15px; }
html[data-fiflow-version="3"] body .btn-primary { background: var(--fi-green) !important; border: 1px solid var(--fi-green) !important; color: #fff !important; }
html[data-fiflow-version="3"] body .btn-primary:hover { background: #083A30 !important; }
html[data-fiflow-version="3"] body .btn-ghost { background: var(--fi-surface) !important; border: 1px solid var(--fi-line-strong) !important; color: var(--fi-ink) !important; }
html[data-fiflow-version="3"] body .btn-ghost:hover { background: var(--fi-surface-2) !important; border-color: #B9CEC4 !important; }
html[data-fiflow-version="3"] body .btn-danger { background: var(--fi-red) !important; border: 1px solid var(--fi-red) !important; color: #fff !important; }
html[data-fiflow-version="3"] body .btn:disabled { opacity: .5; cursor: not-allowed; }
html[data-fiflow-version="3"] body .v3-text-button { height: var(--fi-ctrl-h-sm); padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--fi-green); font-size: 12.5px; font-weight: 650; cursor: pointer; white-space: nowrap; }
html[data-fiflow-version="3"] body .v3-text-button:hover { background: var(--fi-green-bg); }
html[data-fiflow-version="3"] body .v3-text-button.danger { color: var(--fi-red); }
html[data-fiflow-version="3"] body .v3-text-button.danger:hover { background: var(--fi-red-bg); }

/* ── BARRAS DE FILTRO ──────────────────────────────────────────────────── */
html[data-fiflow-version="3"] body .v3-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
html[data-fiflow-version="3"] body .v3-filter-bar .v3-filter-search { flex: 1 1 260px; min-width: 200px; }
html[data-fiflow-version="3"] body .v3-filter-bar > .v3-filter-spacer { flex: 1 1 auto; }
html[data-fiflow-version="3"] body .v3-filter-popover-wrap { position: relative; }
html[data-fiflow-version="3"] body .v3-filter-popover {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 300px;
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(18, 33, 28, .14);
}
html[data-fiflow-version="3"] body .v3-filter-popover[hidden] { display: none; }
html[data-fiflow-version="3"] body .v3-filter-popover > label:not(.v3-filter-checkbox-label) { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; color: var(--fi-text-2); text-transform: uppercase; letter-spacing: .04em; }
html[data-fiflow-version="3"] body .v3-filter-popover select { width: 100%; height: var(--fi-ctrl-h); padding: 0 10px; border: 1px solid var(--fi-line-strong); border-radius: var(--fi-radius-ctrl); background: var(--fi-surface); font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--fi-ink); font-weight: 500; }
html[data-fiflow-version="3"] body .v3-filter-popover-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--fi-line); }
/* Cabeçalho: busca e filtro global */
html[data-fiflow-version="3"] body .v3-search { display: flex; align-items: center; gap: 8px; height: var(--fi-ctrl-h); width: 260px; padding: 0 12px; border: 1px solid var(--fi-line-strong); border-radius: var(--fi-radius-ctrl); background: var(--fi-surface); }
html[data-fiflow-version="3"] body .v3-search input { flex: 1; min-width: 0; height: 100% !important; border: 0 !important; background: transparent !important; font-size: 12.5px !important; outline: none; padding: 0 !important; }
html[data-fiflow-version="3"] body .v3-search:focus-within { border-color: var(--fi-green); box-shadow: 0 0 0 3px rgba(12, 79, 65, .12); }
html[data-fiflow-version="3"] body .v3-header-period-filter { display: flex; align-items: center; gap: 8px; }
html[data-fiflow-version="3"] body .v3-icon-button { width: var(--fi-ctrl-h); height: var(--fi-ctrl-h); border-radius: var(--fi-radius-ctrl); display: grid; place-items: center; position: relative; }

/* Barra de ferramentas de página (substitui os títulos duplicados) */
html[data-fiflow-version="3"] body .v3-page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 var(--fi-gap); }
html[data-fiflow-version="3"] body .v3-page-toolbar .v3-page-toolbar-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--fi-text-2); }

/* ── GRADES ────────────────────────────────────────────────────────────── */
html[data-fiflow-version="3"] body :is(.v3-metrics-grid, .predict-summary-grid, .v3-compass-strategy-grid) { gap: var(--fi-gap) !important; align-items: stretch; }
html[data-fiflow-version="3"] body .v3-dashboard-left, html[data-fiflow-version="3"] body .v3-dashboard-main { gap: var(--fi-gap); }
html[data-fiflow-version="3"] body .v3-dashboard-grid { gap: var(--fi-gap); }
html[data-fiflow-version="3"] body .v3-categories-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--fi-gap); }

/* ── TABELA DE LANÇAMENTOS ─────────────────────────────────────────────── */
html[data-fiflow-version="3"] body .v3-table-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px var(--fi-pad-card); border-bottom: 1px solid var(--fi-line); }
html[data-fiflow-version="3"] body .v3-table-actions .v3-analytics-help { flex: 1 1 240px; font-size: 11.5px; color: var(--fi-text-3); }
html[data-fiflow-version="3"] body .v3-transactions-table select {
  height: 30px; max-width: 190px; padding: 0 26px 0 10px; border: 1px solid var(--fi-line-strong); border-radius: 8px;
  background-color: var(--fi-surface); font-size: 12px; color: var(--fi-ink); cursor: pointer;
}
html[data-fiflow-version="3"] body .v3-status-stack { display: flex; flex-wrap: wrap; gap: 4px; }
html[data-fiflow-version="3"] body .v3-status-empty { color: var(--fi-text-3); font-size: 12px; }
html[data-fiflow-version="3"] body .v3-row-menu { position: relative; display: inline-block; }
html[data-fiflow-version="3"] body .v3-row-menu > summary {
  list-style: none; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--fi-line-strong); border-radius: 8px; background: var(--fi-surface); color: var(--fi-text-2);
}
html[data-fiflow-version="3"] body .v3-row-menu > summary::-webkit-details-marker { display: none; }
html[data-fiflow-version="3"] body .v3-row-menu > summary:hover, html[data-fiflow-version="3"] body .v3-row-menu[open] > summary { border-color: #B9CEC4; background: var(--fi-surface-2); color: var(--fi-ink); }
html[data-fiflow-version="3"] body .v3-row-menu > div {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; padding: 6px;
  display: flex; flex-direction: column; background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(18, 33, 28, .14);
}
html[data-fiflow-version="3"] body .v3-row-menu > div button {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--fi-ink); font-size: 12.5px; font-weight: 550; text-align: left; cursor: pointer; white-space: nowrap;
}
html[data-fiflow-version="3"] body .v3-row-menu > div button svg { width: 15px; height: 15px; color: var(--fi-text-2); }
html[data-fiflow-version="3"] body .v3-row-menu > div button:hover { background: var(--fi-surface-2); }
html[data-fiflow-version="3"] body .v3-row-menu > div button.danger, html[data-fiflow-version="3"] body .v3-row-menu > div button.danger svg { color: var(--fi-red); }
html[data-fiflow-version="3"] body .v3-row-menu > div button.danger:hover { background: var(--fi-red-bg); }

/* ── CARDS ESPECÍFICOS ALINHADOS AO PADRÃO ─────────────────────────────── */
html[data-fiflow-version="3"] body .v3-strategy-card { padding: var(--fi-pad-card) !important; min-height: 168px; }
html[data-fiflow-version="3"] body .v3-compass-panel { min-height: 0; }
html[data-fiflow-version="3"] body .v3-financial-alert { border-radius: 12px; padding: 12px 16px; }
html[data-fiflow-version="3"] body .v3-financial-alert strong { font-size: 12.5px; }
html[data-fiflow-version="3"] body .v3-financial-alert p { font-size: 12px; }
html[data-fiflow-version="3"] body .v3-recent-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
html[data-fiflow-version="3"] body .v3-recent-icon svg { width: 16px; height: 16px; }
html[data-fiflow-version="3"] body .v3-recent-icon.tone-green { background: var(--fi-green-bg); color: var(--fi-green) !important; }
html[data-fiflow-version="3"] body .v3-recent-icon.tone-orange { background: var(--fi-orange-bg); color: var(--fi-orange) !important; }
html[data-fiflow-version="3"] body .v3-recent-icon.tone-neutral { background: var(--fi-neutral-bg); color: var(--fi-neutral) !important; }

/* DRE */
html[data-fiflow-version="3"] body .dre-table .dre-hidden-row { display: none; }
html[data-fiflow-version="3"] body .dre-table tr.dre-cat-focus td { background: var(--fi-green-bg) !important; font-weight: 700; }
html[data-fiflow-version="3"] body .v3-dre-caption { font-size: 12px; color: var(--fi-text-3); }

@media (max-width: 900px) {
  html[data-fiflow-version="3"] body .v3-search { width: 100%; }
  html[data-fiflow-version="3"] body .v3-filter-popover { right: auto; left: 0; width: min(300px, calc(100vw - 48px)); }
}
html[data-fiflow-version="3"] body .v3-load-more-row td { text-align: center; padding: 14px; font-size: 12px; color: var(--fi-text-2); }
/* [hidden] sempre vence o display dos componentes padronizados */
html[data-fiflow-version="3"] body [hidden] { display: none !important; }

/* ── AJUSTES DE CONSISTÊNCIA (2ª passagem) ────────────────────────────── */
/* Cabeçalho do card nunca tem linha divisória (algumas variantes tinham) */
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) .card-header { border: 0 !important; padding: 0 !important; margin: 0 !important; }
/* Comparação pode ocupar até 2 linhas em grades estreitas, em vez de cortar com "…" */
html[data-fiflow-version="3"] body :is(.v3-metric-card, .fiflow-card) .card-compare { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex-basis: 120px; }

/* Seções de planejamento: mesmo cabeçalho de seção e mesmo card */
html[data-fiflow-version="3"] body .v3-planning-section { border-radius: var(--fi-radius-card) !important; box-shadow: var(--fi-shadow) !important; border: 1px solid var(--fi-line) !important; background: var(--fi-surface) !important; }
html[data-fiflow-version="3"] body .v3-planning-section > .budget-panel-header { padding: var(--fi-pad-card) !important; margin: 0 !important; border-bottom: 1px solid var(--fi-line); align-items: flex-start; }
html[data-fiflow-version="3"] body .budget-panel-header h2 { margin: 2px 0 0; font-size: 15px !important; font-weight: 750 !important; color: var(--fi-ink) !important; }
html[data-fiflow-version="3"] body .budget-panel-header p { margin: 3px 0 0; font-size: 12px !important; color: var(--fi-text-2) !important; }
/* Metas: grupo de cards (não "card dentro de card") */
html[data-fiflow-version="3"] body .v3-goals-section { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
html[data-fiflow-version="3"] body .v3-goals-section > .budget-panel-header { padding: 0 0 12px !important; border: 0; }
html[data-fiflow-version="3"] body .v3-premium-goals, html[data-fiflow-version="3"] body #budgetGoalsGrid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: var(--fi-gap) !important; padding: 0 !important; }
html[data-fiflow-version="3"] body .v3-budget-section .v3-budget-total, html[data-fiflow-version="3"] body .v3-budget-section .budget-category-list { padding-left: var(--fi-pad-card); padding-right: var(--fi-pad-card); }
html[data-fiflow-version="3"] body .v3-budget-section .budget-category-list { padding-bottom: var(--fi-pad-card); }
/* Barras de orçamento: cor sólida do tom (sem listras) */
html[data-fiflow-version="3"] body .v3-budget-category.above .v3-budget-progress i { background-image: none !important; background-color: var(--fi-red) !important; }
/* Insights do planejamento e frase da bússola: mesmo card */
html[data-fiflow-version="3"] body .v3-planning-insights { background: var(--fi-surface) !important; border: 1px solid var(--fi-line) !important; border-radius: var(--fi-radius-card) !important; box-shadow: var(--fi-shadow) !important; padding: var(--fi-pad-card) !important; }
html[data-fiflow-version="3"] body .v3-planning-insights-heading { color: var(--fi-teal); }
html[data-fiflow-version="3"] body .v3-planning-insights-heading h2 { font-size: 15px !important; font-weight: 750 !important; color: var(--fi-ink) !important; margin: 0; }
html[data-fiflow-version="3"] body .v3-planning-insights-heading p { font-size: 12px !important; color: var(--fi-text-2) !important; margin: 3px 0 0; }
html[data-fiflow-version="3"] body .v3-compass-insight { border-radius: 12px; border-color: var(--fi-line); font-size: 12.5px; }

/* Avisos: um único estilo de alerta */
html[data-fiflow-version="3"] body :is(.v3-backup-warning, #importDemoNotice > div) {
  margin: 0 0 var(--fi-gap); padding: 12px 16px; border: 1px solid #EBD3A8 !important; border-radius: 12px !important;
  background: #FBF4E7 !important; color: #6E4E1B !important; font-size: 12.5px !important; line-height: 1.5;
}
html[data-fiflow-version="3"] body #importDemoNotice > div .v3-text-button { margin-left: 6px; }

/* Importar: cartão de privacidade no padrão claro; passos legíveis */
html[data-fiflow-version="3"] body .v3-security-card { min-height: 0 !important; padding: var(--fi-pad-card) !important; border: 1px solid var(--fi-line) !important; border-radius: var(--fi-radius-card) !important; background: var(--fi-surface) !important; color: var(--fi-ink) !important; box-shadow: var(--fi-shadow); gap: 6px; justify-content: flex-start !important; }
html[data-fiflow-version="3"] body .v3-security-card > span { color: var(--fi-green); font-size: 18px; }
html[data-fiflow-version="3"] body .v3-security-card strong { font-size: 14px; color: var(--fi-ink) !important; }
html[data-fiflow-version="3"] body .v3-security-card p { margin: 0; font-size: 12px; color: var(--fi-text-2) !important; line-height: 1.5; }
html[data-fiflow-version="3"] body :is(.v3-step-grid, .v3-guide-flow) article { background: var(--fi-surface-2) !important; border: 1px solid var(--fi-line) !important; border-radius: 12px !important; padding: 14px !important; }
html[data-fiflow-version="3"] body :is(.v3-step-grid, .v3-guide-flow) article > span { width: 24px; height: 24px; font-size: 11px; font-weight: 800; }
html[data-fiflow-version="3"] body :is(.v3-step-grid, .v3-guide-flow) strong { font-size: 12.5px !important; font-weight: 700; color: var(--fi-ink); }
html[data-fiflow-version="3"] body :is(.v3-step-grid, .v3-guide-flow) p { font-size: 12px !important; color: var(--fi-text-2) !important; }
html[data-fiflow-version="3"] body .v3-guide-hero { background: var(--fi-surface) !important; border: 1px solid var(--fi-line) !important; border-radius: var(--fi-radius-card) !important; box-shadow: var(--fi-shadow); padding: var(--fi-pad-card) !important; }
html[data-fiflow-version="3"] body .v3-guide-hero h1 { font-size: 20px !important; }
html[data-fiflow-version="3"] body .v3-guide-hero p { font-size: 12.5px !important; }
html[data-fiflow-version="3"] body .v3-import-layout, html[data-fiflow-version="3"] body .v3-import-grid { align-items: start; }

/* Predição: cenários em linha inteira (3 cards com largura útil) */
html[data-fiflow-version="3"] body .v3-predict-workspace.is-full { grid-template-columns: minmax(0, 1fr) !important; }
html[data-fiflow-version="3"] body .predict-scenarios { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--fi-gap) !important; padding: 0 !important; }
html[data-fiflow-version="3"] body .predict-scenarios .v3-metric-card { box-shadow: none !important; }
@media (max-width: 900px) { html[data-fiflow-version="3"] body .predict-scenarios { grid-template-columns: minmax(0, 1fr) !important; } }
html[data-fiflow-version="3"] body .v3-compass-insight { align-items: center; }
html[data-fiflow-version="3"] body .v3-compass-insight .card-icon { width: 34px; height: 34px; border-radius: 10px; }
html[data-fiflow-version="3"] body .v3-compass-insight p { margin: 0; font-size: 13px; font-weight: 600; color: var(--fi-ink); }
html[data-fiflow-version="3"] body .v3-import-grid { align-items: start !important; }
html[data-fiflow-version="3"] body .v3-card.v3-planning-section { padding: 0 !important; }
html[data-fiflow-version="3"] body :is(.predict-actions, #anomalyPanel, .predict-opportunities) { padding-top: 0 !important; margin-top: 0 !important; }
/* Tabela: popover de filtros não pode ser cortado; valores sem quebra */
html[data-fiflow-version="3"] body .v3-table-card { overflow: visible !important; }
html[data-fiflow-version="3"] body .v3-transactions-table td:nth-last-child(2) { white-space: nowrap; font-weight: 650; }
/* Seletor de datas no mesmo padrão de controles */
html[data-fiflow-version="3"] body .picker-card { border-radius: var(--fi-radius-card) !important; border: 1px solid var(--fi-line) !important; box-shadow: 0 16px 40px rgba(18, 33, 28, .16) !important; }
html[data-fiflow-version="3"] body .picker-card .date-input { height: var(--fi-ctrl-h) !important; border-radius: var(--fi-radius-ctrl) !important; border: 1px solid var(--fi-line-strong) !important; font-size: 12.5px !important; }
html[data-fiflow-version="3"] body .picker-card .quick-btn { height: var(--fi-ctrl-h-sm) !important; padding: 0 10px !important; border-radius: var(--fi-radius-ctrl) !important; border: 1px solid var(--fi-line-strong) !important; background: var(--fi-surface) !important; font-size: 12px !important; color: var(--fi-ink) !important; }
html[data-fiflow-version="3"] body .picker-card .quick-btn:hover { background: var(--fi-green-bg) !important; border-color: var(--fi-green) !important; }
html[data-fiflow-version="3"] body .picker-card .btn-cancel { background: var(--fi-surface) !important; border: 1px solid var(--fi-line-strong) !important; color: var(--fi-ink) !important; }
html[data-fiflow-version="3"] body .picker-card .btn-apply { background: var(--fi-green) !important; border: 1px solid var(--fi-green) !important; color: #fff !important; }
html[data-fiflow-version="3"] body .picker-card .date-badge { border-radius: 999px !important; height: 28px; font-size: 12px !important; }
html[data-fiflow-version="3"] body .v3-filter-popover { left: auto !important; right: 0 !important; max-height: none !important; overflow: visible !important; width: 300px !important; box-sizing: border-box; }
/* Cabeçalho: espaço garantido entre título, filtro global e busca */
html[data-fiflow-version="3"] body .v3-header-primary { min-width: 0; gap: 16px; }
html[data-fiflow-version="3"] body .header-right { gap: 10px; flex-shrink: 0; }
@media (max-width: 1240px) {
  html[data-fiflow-version="3"] body .v3-search { width: 200px; }
  html[data-fiflow-version="3"] body .header-subtitle { display: none; }
  html[data-fiflow-version="3"] body .header-user > div:last-child { display: none; }
}
@media (max-width: 1100px) {
  html[data-fiflow-version="3"] body .v3-search { width: 40px; padding: 0; justify-content: center; overflow: hidden; }
  html[data-fiflow-version="3"] body .v3-search input { width: 0; flex: 0 0 0; }
  html[data-fiflow-version="3"] body .v3-search:focus-within { width: 220px; padding: 0 12px; justify-content: flex-start; }
  html[data-fiflow-version="3"] body .v3-search:focus-within input { width: auto; flex: 1 1 auto; }
}
@media (max-width: 760px) {
  html[data-fiflow-version="3"] body .v3-search, html[data-fiflow-version="3"] body .v3-search:focus-within { width: 100%; padding: 0 12px; justify-content: flex-start; }
  html[data-fiflow-version="3"] body .v3-search input { width: auto; flex: 1 1 auto; }
}