#atosy-bpmn-view {
  display: none;
  width: 100%;
}

#atosy-bpmn-view.is-open {
  display: block;
}

#atosy-bpmn-view,
#atosy-bpmn-view * {
  box-sizing: border-box;
}

.bpmn-app-shell {
  width: min(1660px, calc(100% - 28px));
  min-height: calc(100vh - 125px);
  margin: 18px auto 34px;

  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 16px;

  color: #f7faff;
}

.bpmn-side-panel {
  position: sticky;
  top: 18px;
  align-self: start;

  min-height: calc(100vh - 150px);
  padding: 16px;

  border-radius: 30px;

  background:
    linear-gradient(
      155deg,
      rgba(13, 52, 119, .88),
      rgba(5, 29, 78, .76)
    );

  border:
    1px solid
    rgba(144, 194, 255, .23);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 30px 80px rgba(0,22,75,.28);

  backdrop-filter:
    blur(34px)
    saturate(170%);

  -webkit-backdrop-filter:
    blur(34px)
    saturate(170%);
}

.bpmn-brand-block {
  display: flex;
  align-items: center;
  gap: 12px;

  padding:
    8px 8px 18px;

  border-bottom:
    1px solid
    rgba(255,255,255,.10);
}

.bpmn-brand-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 16px;

  font-size: 24px;
  font-weight: 800;

  background:
    linear-gradient(
      145deg,
      #a85dff,
      #6545ff
    );

  box-shadow:
    0 12px 30px
    rgba(111,66,255,.42),
    inset 0 1px 0
    rgba(255,255,255,.35);
}

.bpmn-brand-block strong {
  display: block;
  font-size: 17px;
}

.bpmn-brand-block span {
  display: block;
  margin-top: 2px;

  font-size: 10px;
  letter-spacing: .02em;

  color:
    rgba(224,235,255,.64);
}

.bpmn-side-nav {
  display: grid;
  gap: 5px;

  margin-top: 16px;
}

.bpmn-nav-item {
  width: 100%;
  height: 43px;

  display: flex;
  align-items: center;
  gap: 10px;

  border: 0;
  border-radius: 14px;

  padding: 0 12px;

  background:
    transparent;

  color:
    rgba(238,245,255,.76);

  font: inherit;
  font-size: 12.5px;
  font-weight: 650;

  text-align: left;

  cursor: pointer;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.bpmn-nav-item:hover {
  color: #fff;

  background:
    rgba(255,255,255,.085);

  transform:
    translateX(2px);
}

.bpmn-nav-item.is-active {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      rgba(102,95,255,.80),
      rgba(83,133,255,.62)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.25),
    0 10px 22px
    rgba(43,76,200,.30);
}

.bpmn-nav-icon {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  flex: 0 0 28px;

  border-radius: 9px;

  background:
    rgba(255,255,255,.075);

  color: #fff;

  font-size: 13px;
  font-weight: 800;
}

.bpmn-nav-item.is-active
.bpmn-nav-icon {
  background:
    rgba(255,255,255,.17);
}

.bpmn-side-footer {
  margin-top: 20px;

  padding: 14px;

  border-radius: 18px;

  background:
    rgba(255,255,255,.065);

  border:
    1px solid
    rgba(255,255,255,.08);
}

.bpmn-permission-chip {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 9px;

  color:
    rgba(222,235,255,.63);

  font-size: 10px;
}

.bpmn-permission-dot {
  width: 7px;
  height: 7px;

  border-radius: 999px;

  background: #57e4af;

  box-shadow:
    0 0 14px
    rgba(87,228,175,.72);
}

.bpmn-side-footer strong {
  display: block;
  font-size: 11.5px;
}

.bpmn-side-footer > span {
  display: block;

  margin-top: 3px;

  color:
    rgba(222,235,255,.55);

  font-size: 10px;
}

.bpmn-main {
  min-width: 0;
}

.bpmn-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  min-height: 126px;

  padding: 24px 26px;

  border-radius: 30px;

  background:
    linear-gradient(
      135deg,
      rgba(9,47,111,.86),
      rgba(14,76,166,.72)
    );

  border:
    1px solid
    rgba(139,197,255,.23);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 24px 64px rgba(0,25,82,.24);

  backdrop-filter:
    blur(30px)
    saturate(170%);

  -webkit-backdrop-filter:
    blur(30px)
    saturate(170%);
}

.bpmn-eyebrow,
.bpmn-section-kicker {
  color: #7fc5ff;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.bpmn-topbar h1 {
  margin: 6px 0 5px;

  font-size:
    clamp(25px, 2vw, 34px);

  line-height: 1.05;

  letter-spacing: -.035em;
}

.bpmn-topbar p {
  margin: 0;

  max-width: 610px;

  color:
    rgba(224,235,255,.70);

  font-size: 12.5px;
}

.bpmn-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bpmn-scope-picker {
  min-width: 230px;

  display: flex;
  flex-direction: column;
  gap: 3px;

  padding: 8px 14px;

  border-radius: 17px;

  background:
    rgba(255,255,255,.08);

  border:
    1px solid
    rgba(255,255,255,.12);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.09);
}

.bpmn-scope-picker > span {
  color:
    rgba(222,235,255,.60);

  font-size: 9px;
  font-weight: 700;
}

.bpmn-scope-picker select {
  width: 100%;

  border: 0;
  outline: 0;

  padding: 0;

  background: transparent;

  color: #fff;

  font: inherit;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}

.bpmn-primary-button,
.bpmn-soft-button {
  border: 0;
  outline: 0;

  font: inherit;
  font-weight: 750;

  cursor: pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.bpmn-primary-button {
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 0 17px;

  border-radius: 15px;

  color: white;

  background:
    linear-gradient(
      135deg,
      #8d63ff,
      #536cff
    );

  border:
    1px solid
    rgba(255,255,255,.19);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.32),
    0 13px 26px
    rgba(79,71,242,.34);
}

.bpmn-primary-button:hover,
.bpmn-soft-button:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.06);
}

.bpmn-section-host {
  margin-top: 16px;
}

.bpmn-kpi-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.bpmn-kpi-card,
.bpmn-liquid-card,
.bpmn-placeholder-glass {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(150,198,255,.18);

  background:
    linear-gradient(
      145deg,
      rgba(14,56,126,.75),
      rgba(8,37,91,.67)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.12),
    0 22px 54px
    rgba(0,25,82,.19);

  backdrop-filter:
    blur(28px)
    saturate(155%);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(155%);
}

.bpmn-kpi-card {
  min-height: 148px;

  padding: 17px;

  border-radius: 23px;

  transition:
    transform .20s ease,
    border-color .20s ease,
    box-shadow .20s ease;
}

.bpmn-kpi-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(163,211,255,.31);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.16),
    0 26px 60px
    rgba(0,25,82,.25);
}

.bpmn-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 12px;
}

.bpmn-kpi-symbol {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  color: #fff;
  font-weight: 900;
}

.bpmn-kpi-symbol.purple {
  background:
    linear-gradient(
      135deg,
      #a45fff,
      #6c4fff
    );
}

.bpmn-kpi-symbol.blue {
  background:
    linear-gradient(
      135deg,
      #36b2ff,
      #3473ff
    );
}

.bpmn-kpi-symbol.green {
  background:
    linear-gradient(
      135deg,
      #3bd89d,
      #24a977
    );
}

.bpmn-kpi-symbol.orange {
  background:
    linear-gradient(
      135deg,
      #ffae55,
      #ff754b
    );
}

.bpmn-kpi-trend {
  padding: 5px 8px;

  border-radius: 999px;

  background:
    rgba(102,231,180,.11);

  color: #72e5bc;

  font-size: 9px;
  font-weight: 800;
}

.bpmn-kpi-trend.danger {
  color: #ffb66e;

  background:
    rgba(255,153,75,.11);
}

.bpmn-kpi-label {
  display: block;

  color:
    rgba(224,235,255,.67);

  font-size: 10.5px;
}

.bpmn-kpi-card strong {
  display: block;

  margin-top: 4px;

  font-size: 28px;
  letter-spacing: -.035em;
}

.bpmn-kpi-card small {
  display: block;

  margin-top: 4px;

  color:
    rgba(222,235,255,.46);

  font-size: 9.5px;
}

.bpmn-dashboard-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;

  margin-top: 14px;
}

.bpmn-liquid-card {
  min-height: 286px;

  padding: 20px;

  border-radius: 26px;
}

.bpmn-card-header {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 18px;
}

.bpmn-card-header h2 {
  margin: 5px 0 4px;

  font-size: 18px;
  letter-spacing: -.02em;
}

.bpmn-card-header p {
  margin: 0;

  color:
    rgba(221,234,255,.58);

  font-size: 10.5px;
}

.bpmn-soft-button {
  min-height: 34px;

  padding: 0 12px;

  border-radius: 12px;

  color:
    rgba(237,245,255,.88);

  background:
    rgba(255,255,255,.075);

  border:
    1px solid
    rgba(255,255,255,.095);
}

.bpmn-work-list,
.bpmn-process-list,
.bpmn-access-stack {
  display: grid;
  gap: 7px;
}

.bpmn-work-row,
.bpmn-process-row {
  width: 100%;
  min-height: 55px;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 9px 11px;

  border: 1px solid
    rgba(255,255,255,.07);

  border-radius: 16px;

  background:
    rgba(255,255,255,.052);

  color: #fff;

  font: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    background .18s ease,
    transform .18s ease,
    border-color .18s ease;
}

.bpmn-work-row:hover,
.bpmn-process-row:hover {
  background:
    rgba(255,255,255,.09);

  border-color:
    rgba(255,255,255,.13);

  transform:
    translateX(2px);
}

.bpmn-work-state {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;
}

.bpmn-work-state.blue {
  background: #48a9ff;
}

.bpmn-work-state.orange {
  background: #ff9d58;
}

.bpmn-work-state.purple {
  background: #a276ff;
}

.bpmn-work-copy,
.bpmn-process-copy {
  flex: 1;
  min-width: 0;
}

.bpmn-work-copy strong,
.bpmn-process-copy strong {
  display: block;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 11.5px;
}

.bpmn-work-copy small,
.bpmn-process-copy small {
  display: block;

  margin-top: 3px;

  color:
    rgba(222,235,255,.48);

  font-size: 9px;
}

.bpmn-work-due {
  color:
    rgba(232,240,255,.69);

  font-size: 9.5px;
}

.bpmn-row-arrow {
  color:
    rgba(255,255,255,.40);

  font-size: 19px;
}

.bpmn-process-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  color: #d9e8ff;

  background:
    rgba(76,132,255,.17);
}

.bpmn-process-count {
  min-width: 42px;

  text-align: right;

  font-size: 15px;
  font-weight: 800;
}

.bpmn-designer-card {
  min-height: 310px;

  background:
    linear-gradient(
      145deg,
      rgba(54,47,142,.68),
      rgba(9,47,104,.71)
    );
}

.bpmn-card-glow {
  position: absolute;

  width: 260px;
  height: 260px;

  right: -95px;
  top: -130px;

  border-radius: 50%;

  background:
    rgba(156,87,255,.24);

  filter: blur(45px);

  pointer-events: none;
}

.bpmn-live-pill {
  padding: 6px 9px;

  border-radius: 999px;

  background:
    rgba(175,111,255,.17);

  border:
    1px solid
    rgba(191,145,255,.25);

  color: #d7c0ff;

  font-size: 9px;
  font-weight: 800;
}

.bpmn-mini-canvas {
  min-height: 112px;

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

  padding: 18px;

  border-radius: 20px;

  background:
    rgba(255,255,255,.045);

  border:
    1px solid
    rgba(255,255,255,.07);

  background-image:
    radial-gradient(
      rgba(180,210,255,.17) 1px,
      transparent 1px
    );

  background-size:
    16px 16px;
}

.bpmn-mini-start,
.bpmn-mini-end {
  width: 24px;
  height: 24px;

  flex: 0 0 24px;

  border-radius: 50%;
}

.bpmn-mini-start {
  border:
    2px solid
    #72e6b9;
}

.bpmn-mini-end {
  border:
    4px solid
    #ff7f91;
}

.bpmn-mini-task {
  min-width: 92px;

  padding: 10px 12px;

  border:
    1px solid
    rgba(255,255,255,.38);

  border-radius: 11px;

  background:
    rgba(255,255,255,.09);

  text-align: center;

  font-size: 9px;
  font-weight: 700;
}

.bpmn-mini-gateway {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  flex: 0 0 34px;

  border:
    2px solid
    rgba(255,255,255,.60);

  transform:
    rotate(45deg);
}

