/**
 * SOCMap CSS — palette charte site (slate + teal accent + ambre amical).
 * R-SOC-MAP-PRO 2026-04-26.
 *
 * Variables : on hérite de --bg-primary / --accent-green si dispo dans le
 * theme global du site, sinon fallback hardcodé charte.
 */

.soc-map-svg {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  background: var(--bg-primary, #18181b);
  border-radius: 12px;
  display: block;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ─── Pays ──────────────────────────────────────────────────── */
.soc-map-country {
  fill: var(--bg-tertiary, #27272a);
  stroke: rgba(45, 212, 191, 0.08);
  stroke-width: 0.5;
  transition: fill 600ms ease;
}
.soc-map-country-active {
  fill: rgba(251, 191, 36, 0.15);
}
.soc-map-country-threat {
  fill: rgba(248, 113, 113, 0.15);
}

/* ─── Serveur central ───────────────────────────────────────── */
.soc-map-server-halo {
  fill: rgba(45, 212, 191, 0.20);
  animation: soc-map-server-pulse 2.5s ease-in-out infinite;
}
.soc-map-server-dot {
  fill: var(--accent-green, #2dd4bf);
}
.soc-map-server-label {
  fill: var(--text-primary, #e5e7eb);
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
}

@keyframes soc-map-server-pulse {
  0%, 100% { r: 14; opacity: 0.6; }
  50%      { r: 18; opacity: 0.95; }
}

/* ─── Arcs flux ─────────────────────────────────────────────── */
.soc-map-flow-arc {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Trafic amical : ambre chaleureux */
.soc-map-flow-friendly        { stroke: #fbbf24; opacity: 0.85; }

/* Trafic info / sortant : teal site */
.soc-map-flow-info            { stroke: #2dd4bf; opacity: 0.70; }

/* Menaces graduelles : low orange doux → critical rouge intense */
.soc-map-flow-danger-low      { stroke: #fb923c; opacity: 0.85; }
.soc-map-flow-danger-medium   { stroke: #f87171; opacity: 0.90; stroke-width: 1.8; }
.soc-map-flow-danger-high     { stroke: #ef4444; opacity: 0.95; stroke-width: 2.2; }
.soc-map-flow-danger-critical {
  stroke: #dc2626; opacity: 1; stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(220, 38, 38, 0.6));
}

/* ─── Source dots ───────────────────────────────────────────── */
.soc-map-flow-source {
  filter: drop-shadow(0 0 5px currentColor);
}
.soc-map-flow-source.soc-map-flow-friendly        { fill: #fbbf24; }
.soc-map-flow-source.soc-map-flow-info            { fill: #2dd4bf; }
.soc-map-flow-source.soc-map-flow-danger-low      { fill: #fb923c; }
.soc-map-flow-source.soc-map-flow-danger-medium   { fill: #f87171; }
.soc-map-flow-source.soc-map-flow-danger-high     { fill: #ef4444; }
.soc-map-flow-source.soc-map-flow-danger-critical { fill: #dc2626; }

/* ─── Erreur ────────────────────────────────────────────────── */
.soc-map-error {
  display: flex; align-items: center; justify-content: center;
  height: 320px; padding: 20px;
  color: var(--text-muted, #94a3b8);
  font-size: 0.9rem; text-align: center;
  background: var(--bg-secondary, #1f1f23);
  border: 1px dashed var(--border-color, rgba(255,255,255,.1));
  border-radius: 12px;
}

/* ─── Mode clair ────────────────────────────────────────────── */
[data-theme="light"] .soc-map-svg { background: #f9fafb; }
[data-theme="light"] .soc-map-country {
  fill: #e5e7eb;
  stroke: rgba(15, 118, 110, 0.18);
}
[data-theme="light"] .soc-map-country-active { fill: rgba(217, 119, 6, 0.18); }
[data-theme="light"] .soc-map-country-threat { fill: rgba(220, 38, 38, 0.16); }
[data-theme="light"] .soc-map-server-label   { fill: #1f2937; }
[data-theme="light"] .soc-map-server-halo    { fill: rgba(13, 148, 136, 0.25); }
[data-theme="light"] .soc-map-server-dot     { fill: #0d9488; }
[data-theme="light"] .soc-map-flow-friendly  { stroke: #d97706; }
[data-theme="light"] .soc-map-flow-source.soc-map-flow-friendly { fill: #d97706; }

/* ─── Indicateur live ───────────────────────────────────────── */
.live-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-muted, #94a3b8);
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-tertiary, #27272a);
  border: 1px solid var(--border-color, rgba(255,255,255,.08));
}
.live-indicator .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6b7280; transition: background 200ms;
}
.live-indicator.live .live-dot {
  background: var(--accent-green, #2dd4bf);
  box-shadow: 0 0 6px var(--accent-green, #2dd4bf);
  animation: soc-map-live-blink 1.6s ease-in-out infinite;
}
.live-indicator.live { color: var(--text-primary, #e5e7eb); }
@keyframes soc-map-live-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ─── Mobile-first responsive ───────────────────────────────── */
@media (max-width: 768px) {
  .soc-map-svg { max-height: 50vh; }
  .soc-map-server-label { display: none; }
  .soc-map-country { stroke-width: 0.3; }
  .soc-map-flow-arc { stroke-width: 1.2; }
  .soc-map-flow-source { stroke-width: 0.5; }
}

/* Réduction mouvement (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .soc-map-server-halo,
  .live-indicator.live .live-dot { animation: none; }
  .soc-map-flow-arc { transition: none; }
}