/* ===================================================================
   social.css — Stylesheet compartilhado Social Intelligence Dashboard
   Phase 10-01: extrai tokens, sidebar, componentes base e classes novas
   =================================================================== */

/* ===== CSS variables dark (default, sem data-theme) — verbatim index.html ===== */
:root {
  --bg:          #0d1117;
  --sidebar-bg:  #161b22;
  --card-bg:     #1c2128;
  --border:      #30363d;
  --text:        #e6edf3;
  --muted:       #8b949e;
  --blue:        #2f81f7;
  --blue-hover:  #388bfd;
  --green:       #3fb950;
  --yellow:      #d29922;
  --red:         #f85149;
  --purple:      #bc8cff;
  --sidebar-w:   220px;

  --hover-bg:        rgba(255,255,255,.05);
  --active-bg:       rgba(47,129,247,.15);
  --selected-bg:     rgba(47,129,247,.08);
  --row-hover:       rgba(255,255,255,.04);
  --spinner-border:  rgba(255,255,255,.2);
  --spinner-top:     #fff;
  --shadow:          rgba(0,0,0,.4);
  --badge-red-bg:    rgba(248,81,73,.15);
  --badge-yellow-bg: rgba(210,153,34,.15);
  --badge-purple-bg: rgba(188,140,255,.15);
  --badge-green-bg:  rgba(63,185,80,.15);
  --badge-green-bg2: rgba(63,185,80,.25);
  --badge-blue-bg:   rgba(47,129,247,.15);
  --btn-ghost-hover: rgba(255,255,255,.06);

  /* ===== Escala de espaçamento 4-point (UI-SPEC) ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 48px;
  --space-12: 64px;
}

/* ===== CSS variables light ([data-theme="light"]) — verbatim index.html ===== */
[data-theme="light"] {
  --bg:          #f3f3f3;
  --sidebar-bg:  #ffffff;
  --card-bg:     #ffffff;
  --border:      #e5e5e5;
  --text:        #1a1a1a;
  --muted:       #888888;
  --blue:        #2563eb;
  --blue-hover:  #1d4ed8;
  --green:       #16a34a;
  --yellow:      #d97706;
  --red:         #dc2626;
  --purple:      #7c3aed;
}
[data-theme="light"] .section-label { color: #2563eb; }
[data-theme="light"] .toast.success  { background: #16a34a; }
[data-theme="light"] .toast.error    { background: #dc2626; }
[data-theme="light"] .toast.info     { background: #2563eb; }
[data-theme="light"] .nav-item:hover { color: #1a1a1a; }

/* ===== Reset + base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ===== Sidebar ===== */
.sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; }
.sidebar-logo { padding: 20px 16px 12px; border-bottom: 1px solid var(--border); }
.sidebar-logo .logo-title { font-size: 15px; font-weight: 700; }
.sidebar-logo .logo-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.nav-section { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .08em; padding: 16px 16px 6px; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; color: var(--muted); cursor: pointer; border-radius: 6px; margin: 1px 8px; }
.nav-item:hover { background: var(--hover-bg); color: var(--text); }
.nav-item.active { background: var(--active-bg); color: var(--blue); }
.nav-icon { font-size: 14px; width: 18px; text-align: center; }
.nav-spacer { flex: 1; }
.nav-footer { border-top: 1px solid var(--border); padding: 8px 0; }

/* ===== Tabela/lista ===== */
.cat-table { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cat-table-header { display: grid; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cat-row { display: grid; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); align-items: center; font-size: 13px; }
.cat-row:last-child { border-bottom: none; }
.cat-row:hover { background: var(--row-hover); }

/* ===== Badges ===== */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.badge-ok        { background: var(--badge-green-bg);   color: var(--green);  }
.badge-publicado { background: var(--badge-green-bg2);  color: var(--green);  }
.badge-rasa      { background: var(--badge-yellow-bg);  color: var(--yellow); }
.badge-destino   { background: var(--badge-blue-bg);    color: var(--blue);  font-size: 10px; }
.badge-sem-dado  { background: var(--badge-red-bg);     color: var(--red);   }
.badge-palavras  { background: var(--badge-blue-bg);    color: var(--blue);   font-size: 10px; }
.badge-ativo     { background: var(--badge-green-bg);   color: var(--green);  }
.badge-inativo   { background: var(--badge-red-bg);     color: var(--red);    }
.badge-pendente  { background: var(--badge-yellow-bg);  color: var(--yellow); }
.badge-aprovado  { background: var(--badge-green-bg);   color: var(--green);  }
.badge-rejeitado { background: var(--badge-red-bg);     color: var(--red);    }
.badge-postando  { background: var(--badge-blue-bg);    color: var(--blue);   }
.badge-stale     { background: var(--badge-yellow-bg);  color: var(--yellow); }
.badge-concorrente { background: var(--badge-purple-bg); color: var(--purple); }

/* ===== Botoes ===== */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--blue-hover); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost:hover:not(:disabled) { background: var(--btn-ghost-hover); }

/* ===== Empty state ===== */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 14px; }

/* ===== Toast ===== */
.toast { position: fixed; bottom: 24px; right: 24px; padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; z-index: 200; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: rgba(63,185,80,.9);  color: #fff; }
.toast.error   { background: rgba(248,81,73,.9);  color: #fff; }
.toast.info    { background: rgba(47,129,247,.9); color: #fff; }

/* ===== Spinner ===== */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--spinner-border); border-top-color: var(--spinner-top); border-radius: 50%; animation: spin .6s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Material Symbols ===== */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  line-height: 1;
}
.nav-item .material-symbols-outlined { font-size: 20px; width: 20px; }

/* ===== Topbar (componente novo — Phase 10) ===== */
.topbar { height: 56px; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-7); border-bottom: 1px solid var(--border); background: var(--sidebar-bg); flex-shrink: 0; }
.topbar-info { display: flex; flex-direction: column; gap: 2px; }
.topbar-breadcrumb { font-size: 11px; color: var(--muted); }
.topbar-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.topbar-sub { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text); }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); }
.topbar-search { display: flex; align-items: center; gap: 6px; opacity: .5; cursor: not-allowed; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; color: var(--muted); }
.topbar-search input { background: transparent; border: none; outline: none; color: var(--muted); font-family: inherit; font-size: 13px; cursor: not-allowed; width: 160px; }
.content { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ===== Placeholder de midia (D-08) ===== */
.media-placeholder { width: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); margin-bottom: var(--space-2); }
.media-placeholder.reel { aspect-ratio: 9/16; }
.media-placeholder.carrossel { aspect-ratio: 1/1; }
.media-placeholder .material-symbols-outlined { font-size: 32px; }

/* ===== Toggle Grade/Tabela (UI-05) ===== */
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.view-toggle button { background: transparent; border: none; padding: 6px 10px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; }
.view-toggle button.active { background: var(--active-bg); color: var(--blue); }
.view-toggle .material-symbols-outlined { font-size: 20px; }

/* ===== Avatar/iniciais (UI-09) ===== */
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--muted); flex-shrink: 0; }