.bpmn-mini-gateway span {
  transform:
    rotate(-45deg);

  font-size: 16px;
}

.bpmn-mini-line {
  width: 24px;
  height: 1px;

  flex: 0 0 24px;

  background:
    rgba(207,226,255,.48);
}

.bpmn-designer-actions {
  display: flex;
  gap: 8px;

  margin-top: 14px;
}

.bpmn-governance-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 10px;
}

.bpmn-stat-tile {
  min-height: 134px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;

  padding: 16px;

  border-radius: 20px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    linear-gradient(
      145deg,
      rgba(99,77,255,.15),
      rgba(255,255,255,.045)
    );

  color: #fff;

  font: inherit;
  text-align: left;

  cursor: pointer;
}

.bpmn-stat-tile.warning {
  background:
    linear-gradient(
      145deg,
      rgba(255,138,66,.16),
      rgba(255,255,255,.045)
    );
}

.bpmn-stat-tile span {
  color:
    rgba(224,235,255,.63);

  font-size: 10px;
}

.bpmn-stat-tile strong {
  margin-top: 6px;

  font-size: 30px;
}

.bpmn-stat-tile small {
  margin-top: 4px;

  color:
    rgba(224,235,255,.46);

  font-size: 9px;
}

.bpmn-role-map {
  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  gap: 12px;

  align-items: center;

  margin-top: 30px;
}

.bpmn-role-box {
  padding: 15px;

  border-radius: 18px;

  background:
    rgba(151,98,255,.11);

  border:
    1px solid
    rgba(176,136,255,.18);
}

.bpmn-role-box.subject {
  background:
    rgba(58,207,158,.10);

  border-color:
    rgba(80,220,173,.18);
}

.bpmn-role-box span {
  display: block;

  color:
    rgba(224,235,255,.52);

  font-size: 9px;
}

.bpmn-role-box strong {
  display: block;

  margin-top: 4px;

  font-size: 13px;
}

.bpmn-role-arrow {
  color:
    rgba(215,230,255,.52);

  font-size: 23px;
}

.bpmn-role-context {
  margin-top: 10px;

  padding:
    8px 12px;

  border-radius: 12px;

  background:
    rgba(255,255,255,.045);

  color:
    rgba(224,235,255,.55);

  font-size: 9.5px;
}

.bpmn-access-row {
  display: grid;

  grid-template-columns:
    1.2fr 1fr auto;

  gap: 10px;

  align-items: center;

  padding:
    12px 13px;

  border-radius: 15px;

  background:
    rgba(255,255,255,.048);

  border:
    1px solid
    rgba(255,255,255,.065);
}

.bpmn-access-row span {
  font-size: 10px;
}

.bpmn-access-row strong {
  color:
    rgba(224,235,255,.64);

  font-size: 9.5px;
}

.bpmn-access-row em {
  padding: 5px 8px;

  border-radius: 999px;

  background:
    rgba(92,147,255,.11);

  color: #9dc6ff;

  font-size: 8.5px;
  font-style: normal;
  font-weight: 800;
}

.bpmn-placeholder {
  min-height: 580px;

  display: grid;
  place-items: center;
}

.bpmn-placeholder-glass {
  width:
    min(680px, 90%);

  padding: 48px;

  border-radius: 30px;

  text-align: center;
}

.bpmn-placeholder-icon {
  width: 64px;
  height: 64px;

  display: grid;
  place-items: center;

  margin:
    0 auto 18px;

  border-radius: 20px;

  font-size: 26px;
  font-weight: 900;

  background:
    linear-gradient(
      145deg,
      #9b63ff,
      #536aff
    );

  box-shadow:
    0 18px 40px
    rgba(102,75,255,.36);
}

.bpmn-placeholder h2 {
  margin:
    7px 0;

  font-size: 27px;
}

.bpmn-placeholder p {
  margin:
    0 auto;

  max-width: 470px;

  color:
    rgba(224,235,255,.60);

  font-size: 12px;
}

.bpmn-placeholder-note {
  margin-top: 24px;

  padding: 13px;

  border-radius: 15px;

  background:
    rgba(255,255,255,.055);

  color:
    rgba(224,235,255,.54);

  font-size: 10px;
}

@media (
  max-width: 1180px
) {

  .bpmn-app-shell {
    grid-template-columns:
      210px minmax(0, 1fr);
  }

  .bpmn-kpi-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .bpmn-topbar {
    align-items: flex-start;
  }

  .bpmn-topbar-actions {
    flex-direction: column;
    align-items: stretch;
  }

}

@media (
  max-width: 860px
) {

  .bpmn-app-shell {
    display: block;
  }

  .bpmn-side-panel {
    position: relative;
    top: auto;

    min-height: 0;

    margin-bottom: 12px;
  }

  .bpmn-side-nav {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .bpmn-side-footer {
    display: none;
  }

  .bpmn-topbar {
    flex-direction: column;
  }

  .bpmn-topbar-actions {
    width: 100%;
  }

  .bpmn-scope-picker {
    width: 100%;
  }

  .bpmn-kpi-grid,
  .bpmn-dashboard-grid {
    grid-template-columns: 1fr;
  }

}

@media (
  max-width: 560px
) {

  .bpmn-app-shell {
    width:
      calc(100% - 16px);

    margin-top: 8px;
  }

  .bpmn-side-nav {
    grid-template-columns: 1fr;
  }

  .bpmn-topbar {
    padding: 19px;
  }

  .bpmn-kpi-grid {
    grid-template-columns: 1fr;
  }

  .bpmn-role-map {
    grid-template-columns: 1fr;
  }

  .bpmn-role-arrow {
    transform:
      rotate(90deg);

    text-align: center;
  }

}

/* =========================================================
   BPMN DESIGNER SHELL V1
   ========================================================= */

.bpmn-designer-workspace {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 326px;
  gap: 12px;
  min-height: 670px;
}

.bpmn-designer-tree,
.bpmn-designer-center,
.bpmn-properties-panel {
  min-width: 0;
  border: 1px solid rgba(150,198,255,.16);
  background:
    linear-gradient(
      145deg,
      rgba(12,52,119,.78),
      rgba(7,35,86,.70)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 22px 56px rgba(0,25,82,.19);
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
}

.bpmn-designer-tree {
  border-radius: 25px;
  padding: 16px 12px;
}

.bpmn-properties-panel {
  border-radius: 25px;
  padding: 16px;
}

.bpmn-designer-center {
  overflow: hidden;
  border-radius: 25px;
}

.bpmn-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bpmn-panel-header h2 {
  margin: 5px 0 0;
  font-size: 16px;
}

.bpmn-icon-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(255,255,255,.065);
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.bpmn-tree-toolbar {
  display: flex;
  gap: 5px;
  margin: 15px 0 13px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255,255,255,.045);
}

.bpmn-tree-filter {
  flex: 1;
  height: 28px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(225,236,255,.52);
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.bpmn-tree-filter.is-active {
  color: #fff;
  background: rgba(103,117,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.bpmn-process-tree {
  display: grid;
  gap: 5px;
}

.bpmn-tree-group {
  display: grid;
  gap: 3px;
}

.bpmn-tree-node {
  width: 100%;
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 7px 8px;
  background: transparent;
  color: rgba(235,243,255,.80);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background .17s ease,
    border-color .17s ease,
    transform .17s ease;
}

.bpmn-tree-node:hover {
  background: rgba(255,255,255,.055);
}

.bpmn-tree-node.is-selected {
  border-color: rgba(151,126,255,.24);
  background:
    linear-gradient(
      135deg,
      rgba(111,83,255,.25),
      rgba(74,111,255,.13)
    );
}

.bpmn-tree-root {
  color: #fff;
}

.bpmn-tree-chevron {
  width: 10px;
  color: rgba(225,236,255,.42);
  font-size: 9px;
}

.bpmn-tree-node-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  color: #dce9ff;
  font-size: 11px;
  font-weight: 900;
}

.bpmn-tree-node-icon.purple {
  background: rgba(161,94,255,.19);
  color: #c8a8ff;
}

.bpmn-tree-node-icon.blue {
  background: rgba(66,154,255,.18);
  color: #9dccff;
}

.bpmn-tree-node-icon.green {
  background: rgba(59,215,159,.16);
  color: #93e9ca;
}

.bpmn-tree-node-icon.orange {
  background: rgba(255,154,78,.16);
  color: #ffc08b;
}

.bpmn-tree-node-copy {
  flex: 1;
  min-width: 0;
}

.bpmn-tree-node-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
}

.bpmn-tree-node-copy small {
  display: block;
  margin-top: 2px;
  color: rgba(222,235,255,.42);
  font-size: 8.5px;
}

.bpmn-tree-badge {
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(156,103,255,.16);
  color: #c9b0ff;
  font-size: 7.5px;
  font-weight: 800;
}

.bpmn-tree-children {
  display: grid;
  gap: 2px;
  margin-left: 11px;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,.07);
}

.bpmn-tree-divider {
  margin: 10px 8px 5px;
  color: rgba(222,235,255,.34);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.bpmn-tree-footer {
  margin-top: 16px;
  padding: 11px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}

.bpmn-tree-footer span,
.bpmn-tree-footer strong {
  display: block;
}

.bpmn-tree-footer span {
  color: rgba(222,235,255,.42);
  font-size: 8px;
}

.bpmn-tree-footer strong {
  margin-top: 3px;
  font-size: 9.5px;
}

.bpmn-designer-toolbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.bpmn-designer-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bpmn-designer-process-icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  flex: 0 0 37px;
  border-radius: 12px;
  background:
    linear-gradient(
      145deg,
      #9b61ff,
      #6364ff
    );
  box-shadow:
    0 9px 22px rgba(105,75,255,.28);
}

.bpmn-designer-title h2 {
  margin: 0;
  font-size: 14px;
}

.bpmn-designer-title p {
  margin: 2px 0 0;
  color: rgba(222,235,255,.45);
  font-size: 8.5px;
}

.bpmn-designer-tools {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bpmn-designer-tool,
.bpmn-save-button {
  height: 31px;
  border-radius: 10px;
  padding: 0 9px;
  font: inherit;
  font-size: 8.5px;
  font-weight: 750;
  cursor: pointer;
}

.bpmn-designer-tool {
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.045);
  color: rgba(235,243,255,.68);
}

.bpmn-designer-tool.is-active {
  background: rgba(90,119,255,.20);
  border-color: rgba(109,139,255,.24);
  color: #fff;
}

.bpmn-save-button {
  border: 1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(
      135deg,
      #9a62ff,
      #596dff
    );
  color: #fff;
}

.bpmn-modeler-shell {
  min-height: 602px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
}

.bpmn-palette {
  padding: 11px 8px;
  border-right: 1px solid rgba(255,255,255,.07);
  background: rgba(3,27,70,.34);
}

.bpmn-palette-label {
  margin-bottom: 8px;
  color: rgba(222,235,255,.32);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .10em;
  text-align: center;
}

.bpmn-palette-item {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  margin: 0 auto 6px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  background: rgba(255,255,255,.045);
  color: rgba(237,245,255,.81);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background .17s ease,
    transform .17s ease;
}

.bpmn-palette-item:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
}

.bpmn-palette-separator {
  height: 1px;
  margin: 9px 4px;
  background: rgba(255,255,255,.07);
}

.bpmn-shape-event {
  width: 17px;
  height: 17px;
  border: 2px solid #e6efff;
  border-radius: 50%;
}

.bpmn-shape-event.end {
  border-width: 4px;
}

.bpmn-shape-task {
  width: 23px;
  height: 16px;
  border: 2px solid #e6efff;
  border-radius: 5px;
}

.bpmn-shape-gateway {
  width: 16px;
  height: 16px;
  border: 2px solid #e6efff;
  transform: rotate(45deg);
}

.bpmn-modeler-canvas {
  position: relative;
  min-width: 0;
  overflow: auto;
  background:
    radial-gradient(
      circle,
      rgba(124,170,240,.14) 1px,
      transparent 1px
    );
  background-size: 18px 18px;
}

.bpmn-canvas-breadcrumb {
  position: absolute;
  top: 13px;
  left: 15px;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 11px;
  background: rgba(4,29,72,.57);
  border: 1px solid rgba(255,255,255,.075);
  color: rgba(227,239,255,.55);
  font-size: 8px;
  backdrop-filter: blur(16px);
}

.bpmn-canvas-breadcrumb span {
  color: rgba(227,239,255,.27);
}

