/*
 * Diagram Builder (V1.43): my diagrams (Client\Apps\Diagrams\DiagramsPage.razor), a diagram open (DiagramEditPage: the name and
 * export bar, the Mermaid code and its preview, the graphic editor FlowchartEditor). Class prefix dg-. Linked by
 * Server\Components\App.razor after app.css. Colours only through the tokens of app.css (:root): light and dark themes; the
 * preview is white in both (Mermaid's colours are those of the Marketing slides, and the export is white).
 * Copyright (c) 2026 Toupin Technologies Inc. All rights reserved.
 */

.dg-toolbar { margin-bottom: 10px; }
.dg-name-input { min-width: 240px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); color: var(--text); font: inherit; font-weight: 600; }
.dg-dirty { padding: 2px 8px; border-radius: 999px; background: var(--note-soft); color: var(--gold-text); font-size: 0.8rem; font-weight: 600; }
.dg-danger { color: var(--bad); }
.dg-on { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.dg-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dg-list .dg-actions { white-space: nowrap; text-align: right; }
.dg-list .dg-actions .btn, .dg-list td .btn { margin-left: 4px; }

/* V1.49 (the owner, 2026-11-04: "multiple squares are not aligned"): cards. The code and the graphic editor side by side, the
   same height (--dg-h) so that their tops and bottoms line up; the preview below, the whole width; each card a header bar of
   the same height (its title on the left, its tools on the right) and a body */
.dg-layout { --dg-h: clamp(380px, 60vh, 760px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.dg-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius, 10px);
    background: var(--panel); overflow: hidden; }
.dg-card-wide { grid-column: 1 / -1; }
.dg-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 52px; padding: 8px 14px;
    border-bottom: 1px solid var(--rule); background: var(--head-bg); }
