/* =========================================================================
   INTEGRATIONS SLACK/TEAMS — chantier "integration" (audit GED 2026-05-05)
   - Modale Settings : URLs webhooks + toggles evenements + bouton Tester
   - Boutons share auto-injectes sur Hero Card + IA Proactive + Decision Hero
   - Toast feedback "Notifie dans Slack" / "Notifie dans Teams"
   ========================================================================= */

/* -----------------------------------------------------------------------
   MODALE SETTINGS
   ----------------------------------------------------------------------- */
.intg-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--gd-z-modal, 9000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gd-duration-fast, .15s);
}
.intg-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.intg-modal {
  background: var(--bg-card);
  border-radius: var(--gd-radius-2xl, 16px);
  box-shadow: var(--gd-shadow-2xl, 0 25px 50px -12px rgba(0,0,0,.25));
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(.96);
  opacity: 0;
  transition: transform var(--gd-duration-normal, .22s) var(--gd-ease-out, cubic-bezier(0,0,.2,1)), opacity var(--gd-duration-normal, .22s);
}
.intg-modal-overlay.is-open .intg-modal {
  transform: scale(1);
  opacity: 1;
}

.intg-head {
  padding: 18px 22px;
  background: linear-gradient(135deg, #4A154B 0%, #2C5282 100%); /* mix Slack purple + Teams blue */
  color: #fff;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.intg-head-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: rgba(255,255,255,.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.intg-head-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }
.intg-head-titles { flex: 1; min-width: 0; }
.intg-head h2 {
  font-size: var(--gd-text-lg, 1.06rem);
  font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: -.2px;
}
.intg-head p {
  font-size: var(--gd-text-xs, .72rem);
  color: rgba(255,255,255,.78);
  margin: 0;
}
.intg-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.intg-close:hover { background: rgba(255,255,255,.32); }

.intg-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}

.intg-section { margin-bottom: 22px; }
.intg-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--gd-text-base, .95rem);
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
}
.intg-section-head .platform-logo {
  width: 22px; height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.intg-section-head .platform-logo.slack { background: #4A154B; color: #ECB22E; }
.intg-section-head .platform-logo.teams { background: #4B53BC; color: #fff; }
.intg-section-head .platform-logo svg { width: 14px; height: 14px; }

.intg-status-pill {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.intg-status-pill.is-on  { background: var(--gd-green-100, #d1fae5); color: var(--gd-green-700, #047857); }
.intg-status-pill.is-off { background: var(--gd-slate-200, #e2e8f0); color: var(--gd-slate-600, #475569); }
[data-theme="dark"] .intg-status-pill.is-on  { background: rgba(16,185,129,.18); color: #6ee7b7; }
[data-theme="dark"] .intg-status-pill.is-off { background: rgba(148,163,184,.18); color: #94a3b8; }

.intg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.intg-field label {
  font-size: var(--gd-text-xs, .72rem);
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.intg-field input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--gd-radius-md, 6px);
  padding: 9px 12px;
  font-size: var(--gd-text-sm, .82rem);
  font-family: ui-monospace, 'SF Mono', monospace;
  transition: border-color var(--gd-duration-fast, .15s), box-shadow var(--gd-duration-fast, .15s);
}
.intg-field input:focus {
  border-color: var(--gd-blue-500, #3b82f6);
  outline: none;
  box-shadow: var(--gd-glow-primary, 0 0 0 3px rgba(37,99,235,.25));
}
.intg-field-help {
  font-size: var(--gd-text-xs, .72rem);
  color: var(--text-light);
  line-height: 1.4;
}
.intg-field-help a {
  color: var(--gd-blue-600, #2563eb);
  text-decoration: none;
}
.intg-field-help a:hover { text-decoration: underline; }

.intg-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.intg-btn {
  padding: 8px 14px;
  border-radius: var(--gd-radius-md, 6px);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: var(--gd-text-sm, .82rem);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--gd-duration-fast, .15s), border-color var(--gd-duration-fast, .15s);
}
.intg-btn:hover {
  background: var(--gd-blue-50, #eff6ff);
  border-color: var(--gd-blue-400, #60a5fa);
}
.intg-btn.primary {
  background: var(--gd-blue-600, #2563eb);
  color: #fff;
  border-color: var(--gd-blue-600, #2563eb);
}
.intg-btn.primary:hover { background: var(--gd-blue-700, #1d4ed8); }
.intg-btn.danger {
  color: var(--gd-red-600, #dc2626);
  border-color: var(--gd-red-200, #fecaca);
}
.intg-btn.danger:hover {
  background: var(--gd-red-100, #fee2e2);
  border-color: var(--gd-red-500, #ef4444);
}

/* Toggles d'evenements */
.intg-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--gd-radius-lg, 8px);
  padding: 10px 14px;
}
.intg-event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--gd-text-sm, .82rem);
  cursor: pointer;
}
.intg-event-row label {
  flex: 1;
  cursor: pointer;
  color: var(--text);
}
.intg-event-row input { cursor: pointer; }
.intg-event-row .desc {
  font-size: 11px;
  color: var(--text-light);
  display: block;
  margin-top: 2px;
}

.intg-warning {
  background: var(--gd-amber-100, #fef3c7);
  color: var(--gd-amber-700, #b45309);
  padding: 10px 14px;
  border-radius: var(--gd-radius-md, 6px);
  font-size: var(--gd-text-xs, .72rem);
  margin-bottom: 14px;
  border: 1px solid rgba(245, 158, 11, .35);
  line-height: 1.45;
}
[data-theme="dark"] .intg-warning {
  background: rgba(245, 158, 11, .14);
  color: #fcd34d;
}

.intg-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------
   BOUTONS SHARE auto-injectes (Hero Card, IA Proactive, etc.)
   ----------------------------------------------------------------------- */
.intg-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--gd-radius-md, 6px);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: var(--gd-text-xs, .72rem);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--gd-duration-fast, .15s), border-color var(--gd-duration-fast, .15s), transform var(--gd-duration-fast, .15s);
}
.intg-share-btn:hover {
  transform: translateY(-1px);
  border-color: #4A154B;
  background: rgba(74, 21, 75, .08);
}
.intg-share-btn.teams:hover {
  border-color: #4B53BC;
  background: rgba(75, 83, 188, .08);
}
.intg-share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Quick share dropdown (depuis bouton Hero Card etc.) */
.intg-quickmenu {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--gd-radius-lg, 8px);
  box-shadow: var(--gd-shadow-xl, 0 20px 25px -5px rgba(0,0,0,.1));
  padding: 6px;
  z-index: var(--gd-z-popover, 9500);
  min-width: 180px;
  animation: intg-pop var(--gd-duration-fast, .15s) var(--gd-ease-out);
}
@keyframes intg-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.intg-quickmenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: var(--gd-text-sm, .82rem);
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  border-radius: var(--gd-radius-sm, 4px);
  text-align: left;
}
.intg-quickmenu-item:hover { background: var(--bg); }
.intg-quickmenu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.intg-quickmenu-item.disabled {
  opacity: .45;
  cursor: not-allowed;
}
.intg-quickmenu-item.disabled:hover { background: transparent; }

/* Logos plate-forme */
.intg-logo-slack { color: #4A154B; }
.intg-logo-teams { color: #4B53BC; }
[data-theme="dark"] .intg-logo-slack { color: #c89bcc; }
[data-theme="dark"] .intg-logo-teams { color: #a5acff; }

/* -----------------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------------- */
@media (max-width: 640px) {
  .intg-modal { max-width: 100%; max-height: 100vh; border-radius: 0; }
  .intg-foot { flex-direction: column-reverse; align-items: stretch; }
  .intg-foot .intg-btn { width: 100%; justify-content: center; }
}