.bpmn-canvas-scope-chip {
  position: absolute;
  top: 13px;
  right: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(4,29,72,.57);
  border: 1px solid rgba(255,255,255,.075);
  color: rgba(227,239,255,.60);
  font-size: 8px;
}

.bpmn-scope-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7f9cff;
  box-shadow: 0 0 9px rgba(127,156,255,.68);
}

.bpmn-demo-flow {
  min-width: 730px;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 115px 45px 100px;
}

.bpmn-demo-event {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}

.bpmn-demo-event.start {
  border: 2px solid #72e5b8;
}

.bpmn-demo-event.end {
  border: 5px solid #ff8193;
}

.bpmn-demo-sequence {
  width: 24px;
  height: 2px;
  flex: 0 0 24px;
  position: relative;
  background: rgba(164,196,244,.52);
}

.bpmn-demo-sequence::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  border-left: 6px solid rgba(164,196,244,.69);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.bpmn-demo-task {
  width: 116px;
  min-height: 67px;
  position: relative;
  padding: 12px 8px 8px;
  border: 1.5px solid rgba(203,222,255,.43);
  border-radius: 13px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.105),
      rgba(255,255,255,.052)
    );
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.bpmn-demo-task:hover {
  transform: translateY(-2px);
  border-color: rgba(189,207,255,.74);
}

.bpmn-demo-task.is-selected {
  border-color: #a58bff;
  box-shadow:
    0 0 0 3px rgba(151,117,255,.12),
    0 15px 30px rgba(62,44,172,.19),
    inset 0 1px 0 rgba(255,255,255,.13);
}

.bpmn-demo-task strong {
  display: block;
  font-size: 9px;
  line-height: 1.3;
}

.bpmn-demo-task small {
  display: block;
  margin-top: 4px;
  color: rgba(224,235,255,.42);
  font-size: 7px;
}

.bpmn-demo-task-type {
  position: absolute;
  top: 5px;
  left: 6px;
  color: #a7c5ff;
  font-size: 7px;
  font-weight: 900;
}

.bpmn-demo-task-type.service {
  color: #ffc889;
}

.bpmn-demo-gateway {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(224,236,255,.65);
  background: rgba(255,255,255,.035);
  color: #fff;
  transform: rotate(45deg);
  cursor: pointer;
}

.bpmn-demo-gateway span {
  transform: rotate(-45deg);
  font-size: 18px;
}

.bpmn-demo-gateway.is-selected {
  border-color: #a58bff;
  box-shadow: 0 0 0 3px rgba(151,117,255,.12);
}

.bpmn-demo-branch {
  position: absolute;
  left: 51%;
  top: 54%;
}

.bpmn-branch-line.vertical {
  width: 2px;
  height: 58px;
  margin: 0 auto;
  background: rgba(164,196,244,.40);
}

.bpmn-demo-task.small {
  width: 106px;
  min-height: 58px;
}

.bpmn-canvas-footer {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  background: rgba(4,29,72,.51);
  color: rgba(224,235,255,.42);
  font-size: 7.5px;
  backdrop-filter: blur(14px);
}

.bpmn-canvas-footer > div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bpmn-canvas-footer strong {
  color: rgba(224,235,255,.67);
}

.bpmn-footer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9d80ff;
}

.bpmn-selected-element {
  margin-top: 14px;
  padding: 13px;
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(119,91,255,.16),
      rgba(255,255,255,.035)
    );
  border: 1px solid rgba(155,126,255,.16);
}

.bpmn-selected-type {
  display: block;
  color: #b9a7ff;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .10em;
}

.bpmn-selected-element strong {
  display: block;
  margin-top: 5px;
  font-size: 11px;
}

.bpmn-selected-element small {
  display: block;
  margin-top: 3px;
  color: rgba(224,235,255,.40);
  font-size: 7.5px;
}

.bpmn-property-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 12px 0;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}

.bpmn-property-tab {
  height: 29px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(224,235,255,.48);
  font: inherit;
  font-size: 8px;
  font-weight: 750;
  cursor: pointer;
}

.bpmn-property-tab.is-active {
  color: #fff;
  background: rgba(105,118,255,.28);
}

.bpmn-property-content {
  max-height: 516px;
  overflow-y: auto;
  padding-right: 2px;
}

.bpmn-property-section {
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,.065);
}

.bpmn-property-section:first-child {
  border-top: 0;
  padding-top: 2px;
}

.bpmn-property-section-title {
  margin-bottom: 9px;
  color: rgba(222,235,255,.37);
  font-size: 7.5px;
  font-weight: 850;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.bpmn-field {
  display: block;
  margin-bottom: 8px;
}

.bpmn-field > span {
  display: block;
  margin-bottom: 4px;
  color: rgba(224,235,255,.48);
  font-size: 7.5px;
}

.bpmn-field input,
.bpmn-field select {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 10px;
  outline: 0;
  padding: 0 9px;
  background: rgba(255,255,255,.045);
  color: #fff;
  font: inherit;
  font-size: 8.5px;
}

.bpmn-subject-slot {
  margin-bottom: 7px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.065);
  background: rgba(255,255,255,.035);
}

.bpmn-slot-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bpmn-slot-head strong {
  flex: 1;
  font-size: 8.5px;
}

.bpmn-slot-head button {
  border: 0;
  background: transparent;
  color: rgba(224,235,255,.42);
  cursor: pointer;
}

.bpmn-slot-badge {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(50,157,255,.17);
  color: #9ed0ff;
  font-size: 7px;
  font-weight: 850;
}

.bpmn-slot-badge.purple {
  background: rgba(163,98,255,.17);
  color: #ceb0ff;
}

.bpmn-slot-rule {
  margin-top: 7px;
  padding: 7px 8px;
  border-radius: 9px;
  background: rgba(3,26,66,.33);
  color: rgba(224,235,255,.46);
  font-size: 7.5px;
}

.bpmn-slot-rule span {
  margin: 0 5px;
  color: rgba(224,235,255,.23);
}

.bpmn-add-slot {
  width: 100%;
  height: 31px;
  border: 1px dashed rgba(151,182,235,.20);
  border-radius: 10px;
  background: transparent;
  color: rgba(188,213,255,.56);
  font: inherit;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}

.bpmn-context-row,
.bpmn-deadline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 35px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.032);
  margin-bottom: 5px;
}

.bpmn-context-row span,
.bpmn-deadline-row span {
  color: rgba(224,235,255,.40);
  font-size: 7.5px;
}

.bpmn-context-row strong,
.bpmn-deadline-row strong {
  font-size: 7.8px;
  text-align: right;
}

.bpmn-deadline-row > div span,
.bpmn-deadline-row > div strong {
  display: block;
  text-align: left;
}

.bpmn-small-action {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 5px 8px;
  background: rgba(255,255,255,.045);
  color: rgba(224,235,255,.60);
  font: inherit;
  font-size: 7.5px;
  cursor: pointer;
}

.bpmn-ref-row {
  width: 100%;
  min-height: 43px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bpmn-ref-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(74,142,255,.13);
  color: #a8caff;
  font-size: 9px;
}

.bpmn-ref-row strong,
.bpmn-ref-row small {
  display: block;
}

.bpmn-ref-row strong {
  font-size: 8.5px;
}

.bpmn-ref-row small {
  margin-top: 2px;
  color: rgba(224,235,255,.40);
  font-size: 7px;
}

.bpmn-ref-row em {
  color: rgba(224,235,255,.33);
  font-style: normal;
  font-size: 14px;
}

@media (max-width: 1320px) {
  .bpmn-designer-workspace {
    grid-template-columns:
      215px minmax(0, 1fr) 285px;
  }

  .bpmn-designer-tools {
    gap: 3px;
  }

  .bpmn-designer-tool,
  .bpmn-save-button {
    padding: 0 6px;
  }
}

@media (max-width: 1080px) {
  .bpmn-designer-workspace {
    grid-template-columns:
      200px minmax(0, 1fr);
  }

  .bpmn-properties-panel {
    grid-column: 1 / -1;
  }
}

/* ==================================================
   BPMN — HIGH CONTRAST FORM FIELDS
   Giữ Apple Liquid nhưng tăng độ đọc
================================================== */

.bpmn-designer-shell input,
.bpmn-designer-shell select,
.bpmn-designer-shell textarea,
.bpmn-properties-panel input,
.bpmn-properties-panel select,
.bpmn-properties-panel textarea,
.bpmn-process-library input,
.bpmn-process-library select,
.bpmn-process-library textarea,
.bpmn-topbar input,
.bpmn-topbar select,
.bpmn-topbar textarea {
  background:
    linear-gradient(
      180deg,
      rgba(36, 78, 170, 0.30) 0%,
      rgba(17, 46, 112, 0.82) 100%
    );
  color: #F7FBFF;
  -webkit-text-fill-color: #F7FBFF;
  border: 1px solid rgba(168, 205, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 8px 24px rgba(5, 17, 52, 0.18);
}

.bpmn-designer-shell input::placeholder,
.bpmn-designer-shell textarea::placeholder,
.bpmn-properties-panel input::placeholder,
.bpmn-properties-panel textarea::placeholder,
.bpmn-process-library input::placeholder,
.bpmn-process-library textarea::placeholder,
.bpmn-topbar input::placeholder,
.bpmn-topbar textarea::placeholder {
  color: rgba(226, 238, 255, 0.72);
  -webkit-text-fill-color: rgba(226, 238, 255, 0.72);
  opacity: 1;
}

.bpmn-designer-shell input:hover,
.bpmn-designer-shell select:hover,
.bpmn-designer-shell textarea:hover,
.bpmn-properties-panel input:hover,
.bpmn-properties-panel select:hover,
.bpmn-properties-panel textarea:hover,
.bpmn-process-library input:hover,
.bpmn-process-library select:hover,
.bpmn-process-library textarea:hover,
.bpmn-topbar input:hover,
.bpmn-topbar select:hover,
.bpmn-topbar textarea:hover {
  border-color: rgba(190, 220, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(124, 181, 255, 0.12),
    0 10px 28px rgba(8, 24, 73, 0.20);
}

.bpmn-designer-shell input:focus,
.bpmn-designer-shell select:focus,
.bpmn-designer-shell textarea:focus,
.bpmn-properties-panel input:focus,
.bpmn-properties-panel select:focus,
.bpmn-properties-panel textarea:focus,
.bpmn-process-library input:focus,
.bpmn-process-library select:focus,
.bpmn-process-library textarea:focus,
.bpmn-topbar input:focus,
.bpmn-topbar select:focus,
.bpmn-topbar textarea:focus {
  outline: none;
  border-color: rgba(130, 196, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 2px rgba(86, 158, 255, 0.28),
    0 0 22px rgba(72, 143, 255, 0.22);
}

.bpmn-designer-shell input[disabled],
.bpmn-designer-shell select[disabled],
.bpmn-designer-shell textarea[disabled],
.bpmn-designer-shell input[readonly],
.bpmn-designer-shell textarea[readonly],
.bpmn-properties-panel input[disabled],
.bpmn-properties-panel select[disabled],
.bpmn-properties-panel textarea[disabled],
.bpmn-properties-panel input[readonly],
.bpmn-properties-panel textarea[readonly] {
  color: rgba(226, 236, 252, 0.84);
  -webkit-text-fill-color: rgba(226, 236, 252, 0.84);
  background:
    linear-gradient(
      180deg,
      rgba(47, 73, 134, 0.22) 0%,
      rgba(18, 36, 79, 0.74) 100%
    );
  border-color: rgba(142, 176, 228, 0.26);
  cursor: not-allowed;
}

.bpmn-designer-shell select,
.bpmn-properties-panel select,
.bpmn-process-library select,
.bpmn-topbar select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(
      180deg,
      rgba(36, 78, 170, 0.30) 0%,
      rgba(17, 46, 112, 0.82) 100%
    );
}

.bpmn-designer-shell select option,
.bpmn-properties-panel select option,
.bpmn-process-library select option,
.bpmn-topbar select option {
  background: #14357f;
  color: #F7FBFF;
}

.bpmn-designer-shell label,
.bpmn-properties-panel label,
.bpmn-process-library label,
.bpmn-topbar label,
.bpmn-field-label,
.bpmn-form-label,
.bpmn-section-label {
  color: rgba(236, 244, 255, 0.94);
}

.bpmn-field-help,
.bpmn-field-caption,
.bpmn-field-note,
.bpmn-properties-panel small,
.bpmn-properties-panel .muted,
.bpmn-designer-shell small {
  color: rgba(206, 222, 248, 0.82);
}

.bpmn-properties-panel .bpmn-tab,
.bpmn-properties-panel .bpmn-subtab {
  color: rgba(235, 243, 255, 0.86);
}

.bpmn-properties-panel .bpmn-tab.is-active,
.bpmn-properties-panel .bpmn-subtab.is-active {
  color: #FFFFFF;
}

.bpmn-properties-panel .bpmn-subject-slot,
.bpmn-properties-panel .bpmn-slot-card,
.bpmn-properties-panel .bpmn-rule-card,
.bpmn-properties-panel .bpmn-ref-row {
  border-color: rgba(161, 199, 255, 0.20);
}

/* ==================================================
   BPMN DASHBOARD — SCOPE PILL FIX
   Xoá hình chữ nhật con trong ô Scope
================================================== */

/* Outer liquid shell */
.bpmn-dashboard-scope,
.bpmn-dashboard-scope-wrap,
.bpmn-dashboard-toolbar .bpmn-scope-field,
.bpmn-dashboard-hero .bpmn-scope-field,
.bpmn-dashboard-header .bpmn-scope-field {
  border-radius: 18px;
  border: 1px solid rgba(168, 205, 255, 0.24);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.04) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 30px rgba(6, 19, 58, 0.10);
}

/* Inner select/input phải hoà vào shell, không có hình chữ nhật riêng */
.bpmn-dashboard-scope select,
.bpmn-dashboard-scope input,
.bpmn-dashboard-scope-wrap select,
.bpmn-dashboard-scope-wrap input,
.bpmn-dashboard-toolbar .bpmn-scope-field select,
.bpmn-dashboard-toolbar .bpmn-scope-field input,
.bpmn-dashboard-hero .bpmn-scope-field select,
.bpmn-dashboard-hero .bpmn-scope-field input,
.bpmn-dashboard-header .bpmn-scope-field select,
.bpmn-dashboard-header .bpmn-scope-field input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  color: #F7FBFF !important;
  -webkit-text-fill-color: #F7FBFF !important;
}

