/* Marketing StarNails — Fase 6.2
   Padronização do layout global sem alteração de regras de negócio. */

:root {
  --st-page-gap: 16px;
  --st-section-gap: 16px;
  --st-page-padding-x: clamp(18px, 2vw, 28px);
  --st-page-padding-y: 22px;
  --st-sidebar-width: 244px;
  --st-topbar-height: 68px;
}

/* Estrutura geral */
.app { grid-template-columns: var(--st-sidebar-width) minmax(0, 1fr); }
.sidebar { padding: 16px 13px; }
.brand-block { padding: 8px 7px 16px; }
.brand-logo-wrap { height: 94px; margin-bottom: 4px; }
.brand-logo { width: 174px; height: 92px; }
.nav { gap: 3px; padding-top: 14px; }
.nav-button { min-height: 42px; padding: 10px 12px; border-radius: 10px; }
.sidebar-footer { padding-top: 12px; }

.topbar {
  height: var(--st-topbar-height);
  padding: 0 var(--st-page-padding-x);
}
.page-title { font-size: 19px; line-height: 1.2; }
.phase-badge { min-height: 32px; padding: 7px 10px; }
.main {
  width: 100%;
  max-width: var(--st-content-max);
  padding: var(--st-page-padding-y) var(--st-page-padding-x) 32px;
}
.page.active { display: grid; gap: var(--st-section-gap); }

/* Cabeçalho único para todas as páginas internas */
.section-heading {
  min-height: 66px;
  margin: 0;
  padding: 0 2px 14px;
  align-items: center;
  border-bottom: 1px solid rgba(232, 223, 207, .85);
}
.section-heading > div:first-child { min-width: 0; }
.section-heading h1 { font-size: 25px; line-height: 1.15; }
.section-heading p { margin-top: 5px; line-height: 1.4; }
.section-heading > button,
.section-heading > .button,
.section-heading > div:last-child { flex: 0 0 auto; }

/* Dashboard passa a obedecer o mesmo ritmo das demais páginas */
.hero {
  padding: 20px;
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-md);
}
.hero h1 { font-size: 26px; }
.hero .sub { margin-top: 6px; }
.hero .grid { margin-top: 16px; }

/* Superfícies e espaçamentos */
.card, .panel { border-radius: var(--st-radius-lg); }
.card { padding: 16px; }
.panel { padding: 18px; }
.panels, .crm, .grid, .health-grid, .executive-grid { margin-top: 0; }
.panels, .crm-columns, .campaign-layout, .template-layout { gap: var(--st-section-gap); }
.panel h2, .section-title { font-size: 18px; line-height: 1.25; }
.crm-head { margin-bottom: 12px; }
.actions { margin-top: 14px; }

/* KPIs com proporção uniforme */
.grid, .crm-grid, .health-grid, .optout-kpis { gap: 12px; }
.card, .mini, .health-card, .optout-kpi {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.label, .mini span, .health-card span, .optout-kpi span { line-height: 1.3; }
.value, .mini strong, .health-card strong, .optout-kpi strong { line-height: 1.05; }

/* Campos e barras de filtro */
input, select, textarea { border-radius: var(--st-radius-md) !important; }
.search, .template-toolbar { margin: 12px 0; }
.form-row { margin-top: 10px; }
.campaign-form, .template-form, .protection-form { gap: 10px; }
.campaign-form label, .template-form label, .protection-form label { gap: 5px; }

/* Botões e grupos de ação */
button, .button { min-height: 40px; padding: 9px 13px; }
button.secondary, button.danger { min-height: 38px; }
.campaign-actions, .template-actions, .whatsapp-actions { gap: 6px; }
.template-actions button, .campaign-actions button { min-height: 34px; }

/* Tabelas e listas */
.customers, .table-wrap { border-radius: var(--st-radius-md); background: #fff; }
.customers th, .customers td,
.optout-table th, .optout-table td,
.health-table th, .health-table td { padding: 10px 11px; }
.list-row, .status-line, .diagnostic-check { padding: 10px 0; }
.campaign-row, .opportunity, .sync { border-radius: var(--st-radius-md); }
.campaign-row { padding: 13px; }
.opportunity { padding: 14px; }

/* Páginas operacionais */
.whatsapp-box, .risk-banner { margin: 0; }
.risk-banner { padding: 14px 16px; }
.sync-grid { margin-top: 12px; }
.log { margin-top: 12px; }

/* Editores laterais: sticky previsível, sem cobrir o topbar */
.template-editor-panel,
.campaign-layout > .panel:last-child,
.audience-layout > .panel:last-child {
  top: calc(var(--st-topbar-height) + 16px);
}
.template-editor-panel { max-height: calc(100vh - var(--st-topbar-height) - 32px); }

/* Modais */
.modal { border-radius: var(--st-radius-lg); padding: 20px; }
.modal-head { gap: 12px; }
.modal-actions { margin-top: 14px; }

/* Zoom e telas intermediárias */
@media (max-width: 1320px) {
  :root { --st-sidebar-width: 230px; }
  .main { max-width: 100%; }
  .executive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  .grid, .crm-grid, .health-grid, .optout-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-layout, .template-layout, .audience-layout { grid-template-columns: 1fr; }
  .template-editor-panel,
  .campaign-layout > .panel:last-child,
  .audience-layout > .panel:last-child {
    position: static;
    max-height: none;
  }
}

@media (max-width: 860px) {
  :root { --st-topbar-height: 62px; }
  .app { display: block; }
  .sidebar { width: min(300px, 88vw); }
  .topbar { padding-inline: 16px; }
  .main { padding: 18px 16px 28px; }
  .section-heading { align-items: flex-start; }
  .panels, .crm-columns { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .page.active { gap: 12px; }
  .section-heading { min-height: 0; flex-direction: column; padding-bottom: 12px; }
  .section-heading h1 { font-size: 22px; }
  .section-heading > button, .section-heading > .button { width: 100%; }
  .hero { padding: 16px; }
  .hero h1 { font-size: 23px; }
  .grid, .crm-grid, .health-grid, .optout-kpis, .executive-grid { grid-template-columns: 1fr; }
  .card, .mini, .health-card, .optout-kpi { min-height: 84px; }
  .panel { padding: 15px; }
  .search, .template-toolbar { grid-template-columns: 1fr; }
  .actions, .campaign-actions, .template-actions, .whatsapp-actions { width: 100%; }
  .actions button, .campaign-actions button, .template-actions button { flex: 1 1 auto; }
}