/* ============================================================================
   11B. PÁGINA · PAINEL (#page-dashboard) — TELA 1 do protótipo
   Topbar fixa + corpo rolante; linha de KPI em cards obsidian raio 12 com o
   dinheiro em âmbar mono; grade 2.05fr/1fr para gráfico + feed; grade 1fr/1fr
   para os pares. Toda a cor de dinheiro vem de --color-amber e de nenhum outro
   lugar. Especificidade [data-theme] .x = (0,2,0) para vencer as regras
   .dnew-* de theme-linear-pages-a.css, que carrega depois deste arquivo.
   ========================================================================== */
@media (min-width:1024px){
  :root[data-theme] #page-dashboard.page.active{
    display:flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
  }
  :root[data-theme] #page-dashboard > .lx-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
  }
}
/* app.css 7145 declara `#page-dashboard > header + div{width:min(100%,1440px);
   padding:clamp(...) !important}`. O corpo do painel agora é a .lx-scroll, que
   precisa ocupar a largura toda e não ter padding próprio — quem espaça é a
   .lx-dash lá dentro. Especificidade (1,3,1) contra (1,0,1). */
:root[data-theme] #page-dashboard > header + .lx-scroll{
  width:100%;
  max-width:none;
  min-width:0;
  padding:0 !important;
}
:root[data-theme] #page-dashboard .lx-scroll{
  background:var(--lx-void);
}
:root[data-theme] #page-dashboard #dash-general{ min-width:0; }

:root[data-theme] .lx-dash{
  display:flex;
  flex-direction:column;
  gap:var(--lx-s16);
  padding:var(--lx-s20) var(--lx-s24) var(--lx-s32);
  max-width:none;
  margin:0 auto;
  color:var(--lx-mist);
}

/* rótulo micro reaproveitado por todo o painel */
:root[data-theme] .lx-lbl{
  color:var(--lx-fog);
  font-family:var(--lx-font-ui);
  font-size:12px;
  font-weight:var(--lx-w-reg);
  line-height:1.4;
  margin:0;
}
:root[data-theme] .lx-spacer{ flex:1 1 auto; min-width:0; }
:root[data-theme] .lx-ic-14{ width:14px; height:14px; flex:0 0 auto; }

/* ───────── linha de KPI ───────── */
:root[data-theme] .lx-kpi-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--lx-s12);
}
:root[data-theme] .lx-kpi{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:16px 16px 12px;
  border-radius:var(--lx-r-card);
  background:var(--lx-obsidian);
  box-shadow:var(--lx-sh-subtle);
}
:root[data-theme] .lx-kpi-top{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--lx-fog);
  min-width:0;
}
:root[data-theme] .lx-kpi-val{
  display:flex;
  align-items:baseline;
  gap:5px;
  color:var(--lx-paper);
  font-family:var(--lx-font-ui);
  font-size:28px;
  font-weight:var(--lx-w-590);
  letter-spacing:-.7px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  min-width:0;
}
/* dinheiro: âmbar, e só aqui (mesma face e tamanho dos demais KPIs, como no
   protótipo: .kpi-val.is-money só recolore) */
:root[data-theme] .lx-kpi-val.is-money{
  color:var(--lx-amber);
}
:root[data-theme] .lx-kpi-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  white-space:nowrap;
  min-width:0;
}
:root[data-theme] .lx-kpi-foot .lx-lbl{
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

/* ───────── grades ───────── */
:root[data-theme] .lx-grid-2{
  display:grid;
  grid-template-columns:minmax(0,2.05fr) minmax(320px,1fr);
  gap:var(--lx-s12);
  align-items:stretch;
}
:root[data-theme] .lx-grid-2b{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--lx-s12);
  align-items:stretch;
}

/* ───────── painel ───────── */
:root[data-theme] .lx-panel{
  display:flex;
  flex-direction:column;
  min-width:0;
  border-radius:var(--lx-r-card);
  background:var(--lx-obsidian);
  box-shadow:var(--lx-sh-subtle);
}
:root[data-theme] .lx-panel-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px 16px 10px;
  min-width:0;
}
:root[data-theme] .lx-panel-ttl{ min-width:0; }
:root[data-theme] .lx-panel-ttl h2{
  margin:0;
  color:var(--lx-bone) !important;
  font-family:var(--lx-font-ui);
  font-size:15px;
  font-weight:var(--lx-w-510);
  letter-spacing:-.165px;
  line-height:1.6;
}
:root[data-theme] .lx-panel-ttl p{ margin:2px 0 0; }
:root[data-theme] .lx-panel-body{
  flex:1 1 auto;
  min-width:0;
  padding:0 16px 16px;
}
:root[data-theme] .lx-legend{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--lx-fog);
  font-size:12px;
  white-space:nowrap;
}
:root[data-theme] .lx-legend i{
  display:inline-block;
  width:14px;
  height:2px;
  border-radius:var(--lx-r-pill);
  margin-right:6px;
  vertical-align:middle;
}
:root[data-theme] .lx-legend-amber{ background:var(--lx-amber); }

/* ───────── gráficos ───────── */
:root[data-theme] .lx-chart-wrap{
  position:relative;
  min-width:0;
  padding:4px 0 0;
}
:root[data-theme] .lx-chart-wrap > svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}
:root[data-theme] .lx-chart-cap{
  color:var(--lx-ash);
  font-family:var(--lx-font-ui);
  font-size:11px;
  font-weight:var(--lx-w-510);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:14px 0 2px;
}

