/*! JointJS React v4.3.6 (2026-09-04) - React bindings and hooks for JointJS to build interactive diagrams and graphs.

This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/


@layer joint;

/* src/css/theme.css */
@layer joint {
  :root {
    --jj-color-dark-900: #6f859b;
    --jj-color-dark-800: #566c81;
    --jj-color-dark-700: #425567;
    --jj-color-dark-600: #344351;
    --jj-color-dark-500: #293a49;
    --jj-color-dark-400: #253544;
    --jj-color-dark-300: #202f3e;
    --jj-color-dark-200: #1a2733;
    --jj-color-dark-100: #131e29;
    --jj-color-light-100: #f5f6f8;
    --jj-color-light-125: #f3f6f8;
    --jj-color-light-150: #f0f4f7;
    --jj-color-light-200: #eaf0f4;
    --jj-color-light-300: #e4ebf1;
    --jj-color-light-400: #dde6ed;
    --jj-color-light-500: #cfdbe4;
    --jj-color-light-600: #c1cfda;
    --jj-color-light-700: #a6b6c5;
    --jj-color-light-800: #8a9eb0;
    --jj-color-light-900: #6f859b;
    --jj-color-success: #36a18b;
    --jj-color-destructive: #e03131;
    --jj-color-valid: #566c81;
    --jj-color-invalid: #868e96;
    --jj-radius-sm: 2px;
    --jj-radius-md: 3px;
    --jj-radius-lg: 4px;
    --jj-space-xs: 2px;
    --jj-space-sm: 4px;
    --jj-space-md: 6px;
    --jj-space-lg: 10px;
    --jj-stroke-width: 2px;
    --jj-color-primary: var(--jj-color-dark-500);
    --jj-color-primary-contrast: var(--jj-color-light-100);
    --jj-color-surface: var(--jj-color-light-100);
    --jj-color-shape-surface: var(--jj-color-light-150);
    --jj-color-shape-border: var(--jj-color-light-800);
    --jj-color-link: var(--jj-color-light-800);
    --jj-color-tool: var(--jj-color-light-100);
    --jj-color-tool-border: var(--jj-color-light-900);
    --jj-color-text: var(--jj-color-dark-200);
    --jj-color-border: var(--jj-color-light-500);
    --jj-color-border-subtle: var(--jj-color-light-200);
    --jj-drag-cursor: move;
    --jj-dragging-cursor: move;
    --jj-port-drag-cursor: crosshair;
    --jj-port-dragging-cursor: crosshair;
    --jj-transition-duration: 0.2s;
  }
  @media (min-resolution: 1.5dppx) {
    :root {
      --jj-stroke-width: 1.5px;
    }
  }
}

/* src/css/joint-react.css */
@layer joint {
  :root {
    --jj-box-color: var(--jj-color-shape-surface);
    --jj-box-hover-border-color: var(--jj-color-primary);
    --jj-box-fg-color: var(--jj-color-text);
    --jj-box-border-color: var(--jj-color-shape-border);
    --jj-box-border-width: var(--jj-stroke-width);
    --jj-box-border-radius: var(--jj-radius-lg);
    --jj-box-padding: 8px 12px;
    --jj-box-font-size: 14px;
    --jj-box-font-family: sans-serif;
  }
  .jj-is-measuring {
    opacity: 0;
    pointer-events: none;
  }
  .jj-box {
    background: var(--jj-box-color);
    color: var(--jj-box-fg-color);
    border-width: var(--jj-box-border-width);
    border-style: solid;
    border-color: var(--jj-box-border-color);
    border-radius: var(--jj-box-border-radius);
    padding: var(--jj-box-padding);
    font-size: var(--jj-box-font-size);
    font-family: var(--jj-box-font-family);
    transition: border-color var(--jj-transition-duration);
  }
  .jj-box:hover {
    border-color: var(--jj-box-hover-border-color);
    cursor: var(--jj-drag-cursor);
  }
}

/* src/presets/element-ports.css */
@layer joint {
  :root {
    --jj-port-color: var(--jj-color-surface);
    --jj-port-border-color: var(--jj-color-link);
    --jj-port-border-width: var(--jj-stroke-width);
    --jj-port-label-color: var(--jj-color-light-900);
    --jj-port-label-font-size: 10px;
    --jj-port-label-font-family: Arial, sans-serif;
  }
  .jj-port {
    fill: var(--jj-port-color);
    stroke: var(--jj-port-border-color);
    stroke-width: var(--jj-port-border-width);
    transition:
      fill var(--jj-transition-duration),
      stroke var(--jj-transition-duration),
      stroke-width var(--jj-transition-duration);
  }
  .jj-port[magnet=active] {
    cursor: var(--jj-port-drag-cursor);
  }
  .jj-port-label {
    fill: var(--jj-port-label-color);
    font-size: var(--jj-port-label-font-size);
    font-family: var(--jj-port-label-font-family);
  }
}