/* Placeholder / label nếu có */
.bpmn-dashboard-scope input::placeholder,
.bpmn-dashboard-scope-wrap input::placeholder,
.bpmn-dashboard-toolbar .bpmn-scope-field input::placeholder,
.bpmn-dashboard-hero .bpmn-scope-field input::placeholder,
.bpmn-dashboard-header .bpmn-scope-field input::placeholder {
  color: rgba(226, 238, 255, 0.72) !important;
  -webkit-text-fill-color: rgba(226, 238, 255, 0.72) !important;
  opacity: 1;
}

/* Khi focus vẫn giữ tinh thần liquid, không tạo ô vuông con */
.bpmn-dashboard-scope:focus-within,
.bpmn-dashboard-scope-wrap:focus-within,
.bpmn-dashboard-toolbar .bpmn-scope-field:focus-within,
.bpmn-dashboard-hero .bpmn-scope-field:focus-within,
.bpmn-dashboard-header .bpmn-scope-field:focus-within {
  border-color: rgba(130, 196, 255, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(107, 170, 255, 0.12),
    0 10px 28px rgba(8, 24, 73, 0.14);
}

/* ==================================================
   BPMN — EXACT SCOPE PICKER FIX
   Outer liquid capsule only.
   Inner select must visually disappear into parent.
================================================== */

.bpmn-scope-picker {
  overflow: hidden;
}

/* Override generic high-contrast form rule */
.bpmn-topbar .bpmn-scope-picker select,
.bpmn-scope-picker #bpmn-scope-select {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: 0 !important;

  outline: 0 !important;

  box-shadow: none !important;

  color: #F7FBFF !important;
  -webkit-text-fill-color: #F7FBFF !important;

  font-weight: 700;
}

/* Hover tuyệt đối không tạo inner rectangle */
.bpmn-topbar .bpmn-scope-picker select:hover,
.bpmn-scope-picker #bpmn-scope-select:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Focus chỉ highlight capsule cha */
.bpmn-topbar .bpmn-scope-picker select:focus,
.bpmn-scope-picker #bpmn-scope-select:focus {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.bpmn-scope-picker:focus-within {
  border-color: rgba(160, 207, 255, .38);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(106,169,255,.09),
    0 12px 30px rgba(4,22,67,.12);
}

/* Native dropdown options */
.bpmn-scope-picker select option {
  background: #123878;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}

/* =========================================================
   BPMN DESIGNER — CANVAS FIRST / FOCUS MODE V1
   ========================================================= */

/* Khi vào Designer, sidebar BPMN tổng thu thành icon rail */
.bpmn-app-shell.is-designer-mode {
  grid-template-columns:
    74px minmax(0, 1fr);
}

.bpmn-app-shell.is-designer-mode
.bpmn-side-panel {
  padding: 12px 9px;
}

.bpmn-app-shell.is-designer-mode
.bpmn-brand-block {
  justify-content: center;
  padding: 6px 0 14px;
}

.bpmn-app-shell.is-designer-mode
.bpmn-brand-block > div:last-child,
.bpmn-app-shell.is-designer-mode
.bpmn-nav-item > span:not(.bpmn-nav-icon),
.bpmn-app-shell.is-designer-mode
.bpmn-side-footer {
  display: none;
}

.bpmn-app-shell.is-designer-mode
.bpmn-brand-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
}

.bpmn-app-shell.is-designer-mode
.bpmn-nav-item {
  width: 48px;
  height: 44px;

  justify-content: center;

  margin-inline: auto;
  padding: 0;
}

.bpmn-app-shell.is-designer-mode
.bpmn-nav-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

/* Designer mặc định: canvas vẫn là vùng lớn nhất */
.bpmn-designer-workspace {
  grid-template-columns:
    220px
    minmax(560px, 1fr)
    300px;

  min-height:
    calc(100vh - 275px);

  transition:
    grid-template-columns
    .22s cubic-bezier(.2,.8,.2,1);
}

/* Toolbar tách layout controls và edit controls */
.bpmn-designer-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bpmn-designer-layout-tools,
.bpmn-designer-mode-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bpmn-designer-layout-tools {
  padding-right: 7px;

  border-right:
    1px solid
    rgba(255,255,255,.08);
}

.bpmn-designer-tool.is-layout-active {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      rgba(128,99,255,.34),
      rgba(69,122,255,.22)
    );

  border-color:
    rgba(158,148,255,.30);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.11);
}

.bpmn-focus-tool {
  min-width: 64px;
}

/* Left / right panels animate out */
.bpmn-designer-tree,
.bpmn-properties-panel {
  min-width: 0;

  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.2,.8,.2,1),
    padding .22s ease,
    border-width .22s ease;
}

/* Inspect mode: đóng Process Tree */
.bpmn-designer-workspace.is-tree-collapsed {
  grid-template-columns:
    0
    minmax(0, 1fr)
    300px;
}

.bpmn-designer-workspace.is-tree-collapsed
.bpmn-designer-tree {
  opacity: 0;

  padding-left: 0;
  padding-right: 0;

  border-width: 0;

  overflow: hidden;

  pointer-events: none;

  transform:
    translateX(-18px);
}

/* Canvas + tree, đóng Properties */
.bpmn-designer-workspace.is-properties-collapsed {
  grid-template-columns:
    220px
    minmax(0, 1fr)
    0;
}

.bpmn-designer-workspace.is-properties-collapsed
.bpmn-properties-panel {
  opacity: 0;

  padding-left: 0;
  padding-right: 0;

  border-width: 0;

  overflow: hidden;

  pointer-events: none;

  transform:
    translateX(18px);
}

/* Full Focus */
.bpmn-designer-workspace.is-tree-collapsed.is-properties-collapsed {
  grid-template-columns:
    0
    minmax(0, 1fr)
    0;
}

.bpmn-designer-workspace.is-focus-mode
.bpmn-designer-center {
  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.13),
    0 28px 76px
    rgba(0,21,72,.27);
}

/* Canvas tăng cả chiều cao */
.bpmn-modeler-shell {
  min-height:
    calc(100vh - 350px);
}

.bpmn-modeler-canvas {
  min-height:
    calc(100vh - 350px);
}

.bpmn-designer-workspace.is-focus-mode
.bpmn-modeler-shell,
.bpmn-designer-workspace.is-focus-mode
.bpmn-modeler-canvas {
  min-height:
    calc(100vh - 300px);
}

/* Flow dùng ngang tốt hơn */
.bpmn-demo-flow {
  min-width: 960px;
  min-height: 100%;
  padding-left: 80px;
  padding-right: 80px;
}

.bpmn-designer-workspace.is-focus-mode
.bpmn-demo-flow {
  min-width: 1180px;

  justify-content: center;

  padding-left: 110px;
  padding-right: 110px;
}

/* Canvas itself gets more visual dominance */
.bpmn-designer-center {
  border-color:
    rgba(139,192,255,.20);

  background:
    linear-gradient(
      145deg,
      rgba(8,46,111,.83),
      rgba(5,31,80,.75)
    );
}

/* Larger screens: keep editors especially spacious */
@media (min-width: 1400px) {

  .bpmn-designer-workspace {
    grid-template-columns:
      218px
      minmax(680px, 1fr)
      292px;
  }

  .bpmn-designer-workspace.is-tree-collapsed {
    grid-template-columns:
      0
      minmax(0, 1fr)
      292px;
  }

  .bpmn-designer-workspace.is-properties-collapsed {
    grid-template-columns:
      218px
      minmax(0, 1fr)
      0;
  }

  .bpmn-designer-workspace.is-tree-collapsed.is-properties-collapsed {
    grid-template-columns:
      0
      minmax(0, 1fr)
      0;
  }

}

/* Smaller desktops: collapse tree by preference */
@media (max-width: 1180px) {

  .bpmn-designer-workspace {
    grid-template-columns:
      0
      minmax(0, 1fr)
      285px;
  }

  .bpmn-designer-tree {
    display: none;
  }

}

/* =========================================================
   BPMN DESIGNER — APPLE LIQUID POLISH V2
   - Hover-expanding navigation rail
   - Prevent right panel overflow
   - Canvas-first responsive layout
   ========================================================= */

/* ---------------------------------------------------------
   1. DESIGNER APP SHELL
   --------------------------------------------------------- */

.bpmn-app-shell.is-designer-mode {
  width: min(1720px, calc(100% - 18px));

  grid-template-columns:
    66px minmax(0, 1fr);

  gap: 12px;

  overflow: visible;
}

