/* =============================================================================
 * Divi 5 Companion — Command Diagram front-end styles.
 *
 * Ported from design/Comnia Header/headers/B-command-dark.html (.visual block)
 * and scoped under the module wrapper `.dc-cdg`. All theme colors are driven by
 * CSS custom properties the module sets inline from the Design tab, so the look
 * is fully controllable without editing this file.
 *
 * The engine (command-diagram-engine.js) builds the `.cdg-*` inner nodes.
 * ========================================================================== */

.dc-cdg {
  --cdg-petrol: #0E678A;
  --cdg-green: #9AC44B;
  --cdg-ring: rgba(255, 255, 255, .09);
  --cdg-ring-2: rgba(154, 196, 75, .16);
  --cdg-spoke: rgba(14, 103, 138, .55);
  --cdg-chip-bg: rgba(22, 38, 55, .92);
  --cdg-chip-border: rgba(255, 255, 255, .10);
  --cdg-chip-text: #dbe5ee;
  --cdg-core-from: #1a3045;
  --cdg-core-to: #0e1c2b;
  --cdg-max: 632px;

  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  font-family: inherit;
}

.dc-cdg__stage {
  position: relative;
  width: min(100%, var(--cdg-max));
  aspect-ratio: 1;
  margin-inline: auto;
}

.dc-cdg__diagram {
  position: absolute;
  inset: 0;
}

/* =================== DIAGRAM =================== */
.cdg { position: absolute; inset: 0; }
.cdg-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.cdg-ring {
  fill: none; stroke: var(--cdg-ring); stroke-width: 1.1; stroke-dasharray: 2 6;
  transform-origin: center; animation: cdg-march 90s linear infinite;
}
.cdg-ring--2 { stroke: var(--cdg-ring-2); stroke-dasharray: 2 8; animation-duration: 130s; animation-direction: reverse; }
@keyframes cdg-march { to { stroke-dashoffset: -400; } }

.cdg-spoke { stroke: var(--cdg-spoke); stroke-width: 1.1; }
.cdg-spoke--use { stroke: color-mix(in srgb, var(--cdg-green) 28%, transparent); stroke-dasharray: 3 5; }
.cdg-spoke.is-focus {
  stroke: color-mix(in srgb, var(--cdg-green) 95%, transparent); stroke-width: 1.7; stroke-dasharray: none;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cdg-green) 55%, transparent));
}

.cdg-travel { fill: var(--cdg-petrol); }
.cdg-travel--use { fill: var(--cdg-green); }

.cdg-nodes { position: absolute; inset: 0; }

.cdg-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 23.6%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--cdg-core-from) 0%, var(--cdg-core-to) 70%);
  box-shadow: 0 0 60px color-mix(in srgb, var(--cdg-petrol) 45%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .06);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; z-index: 5;
}
.cdg-core::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--cdg-green) 60%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--cdg-green) 30%, transparent);
  animation: cdg-halo 6s ease-in-out infinite;
}
@keyframes cdg-halo { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.018); } }

.cdg-core-img { width: 76%; height: 76%; object-fit: contain; border-radius: 50%; }

.cdg-chip {
  position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px;
  background: var(--cdg-chip-bg); border: 1px solid var(--cdg-chip-border); border-radius: 7px;
  padding: 7px 11px; white-space: nowrap; box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  font-weight: 600; color: var(--cdg-chip-text); opacity: 1;
  animation: cdg-pop .55s cubic-bezier(.2, .8, .25, 1) both; animation-delay: calc(.2s + var(--i, 0) * .05s);
}
@keyframes cdg-pop { from { transform: translate(-50%, -50%) scale(.9); } to { transform: translate(-50%, -50%) scale(1); } }
.cdg-chip .cdg-dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.cdg-chip .cdg-label { font-size: 11.5px; line-height: 1.15; }
.cdg-chip--mng .cdg-dot { background: var(--cdg-petrol); box-shadow: 0 0 6px color-mix(in srgb, var(--cdg-petrol) 70%, transparent); }
.cdg-chip--mng .cdg-label { font-size: 11px; }
.cdg-chip--use { padding: 8px 13px; max-width: 13em; border-color: color-mix(in srgb, var(--cdg-green) 32%, transparent); background: color-mix(in srgb, var(--cdg-green) 8%, var(--cdg-chip-bg)); }
.cdg-chip--use .cdg-dot { background: var(--cdg-green); border-radius: 50%; width: 8px; height: 8px; box-shadow: 0 0 7px color-mix(in srgb, var(--cdg-green) 70%, transparent); }
.cdg-chip--use .cdg-label { font-size: 12px; font-weight: 700; }

.cdg-chip.is-focus,
.cdg-chip.is-sweep {
  background: color-mix(in srgb, var(--cdg-green) 14%, transparent); border-color: var(--cdg-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cdg-green) 16%, transparent), 0 0 28px color-mix(in srgb, var(--cdg-green) 40%, transparent);
}
.cdg-chip.is-focus .cdg-label,
.cdg-chip.is-sweep .cdg-label { font-weight: 700; }
.cdg-chip.is-focus::after {
  content: "Fokus"; position: absolute; top: -9px; left: -7px;
  background: var(--cdg-green); color: #16240a; font-size: 8px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
}

/* =================== LEGEND =================== */
.cdg-legend {
  position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  display: flex; gap: 20px; font-size: 11px; color: #8ea0b0; z-index: 6;
}
.cdg-legend span { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.cdg-legend i { width: 9px; height: 9px; border-radius: 2px; }
.cdg-legend .l-core { background: #3a5571; }
.cdg-legend .l-mng { background: var(--cdg-petrol); }
.cdg-legend .l-use { background: var(--cdg-green); }

@media (prefers-reduced-motion: reduce) {
  .dc-cdg * { animation: none !important; }
  .cdg-chip { opacity: 1; }
}