/**
 * Blockly 커스텀 스타일
 * Enhanced with Wonik theme colors and modern UI
 */

/* 🆕 Condition ID Label Styling (E1, S1, etc.) */
.condition-id-label {
  background-color: #FFFFFF !important;
  color: #6B7280 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  border: 1px solid #E5E7EB !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  margin-right: 12px !important; /* Increased from 8px to 12px */
  min-width: 39px !important;
  text-align: center !important;
  display: inline-block !important;
}

.condition-id-label .blocklyText {
  fill: #6B7280 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Increased spacing between fields in condition blocks */
.blocklyDraggable[data-id*="condition_block"] .blocklyFieldLabel,
.blocklyDraggable[data-id*="end_condition"] .blocklyFieldLabel,
.blocklyDraggable[data-id*="safety_condition"] .blocklyFieldLabel,
.blocklyDraggable[data-id*="record_condition"] .blocklyFieldLabel {
  margin-right: 8px !important;
}

/* Spacing between dropdowns and other fields */
.blocklyDraggable[data-id*="condition_block"] .blocklyDropdownText,
.blocklyDraggable[data-id*="end_condition"] .blocklyDropdownText,
.blocklyDraggable[data-id*="safety_condition"] .blocklyDropdownText,
.blocklyDraggable[data-id*="record_condition"] .blocklyDropdownText {
  margin-right: 8px !important;
}

/* Additional spacing after ID label */
g[data-field-name="CONDITION_ID"] {
  margin-right: 12px !important;
}

/* Spacing after "End Condition", "Safety Condition", "Record Condition" labels */
.blocklyDraggable[data-id*="condition_block"] text:not(.blocklyDropdownText) {
  margin-right: 6px !important;
}

.blockly-workspace-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #FFFFFF; /* White background for canvas */
}

#blocklyDiv {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.blocklySelected > .blocklyPath {
  stroke: #fcb103 !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 8px rgba(252, 177, 3, 0.8));
}

/* .blocklyDraggable {
  transition: transform 0.2s ease-out;
} */

.blocklyToolboxDiv {
  background-color: #F5F9FF; /* Match workspace background */
  border-right: 1px solid #ddd;
}

.blocklyTreeRow {
  padding: 8px 16px;
  cursor: pointer;
  user-select: none;
}

.blocklyTreeRow:hover {
  background-color: #e8f4f8;
}

.blocklyTreeSelected {
  background-color: #d6e9f8 !important;
}

.blocklyHighlightedConnectionPath {
  stroke: #fcb103 !important;
  stroke-width: 4px !important;
  fill: none !important;
}

.blocklyDragging > .blocklyPath {
  opacity: 0.7;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.blocklyTrashcanLid {
  fill: #e74c3c;
}

.blocklyTrashcanLid:hover {
  fill: #c0392b;
}

.blocklyZoom {
  opacity: 0.7;
  transition: opacity 0.2s;
}

.blocklyZoom:hover {
  opacity: 1;
}

.blocklyEditableText:not(.blocklyDropdownText) > rect {
  fill: #fff;
  stroke: #ccc;
  stroke-width: 1px;
}

.blocklyEditableText:not(.blocklyDropdownText):hover > rect {
  stroke: #4a90e2;
}

.blocklyDropDownDiv {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.blocklyDropDownDiv,
.blocklyDropDownDiv .goog-menuitem,
.blocklyDropDownDiv .goog-menuitem-content,
.blocklyDropDownDiv .blocklyText,
.blocklyDropDownDiv .blocklyMenuItem,
.blocklyDropDownDiv .blocklyMenuItemContent {
  color: #000000 !important;
}

.blocklyContextMenu {
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.blocklyMenuItem {
  padding: 8px 16px;
}

.blocklyMenuItem:hover {
  background-color: #e5f2ff !important;
  color: #000000 !important;
}

.blocklyMenuItem.blocklyMenuItemSelected {
  color: #000000 !important;
}

.blocklyDropDownDiv .blocklyMenuItemHighlight,
.blocklyDropDownDiv .blocklyMenuItemHighlight .blocklyMenuItemContent {
  color: #000000 !important;
}

.blocklyDropdownText text {
  fill: #000000 !important;
}

.blockly-cut-block {
  opacity: 0.45;
}

.blockly-cut-block .blocklyPath,
.blockly-cut-block .blocklyPathDark,
.blockly-cut-block .blocklyPathLight {
  stroke-dasharray: 6 4;
}

.ribbon-button-active {
  background-color: #f0f4ff;
  box-shadow: 0 0 0 1px rgba(70, 115, 255, 0.4);
}