/* ==========================================================================
   Gestão Financeira — Skin "Industry" (v295)
   Camada visual carregada DEPOIS de theme-v295.css. Só reestiliza via
   tokens e regras de superfície — não altera app.js nem a estrutura.
   Direção: wireframe técnico steel-blue, cantos retos, traços finos,
   marcas de registro "+", Barlow Condensed sobre Barlow. As cores
   semânticas (receita/verde, despesa/vermelho) e as cores de categoria
   e de cartão são preservadas de propósito.
   ========================================================================== */

/* Barlow embutida localmente (subset latin, cobre acentos pt-BR) — não usa
   @import do Google para não quebrar o funcionamento offline do PWA nem
   criar dependência externa de rede. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/barlow-condensed-700.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* ground técnico */
  --bg: #f2f2f3;
  --bg-soft: #e9e9ea;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-2: #f5f5f8;
  --surface-ghost: rgba(29, 31, 32, 0.04);

  /* tinta */
  --text: #1d1f20;
  --muted: #5f6a72;

  /* traços finos */
  --border: color-mix(in srgb, #1d1f20 15%, transparent);
  --border-strong: color-mix(in srgb, #1d1f20 30%, transparent);
  --border-soft: color-mix(in srgb, #1d1f20 9%, transparent);

  /* elevação discreta, tinta neutra */
  --shadow: 0 12px 32px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-soft: 0 3px 10px color-mix(in srgb, #2b2b2d 12%, transparent);
  --shadow-card: 0 1px 2px color-mix(in srgb, #2b2b2d 12%, transparent);

  /* acento steel único */
  --primary: #5980a6;
  --primary-soft: #749dc4;
  --primary-strong: #1d2d3d;   /* tinta escura sobre chips claros fixos */
  --accent: #416180;           /* era dourado; mono steel */
  --ring: rgba(89, 128, 166, 0.42);

  /* semânticas preservadas (identidade original) */
  --secondary: #0f766e;
  --success: #0f9d6e;
  --danger: #d43d51;
  --danger-strong: #c22f43;

  /* geometria reta (blueprint) */
  --radius-xl: 4px;
  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;

  /* sidebar = campo steel escuro, tipo revertido a papel */
  --sidebar-bg: #1d2d3d;
  --sidebar-bg-2: #2c455d;
  --sidebar-text: #eef3f8;
  --sidebar-muted: #9db3c7;
  --sidebar-line: rgba(238, 243, 248, 0.12);
}

/* fundo técnico plano — remove os halos radiais da base */
body {
  background: var(--bg) !important;
  background-attachment: initial !important;
  font-family: "Barlow", "Inter", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}
.ambient { display: none !important; }

/* tipografia condensada nos títulos */
h1, h2, h3, h4, h5, h6,
.eyebrow, .card-head h2, .card-head h3,
.hero-title, .page-title, .section-title,
.entry-title, .kpi-value, .hero-value, .stat-value,
.summary-metric strong, .indicator-kpi strong {
  font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* ── superfícies como objetos de wireframe: cantos retos + traço fino ── */
.card,
.entry-card,
.budget-card,
.budget-stat,
.budget-summary,
.toolbar.card,
.list-card--workspace,
.form-card,
.modal-form,
.invoice-panel,
.invoice-section,
.indicators-board,
.goals-board,
.audit-board,
.receivables-board,
.summary-overview-card,
.summary-chart-panel,
.indicator-kpi,
.indicator-row,
.indicator-donut,
.indicator-chart,
.alerts-panel,
.settings-drawer,
.card-settings-card,
.compare-pair-card,
.empty-state,
.badge,
.tag,
.chip,
.seg,
input,
select,
textarea,
button,
.primary,
.success,
.danger {
  border-radius: 2px !important;
}

/* acento de foco temático (nunca o anel azul do browser) */
:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px;
}
::selection { background: color-mix(in srgb, var(--primary) 28%, transparent); }

/* botão primário = único objeto sólido do quadro */
.primary,
button.primary,
.btn-primary {
  background: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: #fff !important;
}
.primary:hover,
button.primary:hover { background: var(--primary-soft) !important; }

/* marcas de registro "+" nos painéis principais (não nos micro-cards) */
.card,
.indicators-board,
.goals-board,
.audit-board,
.receivables-board,
.invoice-panel,
.summary-chart-panel {
  position: relative;
}
.card::after,
.indicators-board::after,
.goals-board::after,
.audit-board::after,
.receivables-board::after,
.invoice-panel::after,
.summary-chart-panel::after {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%235980a6' stroke-opacity='0.6' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 11px 11px;
  /* usa a mesma imagem nas 4 posições */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%235980a6' stroke-opacity='0.6' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%235980a6' stroke-opacity='0.6' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%235980a6' stroke-opacity='0.6' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%235980a6' stroke-opacity='0.6' stroke-width='1'/%3E%3C/svg%3E");
}

/* tema escuro do app: reveste a sidebar/ground em steel, mantém semânticas */
body.gf-dark {
  --bg: #12191f;
  --bg-soft: #17222b;
  --surface: #1a2731;
  --surface-strong: #1f2f3b;
  --surface-2: #203040;
  --text: #eef3f8;
  --muted: #9db3c7;
  --border: rgba(238, 243, 248, 0.12);
  --border-strong: rgba(238, 243, 248, 0.22);
  --primary: #749dc4;
  --primary-soft: #94bce3;
  --ring: rgba(116, 157, 196, 0.42);
}
body.gf-dark .card::after,
body.gf-dark .indicators-board::after,
body.gf-dark .goals-board::after,
body.gf-dark .audit-board::after,
body.gf-dark .receivables-board::after,
body.gf-dark .invoice-panel::after,
body.gf-dark .summary-chart-panel::after {
  opacity: 0.5;
}

/* ==========================================================================
   Painel principal redesenhado (renderIndustryDashboard)
   ========================================================================== */

/* oculta os blocos legados que o novo painel substitui (KPIs, insights e
   faturas antigas). As listas editáveis (Lançamentos/Orçamento) permanecem
   abaixo como superfície de edição. */
#dashboardPage > .summary-grid,
#dashboardPage > #insightsGrid,
#dashboardPage > #invoicePanel { display: none !important; }

/* as listas de cards (lançamentos e orçamentos) viram redundantes com as
   tabelas do painel — ficam ocultas por inteiro (cabeçalho, busca e
   filtros inclusive; não removidas: os botões editar/marcar-pago/excluir/
   comparar dos cards originais continuam sendo acionados via proxy pelas
   ações das tabelas). */
#entriesPanel .list-card--workspace,
#budgetPanel .list-card--workspace { display: none !important; }

/* a barra de filtros (Tudo/Receitas/Despesas + Lançamentos/Orçamento +
   Novo Lançamento) é fisicamente movida pra dentro do painel — encosta
   embaixo dos gráficos/faturas e acima da tabela. */
.industry-panel .gf-workspace-toolbar { margin: 0 0 4px; }

.industry-panel { display: flex; flex-direction: column; gap: 22px; margin: 4px 0 26px; }
.industry-panel:empty { display: none; }

/* #industryKpiCharts é um <div> simples (kpis+charts+faturas viram
   innerHTML dele) — sem isso, as 3 seções empilhavam coladas, sem
   respiro vertical entre elas. */
#industryKpiCharts { display: flex; flex-direction: column; gap: 24px; }

.industry-panel .ind-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 18px;
}
.industry-panel .ind-card::after {
  content: "";
  position: absolute; inset: -6px; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%235980a6' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%235980a6' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%235980a6' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%235980a6' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 11px 11px;
}
.industry-panel .ind-card--dark { background: #1d2d3d; }

.industry-panel .ind-eyebrow {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary);
  display: flex; align-items: center; gap: 6px;
}
.industry-panel .ind-kpi-value { font-family: "Barlow Condensed", sans-serif; font-size: 30px; line-height: 1.1; margin-top: 6px; white-space: nowrap; }
.industry-panel .ind-kpi-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
.industry-panel .ind-empty { font-size: 13px; color: var(--muted); }

.industry-panel .ind-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.industry-panel .ind-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.industry-panel .ind-charts .ind-card { display: flex; flex-direction: column; }
.industry-panel .ind-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.industry-panel .ind-card-head h5 { margin: 0; font-family: "Barlow Condensed", sans-serif; font-size: 17px; }
.industry-panel .ind-card-head span { font-size: 11px; color: var(--muted); }

.industry-panel .ind-chart-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.industry-panel .ind-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.industry-panel .ind-chart-legend .sw { width: 14px; height: 9px; display: inline-block; }

/* área visual dos gráficos: altura NATURAL ao conteúdo (não mais fixa) —
   com o número de categorias variando (top 9), uma altura fixa + cards
   esticados pra ficarem "do mesmo tamanho" deixava o card com menos linhas
   cheio de espaço em branco. Largura já é igual via grid-template-columns;
   altura agora acompanha o conteúdo de cada card. */
.industry-panel .ind-chart-viz { display: flex; align-items: center; justify-content: center; }
.industry-panel .ind-chart-viz > svg { width: 100%; height: auto; }
.industry-panel .ind-chart-viz > .ind-empty { margin: auto; }

.industry-panel .ind-donut-wrap { display: flex; align-items: center; gap: 16px; width: 100%; }
.industry-panel .ind-donut-wrap > div:first-child { display: flex; align-items: center; justify-content: center; flex: none; }
.industry-panel .ind-legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.industry-panel .ind-legend-row { display: flex; align-items: center; gap: 7px; font-size: 11px; }

/* faturas — colapsável como o antigo invoicePanel: começa recolhida,
   mostrando só o cabeçalho com o botão "Expandir". */
.industry-panel .ind-faturas .ind-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.industry-panel .ind-toggle { border: 1px solid var(--border); background: transparent; color: var(--primary); padding: 6px 12px; font-size: 12px; cursor: pointer; flex: none; }
.industry-panel .ind-toggle:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.industry-panel .ind-faturas--collapsed .ind-fat-grid { display: none; }
.industry-panel .ind-fat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.industry-panel .ind-fat-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.industry-panel .ind-fat-total { margin-left: auto; font-size: 11px; color: var(--muted); }
.industry-panel .ind-badge-due { background: #fde68a; color: #7c4a03; font-size: 10px; padding: 2px 7px; }
.industry-panel .ind-cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.industry-panel .ind-cc { color: #fff; padding: 13px; display: flex; flex-direction: column; gap: 9px; min-height: 132px; }
.industry-panel .ind-cc-top { display: flex; align-items: center; gap: 9px; }
.industry-panel .ind-cc-mark { width: 30px; height: 30px; flex: none; border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; font-family: "Barlow Condensed", sans-serif; font-size: 12px; }
.industry-panel .ind-cc-brand { font-family: "Barlow Condensed", sans-serif; font-size: 13px; line-height: 1; letter-spacing: .04em; }
.industry-panel .ind-cc-plan { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .72; margin-top: 3px; }
.industry-panel .ind-cc-value { font-family: "Barlow Condensed", sans-serif; font-size: 22px; line-height: 1; }
.industry-panel .ind-cc-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto; }
.industry-panel .ind-cc-tags span { background: rgba(255,255,255,.16); padding: 2px 7px; font-size: 9px; }

/* lista + rail */
.industry-panel .ind-list { display: grid; grid-template-columns: 244px 1fr; gap: 22px; align-items: start; }
.industry-panel .ind-rail { padding: 12px; }
.industry-panel .ind-cat-row { display: flex; align-items: center; gap: 9px; padding: 7px 6px; cursor: pointer; }
.industry-panel .ind-cat-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.industry-panel .ind-cat-row.on { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.industry-panel .ind-cat-sw { width: 8px; height: 8px; flex: none; }
.industry-panel .ind-cat-name { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.industry-panel .ind-cat-val { font-family: "Barlow Condensed", sans-serif; font-size: 13px; }
.industry-panel .ind-cat-n { font-size: 10px; color: var(--muted); width: 46px; text-align: right; }

.industry-panel .ind-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.industry-panel .ind-table th { text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 10px 9px; border-bottom: 1px solid var(--border); }
.industry-panel .ind-table th[data-sort-key] { cursor: pointer; user-select: none; white-space: nowrap; }
.industry-panel .ind-table th[data-sort-key]:hover { color: var(--primary); }
.industry-panel .ind-table td { padding: 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.industry-panel .ind-table tbody tr:hover, .industry-panel .ind-table tbody tr:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.industry-panel .ind-num,
.industry-panel .ind-table th.ind-num { text-align: center; font-family: "Barlow Condensed", sans-serif; }
.industry-panel .ind-muted { color: var(--muted); }
.industry-panel .ind-nowrap { white-space: nowrap; }
.industry-panel .ind-desc { display: flex; align-items: center; gap: 9px; }
.industry-panel .ind-desc-bar { width: 6px; height: 26px; flex: none; }
.industry-panel .ind-desc-title { font-weight: 500; }
.industry-panel .ind-desc-note { font-size: 11px; color: var(--muted); }
.industry-panel .ind-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 12px; border-radius: 2px; color: var(--text); }
.industry-panel .ind-card-chip { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); margin-top: 3px; }
.industry-panel .ind-card-chip span { width: 7px; height: 7px; flex: none; border-radius: 2px; }
.industry-panel .ind-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.industry-panel .ind-row-actions { text-align: right; white-space: nowrap; }
.industry-panel .ind-icon { border: 1px solid var(--border); background: transparent; width: 28px; height: 28px; cursor: pointer; margin-left: 3px; font-size: 12px; }
.industry-panel .ind-icon:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.industry-panel .ind-icon--success { border-color: #16a34a; color: #16a34a; }
.industry-panel .ind-icon--success:hover { background: color-mix(in srgb, #16a34a 12%, transparent); }

/* busca + filtro rápido movidos pro cabeçalho da tabela — reaproveita os
   próprios elementos/estilos do workspace antigo (workspace-search-field/
   workspace-quick-filter), só reposicionados. */
.industry-panel .ind-table-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.industry-panel .ind-new { background: var(--primary); color: #fff; border: 1px solid var(--primary); padding: 8px 14px; font-size: 13px; cursor: pointer; }
.industry-panel .ind-new:hover { background: var(--primary-soft); }

@media (max-width: 1080px) {
  .industry-panel .ind-kpis { grid-template-columns: repeat(2, 1fr); }
  .industry-panel .ind-charts { grid-template-columns: 1fr; }
  .industry-panel .ind-fat-grid, .industry-panel .ind-list { grid-template-columns: 1fr; }

  /* empilhado (celular/tablet): os 2 gráficos vêm ANTES do rail. O rail de
     categorias é uma lista longa e, sendo o 1º item do grid, empurrava os
     gráficos pra baixo da dobra no celular. `order` só muda a ordem visual
     — o HTML segue igual, então nenhum listener/proxy é afetado. No
     desktop (3 colunas) nada muda: o rail continua à esquerda. */
  .industry-panel .ind-charts .ind-rail { order: 2; }
}

/* engrenagem no quadro de perfil (sidebar) — reforça visualmente que o
   quadro é clicável e abre as configurações (profileBox já tem esse
   listener). */
.page-nav-profile { position: relative; }
.page-nav-profile .profile-gear {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 15px;
  height: 15px;
  background: currentColor;
  opacity: .55;
  -webkit-mask: var(--icon-gear) center / contain no-repeat;
  mask: var(--icon-gear) center / contain no-repeat;
}

/* desktop: tabela normal, com rolagem horizontal como rede de segurança
   em larguras intermediárias; cards de mobile ficam prontos no DOM mas
   ocultos (evita duplicar lógica de render — o HTML de ambos já existe,
   só a mídia decide o que aparece). */
.industry-panel .ind-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.industry-panel .ind-table { min-width: 760px; }
.industry-panel .ind-cards-mobile { display: none; }

@media (max-width: 760px) {
  .industry-panel { gap: 16px; margin: 4px 0 20px; }
  #industryKpiCharts { gap: 16px; }
  .industry-panel .ind-kpis { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .industry-panel .ind-kpi-value { font-size: 24px; }
  .industry-panel .ind-card { padding: 14px; }
  .industry-panel .ind-charts { gap: 16px; }
  .industry-panel .ind-list { grid-template-columns: 1fr; gap: 16px; }
  .industry-panel .ind-rail { max-height: 220px; overflow-y: auto; }
  .industry-panel .ind-card-head { flex-wrap: wrap; }
  .industry-panel .ind-table-tools { width: 100%; }
  .industry-panel .ind-table-tools .workspace-search-field { width: 100%; }

  /* mobile: tabela sai, cards entram — nada de rolar tabela com o dedo */
  .industry-panel .ind-table-scroll { display: none; }
  .industry-panel .ind-cards-mobile { display: flex; flex-direction: column; gap: 10px; }

  .industry-panel .ind-entry-card {
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 12px;
  }
  .industry-panel .ind-entry-card-top { display: flex; align-items: flex-start; gap: 9px; }
  .industry-panel .ind-entry-card-top .ind-desc-bar { width: 6px; height: 34px; flex: none; }
  .industry-panel .ind-entry-card-titles { flex: 1; min-width: 0; }
  .industry-panel .ind-entry-card-value { font-family: "Barlow Condensed", sans-serif; font-size: 17px; flex: none; white-space: nowrap; }
  .industry-panel .ind-entry-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0 15px; font-size: 12px; color: var(--muted); }
  .industry-panel .ind-entry-card-forma { font-size: 12px; }
  .industry-panel .ind-entry-card-budget {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 0 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    font-size: 12px;
    color: var(--muted);
  }
  .industry-panel .ind-entry-card-budget strong { font-family: "Barlow Condensed", sans-serif; margin-left: 5px; }
  .industry-panel .ind-entry-card-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
}

/* item de grid não encolhe abaixo do conteúdo por padrão (min-width:auto) —
   sem isso, o card do rolamento horizontal força o grid inteiro a crescer
   em vez de deixar a TABELA rolar dentro dele. */
.industry-panel .ind-list,
.industry-panel .ind-list > .ind-card { min-width: 0; }

/* ── preencher o quadro branco por inteiro ─────────────────────────────
   Os 3 cards da linha de gráficos são esticados pra mesma altura
   (align-items: stretch), então o card com menos conteúdo sobrava espaço
   vazio no rodapé. Aqui o conteúdo de cada um se distribui pra ocupar a
   altura disponível, em vez de ficar agrupado no topo. */

/* rail: as linhas dividem a altura livre entre si (com teto, pra não
   virar linhas gigantes quando há só 2-3 categorias) */
.industry-panel .ind-charts .ind-rail { display: flex; flex-direction: column; }
.industry-panel .ind-charts .ind-rail .ind-cat-row { flex: 1 1 auto; max-height: 48px; }

/* a área visual do gráfico absorve a sobra vertical do card */
.industry-panel .ind-charts .ind-chart-viz { flex: 1 1 auto; min-height: 0; }

/* donut: escala com a altura disponível, mas com teto de largura — sem o
   cap ele virava um círculo de 333px num card de 365px e sobrava 16px pra
   legenda, colapsando os nomes das categorias a zero. Legenda espalha as
   linhas pra ocupar a altura. */
.industry-panel .ind-donut-wrap { height: 100%; }
.industry-panel .ind-donut-wrap > div:first-child { height: 100%; flex: 0 1 auto; max-width: 48%; }
.industry-panel .ind-donut-wrap > div:first-child > svg { width: auto; height: 100%; max-width: 100%; }
.industry-panel .ind-donut-wrap .ind-legend { flex: 1 1 auto; min-width: 128px; height: 100%; justify-content: space-evenly; gap: 0; }

/* ── Contas a receber no mesmo padrão do painel principal ──────────────
   A lista de cards antiga, os chips de pessoa e o empty-state próprio
   viram redundantes: o rail "Por pessoa" substitui os chips e a tabela/
   cards substituem a lista (com mensagem de vazio própria). Ficam ocultos,
   não removidos — nada depende deles, mas manter o DOM intacto evita
   quebrar os listeners existentes de filtro/busca da página. */
#receivablesList,
#receivablesPersonChips,
#receivablesEmptyState { display: none !important; }

/* wrapper da tabela vive dentro do card do board — sem margem extra */
#receivablesTableWrap { margin: 0; gap: 0; }

/* resumo da pessoa: 3 cards (Total / Pendente / Pago) — o "Atrasado" saiu
   junto com o filtro homônimo, já que "não pago é pendente". O grid base
   em styles.css é de 4 colunas; aqui vira 3. Os breakpoints de 2 e 1
   coluna do styles.css continuam valendo em telas menores. */
.receivable-person-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Contas a receber: cabeçalho compacto ──────────────────────────────
   O parágrafo que resumia o módulo saiu do HTML (informação de manual,
   não de painel). Aqui o título fica mais justo e o bloco perde a folga
   que existia por causa do texto. */
.receivables-hero.card { padding: 0 0 0.5rem; align-items: center; }
.receivables-hero .goals-hero-copy h1 { margin: 0.1rem 0 0; font-size: 1.5rem; line-height: 1.15; }
.receivables-hero .goals-hero-copy .eyebrow { margin: 0; }

/* resumo do topo: 3 cards (Total a receber / Pago no mês / Em aberto) —
   o "Atrasado" saiu junto com o filtro homônimo. O grid base é de 5
   colunas (havia 4 métricas + o card "Ações", este já oculto porque o CTA
   migrou pra régua do board), o que deixava trilhas vazias sobrando. */
.receivables-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .receivables-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .receivables-summary-grid { grid-template-columns: 1fr; }
}

.activity-log-filters .segmented {
  flex-wrap: wrap;
  max-width: 100%;
}
#activityLogModal .card {
  min-width: 0;
  overflow-x: hidden;
}

/* ------------------------------------------------ Central de cobrança */
.charge-center-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.charge-center-people {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
}
.charge-person {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--border, #d8dee6);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.charge-person:hover { border-color: #2563eb; }
.charge-person.is-active {
  border-color: #2563eb;
  background: color-mix(in srgb, #2563eb 8%, transparent);
}
.charge-person-name { font-weight: 600; }
.charge-person-total { font-weight: 700; text-align: right; white-space: nowrap; }
.charge-person-meta {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  opacity: 0.7;
}
.charge-center-field { display: block; }
.charge-center-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}
.charge-center-field textarea {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 12px;
  border: 1px solid var(--border, #d8dee6);
}
.charge-center-hint { margin: 6px 0 12px; font-size: 0.78rem; }
.charge-center-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.card-config-grid--pix { margin-top: 18px; }

@media (max-width: 760px) {
  .charge-center-layout { grid-template-columns: 1fr; }
  .charge-center-people { max-height: 200px; }
  .charge-center-field textarea { min-height: 200px; }
}
#chargeCenterModal .card { min-width: 0; overflow-x: hidden; }

/* ------------------------------------- alinhamento dos grupos segmentados

   A skin industry zera os cantos de tudo — inclusive `button`, com
   !important. Mas os CONTAINERS desses botões (.segmented, .workspace-tabs,
   .type-filter-row) continuavam com border-radius: 999px, herdado do tema
   anterior. Container em forma de pílula com item de canto reto dentro: nas
   extremidades o retângulo azul do item ativo escapa da curva do container e
   aparece sobreposto à borda. Alinhar o raio dos dois resolve em todo o app,
   que é onde o efeito aparecia. */
.segmented,
.workspace-tabs,
.type-filter-row,
.receivables-filters,
.audit-filters,
.goals-filters {
  border-radius: 2px;
}


/* ------------------------------------------------------------- Insights */

/* A página reusa os componentes do painel principal (.ind-card, .ind-kpis,
   .ind-table); aqui ficam só as peças que não existiam antes. */

.insights-page #insightsPanel {
  display: grid;
  gap: 14px;
}

.insights-resumo {
  margin: 0;
  padding: 10px 14px;
  background: var(--surface-2, #f4f6f8);
  border-left: 3px solid #2563eb;
  font-size: 0.88rem;
  line-height: 1.5;
}

.insights-hint {
  font-size: 0.74rem;
  max-width: 300px;
  text-align: right;
  line-height: 1.35;
}

.insights-table th,
.insights-table td {
  vertical-align: middle;
}

/* Tendências: barra proporcional ao maior movimento do período. Comparar
   comprimentos é mais rápido que ler seis porcentagens em sequência. */
.insights-trends {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 20px;
}

.insights-trend-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}

.insights-trend-name {
  font-weight: 600;
  font-size: 0.88rem;
}

.insights-trend-pct {
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
}

.insights-trend-track {
  height: 6px;
  background: var(--surface-2, #eef1f4);
  overflow: hidden;
}

.insights-trend-track > span {
  display: block;
  height: 100%;
}

.insights-trend-foot {
  margin-top: 5px;
  font-size: 0.74rem;
}

@media (max-width: 760px) {
  .insights-hint { display: none; }
  .insights-table { min-width: 640px; }
}

/* Analisadas sem alerta: recolhida por padrão — é conferência, não ação. */
.insights-ok > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 2px 0;
  list-style: none;
}
.insights-ok > summary::-webkit-details-marker { display: none; }
.insights-ok > summary::before {
  content: "▸";
  margin-right: 8px;
  font-size: 0.8rem;
  opacity: 0.6;
}
.insights-ok[open] > summary::before { content: "▾"; }
.insights-ok-titulo {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
}
.insights-ok-hint { font-size: 0.74rem; white-space: nowrap; }
.insights-ok .ind-table-scroll { margin-top: 12px; }

/* --------------------------------------------------- Histórico (premium) */

.activity-log-page .industry-panel {
  display: grid;
  gap: 14px;
}

/* Ações no hero: compactas, para não competir com o título. */
.hist-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.hist-acoes .ghost {
  padding: 7px 12px;
  font-size: 0.8rem;
  line-height: 1.3;
  min-height: 0;
  white-space: nowrap;
}

.hist-hint {
  font-size: 0.76rem;
  text-align: right;
  max-width: 320px;
  line-height: 1.35;
}

/* Linha do tempo pode ficar longa: rola dentro do próprio card em vez de
   empurrar a página. */
#activityLogPageList .ind-table-scroll,
#cloudSnapshotsList .ind-table-scroll {
  max-height: min(58vh, 560px);
  overflow-y: auto;
}

.hist-table td { vertical-align: middle; }
.hist-table .ind-desc-note { max-width: 520px; }

.activity-log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
}
.activity-log-filters .workspace-search-input {
  flex: 1 1 240px;
  min-width: 0;
}
.activity-log-filters .segmented {
  flex-wrap: wrap;
  max-width: 100%;
}

@media (max-width: 760px) {
  .hist-hint { display: none; }
  .hist-table { min-width: 680px; }
  .hist-acoes .ghost { flex: 1 1 auto; padding: 9px 10px; }
}

/* Ações do backup: Restaurar + excluir na mesma célula, sem quebrar linha. */
#cloudSnapshotsList .ind-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}
#cloudSnapshotsList .ind-icon {
  border-color: #d43d51;
  color: #d43d51;
}
#cloudSnapshotsList .ind-icon:hover {
  background: color-mix(in srgb, #d43d51 10%, transparent);
}