/* ───────── listas roláveis (containers de innerHTML do JS) ───────── */
:root[data-theme] .lx-feed-scroll{
  max-height:288px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  padding-bottom:10px;
  scroll-padding-bottom:10px;
  min-width:0;
}

/* ───────── stat genérico ───────── */
:root[data-theme] .lx-stat{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:12px 14px;
  border-radius:var(--lx-r-md);
  background:var(--lx-carbon);
  box-shadow:var(--lx-sh-subtle);
}
:root[data-theme] .lx-stat-val{
  display:flex;
  align-items:baseline;
  gap:6px;
  color:var(--lx-paper);
  font-family:var(--lx-font-ui);
  font-size:22px;
  font-weight:var(--lx-w-590);
  letter-spacing:-.4px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
:root[data-theme] .lx-unit{
  color:var(--lx-ash);
  font-family:var(--lx-font-mono);
  font-size:12px;
  font-weight:var(--lx-w-reg);
  letter-spacing:0;
}
:root[data-theme] .lx-stat-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

/* ───────── bloco Instagram ───────── */
:root[data-theme] .lx-ig-grid{
  display:grid;
  grid-template-columns:minmax(0,2.2fr) minmax(220px,1fr);
  gap:var(--lx-s12);
  align-items:start;
}
:root[data-theme] .lx-ig-chart{ min-width:0; }
:root[data-theme] .lx-ig-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
}
:root[data-theme] .lx-big{
  color:var(--lx-paper);
  font-family:var(--lx-font-ui);
  font-size:30px;
  font-weight:var(--lx-w-590);
  letter-spacing:-.8px;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
}
:root[data-theme] .lx-delta{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--lx-font-mono);
  font-size:12px;
  color:var(--lx-fog);
  white-space:nowrap;
}
:root[data-theme] .lx-delta.up{ color:var(--lx-green-text); }
:root[data-theme] .lx-ig-side{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

/* ───────── bloco Canais (rosca) ───────── */
:root[data-theme] .lx-ch-grid{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:var(--lx-s16);
  align-items:center;
}
:root[data-theme] .lx-donut{
  position:relative;
  width:180px;
  height:180px;
  flex:0 0 auto;
}
:root[data-theme] .lx-donut > svg{ display:block; }
:root[data-theme] .lx-donut-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  pointer-events:none;
}
:root[data-theme] .lx-donut-val{
  color:var(--lx-paper);
  font-family:var(--lx-font-mono);
  font-size:24px;
  font-weight:var(--lx-w-590);
  letter-spacing:-.4px;
  line-height:1;
}

/* ───────── bloco Prospecção ───────── */
:root[data-theme] .lx-pr-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr);
  gap:var(--lx-s16);
  align-items:center;
}
:root[data-theme] .lx-pr-side{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

/* ───────── rodapé da página ───────── */
:root[data-theme] .lx-foot-note{
  padding:8px 24px 24px;
  color:var(--lx-ash);
  font-size:11px;
  text-align:center;
}

/* ───────── o que o JS injeta: só o container é meu, o filho vem do app.js.
   Estas regras dão o clima do rail aos blocos gerados por innerHTML sem
   depender de theme-linear-pages-a.css. ───────── */
:root[data-theme] .lx-panel .dnew-sdr-list,
:root[data-theme] .lx-panel .dnew-ch-list,
:root[data-theme] .lx-panel .dnew-sales-break,
:root[data-theme] .lx-panel .dnew-pr-src{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}
:root[data-theme] .lx-panel .dnew-kan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:10px;
  min-width:0;
}
:root[data-theme] .lx-panel :where(.dnew-sdr-row,.dnew-ch-item,.dnew-sb-row,.dnew-pr-srow){
  border-top:1px solid var(--lx-graphite);
  padding:10px 0;
  min-width:0;
}
:root[data-theme] .lx-panel :where(.dnew-sdr-row,.dnew-ch-item,.dnew-sb-row,.dnew-pr-srow):first-child{
  border-top:0;
}
:root[data-theme] .lx-panel .dnew-kan-card{
  background:var(--lx-carbon);
  border-radius:var(--lx-r-md);
  box-shadow:var(--lx-sh-subtle);
  padding:12px 14px;
  min-width:0;
}
/* Números gerados pelo JS: tabulares, para a coluna não dançar. */
:root[data-theme] .lx-panel .num{
  font-variant-numeric:tabular-nums;
}

/* ───────── responsivo ───────── */
@media (max-width:1279px){
  :root[data-theme] .lx-kpi-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  :root[data-theme] .lx-grid-2,
  :root[data-theme] .lx-grid-2b,
  :root[data-theme] .lx-ig-grid,
  :root[data-theme] .lx-pr-grid{ grid-template-columns:minmax(0,1fr); }
  :root[data-theme] .lx-ch-grid{ grid-template-columns:minmax(0,1fr); justify-items:center; }
}
@media (max-width:719px){
  :root[data-theme] .lx-kpi-row{ grid-template-columns:minmax(0,1fr); }
  :root[data-theme] .lx-stat-row{ grid-template-columns:minmax(0,1fr); }
  :root[data-theme] .lx-dash{ padding:14px 14px 24px; }
  :root[data-theme] .main-area .page > header.lx-topbar{
    height:auto;
    min-height:56px;
    flex-wrap:wrap;
    padding:10px 14px 10px 60px !important;
  }
}