.bpmn-app-shell.is-designer-mode
.bpmn-main {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

/* ---------------------------------------------------------
   2. LEFT BPMN NAVIGATION = LIQUID HOVER RAIL
   --------------------------------------------------------- */

.bpmn-app-shell.is-designer-mode
.bpmn-side-panel {
  position: sticky;
  top: 18px;

  z-index: 50;

  width: 66px;
  min-width: 66px;

  padding: 12px 8px;

  overflow: hidden;

  transition:
    width .24s cubic-bezier(.2,.8,.2,1),
    box-shadow .24s ease,
    border-color .24s ease,
    background .24s ease;
}

/* Nở ra khi hover, nhưng không đẩy Canvas */
.bpmn-app-shell.is-designer-mode
.bpmn-side-panel:hover {
  width: 230px;

  border-color:
    rgba(158,205,255,.30);

  background:
    linear-gradient(
      155deg,
      rgba(15,58,128,.96),
      rgba(5,30,79,.92)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 28px 75px rgba(0,17,58,.38);

  backdrop-filter:
    blur(38px)
    saturate(180%);

  -webkit-backdrop-filter:
    blur(38px)
    saturate(180%);
}

/* Logo */
.bpmn-app-shell.is-designer-mode
.bpmn-brand-block {
  justify-content: flex-start;

  width: 100%;

  gap: 12px;
}

.bpmn-app-shell.is-designer-mode
.bpmn-brand-icon {
  flex: 0 0 44px;
}

/* Text logo ẩn mềm thay vì display:none */
.bpmn-app-shell.is-designer-mode
.bpmn-brand-block > div:last-child {
  display: block;

  min-width: 130px;

  opacity: 0;
  visibility: hidden;

  transform:
    translateX(-6px);

  transition:
    opacity .16s ease,
    transform .20s ease,
    visibility .16s ease;
}

.bpmn-app-shell.is-designer-mode
.bpmn-side-panel:hover
.bpmn-brand-block > div:last-child {
  opacity: 1;
  visibility: visible;

  transform:
    translateX(0);
}

/* Navigation item giữ track 48px khi collapsed */
.bpmn-app-shell.is-designer-mode
.bpmn-nav-item {
  width: 100%;

  justify-content: flex-start;

  margin-inline: 0;

  padding: 0 9px;

  white-space: nowrap;

  overflow: hidden;
}

.bpmn-app-shell.is-designer-mode
.bpmn-nav-icon {
  flex: 0 0 32px;
}

/* Text nav */
.bpmn-app-shell.is-designer-mode
.bpmn-nav-item > span:not(.bpmn-nav-icon) {
  display: block;

  min-width: 145px;

  margin-left: 7px;

  opacity: 0;
  visibility: hidden;

  transform:
    translateX(-5px);

  transition:
    opacity .15s ease,
    transform .20s ease,
    visibility .15s ease;
}

.bpmn-app-shell.is-designer-mode
.bpmn-side-panel:hover
.bpmn-nav-item > span:not(.bpmn-nav-icon) {
  opacity: 1;
  visibility: visible;

  transform:
    translateX(0);
}

/* Active item đẹp hơn khi rail mở */
.bpmn-app-shell.is-designer-mode
.bpmn-side-panel:hover
.bpmn-nav-item.is-active {
  background:
    linear-gradient(
      135deg,
      rgba(112,98,255,.82),
      rgba(75,132,255,.60)
    );
}

/* Không hiện footer trong Designer rail để giữ gọn */
.bpmn-app-shell.is-designer-mode
.bpmn-side-footer {
  display: none;
}

/* ---------------------------------------------------------
   3. TOPBAR — GỌN HƠN TRONG DESIGNER
   --------------------------------------------------------- */

.bpmn-app-shell.is-designer-mode
.bpmn-topbar {
  min-height: 112px;

  padding:
    20px 22px;

  border-radius: 27px;
}

.bpmn-app-shell.is-designer-mode
.bpmn-topbar h1 {
  font-size:
    clamp(24px, 2vw, 31px);
}

/* ---------------------------------------------------------
   4. DESIGNER 3-COLUMN — KHÔNG OVERFLOW
   --------------------------------------------------------- */

.bpmn-designer-workspace {
  width: 100%;
  min-width: 0;

  grid-template-columns:
    minmax(190px, 215px)
    minmax(0, 1fr)
    minmax(270px, 292px);

  gap: 12px;

  overflow: hidden;
}

/* Quan trọng: cho phép tất cả cột co */
.bpmn-designer-tree,
.bpmn-designer-center,
.bpmn-properties-panel,
.bpmn-modeler-shell,
.bpmn-modeler-canvas {
  min-width: 0;
  max-width: 100%;
}

/* Panel phải không được phép lòi ra */
.bpmn-properties-panel {
  width: 100%;

  overflow: hidden;

  border-radius: 25px;
}

.bpmn-property-content {
  width: 100%;
  max-width: 100%;

  overflow-x: hidden;
  overflow-y: auto;
}

.bpmn-property-section,
.bpmn-selected-element,
.bpmn-subject-slot,
.bpmn-ref-row,
.bpmn-context-row,
.bpmn-deadline-row {
  max-width: 100%;
}

/* Field không vượt panel */
.bpmn-properties-panel input,
.bpmn-properties-panel select,
.bpmn-properties-panel textarea {
  width: 100%;
  max-width: 100%;
}

/* ---------------------------------------------------------
   5. CANVAS — VÙNG CHÍNH PHẢI CHIẾM DIỆN TÍCH LỚN NHẤT
   --------------------------------------------------------- */

.bpmn-designer-center {
  overflow: hidden;
}

.bpmn-modeler-shell {
  width: 100%;

  grid-template-columns:
    52px minmax(0, 1fr);
}

.bpmn-modeler-canvas {
  width: 100%;

  overflow: auto;
}

/* Không ép canvas phải rộng tối thiểu quá lớn */
.bpmn-demo-flow {
  min-width: 760px;

  width: max-content;

  margin-inline: auto;

  padding-left: 58px;
  padding-right: 58px;
}

/* ---------------------------------------------------------
   6. COLLAPSE MODES
   --------------------------------------------------------- */

/* Đóng Tree */
.bpmn-designer-workspace.is-tree-collapsed {
  grid-template-columns:
    0
    minmax(0, 1fr)
    minmax(270px, 292px);
}

/* Đóng Properties */
.bpmn-designer-workspace.is-properties-collapsed {
  grid-template-columns:
    minmax(190px, 215px)
    minmax(0, 1fr)
    0;
}

/* Focus */
.bpmn-designer-workspace.is-tree-collapsed.is-properties-collapsed {
  grid-template-columns:
    0
    minmax(0, 1fr)
    0;
}

.bpmn-designer-workspace.is-focus-mode
.bpmn-demo-flow {
  min-width: 900px;

  padding-left: 90px;
  padding-right: 90px;
}

/* ---------------------------------------------------------
   7. TOOLBAR — GIẢM CẢM GIÁC CHẬT
   --------------------------------------------------------- */

.bpmn-designer-toolbar {
  min-width: 0;

  padding:
    10px 12px;
}

.bpmn-designer-title {
  flex: 1;
  min-width: 0;
}

.bpmn-designer-title > div:last-child {
  min-width: 0;
}

.bpmn-designer-title h2,
.bpmn-designer-title p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bpmn-designer-tools {
  flex: 0 1 auto;

  min-width: 0;

  gap: 5px;
}

.bpmn-designer-layout-tools,
.bpmn-designer-mode-tools {
  flex-wrap: nowrap;
}

/* ---------------------------------------------------------
   8. LARGE DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1450px) {

  .bpmn-designer-workspace {
    grid-template-columns:
      210px
      minmax(0, 1fr)
      285px;
  }

  .bpmn-designer-workspace.is-tree-collapsed {
    grid-template-columns:
      0
      minmax(0, 1fr)
      285px;
  }

  .bpmn-designer-workspace.is-properties-collapsed {
    grid-template-columns:
      210px
      minmax(0, 1fr)
      0;
  }

}

/* ---------------------------------------------------------
   9. MID DESKTOP
   --------------------------------------------------------- */

@media (max-width: 1280px) {

  .bpmn-designer-workspace {
    grid-template-columns:
      190px
      minmax(0, 1fr)
      270px;
  }

  .bpmn-designer-tool {
    padding:
      0 6px;

    font-size: 8px;
  }

}

/* ---------------------------------------------------------
   10. SMALL DESKTOP
   Properties giữ lại, Tree tự ẩn
   --------------------------------------------------------- */

@media (max-width: 1100px) {

  .bpmn-designer-workspace {
    grid-template-columns:
      0
      minmax(0, 1fr)
      260px;
  }

  .bpmn-designer-tree {
    opacity: 0;
    pointer-events: none;
  }

}

/* =========================================================
   BPMN DESIGNER — NAV RAIL PUSH LAYOUT V1
   Hover rail mở => workspace bên phải tự thụt vào
   Không overlay / không che Process Library
   ========================================================= */

/* Cho grid ngoài animate được */
.bpmn-app-shell.is-designer-mode {
  grid-template-columns:
    66px minmax(0, 1fr);

  transition:
    grid-template-columns
    .24s cubic-bezier(.2,.8,.2,1);
}

/* Rail chiếm đúng chiều rộng của grid column */
.bpmn-app-shell.is-designer-mode
.bpmn-side-panel {
  width: 100%;
  min-width: 0;

  overflow: hidden;

  transition:
    box-shadow .24s ease,
    border-color .24s ease,
    background .24s ease;
}

/* Khi hover rail:
   grid column trái nở thật sự,
   main tự động thụt sang phải */
.bpmn-app-shell.is-designer-mode:has(
  .bpmn-side-panel:hover
) {
  grid-template-columns:
    230px minmax(0, 1fr);
}

/* Không tự set width 230px kiểu overlay nữa */
.bpmn-app-shell.is-designer-mode
.bpmn-side-panel:hover {
  width: 100%;
}

/* Main luôn co theo phần diện tích còn lại */
.bpmn-app-shell.is-designer-mode
.bpmn-main {
  min-width: 0;
  width: 100%;

  transition:
    width .24s cubic-bezier(.2,.8,.2,1);
}

/* Process Library + Designer không được vượt phần main */
.bpmn-designer-workspace {
  width: 100%;
  max-width: 100%;
}

/* Giữ animation text rail */
.bpmn-app-shell.is-designer-mode
.bpmn-side-panel:hover
.bpmn-brand-block > div:last-child,
.bpmn-app-shell.is-designer-mode
.bpmn-side-panel:hover
.bpmn-nav-item > span:not(.bpmn-nav-icon) {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Màn hình không đủ rộng:
   giảm độ nở để tránh bóp canvas quá nhiều */
@media (max-width: 1280px) {

  .bpmn-app-shell.is-designer-mode:has(
    .bpmn-side-panel:hover
  ) {
    grid-template-columns:
      210px minmax(0, 1fr);
  }

}

/* =========================================================
   BPMN DESIGNER — STRUCTURAL LAYOUT FIX V1
   - Branch anchored to Gateway
   - Process Tree never bleeds into Canvas
   ========================================================= */

/* ---------------------------------------------------------
   PROCESS LIBRARY — containment
   --------------------------------------------------------- */

.bpmn-designer-tree {
  overflow: hidden;
}

.bpmn-process-tree,
.bpmn-tree-group {
  min-width: 0;
  max-width: 100%;
}

.bpmn-tree-children {
  width: calc(100% - 11px);
  max-width: calc(100% - 11px);
  min-width: 0;

  margin-left: 11px;

  overflow: hidden;
}

.bpmn-tree-node {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow: hidden;
}

.bpmn-tree-node-copy {
  min-width: 0;
  overflow: hidden;
}

.bpmn-tree-node-copy strong,
.bpmn-tree-node-copy small {
  max-width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bpmn-tree-badge {
  flex: 0 0 auto;
}

/* Selected state phải nằm trọn trong Process Library */
.bpmn-tree-node.is-selected {
  max-width: 100%;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(139,119,255,.08);
}


/* ---------------------------------------------------------
   GATEWAY + EXCEPTION BRANCH
   Branch đi cùng Gateway, không phụ thuộc width Canvas
   --------------------------------------------------------- */

.bpmn-demo-gateway-wrap {
  position: relative;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

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

.bpmn-demo-gateway-wrap
.bpmn-demo-gateway {
  position: relative;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  z-index: 2;
}

/* Override cách định vị % cũ */
.bpmn-demo-gateway-wrap
.bpmn-demo-branch {
  position: absolute;

  left: 50%;
  top: 40px;

  width: 122px;

  transform:
    translateX(-50%);

  z-index: 1;

  pointer-events: none;
}

.bpmn-demo-gateway-wrap
.bpmn-demo-branch
.bpmn-demo-task {
  pointer-events: auto;
}

.bpmn-demo-gateway-wrap
.bpmn-branch-line.vertical {
  width: 2px;
  height: 56px;

  margin: 0 auto;

  background:
    rgba(164,196,244,.48);
}

/* Vô hiệu hóa geometry cũ */
.bpmn-modeler-canvas >
.bpmn-demo-branch {
  display: none !important;
}

/* Dành chỗ phía dưới cho nhánh */
.bpmn-demo-flow {
  padding-bottom: 170px;
}

/* =========================================================
   BPMN DESIGNER — VISUAL CLEANUP V1
   1. Remove ghost background rectangle
   2. Normalize Properties tabs typography
   3. Prevent Sequence Flow arrows overlapping nodes
   ========================================================= */


/* ---------------------------------------------------------
   1. REMOVE GHOST RECTANGLE BEHIND DESIGNER
   Outer layout phải hoàn toàn trong suốt.
   Chỉ từng Liquid Card mới có background riêng.
   --------------------------------------------------------- */

.bpmn-app-shell.is-designer-mode
.bpmn-section-host,

.bpmn-app-shell.is-designer-mode
.bpmn-designer-workspace {
  background: transparent !important;
  background-image: none !important;

  border: 0 !important;

  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Không cho pseudo-layer vô tình tạo rectangle phía sau */
.bpmn-app-shell.is-designer-mode
.bpmn-section-host::before,

.bpmn-app-shell.is-designer-mode
.bpmn-section-host::after,

.bpmn-app-shell.is-designer-mode
.bpmn-designer-workspace::before,

.bpmn-app-shell.is-designer-mode
.bpmn-designer-workspace::after {
  content: none !important;
  display: none !important;
}


/* ---------------------------------------------------------
   2. PROPERTIES TABS — TYPOGRAPHY CONSISTENCY
   Tổng quan / SVOA / Quy tắc phải cùng baseline,
   cùng size, cùng weight.
   --------------------------------------------------------- */

.bpmn-properties-panel
.bpmn-property-tabs {
  height: 42px;

  align-items: stretch;

  padding: 4px;
}

.bpmn-properties-panel
.bpmn-property-tab {
  height: 34px;

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

  margin: 0;
  padding: 0 10px;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    sans-serif;

  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0 !important;

  text-transform: none;

  white-space: nowrap;

  color:
    rgba(224,235,255,.68);

  opacity: 1;
}

.bpmn-properties-panel
.bpmn-property-tab.is-active {
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  color: #FFFFFF;
}

/* Không cho SVOA kế thừa style chữ lớn từ nơi khác */
.bpmn-properties-panel
.bpmn-property-tab[data-property-tab="svoa"] {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}


/* ---------------------------------------------------------
   3. BPMN SEQUENCE FLOW — SAFE NODE SPACING
   Arrow không được chạm vào Task / Gateway / Event.
   --------------------------------------------------------- */

.bpmn-demo-sequence {
  width: 30px;
  min-width: 30px;
  flex: 0 0 30px;

  height: 2px;

  position: relative;

  margin-left: 5px;
  margin-right: 5px;

  background:
    rgba(176,205,248,.60);

  z-index: 1;
}

/* Arrow head nằm bên trong vùng Sequence Flow */
.bpmn-demo-sequence::after {
  content: "";

  position: absolute;

  right: 0;
  top: 50%;

  width: 7px;
  height: 7px;

  border-top:
    2px solid
    rgba(190,216,255,.82);

  border-right:
    2px solid
    rgba(190,216,255,.82);

  border-left: 0;
  border-bottom: 0;

  transform:
    translateY(-50%)
    rotate(45deg);

  background: transparent;
}

/* Node luôn nằm trên flow */
.bpmn-demo-task,
.bpmn-demo-gateway,
.bpmn-demo-gateway-wrap,
.bpmn-demo-event {
  position: relative;
  z-index: 3;
}

/* Flow không được tràn vào node kế bên */
.bpmn-demo-flow {
  column-gap: 0;
}

/* Branch từ Gateway xuống ngoại lệ:
   đường dọc dừng trước Task một khoảng nhỏ */
.bpmn-demo-gateway-wrap
.bpmn-branch-line.vertical {
  height: 48px;

  margin:
    0 auto 6px;
}


/* ---------------------------------------------------------
   4. POLISH NODE EDGES
   Làm khoảng cách giữa flow và mắt xích rõ hơn.
   --------------------------------------------------------- */

.bpmn-demo-task {
  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.10),
    0 8px 20px
    rgba(0,20,65,.12);
}

.bpmn-demo-gateway {
  background:
    rgba(20,61,128,.84);
}

.bpmn-demo-event {
  background:
    rgba(10,47,105,.82);
}

/* =========================================================
   BPMN DEMO — SEQUENCE FLOW GEOMETRY V2
   Connector chạm đúng viền node, không hở, không đè.
   ========================================================= */

.bpmn-demo-sequence {
  position: relative;

  width: 30px;
  min-width: 30px;
  flex: 0 0 30px;

  height: 14px;

  margin: 0 !important;

  background: transparent !important;

  z-index: 2;

  overflow: visible;
}

/* Thân đường:
   bắt đầu ngay tại mép node nguồn,
   dừng trước phần đầu mũi tên */
.bpmn-demo-sequence::before {
  content: "";

  position: absolute;

  left: 0;
  right: 7px;

  top: 50%;

  height: 2px;

  transform:
    translateY(-50%);

  background:
    rgba(190,216,255,.76);

  border-radius: 999px;
}

/* Đầu mũi tên:
   đỉnh tam giác kết thúc đúng tại mép phải connector,
   tức đúng mép node đích */
.bpmn-demo-sequence::after {
  content: "";

  position: absolute;

  right: 0;
  top: 50%;

  width: 0;
  height: 0;

  transform:
    translateY(-50%);

  border-top:
    5px solid transparent;

  border-bottom:
    5px solid transparent;

  border-left:
    7px solid
    rgba(190,216,255,.88);

  background: transparent;

  box-sizing: border-box;
}

/* Node luôn nằm trên connector,
   tránh anti-aliasing nhìn như đường xuyên vào border */
.bpmn-demo-event,
.bpmn-demo-task,
.bpmn-demo-gateway-wrap {
  position: relative;
  z-index: 3;
}

/* Không tạo khoảng cách phụ giữa các phần tử */
.bpmn-demo-flow {
  gap: 0 !important;
  column-gap: 0 !important;
}

/* =========================================================
   BPMN DEMO — START EVENT FLOW FIX V1
   Sửa connector Start Event → Task đầu tiên
   ========================================================= */

/* Cho Start Event có đủ khoảng thở bên trái */
.bpmn-demo-flow
.bpmn-demo-event.start:first-child {
  margin-left: 18px;
}

/* Connector ngay sau Start Event */
.bpmn-demo-event.start
+ .bpmn-demo-sequence {
  width: 34px;
  min-width: 34px;
  flex-basis: 34px;
}

/* Thân line bắt đầu đúng tại mép hình tròn */
.bpmn-demo-event.start
+ .bpmn-demo-sequence::before {
  left: 0;
  right: 7px;
}

/* Đầu mũi tên kết thúc đúng tại Task đầu tiên */
.bpmn-demo-event.start
+ .bpmn-demo-sequence::after {
  right: 0;
}

/* Không để overflow bên trái cắt Event hoặc flow */
.bpmn-modeler-canvas {
  padding-left: 10px;
}

/* =========================================================
   BPMN DEMO — GATEWAY VISUAL BOUNDS FIX V1

   Gateway 42x42 xoay 45deg có visual bounds ~59.4px.
   Wrapper 60x60 giúp Sequence Flow dock đúng vào
   đỉnh trái / phải thật của hình thoi.
   ========================================================= */

.bpmn-demo-gateway-wrap {
  position: relative;

  width: 60px !important;
  height: 60px !important;

  flex: 0 0 60px !important;

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

  overflow: visible;
}

/* Shape BPMN vẫn giữ 42x42.
   Chỉ wrapper phản ánh đúng kích thước sau khi rotate. */
.bpmn-demo-gateway-wrap
.bpmn-demo-gateway {
  width: 42px !important;
  height: 42px !important;

  flex: 0 0 42px !important;

  margin: 0 !important;
}

/* Sequence Flow hai bên giờ dock vào mép wrapper,
   cũng chính là đỉnh thật của diamond. */
.bpmn-demo-gateway-wrap
+ .bpmn-demo-sequence {
  margin-left: 0 !important;
}

.bpmn-demo-sequence
+ .bpmn-demo-gateway-wrap {
  margin-left: 0 !important;
}

/* Nhánh dưới phải bắt đầu từ đỉnh dưới thật của diamond */
.bpmn-demo-gateway-wrap
.bpmn-demo-branch {
  left: 50% !important;
  top: 59px !important;

  transform:
    translateX(-50%) !important;
}

/* Node diamond luôn nằm trên connector */
.bpmn-demo-gateway-wrap
.bpmn-demo-gateway {
  position: relative;
  z-index: 4;
}

/* Connector thấp hơn shape */
.bpmn-demo-sequence {
  z-index: 2;
}


/* =========================================================
   242B — BPMN RUNTIME READ-ONLY VIEW V1
   ========================================================= */

.bpmn-runtime-live {
  display: grid;
  gap: 18px;
}

.bpmn-runtime-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.bpmn-runtime-header h2 {
  margin: 6px 0 4px;
  font-size: 28px;
  line-height: 1.15;
}

.bpmn-runtime-header p {
  margin: 0;
  opacity: .72;
}

.bpmn-runtime-readonly-badge {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.bpmn-runtime-kpis {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.bpmn-runtime-kpis .bpmn-liquid-card {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bpmn-runtime-kpis span {
  font-size: 12px;
  opacity: .7;
}

.bpmn-runtime-kpis strong {
  font-size: 30px;
  line-height: 1;
}

.bpmn-runtime-list {
  display: grid;
  gap: 12px;
}

.bpmn-runtime-row {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.045)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 38px rgba(0,18,62,.10);
  padding: 18px;
}

.bpmn-runtime-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bpmn-runtime-process-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(123,92,255,.18);
}

.bpmn-runtime-row-copy {
  min-width: 0;
  flex: 1;
}

.bpmn-runtime-row-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bpmn-runtime-row-title strong {
  font-size: 15px;
}

.bpmn-runtime-row-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 12px;
  opacity: .64;
}

.bpmn-runtime-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
  font-weight: 750;
}

.bpmn-runtime-status.is-running,
.bpmn-runtime-status.is-active {
  background: rgba(67,190,135,.13);
}

.bpmn-runtime-status.is-waiting,
.bpmn-runtime-status.is-ready {
  background: rgba(255,184,72,.13);
}

.bpmn-runtime-status.is-completed {
  background: rgba(92,135,255,.14);
}

.bpmn-runtime-status.is-failed,
.bpmn-runtime-status.is-cancelled {
  background: rgba(255,91,91,.13);
}

.bpmn-runtime-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.bpmn-runtime-grid > div {
  min-width: 0;
  padding: 12px 13px;
  border-radius: 15px;
  background: rgba(255,255,255,.045);
}

.bpmn-runtime-grid span {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .55;
}

.bpmn-runtime-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  white-space: nowrap;
}

.bpmn-runtime-loading-card,
.bpmn-runtime-error-card,
.bpmn-runtime-empty {
  padding: 22px;
}

.bpmn-runtime-error-card {
  border-color: rgba(255,91,91,.28);
}

@media (max-width: 1180px) {
  .bpmn-runtime-kpis,
  .bpmn-runtime-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .bpmn-runtime-header {
    flex-direction: column;
  }

  .bpmn-runtime-kpis,
  .bpmn-runtime-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   266b-D1 — REAL BPMN MODELER
   ========================================================= */

.atosy-bpmn-real-modeler {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 560px;

  overflow: hidden;

  border-radius: 18px;

  background:
    rgba(246, 249, 255, .98);
}


.atosy-bpmn-real-modeler
.djs-container {

  width: 100% !important;
  height: 100% !important;

  min-height: 560px;
}


.atosy-bpmn-real-modeler
.djs-palette {

  border-radius: 14px;

  border:
    1px solid
    rgba(48, 73, 120, .12);

  box-shadow:
    0 8px 24px
    rgba(22, 41, 82, .12);
}


.atosy-bpmn-modeler-loading,
.atosy-bpmn-modeler-error {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

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

  gap: 9px;

  text-align: center;

  color:
    rgba(32, 47, 73, .80);
}


.atosy-bpmn-modeler-loading small,
.atosy-bpmn-modeler-error small {

  max-width: 520px;

  color:
    rgba(53, 69, 97, .60);
}


.atosy-bpmn-modeler-spinner {

  width: 30px;
  height: 30px;

  border-radius: 50%;

  border:
    3px solid
    rgba(82, 111, 170, .16);

  border-top-color:
    rgba(82, 111, 170, .78);

  animation:
    atosy-bpmn-modeler-spin
    .8s
    linear
    infinite;
}


@keyframes atosy-bpmn-modeler-spin {

  to {

    transform:
      rotate(360deg);
  }
}


.atosy-bpmn-modeler-error {

  padding: 32px;

  color:
    #9c3142;

  background:
    rgba(255, 244, 246, .97);
}


.bpmn-modeler-canvas {

  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 660px;
}


.bpmn-modeler-canvas
.atosy-bpmn-real-modeler {

  flex: 1;

  margin-top: 48px;
  margin-bottom: 46px;
}


/*
 * QUICK palette mock cũ giữ lại về mặt layout,
 * nhưng tạm khóa tương tác.
 * Palette bên trong bpmn-js mới là palette thật.
 */

.bpmn-modeler-shell >
.bpmn-palette {

  opacity: .48;

  pointer-events: none;
}

/* =========================================================
   266c — REAL SAVE DRAFT
   ========================================================= */

.bpmn-save-button {
  transition:
    transform .16s ease,
    opacity .16s ease,
    box-shadow .16s ease;
}


.bpmn-save-button:not(:disabled):hover {
  transform:
    translateY(-1px);
}


.bpmn-save-button:disabled {
  cursor:
    wait;

  opacity:
    .62;

  transform:
    none;
}

/* =========================================================
   266e-B — DESIGNER LIFECYCLE BUTTONS
   ========================================================= */

.bpmn-new-draft-button,
.bpmn-publish-button {
  border:
    1px solid
    rgba(150,185,255,.18);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(126,162,255,.08)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08),
    0 8px 22px
    rgba(24,47,100,.12);

  backdrop-filter:
    blur(18px);
}


.bpmn-publish-button {
  border-color:
    rgba(126,159,255,.28);

  background:
    linear-gradient(
      145deg,
      rgba(89,103,255,.26),
      rgba(115,71,255,.18)
    );
}


.bpmn-new-draft-button:not(:disabled):hover,
.bpmn-publish-button:not(:disabled):hover {
  transform:
    translateY(-1px);
}


.bpmn-new-draft-button:disabled,
.bpmn-publish-button:disabled {
  cursor:
    not-allowed;

  opacity:
    .45;
}


.bpmn-designer-workspace.is-published-version
.bpmn-save-button {
  opacity:
    .45;

  pointer-events:
    none;
}


.bpmn-designer-workspace.is-published-version
.atosy-bpmn-real-modeler
.djs-palette,

.bpmn-designer-workspace.is-published-version
.atosy-bpmn-real-modeler
.djs-context-pad {
  display:
    none !important;
}


/* =========================================================
   267A-1 — ATOSY LIQUID BPMN DESIGNER
   Real bpmn-js engine + Atosy visual language
   ========================================================= */


/* ---------------------------------------------------------
   1. WORKSPACE:
      Process structure on top,
      Canvas + Properties below
   --------------------------------------------------------- */

.bpmn-app-shell.is-designer-mode
.bpmn-designer-workspace {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(270px, 300px) !important;

  grid-template-rows:
    auto
    minmax(700px, 1fr);

  grid-template-areas:
    "process process"
    "canvas properties";

  gap: 12px !important;

  width: 100%;
  max-width: 100%;

  overflow: visible !important;
}


.bpmn-app-shell.is-designer-mode
.bpmn-designer-tree {
  grid-area: process;

  min-width: 0;
  width: 100%;
}


.bpmn-app-shell.is-designer-mode
.bpmn-designer-center {
  grid-area: canvas;

  min-width: 0;
  width: 100%;
}


.bpmn-app-shell.is-designer-mode
.bpmn-properties-panel {
  grid-area: properties;

  min-width: 0;
  width: 100%;
}


/* ---------------------------------------------------------
   2. HORIZONTAL PROCESS LIBRARY
   --------------------------------------------------------- */

.bpmn-process-strip {
  display: grid !important;

  grid-template-columns:
    minmax(165px, 190px)
    auto
    minmax(0, 1fr)
    42px;

  align-items: center;

  gap: 10px;

  min-height: 94px;

  padding:
    12px 14px !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(130,188,255,.24) !important;

  border-radius:
    24px !important;

  background:
    linear-gradient(
      135deg,
      rgba(16,75,166,.78),
      rgba(16,52,137,.70)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.09),
    0 18px 42px
    rgba(2,25,78,.16) !important;

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);
}


.bpmn-process-strip-copy {
  min-width: 0;
}


.bpmn-process-strip-copy h2 {
  margin:
    4px 0 3px;

  font-size:
    15px;

  line-height:
    1.1;

  color:
    #f3f8ff;
}


.bpmn-process-strip-copy p {
  margin:
    0;

  color:
    rgba(214,231,255,.64);

  font-size:
    9px;

  line-height:
    1.3;
}


.bpmn-process-strip
.bpmn-tree-toolbar {
  align-self:
    center;

  width:
    max-content;

  margin:
    0;

  flex-wrap:
    nowrap;
}


.bpmn-process-strip-cards {
  display: flex !important;

  align-items: stretch;

  gap:
    8px;

  min-width: 0;

  overflow-x:
    auto !important;

  overflow-y:
    hidden !important;

  padding:
    2px 3px 5px;

  scrollbar-width:
    thin;
}


.bpmn-process-strip-cards
.bpmn-process-strip-card {
  flex:
    0 0
    clamp(175px, 17vw, 220px);

  min-width:
    175px;

  height:
    62px;

  display:
    grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    8px;

  margin:
    0 !important;

  padding:
    9px 10px !important;

  border:
    1px solid
    rgba(143,194,255,.16);

  border-radius:
    17px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(78,121,236,.055)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.07);

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}


.bpmn-process-strip-cards
.bpmn-process-strip-card:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(125,195,255,.34);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.105),
      rgba(81,124,241,.085)
    );
}


