/* Marketing StarNails — Fase 6.4 UX 2.0
   Refatoração de layout por módulo + correção da identidade da barra lateral.
   Calibrado para Chrome em 100%, sem zoom, scale ou larguras artificiais. */

:root {
  --st-sidebar-width: 218px;
  --st-topbar-height: 58px;
  --st-page-max: 1720px;
  --st-radius-lg: 14px;
  --st-radius-md: 10px;
  --st-soft-shadow: 0 2px 10px rgba(29,33,39,.045);
}

/* ===== Estrutura principal ===== */
.app { grid-template-columns:var(--st-sidebar-width) minmax(0,1fr); }
.main { max-width:var(--st-page-max); padding:16px 20px 24px; }
.topbar { height:var(--st-topbar-height); padding:0 20px; }
.page-title { font-size:16px; line-height:1.1; }
.page-subtitle { font-size:10px; margin-top:1px; }
.phase-badge { padding:6px 9px; font-size:10px; }
.section-heading { min-height:52px; padding:0 2px 10px; }
.section-heading h1 { font-size:22px; }
.section-heading p { font-size:13px; }
.page.active { gap:10px; }

/* ===== Sidebar / marca: bloco mais organizado e premium ===== */
.sidebar {
  padding:10px 10px 8px;
  background:#fff;
  box-shadow:4px 0 18px rgba(64,52,30,.045);
}
.sidebar:before { height:4px; }
.brand-block {
  margin:0 2px 8px;
  padding:8px 8px 13px;
  text-align:center;
  border:1px solid #eee7dc;
  border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,#fffdf8 100%);
}
.brand-logo-wrap {
  height:72px;
  margin:0 auto 3px;
  justify-content:center;
}
.brand-logo {
  width:126px;
  height:70px;
  object-position:center;
}
.brand-name {
  margin:2px 0 0;
  font-size:18px;
  line-height:1.1;
  letter-spacing:-.02em;
  text-align:center;
}
.brand-sub {
  margin-top:3px;
  font-size:10px;
  text-align:center;
}
.nav { padding-top:5px; gap:1px; }
.nav-button {
  min-height:37px;
  padding:8px 10px;
  gap:9px;
  font-size:13px;
  border-radius:9px;
}
.nav-button.active:before { top:7px; bottom:7px; width:3px; }
.nav-icon { font-size:14px; width:17px; min-width:17px; }
.sidebar-footer { padding:9px 9px 1px; font-size:9px; }

/* ===== Base visual: menos caixas pesadas ===== */
.hero,.panel,.card,.mini,.health-card,.opportunity,.campaign-row,.template-card,.whatsapp-box {
  border-radius:var(--st-radius-lg);
  box-shadow:var(--st-soft-shadow);
}
.panel { padding:14px; }
.card { padding:12px 13px; }
.crm-head { margin-bottom:9px; }
.panel h2,.section-title { font-size:16px; }
button,.button { min-height:34px; padding:7px 11px; font-size:12px; border-radius:8px; }
input:not([type="checkbox"]):not([type="radio"]),select,textarea { min-height:35px; padding:7px 9px; font-size:12px; }
.actions { gap:6px; margin-top:9px; }

/* ===== Dashboard executivo ===== */
#dashboard-page .hero { padding:15px 16px; }
#dashboard-page .hero h1 { font-size:23px; }
#dashboard-page .hero .sub { margin-top:4px; font-size:13px; }
#dashboard-page .grid { gap:8px; margin-top:10px; }
#dashboard-page .card { min-height:68px; }
#dashboard-page .label { font-size:9px; }
#dashboard-page .value { font-size:20px; margin-top:4px; }
#dashboard-page .crm { margin-top:10px; }
#dashboard-page .crm-head { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; }
#dashboard-page .crm-grid { gap:8px; }
#dashboard-page .mini { min-height:66px; padding:10px 12px; }
#dashboard-page .mini strong { font-size:19px; }
#dashboard-page .readiness { padding:8px 10px; font-size:12px; margin-top:8px; }
#dashboard-page .executive-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
#dashboard-page .executive-grid .mini { min-height:58px; padding:8px 10px; }
#dashboard-page .executive-grid .mini strong { font-size:15px; }

/* ===== Clientes ===== */
#customers-page .panel { padding:12px; }
#customers-page .search { grid-template-columns:minmax(280px,1fr) 220px auto; margin:8px 0; }
.customers th,.customers td { padding:7px 9px; font-size:11px; line-height:1.25; }
.customers th { font-size:9px; }
.customers button { min-height:30px; padding:5px 8px; font-size:10px; }
.pill,.classification-badge,.rfm-badge { padding:3px 6px; font-size:9px; }

