@layer colors, base, graph;

@layer colors {
  :root {
    /* --- Base Colors --- */
    --black: 0 0 0; /* #000000 */
    --white: 255 255 255; /* #FFFFFF */
    --blue: 58 78 255; /* #3A4EFF */
    --red: 255 57 93; /* #FF395D */
    --green: 39 174 96; /* #27AE60 */
    --orange: 251 140 0; /* FB8C00 */
    --pink: 255 92 147; /* FF5C93 */
    --yellow: 255 214 0; /* FFD600 */
    --light-green: 18 214 175; /* #12d6af */
    --light-blue: 74 144 226; /* #4a90e2 */

    /* --- Primary Scale --- */
    --primary-10: 252 255 241; /* #FCFFF1 */
    --primary-100: 248 255 222; /* #F8FFDE */
    --primary-200: 243 255 161; /* #F3FFA1 */
    --primary-300: 224 253 108; /* #E0FD6C */ /* Main Primary */
    --primary-400: 201 241 68; /* #C9F144 */
    --primary-500: 168 214 54; /* #A8D636 */
    --primary-600: 140 180 40; /* #8CB428 */
    --primary-700: 113 143 38; /* #718F26 */
    --primary-800: 84 105 32; /* #546920 */
    --primary-900: 57 64 38; /* #394026 */
    --primary-950: 40 45 31; /* #282D1F */

    /* --- Light / Gray Scale --- */
    --light-gray-950: 18 22 25; /* #121619 */
    --light-gray-900: 25 31 36; /* #191F24 */
    --light-gray-800: 57 64 69; /* #394045 */
    --light-gray-700: 82 88 92; /* #52585C */
    --light-gray-600: 108 115 121; /* #6C7379 */
    --light-gray-500: 148 155 162; /* #949BA2 */
    --light-gray-400: 179 187 193; /* #B3BBC1 */
    --light-gray-300: 214 222 229; /* #D6DEE5 */
    --light-gray-200: 231 235 240; /* #E7EBF0 */
    --light-gray-100: 238 241 244; /* #EEF1F4 */

    /* --- Dark / Gray Scale --- */
    --dark-gray-950: 15 17 20; /* #0F1114 */
    --dark-gray-900: 35 38 44; /* #23262C */
    --dark-gray-800: 57 64 69; /* #394045 */
    --dark-gray-700: 82 88 92; /* #52585C */
    --dark-gray-600: 108 115 121; /* #6C7379 */
    --dark-gray-500: 148 155 162; /* #949BA2 */
    --dark-gray-400: 179 187 193; /* #B3BBC1 */
    --dark-gray-300: 214 222 229; /* #D6DEE5 */
    --dark-gray-200: 231 235 240; /* #E7EBF0 */
    --dark-gray-100: 251 252 253; /* #FBFCFD */
  }
}

@layer base {
  :root {
    --btn-primary-text: var(--white);
    --btn-primary-text-hover: var(--white);
    --btn-primary-bg: var(--light-gray-900);
    --btn-primary-bg-hover: var(--light-gray-700);
    --btn-primary-border: var(--light-gray-300);
    --btn-primary-border-hover: var(--light-gray-300);
  }

  .dark {
    --btn-primary-text: var(--dark-gray-950);
    --btn-primary-text-hover: var(--dark-gray-950);
    --btn-primary-bg: var(--primary-300);
    --btn-primary-bg-hover: var(--primary-200);
    --btn-primary-border: var(--dark-gray-600);
    --btn-primary-border-hover: var(--dark-gray-600);
  }
}