.bpmn-process-strip-cards
.bpmn-process-strip-card.is-selected {
  border-color:
    rgba(94,194,255,.72);

  background:
    linear-gradient(
      145deg,
      rgba(56,139,255,.30),
      rgba(104,76,255,.20)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.12),
    0 8px 24px
    rgba(19,76,184,.20);
}


.bpmn-process-strip-cards
.bpmn-tree-node-copy strong {
  color:
    #f5f9ff;

  font-size:
    10px;
}


.bpmn-process-strip-cards
.bpmn-tree-node-copy small {
  margin-top:
    3px;

  color:
    rgba(207,226,255,.57);

  font-size:
    8px;
}


.bpmn-process-strip-add {
  align-self:
    center;
}


/* ---------------------------------------------------------
   3. CANVAS CARD
   --------------------------------------------------------- */

.bpmn-app-shell.is-designer-mode
.bpmn-designer-center {
  border:
    1px solid
    rgba(112,183,255,.25) !important;

  border-radius:
    26px !important;

  background:
    linear-gradient(
      145deg,
      rgba(9,61,158,.80),
      rgba(9,42,117,.76)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08),
    0 22px 48px
    rgba(1,24,72,.18) !important;

  overflow:
    hidden !important;
}


.bpmn-app-shell.is-designer-mode
.bpmn-designer-toolbar {
  border-bottom:
    1px solid
    rgba(132,190,255,.12);

  background:
    linear-gradient(
      180deg,
      rgba(14,72,168,.62),
      rgba(12,57,148,.32)
    );
}


