/* Diagram panel (js/diagram.js): header row with the view tools, the bpmn-js viewer,
   highlights, + / open buttons on linked boxes, and the in-place "Change diagram" editor.
   Everything is scoped under .cw-dg (the panel element handed to CW.diagram.init). */

.cw-dg {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: var(--cw-surface, #ffffff);
  color: var(--cw-text, #1b1f24);
  font-family: var(--cw-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: var(--cw-fs, 13px);
  line-height: var(--cw-lh, 1.4);
}

.cw-dg [hidden] { display: none !important; }

/* ---------- Header row ---------- */

/* The header wraps onto a second row in a narrow panel instead of cutting tools off; the name
   (code and title, one line with "...") takes what is left, and Hide always stays whole. */
.cw-dg-head {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--cw-pad, 4px);
  min-height: 32px;
  padding: 2px var(--cw-pad-2, 6px);
  border-bottom: 1px solid var(--cw-border, #d4d8de);
  background: var(--cw-surface-2, #f8f9fa);
  white-space: nowrap;
}

.cw-dg-name {
  flex: 1 1 0;
  order: 1;
  display: flex;
  align-items: baseline;
  gap: var(--cw-pad-2, 6px);
  min-width: 120px;
  overflow: hidden;
}

/* "Diagram": the panel's name, bold, always shown while the panel is open. */
.cw-dg-title { flex: none; font-size: 14px; font-weight: 700; color: var(--cw-text, #1b1f24); }

.cw-dg-code {
  flex: none;
  color: var(--cw-muted, #5b6570);
  font-variant-numeric: tabular-nums;
}

.cw-dg-wftitle {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-dg-head:not(.cw-dg-edit-head) > .cw-dg-tools { order: 2; }
.cw-dg-head:not(.cw-dg-edit-head) > .cw-dg-change { order: 3; }
.cw-dg-head:not(.cw-dg-edit-head) > .cw-dg-collapse { order: 4; flex: none; }
.cw-dg-edit-head > .cw-dg-name { order: 0; flex: 0 1 auto; min-width: 0; }

/* "Change diagram": a quiet text link (it is for the team, and easy to start by mistake). */
.cw-dg-change {
  flex: none;
  min-height: 26px;
  padding: 0 var(--cw-pad, 4px);
  border: 0;
  background: none;
  color: var(--cw-muted, #5b6570);
  font: inherit;
  font-size: var(--cw-fs-sm, 12px);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cw-dg-change:hover:not(:disabled) { color: var(--cw-accent, #1d4ed8); }
.cw-dg-change:disabled { color: var(--cw-border-strong, #9aa3ad); cursor: default; }
.cw-dg-change:focus-visible { outline: 2px solid var(--cw-accent, #1d4ed8); outline-offset: 1px; }

.cw-dg-chip,
.cw-dg-help {
  flex: none;
  align-self: center;
  padding: 0 var(--cw-pad, 4px);
  border: 1px solid var(--cw-warn, #b26a00);
  background: #fff4e0;
  color: var(--cw-warn, #b26a00);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  cursor: default;
}

.cw-dg-help {
  border-color: var(--cw-border-strong, #9aa3ad);
  background: var(--cw-surface, #ffffff);
  color: var(--cw-muted, #5b6570);
}

.cw-dg-tools {
  flex: none;
  display: flex;
}

.cw-dg-tools .cw-dg-btn + .cw-dg-btn { margin-left: -1px; }

.cw-dg-spacer { flex: 1 1 auto; min-width: 0; }

.cw-dg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 var(--cw-pad-3, 8px);
  border: 1px solid var(--cw-border-strong, #9aa3ad);
  border-radius: 0;
  background: var(--cw-surface, #ffffff);
  color: var(--cw-text, #1b1f24);
  font: inherit;
  font-size: var(--cw-fs, 13px);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.cw-dg-sq {
  width: 26px;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
}

@media (hover: hover) {
  .cw-dg-btn:hover:not(:disabled) {
    position: relative;   /* keeps the hover border on top of the neighbour's */
    border-color: var(--cw-accent, #1d4ed8);
    background: var(--cw-accent-weak, #e8eefc);
    color: var(--cw-accent, #1d4ed8);
  }
}

.cw-dg-btn:focus-visible {
  position: relative;
  outline: 2px solid var(--cw-accent, #1d4ed8);
  outline-offset: -2px;
}

.cw-dg-btn:disabled {
  color: var(--cw-border-strong, #9aa3ad);
  cursor: default;
}

.cw-dg-primary {
  border-color: var(--cw-accent, #1d4ed8);
  background: var(--cw-accent, #1d4ed8);
  color: #ffffff;
  font-weight: 600;
}

@media (hover: hover) {
  .cw-dg-primary:hover:not(:disabled) { border-color: #1e40af; background: #1e40af; color: #ffffff; }
}

.cw-dg-primary:disabled {
  border-color: var(--cw-border-strong, #9aa3ad);
  background: var(--cw-surface-2, #f8f9fa);
  color: var(--cw-border-strong, #9aa3ad);
}

.cw-dg-danger {
  border-color: var(--cw-danger, #c62828);
  background: var(--cw-danger, #c62828);
  color: #ffffff;
  font-weight: 600;
}

.cw-dg-quiet { color: var(--cw-danger, #c62828); }

.cw-dg-short { display: none; }

/* A narrow panel (js/diagram.js sets .is-narrow below 440px): short labels. */
.cw-dg.is-narrow .cw-dg-long { display: none; }
.cw-dg.is-narrow .cw-dg-short { display: inline; }

.cw-dg-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-pad, 4px);
}

.cw-dg-confirm-q {
  padding: 0 var(--cw-pad, 4px);
  color: var(--cw-danger, #c62828);
  font-weight: 600;
}

/* ---------- Body: viewer canvas, editor, message ---------- */

.cw-dg-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.cw-dg-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;                     /* own stacking context: the editor and message sit above */
  background: var(--cw-surface, #ffffff);
  touch-action: none;             /* fingers pan and zoom the diagram (js/diagram.js) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.cw-dg-canvas.is-empty { visibility: hidden; }

/* The bpmn.io watermark (bpmn-js places it bottom right) always stays visible. */
.cw-dg-canvas .bjs-powered-by,
.cw-dg-modeler-canvas .bjs-powered-by { visibility: visible; opacity: 1; z-index: 100; }

/* bpmn-js focuses the diagram when clicked; no focus ring around the whole panel for that. */
.cw-dg-canvas .djs-container > svg:focus,
.cw-dg-canvas .djs-container > svg:focus-visible { outline: none; }

/* Boxes, columns and the workflow box are clickable. */
.cw-dg-canvas .djs-shape .djs-hit { cursor: pointer; }

/* Square corners everywhere. */
.cw-dg-canvas .djs-visual rect,
.cw-dg-canvas rect.djs-outline { rx: 0; ry: 0; }

/* Linked workflows opened inside are fully opaque, so column borders and arrows passing
   behind them do not show through. */
.cw-dg-canvas .djs-element[data-element-id^="X_"].djs-shape .djs-visual > rect {
  fill-opacity: 1 !important;
}

/* The viewer's own selection and hover outlines are replaced by the highlights below. */
.cw-dg-canvas .djs-element.selected .djs-outline,
.cw-dg-canvas .djs-element.hover .djs-outline { visibility: hidden; }

/* ---------- Highlights (markers set by js/diagram.js) ---------- */

/* Its workflow box (pool): accent outline. */
.cw-dg-canvas .djs-element.cw-dg-pool > .djs-visual > rect:first-child {
  stroke: var(--cw-accent, #1d4ed8) !important;
  stroke-width: 2px !important;
}

/* The whole workflow chosen: a thicker outline, so it clearly lights up. */
.cw-dg-canvas .djs-element.cw-dg-pool-sel > .djs-visual > rect:first-child {
  stroke: var(--cw-accent, #1d4ed8) !important;
  stroke-width: 4px !important;
}

/* Its column (lane): tinted. */
.cw-dg-canvas .djs-element.cw-dg-lane > .djs-visual > rect:first-child {
  fill: var(--cw-accent-weak, #e8eefc) !important;
  fill-opacity: 1 !important;
}

/* Hover: light outline. */
.cw-dg-canvas .djs-element.cw-dg-hover > .djs-visual > :first-child {
  stroke: #7b9ff0 !important;
  stroke-width: 3px !important;
}

/* The selected step: thick accent outline (wins over hover). */
.cw-dg-canvas .djs-element.cw-dg-sel > .djs-visual > :first-child {
  stroke: var(--cw-accent, #1d4ed8) !important;
  stroke-width: 4px !important;
}

/* Who does the chosen step (the name of its row may be scrolled away), or "Not in the diagram yet". */
.cw-dg-seltag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  max-width: calc(100% - 120px);
  padding: 1px var(--cw-pad-2, 6px);
  border: 1px solid var(--cw-accent, #1d4ed8);
  background: var(--cw-accent-weak, #e8eefc);
  color: var(--cw-text, #1b1f24);
  font-size: var(--cw-fs-sm, 12px);
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-dg-seltag[hidden] { display: none; }
.cw-dg-seltag.is-missing { border-style: dashed; border-color: var(--cw-border-strong, #9aa3ad); background: var(--cw-surface, #ffffff); color: var(--cw-muted, #5b6570); }
.cw-dg.is-editing .cw-dg-seltag { display: none; }

/* ---------- + (open inside) and open-on-its-own buttons on linked boxes ---------- */

/* One group anchored at the linked box's top-left corner, hanging up and to the left
   (overlapping the box by 8px), sized in screen pixels so it never covers the label. */
.cw-dg-call {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: flex;
  gap: 3px;
}

.cw-dg-expand,
.cw-dg-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #ffffff;
  border-radius: 0;
  outline: 1px solid rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font: 700 15px/1 var(--cw-font, system-ui, sans-serif);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.cw-dg-expand { background: var(--cw-purple, #5e35b1); }
.cw-dg-expand.is-open { background: #311b92; }
.cw-dg-open { background: #4b5563; font-size: 13px; }

@media (hover: hover) {
  .cw-dg-expand:hover,
  .cw-dg-open:hover { filter: brightness(1.2); }
}

.cw-dg-expand.is-blocked,
.cw-dg-open.is-blocked {
  background: #b0b7bf;
  cursor: not-allowed;
  filter: none;
}

.cw-dg-expand:focus-visible,
.cw-dg-open:focus-visible { outline: 2px solid var(--cw-accent, #1d4ed8); }

@media (pointer: coarse) {
  .cw-dg-expand, .cw-dg-open { width: 40px; height: 40px; font-size: 20px; }
  .cw-dg-open { font-size: 17px; }
}

body.cw-mobile .cw-dg-expand,
body.cw-mobile .cw-dg-open { width: 40px; height: 40px; font-size: 20px; }
body.cw-mobile .cw-dg-open { font-size: 17px; }
body.cw-mobile .cw-dg-change { min-height: var(--cw-tap, 40px); }

/* Zoomed out the boxes are small: only the + stays. */
.cw-dg-body.is-zoomed-out .cw-dg-open { display: none; }

/* ---------- Message (loading / pick a workflow / no diagram yet / error) ---------- */

.cw-dg-msg {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--cw-surface, #ffffff);
}

.cw-dg-msg-card {
  max-width: 340px;
  padding: 12px 16px;
  border: 1px dashed var(--cw-border-strong, #9aa3ad);
  text-align: center;
}

.cw-dg-msg-title {
  font-size: var(--cw-fs-page, 15px);
  font-weight: 700;
}

.cw-dg-msg-text {
  margin-top: 2px;
  color: var(--cw-muted, #5b6570);
}

.cw-dg-msg-card .cw-dg-btn { margin-top: var(--cw-pad-3, 8px); }
.cw-dg-msg-error { border-style: solid; border-color: var(--cw-danger, #c62828); }
.cw-dg-msg-error .cw-dg-msg-title { color: var(--cw-danger, #c62828); }
.cw-dg-msg-pick .cw-dg-msg-title,
.cw-dg-msg-none .cw-dg-msg-title { color: var(--cw-muted, #5b6570); font-weight: 600; }

/* ---------- "Change diagram": the editor fills the body ---------- */

.cw-dg-edit-head { background: #fff8e8; border-bottom-color: var(--cw-warn, #b26a00); }

.cw-dg-edit-status {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cw-warn, #b26a00);
  font-size: var(--cw-fs-sm, 12px);
  font-weight: 600;
}

.cw-dg-edit-more,
.cw-dg-edit-warn {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cw-pad, 4px);
  padding: var(--cw-pad, 4px) var(--cw-pad-2, 6px);
  border-bottom: 1px solid var(--cw-border, #d4d8de);
  background: var(--cw-surface-2, #f8f9fa);
}

.cw-dg-edit-warn {
  background: #fff4e0;
  color: var(--cw-warn, #b26a00);
  font-weight: 600;
}

.cw-dg-edit-note {
  color: var(--cw-muted, #5b6570);
  font-size: var(--cw-fs-sm, 12px);
}

/* The editor fills the body: the one-line hint on top, the canvas under it. */
.cw-dg-modeler {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
.cw-dg-modeler[hidden] { display: none; }

.cw-dg-modeler-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  order: 2;
}

/* Square corners for the editor's own tools too. */
.cw-dg-modeler-canvas .djs-parent {
  --button-border-radius: 0;
  --input-border-radius: 0;
  --surface-border-radius: 0;
}
.cw-dg-modeler-canvas .djs-palette,
.cw-dg-modeler-canvas .djs-context-pad .entry,
.cw-dg-modeler-canvas .djs-popup { border-radius: 0; }

/* Four tools only, each with its name next to it: Move the view, Add a step, Add a yes/no
   question, Draw an arrow. (The names come from the editor's translations in js/diagram.js.) */
.cw-dg-modeler-canvas .djs-palette .separator,
.cw-dg-modeler-canvas .djs-palette .entry:not([data-action="hand-tool"]):not([data-action="create.task"]):not([data-action="create.exclusive-gateway"]):not([data-action="global-connect-tool"]) {
  display: none !important;
}
.cw-dg-modeler-canvas .djs-palette,
.cw-dg-modeler-canvas .djs-palette.two-column.open {
  width: auto !important;
}
.cw-dg-modeler-canvas .djs-palette .djs-palette-entries {
  display: flex;
  flex-direction: column;
}
.cw-dg-modeler-canvas .djs-palette .group {
  display: flex;
  flex-direction: column;
  width: auto !important;
}
.cw-dg-modeler-canvas .djs-palette .entry {
  display: flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  height: auto !important;
  min-height: 38px;
  padding: 0 10px 0 4px !important;
  float: none !important;
}
.cw-dg-modeler-canvas .djs-palette .entry::after {
  content: attr(aria-label);
  font: 13px/1.2 var(--cw-font, system-ui, sans-serif);
  color: var(--cw-text, #1b1f24);
  white-space: nowrap;
}

/* Narrow panels and phones: the tools show their pictures only (the names are in their tooltips). */
.cw-dg.is-narrow .cw-dg-modeler-canvas .djs-palette .entry::after { display: none; }
.cw-dg.is-narrow .cw-dg-modeler-canvas .djs-palette .entry { padding: 0 4px !important; }

/* The long notes beside the workflow stay out of sight while the diagram is changed (kept as they are). */
.cw-dg-modeler-canvas .djs-element.cw-dg-hide { display: none; }

/* The box menu: no wait, comment or "change type" (with its long list of technical kinds). */
.cw-dg-modeler-canvas .djs-context-pad .entry[data-action="append.intermediate-event"],
.cw-dg-modeler-canvas .djs-context-pad .entry[data-action="append.text-annotation"],
.cw-dg-modeler-canvas .djs-context-pad .entry[data-action="replace"] {
  display: none !important;
}

.cw-dg-modeler-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cw-muted, #5b6570);
  pointer-events: none;
}

.cw-dg-modeler-error {
  position: absolute;
  top: var(--cw-pad-3, 8px);
  left: var(--cw-pad-3, 8px);
  right: var(--cw-pad-3, 8px);
  z-index: 20;
  padding: var(--cw-pad-2, 6px) var(--cw-pad-3, 8px);
  border: 1px solid var(--cw-danger, #c62828);
  border-left-width: 3px;
  background: #fdecea;
  color: var(--cw-danger, #c62828);
}

/* One line at the top of the editor saying what to do. */
.cw-dg-modeler-tip {
  order: 1;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--cw-pad, 4px);
  padding: 3px var(--cw-pad-3, 8px);
  border-bottom: 1px solid var(--cw-border, #d4d8de);
  background: #fffbea;
  color: var(--cw-text, #1b1f24);
  font-size: var(--cw-fs-sm, 12px);
}

.cw-dg-tip-x {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cw-muted, #5b6570);
  font-size: 15px;
  cursor: pointer;
}

/* ---------- Phones and tablets: bigger targets ---------- */

body.cw-mobile .cw-dg-head { min-height: 44px; }
body.cw-mobile .cw-dg-btn { height: var(--cw-tap, 40px); min-width: var(--cw-tap, 40px); }
body.cw-mobile .cw-dg-sq { width: var(--cw-tap, 40px); font-size: 20px; }
body.cw-mobile .cw-dg-tip-x { width: 32px; height: 32px; }