/* ==========================================================================
   Le Synapse — CRM démonstration, offre PREMIUM
   Vient s'ajouter à admin.css : sidebar groupée, bannière démo, copilote,
   automatisations en workflow visuel, agents IA, widget "IA aujourd'hui",
   segments et reporting.
   ========================================================================== */

/* ---------- Sidebar groupée ---------- */
.admin-nav-group{ padding: 18px 22px 6px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-on-dark-soft); opacity: .55; }
.admin-nav-group:first-child{ padding-top: 6px; }

/* ---------- Bannière démonstration ---------- */
.admin-demo-banner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--bleu-electrique-dark); color: #fff; padding: 12px 20px; border-radius: var(--radius-m); font-size: .82rem; margin-bottom: 22px; }
.admin-demo-banner strong{ letter-spacing: .04em; }
.admin-demo-banner .mbs-trigger{ background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 7px 16px; font-size: .76rem; font-weight: 600; cursor: pointer; }
.admin-demo-banner .mbs-trigger:hover{ background: rgba(255,255,255,.28); }

/* ---------- "Ce que l'IA a fait aujourd'hui" ---------- */
.ai-today-card{ border: 1px solid var(--bleu-electrique); background: linear-gradient(135deg, rgba(37,99,235,.06), var(--ivoire) 55%); }
.ai-today-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.ai-today-item{ background: var(--ivoire); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 16px; text-align: center; }
.ai-today-icon{ display: block; font-size: 1.4rem; margin-bottom: 6px; }
.ai-today-item strong{ display: block; font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--bleu-electrique-dark); }
.ai-today-item span{ font-size: .76rem; color: var(--text-soft); }

/* ---------- Copilote IA ---------- */
.copilot-app{ background: var(--ivoire); border: 1px solid var(--border); border-radius: var(--radius-l); display: flex; flex-direction: column; max-width: 640px; height: 520px; overflow: hidden; }
.copilot-messages{ flex: 1; }
.copilot-form{ border-radius: 0; }

/* ---------- Automatisations : workflow visuel ---------- */
.automation-card-wf{ display: block; }
.automation-card-wf .automation-card-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.automation-card-wf h4{ margin: 0; font-size: 1rem; }
.wf-flow{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wf-block{ background: var(--ivoire-2); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 9px 14px; font-size: .8rem; color: var(--text-main); }
.wf-trigger{ background: rgba(37,99,235,.1); border-color: var(--bleu-electrique); color: var(--bleu-electrique-dark); font-weight: 600; }
.wf-arrow{ color: var(--text-soft); font-size: .9rem; }

/* ---------- Agents IA ---------- */
.agents-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.agent-card{ background: var(--ivoire); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 20px; }
.agent-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.agent-card-head h3{ margin: 0; font-size: 1.02rem; }
.agent-card p{ color: var(--text-soft); font-size: .85rem; margin: 0 0 14px; }
.agent-card-actions{ border-top: 1px dashed var(--border); padding-top: 12px; margin-bottom: 12px; }
.agent-card-actions h4{ font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); margin-bottom: 6px; }
.agent-card-actions ul{ margin: 0; padding-left: 18px; font-size: .82rem; color: var(--text-main); display: grid; gap: 4px; }

/* ---------- Reporting ---------- */
[data-reporting-range]{ text-transform: none; }

@media (max-width: 720px){
  .copilot-app{ height: 440px; }
}