@layer graph {
  :root {
    --edge: black;
    --edge-label: black;
    --node-body: white;
    --node-label: black;
    --node-border: #333;
    --node-type: #000;
    --node-type-text: #fff;
    --node-type-model: #eee;
    --node-type-model-text: black;
    --node-type-shapeManipulation: rgb(108, 79, 71);
    --node-type-normalization: rgb(51, 85, 68);
    --node-type-activationFunction: rgb(112, 41, 33);
    --node-type-poolingLayer: rgb(51, 85, 51);
    --node-type-weightedLayer: rgb(51, 85, 136);
    --node-type-mergeLayer: rgb(89, 66, 59);
    --node-type-reduceOperation: rgb(120, 60, 0);
    --node-type-unaryLayer: rgb(69, 71, 112);
    --node-type-quantizationRelated: rgb(80, 40, 0);
    --node-type-boolean: rgb(85, 85, 85);
    --node-type-constant: #eee;
    --node-type-constant-text: #000;
    --node-type-shapeInformation: rgb(51, 85, 68);
    --node-type-function: #fff;
    --node-item-type-function-text: #000;
    --node-type-other: rgb(128, 128, 128);

    --background: #ffffff;
    --surface: #fafafa;
    --surface-hover: #e5e5e5;
    --surface-variant: #f2f2f2;
    --border: #d6dee5;

    --content: #242424;
    --muted: #666;
    --divider: rgba(27, 31, 35, 0.05);
    --icon: #aaa;

    --file-name-border: #6c7379;

    --shadow: rgba(58, 61, 70, 0.1);
    --shadow-light: rgba(58, 61, 70, 0.08);
  }
  .dark {
    --edge: #888;
    --edge-label: #b2b2b2;
    --node-body: #2d2d2d;
    --node-label: #b2b2b2;
    --node-border: #1d1d1d;
    --node-type: #303030;
    --node-type-text: #dfdfdf;
    --node-type-model: #404040;
    --node-type-model-text: #dfdfdf;
    --node-type-shapeManipulation: rgb(95, 74, 69);
    --node-type-normalization: rgb(55, 79, 67);
    --node-type-activationFunction: rgb(72, 38, 34);
    --node-type-poolingLayer: rgb(55, 79, 55);
    --node-type-weightedLayer: rgb(55, 79, 114);
    --node-type-mergeLayer: rgb(81, 65, 60);
    --node-type-reduceOperation: rgb(89, 54, 19);
    --node-type-unaryLayer: rgb(67, 69, 98);
    --node-type-quantizationRelated: rgb(75, 47, 19);
    --node-type-boolean: rgb(79, 79, 79);
    --node-type-constant: #303030;
    --node-type-constant-text: #dfdfdf;
    --node-type-shapeInformation: rgb(55, 79, 67);
    --node-type-function: #404040;
    --node-item-type-function-text: #dfdfdfdf;
    --node-type-other: rgb(64, 64, 64);

    --background: #404040;
    --surface: #2d2d2d;
    --surface-hover: #383838;
    --surface-variant: #383838;
    --border: #6c7379;

    --content: #dfdfdf;
    --muted: #aaaaaa;
    --divider: rgba(27, 31, 35, 0.2);
    --icon: #888;

    --file-name-border: #6c7379;

    --shadow: rgba(255, 255, 255, 0.1);
    --shadow-light: rgba(255, 255, 255, 0.08);
  }

  #graph-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    cursor: grab;
    user-select: none;
    background-color: var(--background);
  }

  .graph-background > svg {
    display: block;
    margin: auto !important;
    text-rendering: geometricPrecision;
  }

  .graph-background > rect {
    pointer-events: all;
  }

  .node {
    cursor: pointer;
  }

  .graph-node {
    stroke: var(--node-border);
    stroke-width: 1px;
  }

  /* Ensure the container doesn't fill, only specific child paths should fill */
  .graph-node > .node-border {
    fill: none;
  }

  .graph-input {
    stroke: var(--node-border);
    stroke-width: 1px;
  }

  .graph-input > .node-item text {
    fill: var(--node-type-model-text);
    stroke: none;
  }

  .graph-input > .node-border {
    fill: none;
  }

  .graph-output {
    stroke: var(--node-border);
    stroke-width: 1px;
  }

  .graph-output > .node-border {
    fill: none;
  }

  .graph-output > .node-item text {
    fill: var(--node-type-model-text);
    stroke: none;
  }

  .graph-node.select {
    stroke: #ff006e;
  }

  .graph-node.highlight,
  .graph-input.highlight,
  .graph-output.highlight,
  .graph-node.hover,
  .graph-input.hover,
  .graph-output.hover {
    stroke: #ec6da3;
    opacity: 1;
  }

  .graph-node.highlight > .node-border,
  .graph-input.highlight > .node-border,
  .graph-output.highlight > .node-border,
  .graph-node.hover > .node-border,
  .graph-input.hover > .node-border,
  .graph-output.hover > .node-border {
    stroke: #ec6da3;
    stroke-width: 2px;
  }

  .graph-node.highlight .node-item path,
  .graph-input.highlight .node-item path,
  .graph-output.highlight .node-item path,
    .graph-node.hover .node-item path,
  .graph-input.hover .node-item path,
  .graph-output.hover .node-item path {
    fill: #ec6da3;
  }

  .graph-node.select > .node-border,
  .graph-input.select > .node-border,
  .graph-output.select > .node-border {
    stroke: #ff006e;
    stroke-width: 2px;
  }

  .node-item text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI",
      "Ubuntu", "Droid Sans", sans-serif, "PingFang SC";
    font-size: 11px;
    font-weight: normal;
    text-rendering: geometricPrecision;
    user-select: none;
    fill: var(--node-type-text);
    letter-spacing: 0;
  }

  .node-item text > tspan {
    transition: none;
  }

  .node-item-type {
    fill: var(--node-type);
    stroke: none;
    font-size: 1em;
  }

  .node-item-type-model {
    fill: var(--node-type-model);
  }
  .node-item-type-shapeManipulation {
    fill: var(--node-type-shapeManipulation);
  }

  .node-item-type-normalization {
    fill: var(--node-type-normalization);
  }

  .node-item-type-activationFunction {
    fill: var(--node-type-activationFunction);
  }

  .node-item-type-poolingLayer {
    fill: var(--node-type-poolingLayer);
  }

  .node-item-type-weightedLayer {
    fill: var(--node-type-weightedLayer);
  }

  .node-item-type-mergeLayer {
    fill: var(--node-type-mergeLayer);
  }

  .node-item-type-reduceOperation {
    fill: var(--node-type-reduceOperation);
  }

  .node-item-type-unaryLayer {
    fill: var(--node-type-unaryLayer);
  }

  .node-item-type-quantizationRelated {
    fill: var(--node-type-quantizationRelated);
  }

  .node-item-type-boolean {
    fill: var(--node-type-boolean);
  }

  .node-item-type-constant {
    fill: var(--node-type-constant);
  }

  .node-item:has(.node-item-type-constant) text {
    fill: var(--node-type-constant-text);
  }

  .node-item-type-shapeInformation {
    fill: var(--node-type-shapeInformation);
  }

  .node-item-type-function {
    fill: var(--node-type-function);
  }

  .node-item:has(.node-item-type-function) text {
    fill: var(--node-item-type-function-text);
  }

  .node-item-type-other {
    fill: var(--node-type-other);
  }

  .graph-item-input {
    fill: #ffffff;
    font-size: 1em;
    font-weight: 600;
  }

  .graph-item-output {
    fill: #ffffff;
    font-size: 1em;
    font-weight: 600;
  }

  #edge-paths {
    pointer-events: none;
  }

  .edge-path {
    stroke: var(--edge);
    stroke-width: 1px;
    fill: none;
    marker-end: url(#arrowhead);
  }

  .edge-path.highlight {
    stroke: #ec6da3;
    marker-end: url(#arrowhead-hover);
  }
  .edge-path.hover {
    stroke: #ec6da3;
    marker-end: url(#arrowhead-hover);
  }

  .edge-path.select {
    stroke: #ff006e;

    marker-end: url(#arrowhead-select);
  }

  .edge-path.mute {
    opacity: 0.5;
  }


  .edge-label.highlight {
    fill: #ec6da3;
    opacity: 1;
  }
  .edge-label.hover {
    fill: #ec6da3;
    opacity: 1;
  }

  .edge-label.select {
    fill: #ff006e;
  }

  .edge-label.mute {
    opacity: 0.5;
  }

  /*
   * Hit-test Area Optimization:
   * Increases the clickable area of edges without affecting visual thickness.
   * The stroke is wide but invisible (opacity near 0).
   */
  .edge-paths-hit-test > path {
    fill: none;
    stroke: #000;
    stroke-width: 0.5em;
    stroke-opacity: 0.001;
    cursor: pointer;
  }

  .edge-label {
    fill: var(--edge-label);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI",
      "Ubuntu", "Droid Sans", sans-serif, "PingFang SC";
    font-size: 10px;
    text-rendering: geometricPrecision;
    letter-spacing: 0;
  }

  .edge-label > tspan {
    transition: none;
  }

  #arrowhead path {
    fill: var(--edge);
  }

  #arrowhead-select path {
    fill: #ff006e;
  }

  #arrowhead-hover path {
    fill: #ec6da3;
  }

  .graph-input.select,
  .graph-output.select {
    stroke: #ff006e;
  }

  .node-argument-list,
  .node-argument-list > path {
    fill: var(--node-body);
  }

  .node-argument-list text {
    stroke: none;
    fill: var(--node-label);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI",
      "Ubuntu", "Droid Sans", sans-serif, "PingFang SC";
    font-size: 9px;
    text-rendering: geometricPrecision;
    user-select: none;
    letter-spacing: 0;
  }

  .node-argument-list text > tspan {
    transition: none;
  }

  .node-argument > rect {
    fill: transparent;
    stroke: transparent;
  }

  .node-argument.select > rect {
    fill: transparent;
    stroke: #ff006e;
  }

  .node-argument.highlight > rect {
    fill: transparent;
    stroke: #ec6da3;
  }
  
  .node-argument.hover > rect {
    fill: transparent;
    stroke: #ec6da3;
  }
}

