@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border:214.3 31.8% 91.4%;
    --input:214.3 31.8% 91.4%;
    --ring:221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background:222.2 84% 4.9%;
    --foreground:210 40% 98%;

    --card:222.2 84% 4.9%;
    --card-foreground:210 40% 98%;

    --popover:222.2 84% 4.9%;
    --popover-foreground:210 40% 98%;

    --primary:217.2 91.2% 59.8%;
    --primary-foreground:222.2 47.4% 11.2%;

    --secondary:217.2 32.6% 17.5%;
    --secondary-foreground:210 40% 98%;

    --muted:217.2 32.6% 17.5%;
    --muted-foreground:215 20.2% 65.1%;

    --accent:217.2 32.6% 17.5%;
    --accent-foreground:210 40% 98%;

    --destructive:0 62.8% 30.6%;
    --destructive-foreground:210 40% 98%;

    --border:217.2 32.6% 17.5%;
    --input:217.2 32.6% 17.5%;
    --ring:224.3 76.3% 48%;
  }
}
.\[\&_svg\]\:size-4 svg {
  width: 1.4rem !important;
  height: 1.4rem !important;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
  --sidebar-width-icon: 4rem !important;
}


@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}


body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.no-padding {
  padding: 0px !important;
}

.padding-content {
  padding: 4px 0;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}
rect {
  outline: none !important;
  //pointer-events: none !important;
}
rect:focus {
   outline: none !important;
}
svg:focus {
  outline: none !important;
}

/* 禁用选中时的蓝色边框 */
rect:focus {
  outline: none !important; /* 移除默认焦点框 */
}
rect {
  opacity: 1 !important; /* 强制保持不透明 */
}
rect.dragging {
  opacity: 1 !important;
}

.djs-visual, .djs-outline {
  pointer-events: none;
}

.djs-context-pad-parent {
  .djs-context-pad {
    .group {
      .entry {
        padding: 2px;
        border-radius: 8px;
        color: #ffffff;
        background: rgba(0, 76, 216, 0.9);
        font-size: 1.1rem;
      }
    }
  }
}
.djs-element.selected .djs-outline {
  --element-selected-outline-stroke-color: rgba(0, 76, 216, 0.9);
}
.djs-frame .djs-visual rect{
  stroke: rgb(170 171 176) !important;
}
.bjs-powered-by {
  display: none!important;
}
//.djs-popup {
//  border-radius: 8px;
//}
//.djs-connection g path,.djs-shape g circle,.djs-shape g polygon,.djs-shape g rect {
//  stroke-width: 1px;
//  stroke: #8c8c8c !important; /* 边框颜色 */
//}
//.djs-shape g path {
//  stroke: #8c8c8c !important; /* 边框颜色 */
//  //fill: rgb(0, 76, 216) !important;
//}
//.djs-element.selected .djs-outline {
//  //stroke-dasharray: 3 5 !important;
//  //stroke: #8c8c8c !important;
//  display: none;
//}
//
//.djs-element.selected .cus-outline {
//  display: block !important;
//}
//.dark {
//  .djs-label {
//    fill: #ffffff !important;
//  }
//  .djs-shape g circle,.djs-shape g polygon,.djs-shape g rect {
//    stroke: #8c8c8c !important; /* 边框颜色 */
//    fill: #1e293b !important;
//  }
//  .djs-shape g text {
//    fill: #ffffff;
//  }
//  .djs-popup {
//    background: #1e293b !important;
//    .djs-popup-search {
//      svg {
//        stroke: #fff;
//      }
//      input {
//        background: #1e293b !important;
//      }
//    }
//    .djs-popup-header {
//      .entry{
//          &.selected {
//            background: rgb(0, 76, 216)!important;
//          }
//          &.active {
//            background: rgb(0, 76, 216)!important;
//          }
//          &.selected {
//            background: rgb(0, 76, 216) !important;
//          }
//        }
//    }
//    .djs-popup-group {
//      li {
//        &.selected {
//          background: rgb(0, 76, 216)!important;
//        }
//        &.active {
//          background: rgb(0, 76, 216)!important;
//        }
//        &:hover {
//          background: rgb(0, 76, 216) !important;
//        }
//      }
//    }
//  }
//}

.djs-connection g path {
  stroke-width: 1.2px!important;;
  stroke: #8c8c8c !important; /* 边框颜色 */
}
.dark {
  .djs-connection g path {
    stroke-width: 0.5px!important;;
    stroke: #8c8c8c !important; /* 边框颜色 */
  }
}
marker path {
  stroke:  #8c8c8c !important; /* 边框颜色 */
  stroke-width: 0.5px!important;;
  fill:  #8c8c8c !important;   /* 填充颜色 */
}
.bjs-breadcrumbs {
  bottom: 50px !important;
  top: unset !important;
}
.djs-children {
  .djs-shape g path,.djs-shape g rect,{
    stroke:  #8c8c8c !important; /* 边框颜色 */
    stroke-width: 0.5px!important;;
  }
  .djs-shape g .custom-task-middle {
    stroke-width: 0!important;
    opacity: 1!important;
  }
}
.bts-toggle-mode {
  display: none !important;
}
.djs-outline{
  stroke: rgb(225, 225, 225) !important;
  stroke-width: 1px !important;
  stroke-dasharray: 3.5 !important;
  fill: none !important;
  rx: 14 !important;
  ry: 14 !important;
}
.custom-task-middle {
  opacity: 1!important;
}

.djs-dragging .djs-visual rect {
  outline: 0!important;
  opacity: 1 !important; /* 禁止透明效果 */
}