/* ── Crew Diagram creator (.cdg-*) ─────────────────────────────────────────────
   Full-screen, free-form org-chart canvas opened from the event editor's Crew
   tab. A focused dark workspace regardless of app theme (canvas editors read
   better dark, like the calendar overlays). See js/components/crew-diagram.js. */

.cdg-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  background: #0c0f14;
  color: #dce3ed;
  font-family: var(--set-font-body, inherit);
  -webkit-user-select: none;
  user-select: none;
}
.cdg-overlay * { box-sizing: border-box; }

/* ── Top bar ── */
.cdg-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #141b26;
  border-bottom: 1px solid #2a3040;
  flex-shrink: 0;
}
.cdg-bar-l { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.cdg-bar-c { display: flex; align-items: center; gap: 6px; }
.cdg-bar-r { display: flex; align-items: center; gap: 8px; }
.cdg-bar-ico { color: var(--accent, #d4f542); font-size: 20px; }
.cdg-title { font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.cdg-sub {
  color: #7a8a9b; font-size: 12px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 34vw;
}
.cdg-dirty { color: var(--accent, #d4f542); font-size: 11px; line-height: 1; }

.cdg-tb, .cdg-save {
  display: inline-flex; align-items: center; gap: 5px;
  background: #1c2531; color: #cdd6e2; border: 1px solid #2f3947;
  border-radius: 7px; padding: 6px 11px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
  font-family: inherit;
}
.cdg-tb:hover { background: #232e3d; border-color: #3a4658; color: #fff; }
.cdg-tb.icon { padding: 6px; }
.cdg-tb .material-symbols-outlined,
.cdg-save .material-symbols-outlined { font-size: 17px; }
.cdg-tb-sep { width: 1px; height: 20px; background: #2f3947; margin: 0 3px; }
.cdg-zoom { font-size: 12px; color: #9aa7b6; min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }

.cdg-save { background: var(--accent, #d4f542); color: #10140a; border-color: transparent; }
.cdg-save:hover:not(:disabled) { filter: brightness(1.06); }
.cdg-save:disabled { opacity: .45; cursor: default; }
.cdg-save.busy { opacity: .7; cursor: wait; }

/* ── Canvas viewport ── */
.cdg-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: grab;
  background: #0c0f14;
  touch-action: none;
}
.cdg-wrap.panning { cursor: grabbing; }
.cdg-canvas {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  /* faint dot grid that pans/zooms with the content */
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
}
.cdg-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.cdg-edge { fill: none; stroke: #52627a; stroke-width: 2; pointer-events: none; }
.cdg-edge.sel { stroke: var(--accent, #d4f542); stroke-width: 2.5; }
.cdg-edge-tmp { stroke: var(--accent, #d4f542); stroke-dasharray: 5 5; }
.cdg-edge-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }

.cdg-nodes { position: absolute; top: 0; left: 0; pointer-events: none; }
.cdg-node { position: absolute; pointer-events: auto; }
.cdg-node.sel { z-index: 5; }

/* Group / car frame */
.cdg-group {
  border: 1.5px solid #2f3a49;
  border-top: 3px solid var(--grp, #5b6b82);
  border-radius: 10px;
  background: rgba(22, 29, 40, 0.55);
  backdrop-filter: blur(1px);
}
.cdg-group.sel { border-color: var(--accent, #d4f542); box-shadow: 0 0 0 2px rgba(212,245,66,0.25); }
.cdg-grp-head {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 12px; cursor: grab; height: 46px;
}
.cdg-grp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grp, #5b6b82); flex-shrink: 0; }
.cdg-grp-label { font-weight: 700; font-size: 13px; color: #eef2f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdg-grp-sub { font-size: 11px; color: #7a8a9b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Person chip */
.cdg-person {
  display: flex; align-items: center; gap: 9px;
  width: 200px; min-height: 46px; padding: 7px 9px;
  background: #1a2230;
  border: 1px solid #2c3745;
  border-left: 3px solid var(--role, #5b6b82);
  border-radius: 9px;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28);
}
.cdg-person.sel { border-color: var(--accent, #d4f542); box-shadow: 0 0 0 2px rgba(212,245,66,0.3); }
.cdg-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  background-size: cover; background-position: center;
}
.cdg-p-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cdg-p-name { font-size: 12.5px; font-weight: 600; color: #e6ecf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdg-p-role { font-size: 10.5px; color: var(--role, #7a8a9b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Note box */
.cdg-note {
  width: 180px; min-height: 74px; padding: 10px 12px;
  background: #26240f;
  border: 1px solid #5a5320;
  border-radius: 9px;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28);
}
.cdg-note.sel { border-color: var(--accent, #d4f542); box-shadow: 0 0 0 2px rgba(212,245,66,0.3); }
.cdg-note-text { font-size: 12.5px; color: #f0ecc9; white-space: pre-wrap; word-break: break-word; }

/* Connector handle + resize grip (edit mode only) */
.cdg-handle {
  position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent, #d4f542); border: 2px solid #0c0f14;
  cursor: crosshair; opacity: 0; transition: opacity .12s;
}
.cdg-group > .cdg-handle { top: 23px; transform: none; }
.cdg-node:hover > .cdg-handle { opacity: 1; }
.cdg-resize {
  position: absolute; right: 0; bottom: 0;
  width: 16px; height: 16px; cursor: nwse-resize; opacity: 0; transition: opacity .12s;
  background: linear-gradient(135deg, transparent 50%, #4a5768 50%, #4a5768 68%, transparent 68%);
  border-bottom-right-radius: 9px;
}
.cdg-node:hover > .cdg-resize { opacity: 1; }
.cdg-target { outline: 2px dashed var(--accent, #d4f542); outline-offset: 2px; border-radius: 9px; }

/* Read-only: hide edit affordances */
.cdg-ro .cdg-handle, .cdg-ro .cdg-resize { display: none; }
.cdg-ro .cdg-node, .cdg-ro .cdg-grp-head { cursor: default; }

/* Footer hint */
.cdg-hint {
  flex-shrink: 0; padding: 7px 14px;
  background: #141b26; border-top: 1px solid #2a3040;
  font-size: 11px; color: #6b7888; text-align: center;
}

@media (max-width: 900px) {
  .cdg-sub { display: none; }
  .cdg-bar { gap: 8px; padding: 8px 10px; }
  .cdg-tb span:not(.material-symbols-outlined) { display: none; }
  .cdg-tb { padding: 6px; }
  .cdg-hint { display: none; }
}

/* ── Entry button on the event editor's Crew tab ── */
.cal-crew-taghead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.cal-crew-diagram-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(var(--accent-rgb, 212,245,66), 0.1);
  color: var(--accent, #d4f542);
  border: 1px solid rgba(var(--accent-rgb, 212,245,66), 0.35);
  border-radius: 7px; padding: 5px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .12s, border-color .12s;
  font-family: inherit;
}
.cal-crew-diagram-btn:hover { background: rgba(var(--accent-rgb, 212,245,66), 0.18); border-color: var(--accent, #d4f542); }
.cal-crew-diagram-btn .material-symbols-outlined { font-size: 16px; }