/*
 * Copyright (c) 2015 Mountainstorm
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/* this element needs tooltip positioning to work */
.graphviz-svg {
    position: relative;
}

/* stop tooltips wrapping */
.graphviz-svg .tooltip-inner {
    white-space: nowrap;
}

/* allow text selection for copying */
.graphviz-svg text {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    cursor: text;
    font-family: sans-serif;
    font-variant-numeric: tabular-nums;
}

/* Better font for pipeline/graph SVG text */
.preview svg text,
#graph svg text,
#pipeline-container svg text {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* show that nodes and clusters are (double) clickable */
.node, .cluster {
  cursor: pointer;
}

/*
 * Dark theme for graphviz-rendered SVGs.
 *
 * Apply invert+hue-rotate to the inner <g> (not the <svg>) so the SVG
 * element itself stays transparent and the container's dark background
 * shows through.  The graph background polygon is made transparent for
 * the same reason — otherwise it would render as pure black on top of
 * the container.
 *
 * hue-rotate(180deg) cancels the hue shift that inversion introduces,
 * so saturated semantic colors (red=PLAYING, green=PAUSED …) are
 * roughly preserved.
 */
body:not(.svg-light-theme) .preview svg .graph,
body:not(.svg-light-theme) #graph svg .graph,
body:not(.svg-light-theme) #pipeline-container svg .graph {
    filter: invert(1) hue-rotate(180deg);
}

/* Graph background polygon → transparent, let container bg show through */
body:not(.svg-light-theme) .preview svg .graph > polygon:first-child,
body:not(.svg-light-theme) #graph svg .graph > polygon:first-child,
body:not(.svg-light-theme) #pipeline-container svg .graph > polygon:first-child {
    fill: transparent !important;
    stroke: none !important;
}

/*
 * Pre-soften white fills so that after invert(1) they land at ~#404040
 * (dark grey) instead of pure black. Black text is unaffected (0 → 1 = white).
 * Colored fills (state indicators) are left alone.
 */
body:not(.svg-light-theme) .preview svg .graph [fill="white"],
body:not(.svg-light-theme) .preview svg .graph [fill="#ffffff"],
body:not(.svg-light-theme) #graph svg .graph [fill="white"],
body:not(.svg-light-theme) #graph svg .graph [fill="#ffffff"],
body:not(.svg-light-theme) #pipeline-container svg .graph [fill="white"],
body:not(.svg-light-theme) #pipeline-container svg .graph [fill="#ffffff"] {
    fill: #c0c0c0 !important;
}


/* Caps hover tooltip content */
.caps-tooltip { font-family: monospace; font-size: 12px; line-height: 1.5; }
.caps-tooltip-sep { height: 5px; }
.caps-tooltip-field { margin-left: 1em; }
.caps-tooltip-key { display: inline-block; min-width: var(--key-w); color: #bbb; }