.dg-card-head h3 { margin: 0 auto 0 0; font-size: 0.95rem; }
.dg-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; padding: 12px 14px; }
.dg-layout > .dg-card:not(.dg-card-wide) > .dg-card-body { height: var(--dg-h); }
.dg-code { flex: 1; width: 100%; min-height: 0; resize: none; padding: 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--field); color: var(--text); font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.85rem; line-height: 1.45; tab-size: 4; }
.dg-syntax { font-size: 0.85rem; }
.dg-syntax summary { cursor: pointer; color: var(--muted); }
.dg-syntax .hint { margin: 6px 0 0; max-height: 9em; overflow: auto; }
.dg-preview { min-height: 160px; max-height: 75vh; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #ffffff; overflow: auto; }
.dg-preview svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
/* V1.47: the preview's zoom; zoomed in, the preview scrolls in at most three quarters of the window's height */
.dg-preview-tools { display: flex; align-items: center; gap: 10px; }
.dg-preview-tools .dg-zoom-label { display: inline-block; text-align: center; font-size: 0.85rem; }
.dg-note { padding: 8px 12px; border-radius: 8px; background: var(--note-soft); color: var(--text); font-size: 0.85rem; }
.dg-kept { margin: 6px 0 0; padding: 8px; border-radius: 6px; background: var(--code-bg); font-size: 0.8rem; white-space: pre-wrap; overflow-x: auto; }

.dg-editor { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.dg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
/* V1.49: the editor's tools in groups (adding | layout | zoom), a thin line between them; the canvas fills the card */
.dg-tools .dg-sep { width: 1px; height: 24px; margin: 0 2px; background: var(--rule); }
.dg-editor > .dg-canvas { flex: 1; min-height: 0; max-height: none; }
.dg-direction { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.dg-direction select, .dg-props select, .dg-props input, .dg-look select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--field); color: var(--text); font: inherit; }
/* V1.44: the dots of the grid scroll with the drawing (local) and follow the zoom (FlowchartEditor sets their size) */
.dg-canvas { position: relative; max-height: 70vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
    background-image: radial-gradient(var(--rule) 1px, transparent 1px); background-size: 20px 20px; background-attachment: local; }
.dg-svg { display: block; user-select: none; touch-action: none; }
.dg-node { cursor: grab; }
.dg-node:active { cursor: grabbing; }
/* A box's colours: its style line's (--dg-fill, --dg-stroke, --dg-ink set on the box), else the theme's */
.dg-shape { fill: var(--dg-fill, var(--accent-soft)); stroke: var(--dg-stroke, var(--accent)); stroke-width: 1.5; }
.dg-shape-line { fill: none; stroke: var(--dg-stroke, var(--accent)); stroke-width: 1.5; }
.dg-node.dg-selected .dg-shape, .dg-node.dg-selected .dg-shape-line { stroke: var(--info); stroke-width: 3; }
.dg-node.dg-from .dg-shape { stroke: var(--good); stroke-width: 3; stroke-dasharray: 5 3; }
.dg-text { fill: var(--dg-ink, var(--text)); font-size: 14px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.dg-edge { cursor: pointer; }
.dg-edge-hit { fill: none; stroke: transparent; stroke-width: 14; }
.dg-edge-line { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.dg-edge-line.dg-dotted { stroke-dasharray: 4 4; }
.dg-edge-line.dg-thick { stroke-width: 3.4; }
.dg-edge.dg-selected .dg-edge-line { stroke: var(--info); stroke-width: 2.6; }
.dg-edge.dg-selected .dg-edge-line.dg-thick { stroke-width: 4; }
.dg-arrowhead { fill: var(--muted); }
.dg-arrowhead.dg-arrowhead-on { fill: var(--info); }
.dg-edge-label-bg { fill: var(--panel); stroke: var(--rule); }
.dg-edge-label { fill: var(--text); font-size: 12px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
/* V1.44: a group's frame behind its boxes; only its title bar takes the pointer (select, drag, double-click to rename) */
.dg-frame { fill: var(--dg-fill, var(--head-bg)); stroke: var(--dg-stroke, var(--border)); stroke-width: 1.5; pointer-events: none; }
.dg-frame-bar { fill: transparent; cursor: move; }
.dg-frame-title { fill: var(--dg-ink, var(--muted)); font-size: 12px; font-weight: 700; dominant-baseline: central; pointer-events: none; }
.dg-group.dg-selected .dg-frame { stroke: var(--info); stroke-width: 2.5; }
/* The text of a box typed in place, over the box */
.dg-inline { position: absolute; box-sizing: border-box; padding: 0 6px; border: 2px solid var(--info); border-radius: 6px; background: var(--field);
    color: var(--text); font-family: inherit; text-align: center; outline: none; z-index: 1; }
.dg-props { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; }
.dg-props label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.dg-actions-row { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.dg-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.dg-zoom { display: inline-flex; align-items: center; gap: 2px; }
.dg-zoom .btn { padding-left: 8px; padding-right: 8px; }
.dg-zoom-value { min-width: 58px; font-variant-numeric: tabular-nums; }
/* The palette of a box or a group: no colour, then the colours (their fill, their border) */
.dg-swatches { display: inline-flex; align-items: center; gap: 4px; }
.dg-swatches-label { font-size: 0.85rem; margin-right: 2px; }
.dg-swatch { width: 22px; height: 22px; padding: 0; border: 2px solid var(--border); border-radius: 50%; cursor: pointer; }
.dg-swatch.dg-on { outline: 2px solid var(--info); outline-offset: 2px; }
.dg-swatch-none { background: linear-gradient(135deg, var(--field) 45%, var(--bad) 45%, var(--bad) 55%, var(--field) 55%); }

/* V1.44: the starters of a new diagram */
.dg-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dg-template { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--panel); color: var(--text); text-decoration: none; }
.dg-template:hover, .dg-template:focus-visible { border-color: var(--accent); box-shadow: var(--shadow); }
.dg-template .mud-icon-root { color: var(--accent); }
.dg-template .hint { margin: 0; }
.dg-tag { padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--chip-text); font-size: 0.75rem; }
.dg-list tr.dg-copied td { background: var(--note-soft); }

/* V1.44: the preview's theme and hand-drawn look; Mermaid's dark theme on its own dark background (and in its export); the last
   drawing that worked, faded, when the code cannot be drawn, the error under it */
.dg-look { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 0.85rem; }
.dg-look label { display: inline-flex; align-items: center; gap: 6px; }
.dg-look .hint { margin: 0; }
.dg-preview.dg-preview-dark { background: #333333; }
.dg-preview.dg-stale svg { opacity: 0.35; }
.dg-draw-error { padding: 8px 12px; border-radius: 8px; background: var(--bad-soft); color: var(--text); font-size: 0.85rem; }
.dg-draw-error strong { color: var(--bad); margin-right: 6px; }
.dg-draw-error pre { margin: 6px 0 0; white-space: pre-wrap; overflow-x: auto; font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.8rem; }

@media (max-width: 900px) {
    .dg-layout { grid-template-columns: minmax(0, 1fr); }
    .dg-layout > .dg-card:not(.dg-card-wide) > .dg-card-body { height: auto; }
    .dg-code { min-height: 260px; }
    .dg-editor > .dg-canvas { max-height: 70vh; }
    .dg-name-input { min-width: 0; flex: 1 1 100%; }
}