/* ---------------------------------------------------------
   4. REMOVE OLD MOCK PALETTE
   --------------------------------------------------------- */

.bpmn-modeler-shell >
.bpmn-palette {
  display:
    none !important;
}


.bpmn-modeler-shell {
  display:
    block !important;

  min-width:
    0;

  width:
    100%;
}


/* ---------------------------------------------------------
   5. BLUE MODELER CANVAS — NO WHITE
   --------------------------------------------------------- */

.bpmn-modeler-canvas {
  min-height:
    760px !important;

  background:
    radial-gradient(
      circle at 70% 18%,
      rgba(69,91,255,.16),
      transparent 31%
    ),
    radial-gradient(
      circle at 16% 74%,
      rgba(0,208,255,.10),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #073b98 0%,
      #07317f 48%,
      #07296e 100%
    ) !important;
}


.bpmn-modeler-canvas::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    .42;

  background-image:
    radial-gradient(
      circle,
      rgba(140,206,255,.34)
      1px,
      transparent 1.15px
    );

  background-size:
    18px 18px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 7%,
      black 93%,
      transparent
    );
}


.bpmn-modeler-canvas
.atosy-bpmn-real-modeler {
  flex:
    1;

  min-height:
    650px !important;

  margin-top:
    46px;

  margin-bottom:
    38px;

  border-radius:
    20px;

  background:
    transparent !important;
}


.atosy-bpmn-real-modeler,
.atosy-bpmn-real-modeler
.djs-container,
.atosy-bpmn-real-modeler
.djs-container svg {
  background:
    transparent !important;
}


/* ---------------------------------------------------------
   6. REMOVE BPMN.IO VISUAL BRANDING
   Engine remains bpmn-js; only branding is hidden.
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.bjs-powered-by,
.atosy-bpmn-real-modeler
.bjs-breadcrumbs {
  display:
    none !important;
}


.atosy-bpmn-real-modeler
.atosy-hidden-annotation {
  display:
    none !important;
}


/* ---------------------------------------------------------
   7. REAL BPMN-JS PALETTE → ATOSY LIQUID
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-palette {
  top:
    18px !important;

  left:
    16px !important;

  width:
    48px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(144,199,255,.24) !important;

  border-radius:
    18px !important;

  background:
    linear-gradient(
      145deg,
      rgba(19,75,168,.88),
      rgba(14,54,137,.82)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.09),
    0 14px 34px
    rgba(2,22,71,.24) !important;

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


.atosy-bpmn-real-modeler
.djs-palette
.entry {
  width:
    38px !important;

  height:
    38px !important;

  margin:
    4px !important;

  border-radius:
    12px;

  color:
    rgba(238,247,255,.92) !important;

  transition:
    background .14s ease,
    transform .14s ease;
}


.atosy-bpmn-real-modeler
.djs-palette
.entry:hover {
  transform:
    scale(1.04);

  background:
    linear-gradient(
      145deg,
      rgba(92,166,255,.34),
      rgba(105,82,255,.27)
    ) !important;
}


.atosy-bpmn-real-modeler
.djs-palette
.separator {
  border-color:
    rgba(154,203,255,.14) !important;
}


/* ---------------------------------------------------------
   8. TEXT / LABELS ON BLUE
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-label {
  fill:
    rgba(239,247,255,.94) !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Inter",
    sans-serif !important;

  font-weight:
    600 !important;
}


.atosy-bpmn-real-modeler
.djs-element
text {
  fill:
    rgba(239,247,255,.94) !important;
}


/* ---------------------------------------------------------
   9. TASKS — ROUNDED LIQUID
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-element.atosy-task
.djs-visual >
rect {
  fill:
    rgba(17,119,218,.72) !important;

  stroke:
    rgba(81,211,255,.96) !important;

  stroke-width:
    1.8px !important;

  rx:
    16px !important;

  ry:
    16px !important;

  filter:
    drop-shadow(
      0 8px 13px
      rgba(0,29,91,.24)
    );
}


.atosy-bpmn-real-modeler
.djs-element.atosy-user-task
.djs-visual >
rect {
  fill:
    rgba(40,107,225,.78) !important;

  stroke:
    rgba(104,215,255,.98) !important;
}


.atosy-bpmn-real-modeler
.djs-element.atosy-task
.djs-visual >
path {
  stroke:
    rgba(239,249,255,.94) !important;
}


/* ---------------------------------------------------------
   10. START / END EVENTS
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-element.atosy-start-event
.djs-visual >
circle {
  fill:
    rgba(22,205,196,.64) !important;

  stroke:
    rgba(102,255,235,.96) !important;

  stroke-width:
    2.2px !important;

  filter:
    drop-shadow(
      0 0 10px
      rgba(43,246,218,.34)
    );
}


.atosy-bpmn-real-modeler
.djs-element.atosy-end-event
.djs-visual >
circle {
  fill:
    rgba(220,71,208,.68) !important;

  stroke:
    rgba(255,147,240,.98) !important;

  stroke-width:
    2.4px !important;

  filter:
    drop-shadow(
      0 0 11px
      rgba(239,78,224,.34)
    );
}


/* ---------------------------------------------------------
   11. GATEWAYS
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-element.atosy-gateway
.djs-visual >
polygon {
  fill:
    rgba(112,74,237,.76) !important;

  stroke:
    rgba(193,144,255,.98) !important;

  stroke-width:
    2px !important;

  filter:
    drop-shadow(
      0 7px 13px
      rgba(47,16,126,.28)
    );
}


.atosy-bpmn-real-modeler
.djs-element.atosy-gateway
.djs-visual >
path {
  stroke:
    rgba(255,255,255,.96) !important;

  fill:
    none !important;
}


/* ---------------------------------------------------------
   12. SEQUENCE FLOWS — SOFT / COLORFUL
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-element.atosy-sequence-flow
.djs-visual >
path {
  stroke:
    rgba(84,215,255,.94) !important;

  stroke-width:
    2.2px !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;

  filter:
    drop-shadow(
      0 0 4px
      rgba(65,178,255,.22)
    );
}


.atosy-bpmn-real-modeler
.djs-element.atosy-sequence-flow:hover
.djs-visual >
path {
  stroke:
    rgba(181,126,255,.98) !important;

  stroke-width:
    3px !important;
}


/* ---------------------------------------------------------
   13. SELECTED ELEMENT GLOW
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-element.selected
.djs-outline {
  stroke:
    rgba(137,221,255,.98) !important;

  stroke-width:
    2px !important;

  fill:
    none !important;

  filter:
    drop-shadow(
      0 0 8px
      rgba(95,196,255,.54)
    );
}


/* ---------------------------------------------------------
   14. CONTEXT PAD / POPUP
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-context-pad {
  border-radius:
    14px;

  filter:
    drop-shadow(
      0 10px 18px
      rgba(0,26,84,.24)
    );
}


.atosy-bpmn-real-modeler
.djs-context-pad
.entry {
  border-radius:
    10px;

  background-color:
    rgba(235,246,255,.94);
}


/* ---------------------------------------------------------
   15. CANVAS BREADCRUMB / CHIP
   --------------------------------------------------------- */