/* ===== Oportunidades: layout realmente compacto ===== */
.opportunities { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.opportunity { min-height:136px; padding:11px 12px; display:grid; grid-template-columns:1fr auto; grid-template-areas:
  "priority count" "title count" "desc count" "action count"; align-items:start; column-gap:12px; }
.opportunity .priority { grid-area:priority; }
.opportunity h3 { grid-area:title; margin:3px 0 2px; font-size:14px; }
.opportunity p { grid-area:desc; margin:0 0 6px; font-size:12px; line-height:1.3; }
.opportunity-count { grid-area:count; align-self:center; font-size:25px; margin:0; min-width:68px; text-align:right; }
.opportunity button { grid-area:action; margin:3px 0 0; min-height:30px; padding:5px 8px; font-size:10px; }
.priority { font-size:8px; }

/* ===== Públicos inteligentes ===== */
#audiences-page .audience-layout { grid-template-columns:minmax(0,.95fr) minmax(430px,1.05fr); gap:10px; }
#audiences-page .campaign-row { padding:10px 11px; }
#audiences-page .campaign-actions { gap:5px; margin-top:8px; }
#audiences-page .campaign-actions button { min-height:30px; padding:5px 8px; font-size:10px; }
#audiences-page .audience-rule { padding:10px; gap:7px; }

/* ===== Templates: editor mais funcional e lista mais densa ===== */
.template-layout { grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr); gap:10px; }
.template-list-panel,.template-editor-panel { padding:10px; }
.template-toolbar { grid-template-columns:minmax(180px,1fr) 175px 135px auto; gap:6px; margin:4px 0 8px; }
.template-card { padding:8px 10px; }
.template-card + .template-card { margin-top:6px; }
.template-card h3 { font-size:14px; }
.template-card p { margin:3px 0; font-size:11px; }
.template-card .muted { font-size:10px; }
.template-actions { gap:4px; }
.template-actions button { min-height:28px; padding:4px 7px; font-size:10px; }
.template-editor-panel { top:calc(var(--st-topbar-height) + 10px); max-height:calc(100vh - var(--st-topbar-height) - 20px); }
.template-editor-head h2 { font-size:16px; }
.template-form { gap:6px; }
.template-form textarea { min-height:96px; }
.variable-buttons { gap:4px; }
.variable-buttons button { min-height:26px; padding:3px 6px; font-size:9px; }
.template-preview-wrap { margin-top:2px; }
.template-preview { min-height:58px; }

/* ===== Campanhas: QR deixa de dominar a página ===== */
#campaigns-page .whatsapp-box {
  min-height:104px;
  padding:11px 14px;
  grid-template-columns:1fr 112px;
  gap:12px;
}
#campaigns-page .whatsapp-qr { width:104px; height:104px; padding:5px; }
#campaigns-page .whatsapp-status { font-size:14px; }
#campaigns-page .whatsapp-box .actions { margin-top:7px; }
#campaigns-page .campaign-layout { grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); gap:10px; }
#campaigns-page .campaign-row { padding:9px 10px; }
#campaigns-page .campaign-row h3 { font-size:14px; }
#campaigns-page .campaign-meta { gap:5px; margin-top:5px; }
#campaigns-page .campaign-actions { margin-top:7px; }
#campaigns-page .campaign-form { gap:6px; }
#campaigns-page .campaign-form textarea { min-height:90px; }
#campaigns-page .metric { min-height:56px; padding:8px 9px; }

/* ===== Saúde do WhatsApp ===== */
#whatsapp-health-page .risk-banner { padding:9px 12px; }
#whatsapp-health-page .health-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
#whatsapp-health-page .health-card { min-height:65px; padding:10px 12px; }
#whatsapp-health-page .health-card strong { font-size:19px; }
#whatsapp-health-page .panels { gap:10px; }
#whatsapp-health-page .panel { padding:13px 14px; }
#whatsapp-health-page .status-line { min-height:32px; padding:6px 0; font-size:12px; }

/* ===== Configurações: cartões de configuração, não formulário contínuo ===== */
#settings-page .panels { grid-template-columns:minmax(360px,.78fr) minmax(0,1.22fr); gap:10px; }
#settings-page .panel { padding:14px 15px; }
#settings-page .crm-head { align-items:flex-start; }
#settings-page .status-line { min-height:34px; padding:6px 0; font-size:12px; }
#settings-page .campaign-form { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
#settings-page .campaign-form > .audience-fields { display:contents; }
#settings-page .campaign-form > label { grid-column:1 / -1; }
#settings-page textarea { min-height:88px; }
#settings-page .actions { grid-column:1 / -1; }

/* ===== Responsividade ===== */
@media (max-width:1380px) {
  :root { --st-sidebar-width:206px; }
  .main { padding-inline:16px; }
  .brand-logo { width:116px; }
  .nav-button { font-size:12px; }
  .opportunity { min-height:142px; }
  #dashboard-page .executive-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1120px) {
  .opportunities { grid-template-columns:repeat(2,1fr); }
  #audiences-page .audience-layout,.campaign-layout,.template-layout,#settings-page .panels { grid-template-columns:1fr; }
  .template-editor-panel { position:static; max-height:none; }
  #settings-page .campaign-form { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) {
  :root { --st-topbar-height:56px; }
  .main { padding:14px 12px 22px; }
  .section-heading { align-items:flex-start; }
  #dashboard-page .grid,.crm-grid,.health-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px) {
  .opportunities { grid-template-columns:1fr; }
  .opportunity { grid-template-columns:1fr auto; }
  #settings-page .campaign-form { grid-template-columns:1fr; }
  #settings-page .campaign-form > label,#settings-page .actions { grid-column:auto; }
  #campaigns-page .whatsapp-box { grid-template-columns:1fr; }
}