button:focus {
  outline: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

button {
  padding: 0;
  margin: 0;
  border:none;
} 

#welcome-screen {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;
}

#footer-icon {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
}

#welcome-screen-inner{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: var(--content);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI",
    "Ubuntu", "Droid Sans", sans-serif;
}

#model-upload-button{
  width: 190px;
  height: 50px;
  margin: 32px ;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #C8C8C8;
  box-shadow: 5px 5px 0 0 #000000;
  outline: 0;
  border: 3px solid #434343;
  font-weight: 700;
  letter-spacing: 0.02em;
  
  font-size: 1.25rem;
  white-space: nowrap;

  box-sizing: border-box;
  cursor: pointer;
}

#welcome-screen-text {
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 16px;
  line-height: 26px;
  white-space: nowrap;
  color: var(--content);
}

#welcome-screen-text strong {
  color: var(--content);
  font-weight: 500;
  letter-spacing: 0.02em;

}

/*
 * Off-canvas Navigation Drawer:
 * Sits outside the viewport (right: -100%) and slides in when active.
 */
.sidebar {
  position: fixed;
  top: 0;
  right: -100%;

  width: min(60%, 42em);
  height: 100%;

  display: flex;
  flex-direction: column;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI",
    "Ubuntu", "Droid Sans", sans-serif;
  font-size: 12px;

  color: var(--content);
  background-color: var(--surface);

  transition: 0.1s;
  opacity: 0;
}