.bpmn-canvas-breadcrumb,
.bpmn-canvas-scope-chip {
  z-index:
    5;

  border:
    1px solid
    rgba(137,196,255,.16);

  background:
    rgba(5,41,116,.52);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.055);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


/* ---------------------------------------------------------
   16. FOOTER
   --------------------------------------------------------- */

.bpmn-canvas-footer {
  z-index:
    5;

  color:
    rgba(211,231,255,.64);

  background:
    linear-gradient(
      180deg,
      rgba(6,43,115,.12),
      rgba(5,38,105,.52)
    );

  border-top:
    1px solid
    rgba(127,190,255,.10);
}


/* ---------------------------------------------------------
   17. PROPERTIES LIQUID CARD
   --------------------------------------------------------- */

.bpmn-app-shell.is-designer-mode
.bpmn-properties-panel {
  border:
    1px solid
    rgba(124,188,255,.20) !important;

  background:
    linear-gradient(
      145deg,
      rgba(12,62,149,.82),
      rgba(8,42,116,.78)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.07),
    0 20px 42px
    rgba(0,22,72,.16) !important;

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);
}


/* ---------------------------------------------------------
   18. RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1180px) {

  .bpmn-app-shell.is-designer-mode
  .bpmn-designer-workspace {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(245px, 270px) !important;
  }


  .bpmn-process-strip {
    grid-template-columns:
      165px
      minmax(0, 1fr)
      42px;
  }


  .bpmn-process-strip
  .bpmn-tree-toolbar {
    display:
      none;
  }

}


@media (max-width: 880px) {

  .bpmn-app-shell.is-designer-mode
  .bpmn-designer-workspace {
    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-areas:
      "process"
      "canvas"
      "properties";

    grid-template-rows:
      auto
      minmax(650px, 1fr)
      auto;
  }


  .bpmn-process-strip {
    grid-template-columns:
      145px
      minmax(0, 1fr)
      40px;
  }

}


/* =========================================================
   267A-2 — LIQUID CONTEXT PAD
   - No white bubbles
   - Better contrast
   - Softer Atosy controls
   ========================================================= */


/* ---------------------------------------------------------
   1. CONTEXT PAD WRAPPER
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-context-pad {
  padding:
    5px !important;

  border:
    1px solid
    rgba(126,202,255,.28);

  border-radius:
    16px !important;

  background:
    linear-gradient(
      145deg,
      rgba(12,72,168,.94),
      rgba(52,47,166,.90)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.10),
    0 12px 28px
    rgba(0,21,79,.30) !important;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  filter:
    none !important;
}


/* ---------------------------------------------------------
   2. INDIVIDUAL ACTION BUTTONS
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-context-pad
.entry {
  width:
    30px !important;

  height:
    30px !important;

  margin:
    2px !important;

  border:
    1px solid
    rgba(142,215,255,.20) !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      145deg,
      rgba(39,133,231,.86),
      rgba(76,79,223,.78)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.10),
    0 4px 10px
    rgba(0,31,97,.16) !important;

  color:
    #eef9ff !important;

  opacity:
    1 !important;

  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}


.atosy-bpmn-real-modeler
.djs-context-pad
.entry:hover {
  transform:
    translateY(-1px)
    scale(1.04);

  border-color:
    rgba(174,224,255,.55) !important;

  background:
    linear-gradient(
      145deg,
      rgba(67,166,255,.98),
      rgba(139,78,244,.90)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.16),
    0 7px 16px
    rgba(34,44,156,.28) !important;
}


/* Icon font bên trong context pad */

.atosy-bpmn-real-modeler
.djs-context-pad
.entry::before,

.atosy-bpmn-real-modeler
.djs-context-pad
.entry
[class^="bpmn-icon-"],

.atosy-bpmn-real-modeler
.djs-context-pad
.entry
[class*=" bpmn-icon-"] {
  color:
    #f4fbff !important;

  opacity:
    .96 !important;
}


/* ---------------------------------------------------------
   3. BENDPOINT / CONNECTION HANDLES
   Không để các handle edit connection thành chấm trắng thô.
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-bendpoint
.djs-visual,

.atosy-bpmn-real-modeler
.djs-segment-dragger
.djs-visual {
  fill:
    rgba(44,143,231,.92) !important;

  stroke:
    rgba(137,222,255,.98) !important;

  stroke-width:
    1.5px !important;

  filter:
    drop-shadow(
      0 2px 5px
      rgba(0,27,89,.22)
    );
}


/* ---------------------------------------------------------
   4. CONNECTION ARROW HEADS
   Default BPMN marker black → Atosy Cyan.
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
svg
marker
path {
  fill:
    rgba(84,215,255,.96) !important;

  stroke:
    rgba(84,215,255,.96) !important;
}


/* ---------------------------------------------------------
   5. EXTRA CANVAS BREATHING ROOM
   Visual safety at top/bottom edges.
   --------------------------------------------------------- */

.bpmn-modeler-canvas
.atosy-bpmn-real-modeler {
  margin-top:
    54px !important;

  margin-bottom:
    48px !important;
}


/* Labels remain clearly readable */

.atosy-bpmn-real-modeler
.djs-label {
  paint-order:
    stroke;

  stroke:
    rgba(5,42,116,.72);

  stroke-width:
    2.2px;

  stroke-linejoin:
    round;
}


/* ---------------------------------------------------------
   6. SELECTED NODE
   Clean liquid highlight instead of harsh white geometry.
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-element.selected
.djs-visual >
rect,

.atosy-bpmn-real-modeler
.djs-element.selected
.djs-visual >
circle,

.atosy-bpmn-real-modeler
.djs-element.selected
.djs-visual >
polygon {
  filter:
    drop-shadow(
      0 0 8px
      rgba(85,208,255,.34)
    )
    drop-shadow(
      0 8px 16px
      rgba(0,25,90,.20)
    );
}


/* =========================================================
   267A-3 — SAFE VIEWPORT
   Prevent diagram elements / labels from being clipped.
   ========================================================= */

.bpmn-modeler-canvas {
  position:
    relative;

  overflow:
    hidden;
}


/*
 * BpmnJS viewport gets a little more physical breathing room.
 */
.bpmn-modeler-canvas
.atosy-bpmn-real-modeler {
  margin-top:
    58px !important;

  margin-bottom:
    54px !important;
}


/*
 * Do not clip context-pad / overlay inside the modeler itself.
 */
.atosy-bpmn-real-modeler {
  overflow:
    visible !important;
}


/*
 * Main djs viewport stays inside the blue canvas.
 */
.atosy-bpmn-real-modeler
.djs-container {
  overflow:
    visible !important;
}


/*
 * Keep labels readable even near edges.
 */
.atosy-bpmn-real-modeler
.djs-label {
  overflow:
    visible !important;
}


/* =========================================================
   267A-5 — REAL SVG HEIGHT FIX
   Root cause:
   Modeler host ~= 650px
   djs-container ~= 560px
   actual BPMN SVG ~= 150px
   => SVG clips existing BPMN elements.
   ========================================================= */


/* ---------------------------------------------------------
   1. REAL MODELER HOST
   --------------------------------------------------------- */

.bpmn-modeler-canvas
.atosy-bpmn-real-modeler {
  height:
    650px !important;

  min-height:
    650px !important;

  overflow:
    visible !important;
}


/* ---------------------------------------------------------
   2. DIAGRAM-JS CONTAINER MUST FILL MODELER HOST
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-container {
  width:
    100% !important;

  height:
    100% !important;

  min-height:
    650px !important;

  max-height:
    none !important;

  overflow:
    visible !important;
}


/* ---------------------------------------------------------
   3. CRITICAL FIX:
      SVG MUST NOT FALL BACK TO HTML/SVG DEFAULT 150px HEIGHT
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-container >
svg {
  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  min-height:
    650px !important;

  max-height:
    none !important;

  overflow:
    visible !important;
}


/*
 * Defensive selector in case bpmn-js changes DOM nesting.
 */

.atosy-bpmn-real-modeler
svg.djs-svg,
.atosy-bpmn-real-modeler
.djs-container
svg {
  width:
    100% !important;

  height:
    100% !important;

  max-height:
    none !important;
}


/* ---------------------------------------------------------
   4. SVG VIEWPORT MUST NOT CLIP BPMN SHAPES/LABELS
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.viewport {
  overflow:
    visible !important;
}


.atosy-bpmn-real-modeler
.djs-element,

.atosy-bpmn-real-modeler
.djs-group,

.atosy-bpmn-real-modeler
.djs-visual,

.atosy-bpmn-real-modeler
.djs-label {
  overflow:
    visible !important;
}


/* ---------------------------------------------------------
   5. KEEP BLUE CANVAS CONTINUOUS
   --------------------------------------------------------- */

.bpmn-modeler-canvas,
.bpmn-modeler-canvas
.atosy-bpmn-real-modeler,
.atosy-bpmn-real-modeler
.djs-container,
.atosy-bpmn-real-modeler
.djs-container >
svg {
  background-color:
    transparent !important;
}


/* ---------------------------------------------------------
   6. CONTEXT PAD STAYS ABOVE SVG
   --------------------------------------------------------- */

.atosy-bpmn-real-modeler
.djs-overlay-container,
.atosy-bpmn-real-modeler
.djs-context-pad {
  position:
    absolute;

  z-index:
    20;
}


/* =========================================================
   267C-1 — SEQUENCE FLOW OPERATIONAL PROPERTIES
   ========================================================= */

.bpmn-flow-property-content {
  display: grid;
  gap: 10px;
}


.bpmn-flow-route {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    24px
    minmax(0, 1fr);

  align-items: center;
  gap: 6px;
}


.bpmn-flow-route-chip {
  min-width: 0;

  padding: 9px 10px;

  border:
    1px solid
    rgba(143, 200, 255, .20);

  border-radius:
    12px;

  background:
    linear-gradient(
      145deg,
      rgba(56, 134, 235, .16),
      rgba(73, 75, 210, .14)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08);
}


.bpmn-flow-route-chip small {
  display: block;

  margin-bottom: 4px;

  color:
    rgba(213, 230, 255, .64);

  font-size: 9px;
  font-weight: 700;

  text-transform: uppercase;
}


.bpmn-flow-route-chip strong {
  display: block;

  overflow: hidden;

  color:
    rgba(245, 249, 255, .96);

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.bpmn-flow-route-arrow {
  text-align: center;

  color:
    rgba(104, 218, 255, .92);

  font-size: 18px;
  font-weight: 800;
}


.bpmn-flow-rule-editor {
  width: 100%;
  min-height: 104px;

  resize: vertical;

  font-family:
    "SFMono-Regular",
    "SF Mono",
    Menlo,
    Monaco,
    Consolas,
    monospace !important;

  font-size: 10px !important;
  line-height: 1.55 !important;
}


.bpmn-flow-save-row {
  position: sticky;
  bottom: 0;

  display: grid;
  gap: 7px;

  margin-top: 2px;
  padding: 10px;

  border:
    1px solid
    rgba(132, 192, 255, .18);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      rgba(11, 72, 165, .90),
      rgba(35, 58, 163, .88)
    );

  box-shadow:
    0 12px 28px
    rgba(0, 20, 90, .22);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


.bpmn-flow-save-button {
  min-height: 36px;

  border:
    1px solid
    rgba(181, 219, 255, .28);

  border-radius:
    11px;

  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      rgba(44, 145, 255, .94),
      rgba(91, 78, 238, .94)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.18),
    0 8px 20px
      rgba(32, 77, 225, .24);

  font-size: 10px;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform .16s ease,
    filter .16s ease,
    opacity .16s ease;
}


.bpmn-flow-save-button:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.06);
}


.bpmn-flow-save-button:disabled {
  cursor:
    wait;

  opacity:
    .56;
}


.bpmn-flow-save-status {
  color:
    rgba(216, 231, 255, .68);

  font-size:
    9px;

  text-align:
    center;
}


.bpmn-flow-save-status.is-success {
  color:
    rgba(155, 255, 213, .92);
}


.bpmn-flow-save-status.is-error,
.bpmn-flow-property-error {
  color:
    rgba(255, 174, 190, .96);
}


.bpmn-flow-property-loading,
.bpmn-flow-property-error {
  padding:
    14px;

  border:
    1px solid
    rgba(145, 195, 255, .18);

  border-radius:
    13px;

  background:
    rgba(40, 108, 210, .10);

  font-size:
    10px;
}