/* src/presets/link-labels.css */
@layer joint {
  :root {
    --jj-link-label-bg-color: var(--jj-color-light-200);
    --jj-link-label-color: var(--jj-color-text);
    --jj-link-label-font-size: 10px;
    --jj-link-label-font-family: Arial, sans-serif;
    --jj-link-label-border-color: var(--jj-color-light-700);
    --jj-link-label-border-width: var(--jj-stroke-width);
    --jj-link-label-border-radius: var(--jj-radius-sm);
  }
  .jj-link-label {
    fill: var(--jj-link-label-color);
    font-size: var(--jj-link-label-font-size);
    font-family: var(--jj-link-label-font-family);
  }
  .jj-link-label-bg {
    fill: var(--jj-link-label-bg-color);
    stroke: var(--jj-link-label-border-color);
    stroke-width: var(--jj-link-label-border-width);
    transition: stroke var(--jj-transition-duration);
  }
  .jj-link-label-bg:hover {
    stroke: var( --jj-color-light-900);
  }
  rect.jj-link-label-bg {
    rx: var(--jj-link-label-border-radius);
    ry: var(--jj-link-label-border-radius);
  }
}

/* src/presets/link-view.css */
@layer joint {
  :root {
    --jj-link-color: var(--jj-color-link);
    --jj-link-hover-color: var(--jj-color-primary);
    --jj-link-width: var(--jj-stroke-width);
    --jj-link-dash: none;
    --jj-link-line-cap: butt;
    --jj-link-connecting-color: var(--jj-color-link);
    --jj-link-connecting-width: var(--jj-stroke-width);
    --jj-link-connecting-dash: 8 4;
  }
  .jj-link-line {
    stroke: var(--jj-link-color);
    stroke-width: var(--jj-link-width);
    stroke-dasharray: var(--jj-link-dash);
    stroke-linecap: var(--jj-link-line-cap);
    transition: stroke var(--jj-transition-duration);
  }
  .jj-link-wrapper:hover + .jj-link-line {
    stroke: var(--jj-link-hover-color);
  }
  .jj-is-connecting {
    --jj-link-color: var(--jj-link-connecting-color);
    --jj-link-width: var(--jj-link-connecting-width);
    --jj-link-dash: var(--jj-link-connecting-dash);
  }
  .jj-is-snapped {
    --jj-link-color: var(--jj-color-primary);
  }
}

/* src/presets/paper.css */
@layer joint {
  :root {
    --jj-paper-color: var(--jj-color-light-300);
    --jj-paper-grid-color: var(--jj-color-light-700);
    --jj-highlighter-connecting-color: var(--jj-color-primary);
    --jj-highlighter-embedding-color: var(--jj-color-primary);
    --jj-port-hover-color: var(--jj-color-shape-surface);
    --jj-port-hover-border-color: var(--jj-color-link);
    --jj-port-hover-border-width: calc(var(--jj-stroke-width) * 2);
    --jj-port-available-color: var(--jj-color-dark-800);
    --jj-port-available-border-color: var(--jj-color-dark-800);
    --jj-port-available-border-width: var(--jj-port-border-width);
    --jj-port-connecting-color: var(--jj-color-primary);
    --jj-port-connecting-border-color: var(--jj-color-primary);
    --jj-port-connecting-border-width: var(--jj-port-border-width);
    --jj-box-available-border-color: var(--jj-color-valid);
  }
  .jj-paper {
    background-color: var(--jj-paper-color);
    height: stretch;
  }
  .jj-port[magnet=active]:not(.jj-is-magnet-available):hover {
    fill: var(--jj-port-hover-color);
    stroke: var(--jj-port-hover-border-color);
    stroke-width: var(--jj-port-hover-border-width);
  }
  .jj-port.jj-is-magnet-available {
    fill: var(--jj-port-available-color);
    stroke: var(--jj-port-available-border-color);
    stroke-width: var(--jj-port-available-border-width);
  }
  .jj-port.jj-is-connecting {
    fill: var(--jj-port-connecting-color);
    stroke: var(--jj-port-connecting-border-color);
    stroke-width: var(--jj-port-connecting-border-width);
  }
  .jj-is-dragging .jj-port[magnet=active] {
    cursor: var(--jj-port-dragging-cursor);
  }
  .jj-is-dragging .jj-box {
    cursor: var(--jj-dragging-cursor);
  }
  .jj-is-element-available .jj-box {
    border-color: var(--jj-box-available-border-color);
  }
  .jj-magnet-highlighter {
    transition: opacity var(--jj-transition-duration) ease;
    opacity: 1;
  }
  @starting-style {
    .jj-magnet-highlighter {
      opacity: 0;
    }
  }
}

/* src/css/styles.css */