.sidebar-open {
  right: 0 !important;

  opacity: 1 !important;
}

.sidebar-title {
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  height: 20px;
  margin: 0;
  padding: 20px;
  user-select: none;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 0;
}

.sidebar-object {
  flex-grow: 1;
  padding: 0px 20px 20px 20px;
  overflow-y: auto;
}

.sidebar-section-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.sidebar-section {
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1.25;
  margin-top: 16px;
  margin-bottom: 16px;
  display: block;
  user-select: none;
  cursor: default;
}

.sidebar-item {
  margin-bottom: 0px;
  display: block;
}

.sidebar-item-name {
  float: left;
  font-size: 11px;
  min-width: 95px;
  max-width: 95px;
  padding-right: 5px;
  padding-top: 7px;
  display: block;
}

.sidebar-item-name input {
  color: #777;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background-color: inherit;
  width: 100%;
  text-align: right;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  text-overflow: ellipsis;
}

.sidebar-item-value-list {
  margin: 0;
  margin-left: 105px;
  overflow: hidden;
  display: block;
  padding: 0;
}

.sidebar-item-value {
  font-size: 11px;
  color: var(--content);
  background-color: var(--surface-variant);
  border-radius: 2px;
  border: 1px solid var(--surface-variant);
  margin-top: 3px;
  margin-bottom: 3px;
  overflow: auto;
}