/* ===== Badges de rede (UI-09) ===== */
.badge-rede-fb { background: rgba(24,119,242,.15); color: #1877f2; }
.badge-rede-ig { background: rgba(193,53,132,.15); color: #c13584; }

/* ===== Medalhas de ranking (UI-09) ===== */
.medal-1 { color: #f5c518; }
.medal-2 { color: #a0a0a0; }
.medal-3 { color: #c98b3e; }
.medal-1 .material-symbols-outlined,
.medal-2 .material-symbols-outlined,
.medal-3 .material-symbols-outlined { font-size: 18px; vertical-align: middle; }

/* ===== Chips de intencao coloridos (UI-07) ===== */
.chip-intencao { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.chip-pergunta  { background: var(--badge-blue-bg);   color: var(--blue);   }
.chip-elogio    { background: var(--badge-green-bg);  color: var(--green);  }
.chip-reclamacao { background: var(--badge-red-bg);   color: var(--red);    }
.chip-neutro    { background: var(--badge-yellow-bg); color: var(--yellow); }

/* ===== Barra de status segmentada (UI-07) ===== */
.status-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border); }
.status-seg { height: 100%; }

/* ===== Phase 11: eixo temporal + filtros + paginacao + export ===== */

/* --- Componente 1: Date-picker bar (TEMP-02) --- */
.date-picker-bar {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.date-picker-btn {
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  padding: 4px 10px;
  font-size: 11px;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
}
.date-picker-btn:last-child { border-right: none; }
.date-picker-btn:hover { background: var(--hover-bg); color: var(--text); }
.date-picker-btn.active { background: var(--active-bg); color: var(--blue); font-weight: 600; }
.date-picker-custom {
  position: absolute;
  top: 60px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  z-index: 50;
  box-shadow: 0 4px 16px var(--shadow);
}
.date-picker-custom input[type="date"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
}
.date-picker-custom input[type="date"]:focus { border-color: var(--blue); outline: none; }

/* --- Componente 2: Delta chips (TEMP-01) --- */
.delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  margin-top: var(--space-1);
}
.delta-chip .material-symbols-outlined { font-size: 14px; }
.delta-up      { background: var(--badge-green-bg);  color: var(--green);  }
.delta-down    { background: var(--badge-red-bg);    color: var(--red);    }
.delta-neutral { background: var(--badge-yellow-bg); color: var(--yellow); }
.delta-sem-base { font-size: 11px; color: var(--muted); margin-top: var(--space-1); display: block; }

/* --- Componente 3: Carregar mais (TEMP-03) --- */
.load-more-wrap {
  text-align: center;
  padding: var(--space-4) 0;
}
.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.load-more-btn:hover { background: var(--hover-bg); color: var(--text); }
.load-more-btn:disabled { opacity: .5; cursor: not-allowed; }
.load-more-count { font-size: 11px; color: var(--muted); }

/* --- Componente 4: Export button (TEMP-04) --- */
.export-btn .material-symbols-outlined { font-size: 16px; }

/* --- Componente 5: Barra de meta de receita (TEMP-06) --- */
.goal-bar-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-6) var(--space-4);
  margin-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.goal-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.goal-bar-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.goal-bar-input-row { display: flex; align-items: center; gap: var(--space-1); }
.goal-bar-currency { font-size: 13px; color: var(--muted); }
.goal-bar-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  width: 100px;
  text-align: right;
}
.goal-bar-input:focus { border-color: var(--blue); outline: none; }
.goal-bar-track {
  height: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.goal-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
  max-width: 100%;
}
.goal-bar-below     { background: var(--yellow); }
.goal-bar-on-track  { background: var(--green);  }
.goal-bar-exceeded  { background: var(--green);  }
.goal-bar-legend {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}
.goal-bar-pct.above-goal { color: var(--green); }
.goal-bar-pct.below-goal { color: var(--yellow); }

/* --- Componente 6: KPI cards do Hub (TEMP-05) --- */
/* Reusa .stat-card/.stat-value existentes — sem CSS novo */

/* --- Componente 7: Status de coleta por concorrente (TEMP-07) --- */
.collection-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.collection-status .material-symbols-outlined { font-size: 16px; }
.collection-ok           { color: var(--green); }
.collection-interrupted  { color: var(--red);   }

/* ===================================================================
   Phase 13: camada de inteligencia (INTEL-01..05)
   =================================================================== */

/* --- INTEL-01: Insight card + aviso Haiku + linha de frescor --- */
.insight-card { display: block; }
.insight-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin: 8px 0;
}
.insight-body p { margin: 0 0 8px; }
.insight-body p:last-child { margin-bottom: 0; }
.insight-h { font-weight: 700; font-size: 13px; margin: 10px 0 4px; }
.insight-body .insight-ul { margin: 4px 0 8px; padding-left: 20px; }
.insight-body .insight-ul li { margin: 2px 0; }
.insight-freshness { font-size: 11px; color: var(--muted); margin-top: 6px; }
.insight-haiku-notice {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.insight-haiku-notice .material-symbols-outlined { font-size: 13px; }
/* Tema claro: cores ancoradas nos tokens (ja invertem), reafirmadas por contrato */
[data-theme="light"] .insight-body          { color: var(--text);  }
[data-theme="light"] .insight-freshness     { color: var(--muted); }
[data-theme="light"] .insight-haiku-notice  { color: var(--muted); }

/* --- INTEL-02/03: acoes inline em Respostas + erro inline --- */
.resposta-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.resposta-edit {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  color: var(--text);
  resize: vertical;
}
.resposta-edit:focus { border-color: var(--blue); outline: none; }
.erro-inline { font-size: 11px; color: var(--red); margin-top: 4px; }
[data-theme="light"] .resposta-edit { background: var(--bg); color: var(--text); border-color: var(--border); }
[data-theme="light"] .erro-inline   { color: var(--red); }

/* --- INTEL-04/05: heatmap hora x dia + faixas de calor --- */
/* Coluna de rotulo de hora (auto) + 7 colunas de dia. Cor = dado, sem azul. */
.heatmap {
  display: grid;
  grid-template-columns: auto repeat(7, 1fr);
  gap: 4px;
  align-items: center;
}
.heat-axis { font-size: 10px; color: var(--muted); text-align: center; }
.heat-cell { aspect-ratio: 1/1; border-radius: 3px; min-width: 0; }
.heat-alto     { background: rgba(63,185,80,.85);  }
.heat-medio    { background: rgba(210,153,34,.70);  }
.heat-baixo    { background: rgba(139,148,158,.18); }
.heat-sem-dado { background: var(--bg); border: 1px solid var(--border); }
/* Tema claro: tokens de calor proprios (verde/amarelo/faint), nunca azul */
[data-theme="light"] .heat-alto     { background: rgba(22,163,74,.80);  }
[data-theme="light"] .heat-medio    { background: rgba(217,119,6,.70);   }
[data-theme="light"] .heat-baixo    { background: rgba(136,136,136,.18); }
[data-theme="light"] .heat-sem-dado { background: var(--bg); border: 1px solid var(--border); }
.heat-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.heat-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.heat-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
[data-theme="light"] .heat-legend { color: var(--muted); }