/* diagram-editor.css - editor e visualizzatore di diagrammi / mappe concettuali */

/* ---------- area di disegno ---------- */
.dg-host { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; text-align: left; }
.dg-host.dg-active { z-index: 3; pointer-events: auto; }
.dg-svg { display: block; overflow: visible; font-family: 'Segoe UI', Roboto, Arial, sans-serif; }
.dg-host:not(.dg-active) .dg-svg { pointer-events: none; }
.dg-host .dg-grid { display: none; }
.dg-host.dg-active.dg-show-grid .dg-grid { display: inline; }
.dg-host.dg-blank { background: #fff; }
.dg-host.dg-active .dg-svg { outline: 1px dashed rgba(26,115,232,.45); }

.dg-text { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.2; user-select: none; font-family: 'Segoe UI', Roboto, Arial, sans-serif; }
.dg-text > span { max-width: 100%; }
.dg-badge-fo { overflow: visible; pointer-events: none; }
.dg-badge { width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; color: #fff; font-size: 9px; display: flex; align-items: center;
    justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.35); margin: 1px; }

.dg-edge .dg-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; }
.dg-edge.dg-animated .dg-line { stroke-dasharray: 7 5; animation: dg-flow .9s linear infinite; }
@keyframes dg-flow { to { stroke-dashoffset: -12; } }
.dg-label-fo { pointer-events: none; overflow: visible; }
.dg-label { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }
.dg-label > span { background: rgba(255,255,255,.92); color: #333; font-size: 12px; line-height: 1.2; padding: 1px 4px; border-radius: 3px;
    white-space: pre-wrap; max-width: 100%; pointer-events: auto; font-family: 'Segoe UI', Roboto, Arial, sans-serif; }