.sub-sidebar-item .sidebar-item-value {
  margin-bottom: 0px;
}

.sidebar-item-value-line {
  min-height: 12px;
  padding: 4px 6px 4px 6px;
  overflow-x: auto;
  white-space: pre;
}

.sidebar-item-value-line-border {
  padding: 4px 6px 4px 6px;
  border-top: 1px solid var(--divider);
}

.sidebar-item-value-expander {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
    monospace;
  float: right;
  color: var(--icon);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  padding: 4px 6px 4px 4px;
}

.sidebar-item-value-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
    monospace;
  width: 20px;
  height: 20px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  color: var(--icon);
}

.sidebar-item-value-button svg {
  stroke: var(--muted);
  fill: var(--muted);
  float: left;
  width: 9px;
  height: 9px;
}

.sidebar-item-value-button-tool {
  float: right;
  padding-left: 3px;
}

.sidebar-array-value {
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

.sidebar-find-search {
  display: flex;
  align-items: center;
  background: var(--surface-variant);
  border-radius: 16px;
  margin: 0px 20px 8px 20px;
  padding: 0px 8px 0px 8px;
}

.sidebar-find-query {
  width: 100vw;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: currentColor;
  padding: 8px 8px 8px 8px;
  border: 0;
  outline: 0;
}

.sidebar-find-button-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-find-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.sidebar-find-toggle > svg {
  width: 16px;
  fill: var(--muted);
  stroke: var(--muted);
  opacity: 1;
}

.sidebar-find-toggle.disable > svg {
  opacity: 0.4;
}

.sidebar-find-content li {
  position: absolute;
  width: 100%;
  color: var(--muted);
  font-size: 13px;
  height: 22px;
  line-height: 22px;
  padding: 0 12px 0 12px;
  outline: 0;
  white-space: nowrap;
  border-radius: 3px;
  user-select: none;
  box-sizing: border-box;
}

.sidebar-find-content li > svg {
  fill: var(--muted);
  stroke: var(--muted);
  float: left;
  width: 16px;
  height: 16px;
  padding: 3px;
}

.sidebar-find-content li *:first-child {
  margin-right: 2px;
}

.sidebar-find-content li:hover {
  color: var(--content);
  background-color: var(--surface-hover);
}

ol {
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  unicode-bidi: isolate;
}

 .sidebar-find-result-container{
  flex-grow: 1;
  padding: 0px 20px 20px 20px;
  margin: 0;
  overflow-y: auto;
  display: flex;
  box-sizing: border-box;
  
}

.sidebar-find-content {
  flex-grow: 1;
  position: relative;
  list-style-type: none;
  padding: 0;
  margin:0
}

.loader-background {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  display: grid;
  place-content: center;

  background-color: var(--background);

  z-index: 2;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* * Circular Spinner:
 * Created using a rounded border with a distinct 'border-top-color'.
 */
.spinner {
  position: relative;
  width: 60px;
  height: 60px;
  
  border: 6px solid #575757; 
  border-top-color: #FFC633; 
  
  border-radius: 50%;
  
  animation: spin 0.8s linear infinite;
  
  box-sizing: border-box; 
}

.spinner::before,
.spinner::after {
  content: "";
  position: absolute;
  
  background-color: #FFC633; 
  
  width: 6px;
  height: 6px;
  border-radius: 3px;
}

.spinner::before {
  top: 2px;
  right: 2px;
}

.spinner::after {
  top: 2px;
  left: 2px;
}

.hide {
  display: none;

}