.dg-text { flex-direction: column; }
.dg-icon-row { display: flex; align-items: center; gap: 6px; }
.dg-icon { line-height: 1; margin: 2px; }
.dg-img-empty { fill: #f5f5f5; stroke: #bbb; stroke-dasharray: 4 3; }
.dg-shapes { grid-template-columns: 1fr 1fr 1fr !important; }
.dg-pal-title { font-size: 10px; text-transform: uppercase; color: #888; margin: 6px 0 2px; letter-spacing: .04em; }
.dg-pal-fa { font-size: 18px; color: #1a73e8; line-height: 26px; }
.dg-icon-cur { font-size: 20px; color: #1a73e8; width: 28px; text-align: center; }
.dg-iconpick { margin-top: 6px; }
.dg-icon-q { width: 100%; height: 26px; font-size: 12px; border: 1px solid #ced4da; border-radius: 3px; padding: 2px 5px; }
.dg-icon-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; max-height: 190px; overflow-y: auto; margin-top: 4px; }
.dg-icon-grid button { border: 1px solid transparent; background: none; height: 28px; cursor: pointer; font-size: 15px; color: #333; padding: 0; }
.dg-icon-grid button:hover { border-color: #1a73e8; background: #e8f0fe; }

/* aree di collegamento (ex HotLink): tratteggiate nell'editor, invisibili nella mappa */
.dg-active .dg-hotspot .dg-shape { fill: rgba(229,57,53,.08); stroke: #e53935; stroke-width: 1.5; stroke-dasharray: 5 3; }
.dg-view .dg-hotspot.dg-linked:hover .dg-shape, .dg-view .dg-hotspot.dg-linked:focus .dg-shape { fill: rgba(26,115,232,.12); stroke: rgba(26,115,232,.6); stroke-width: 1.5; filter: none; }
.dg-host:not(.dg-active) .dg-hotspot .dg-badge-fo { display: none; }
.dg-drawing .dg-svg, .dg-drawing .dg-svg * { cursor: crosshair !important; }
.dg-drawrect { fill: rgba(229,57,53,.08); stroke: #e53935; stroke-width: 1.5; stroke-dasharray: 5 3; pointer-events: none; }
.dg-shape-btn.dg-on { border-color: #e53935; background: #fdecea; }
.dg-btn.dg-wide { width: 100%; text-align: left; }

/* pulsante apri/chiudi */
.dg-toggle circle { fill: #fff; stroke: #1a73e8; stroke-width: 1.5; }
.dg-toggle path { stroke: #1a73e8; stroke-width: 2; stroke-linecap: round; }
.dg-toggle .dg-tg-v { display: none; }
.dg-is-collapsed > .dg-toggle circle { fill: #1a73e8; }
.dg-is-collapsed > .dg-toggle path { stroke: #fff; }
.dg-is-collapsed > .dg-toggle .dg-tg-v { display: inline; }
.dg-toggle { cursor: pointer; outline: none; }
.dg-toggle:hover circle, .dg-toggle:focus circle { stroke-width: 2.5; }

/* ---------- editor ---------- */
.dg-active .dg-node { cursor: move; }
.dg-active .dg-edge { cursor: pointer; }
.dg-sel-box { fill: none; stroke: #1a73e8; stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.dg-sel-edge { fill: none; stroke: #1a73e8; stroke-width: 6; stroke-opacity: .25; pointer-events: none; stroke-linecap: round; }
.dg-handle { fill: #fff; stroke: #1a73e8; stroke-width: 1.2; }
.dg-end { fill: #fff; stroke: #1a73e8; stroke-width: 2; cursor: move; }
.dg-port { fill: #1a73e8; fill-opacity: .75; stroke: #fff; stroke-width: 1.5; cursor: crosshair; }
.dg-port:hover { fill-opacity: 1; r: 7px; }
.dg-rubber { fill: rgba(26,115,232,.08); stroke: #1a73e8; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.dg-target { fill: none; stroke: #2e7d32; stroke-width: 2; pointer-events: none; }
.dg-preview { fill: none; stroke: #1a73e8; stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.dg-input { position: absolute; display: none; z-index: 5; resize: none; overflow: hidden; border: 1px dashed #1a73e8; border-radius: 3px;
    background: rgba(255,255,255,.96); padding: 2px 4px; outline: none; line-height: 1.25; color: #1f2d3d; font-family: 'Segoe UI', Roboto, Arial, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* ---------- pannelli ---------- */
.dg-palette, .dg-props { position: fixed; top: 130px; z-index: 1020; background: #fff; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,.25);
    max-height: calc(100vh - 140px); overflow-y: auto; text-align: left; color: #333; font-size: 12px; }
.dg-palette { left: 6px; width: 146px; padding: 6px; overflow-x: hidden; }
.dg-props { right: 6px; width: 250px; }
.dg-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
.dg-btn { border: 1px solid #d0d7de; background: #f8f9fa; border-radius: 4px; height: 28px; cursor: pointer; color: #333; padding: 0 6px; font-size: 12px; }
.dg-btn:hover { background: #e8f0fe; border-color: #1a73e8; color: #1a73e8; }
.dg-btn:disabled { opacity: .35; cursor: default; background: #f8f9fa; border-color: #d0d7de; color: #333; }
.dg-zoom { display: grid; grid-template-columns: 26px 1fr 26px; gap: 3px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
.dg-zoom .dg-btn { padding: 0; height: 26px; }
.dg-zoom .dg-zoom-val { font-size: 11px; font-weight: 600; }
.dg-zoom [data-cmd=zoomfit] { grid-column: 1 / -1; }
.dg-shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.dg-shape-btn { border: 1px solid transparent; border-radius: 4px; padding: 3px 0; text-align: center; cursor: grab; line-height: 0; }
.dg-shape-btn:hover { border-color: #1a73e8; background: #f1f6fe; }
.dg-status { font-size: 10px; color: #777; margin-top: 6px; text-align: center; min-height: 13px; line-height: 1.2; }
.dg-sec { padding: 8px 10px; border-bottom: 1px solid #eee; }
.dg-title { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #1a73e8; margin-bottom: 6px; }
.dg-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.dg-row > label { flex: 0 0 74px; margin: 0; color: #555; font-size: 12px; }
.dg-row select, .dg-row input[type=text] { flex: 1; min-width: 0; height: 26px; font-size: 12px; padding: 2px 4px; border: 1px solid #ced4da; border-radius: 3px; background: #fff; color: #333; }
.dg-inline { flex-wrap: wrap; gap: 4px 12px; }
.dg-inline select { flex: 1; }
.dg-props label.dg-chk { display: inline-flex; flex: none; align-items: center; gap: 4px; margin: 0; font-size: 12px; color: #333; cursor: pointer; }
.dg-props input[type=checkbox] { position: static !important; opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; margin: 0; width: 13px; height: 13px; }
.dg-color { display: inline-flex; align-items: center; gap: 8px; }
.dg-color input[type=color] { width: 38px; height: 24px; padding: 0 2px; border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; }
.dg-color input[type=color]:disabled { opacity: .35; cursor: default; }
.dg-swatches { display: flex; gap: 4px; margin: 2px 0 8px; }
.dg-swatches span { width: 22px; height: 22px; border: 2px solid; border-radius: 4px; cursor: pointer; }
.dg-swatches span:hover { transform: scale(1.12); }
.dg-textarea { width: 100%; font-size: 12px; border: 1px solid #ced4da; border-radius: 3px; padding: 3px 5px; margin-bottom: 6px; resize: vertical; }
.dg-grid2, .dg-grid4 { display: grid; gap: 4px; margin-bottom: 6px; }
.dg-grid2 { grid-template-columns: 1fr 1fr; }
.dg-grid4 { grid-template-columns: repeat(4, 1fr); }
.dg-num small { display: block; color: #777; font-size: 10px; }
.dg-num input { width: 100%; height: 26px; font-size: 12px; padding: 2px 4px; border: 1px solid #ced4da; border-radius: 3px; }
.dg-btns { display: flex; gap: 4px; margin-top: 6px; }
.dg-btns .dg-btn { flex: 1; }
.dg-hint { font-size: 11px; color: #777; margin: -1px 0 6px; line-height: 1.3; }
.dg-warn { font-size: 11px; color: #c62828; margin-bottom: 6px; }
.dg-help ul { padding-left: 16px; margin: 0; color: #555; font-size: 11.5px; line-height: 1.4; }
.dg-help li { margin-bottom: 3px; }

/* ---------- visualizzatore ---------- */
.dg-view { pointer-events: none; }
.dg-view .dg-node { pointer-events: auto; transition: opacity .2s; outline: none; }
.dg-view .dg-edge { pointer-events: none; transition: opacity .2s; }
.dg-view .dg-node.dg-linked { cursor: pointer; }
.dg-view .dg-node.dg-linked .dg-shape { transition: filter .15s; }
.dg-view .dg-node.dg-linked:hover .dg-shape,
.dg-view .dg-node.dg-linked:focus .dg-shape { filter: brightness(.94) drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.dg-view .dg-text { user-select: text; }
.dg-view .dg-linked .dg-text { user-select: none; }
.dg-view.dg-focus .dg-node, .dg-view.dg-focus .dg-edge { opacity: .3; }
.dg-view.dg-focus .dg-node.dg-hl, .dg-view.dg-focus .dg-edge.dg-hl { opacity: 1; }
.dg-view .dg-node, .dg-view .dg-edge { transition: opacity .25s, visibility .25s; visibility: visible; }
.dg-view .dg-node.dg-hidden, .dg-view .dg-edge.dg-hidden { opacity: 0 !important; visibility: hidden; pointer-events: none !important; }