/**
 * Blockly 12.3.0 호환 폴백 CSS - 최소한의 스타일 정의
 * CDN에서 Blockly CSS를 로드할 수 없을 때 사용
 * Phase 2: 12.3.0 zelos 렌더러 및 최신 기능 지원
 */

/* 기본 툴박스 스타일 */
.blocklyToolboxDiv {
  background: #ddd !important;
  border-right: 1px solid #ccc !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: absolute !important;
  width: 240px !important; /* 기본 너비 보장 */
  z-index: 70 !important;
}

/* 플라이아웃 기본 보정 */
.blocklyFlyout {
  z-index: 80 !important;
}

.blocklyTreeRoot {
  padding: 4px 0 !important;
}

.blocklyTreeRow {
  cursor: pointer !important;
  padding: 3px !important;
  padding-left: 8px !important;
}

.blocklyTreeRow:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.blocklyTreeSelected {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* 워크스페이스 기본 스타일 (외곽선 제거, 배경 투명 유지) */
.blocklyWorkspace {
  background: transparent !important;
  border: none !important;
}

.blocklySvg {
  display: block !important;
}

/* 기본 블록 스타일 */
.blocklyPath {
  fill-rule: evenodd !important;
  stroke: #1f1f1f !important;
  stroke-width: 1px !important;
}

.blocklySelected {
  filter: url(#blocklySelectedGlowFilter) !important;
}

/* 드래그 스타일 */
.blocklyDragging {
  opacity: 0.7 !important;
}

/* 툴박스 카테고리 스타일 */
.blocklyTreeLabel {
  cursor: pointer !important;
  font-family: sans-serif !important;
  font-size: 11px !important;
  padding: 2px 5px !important;
  vertical-align: middle !important;
}

/* 스크롤바 스타일 */
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
  fill: #ccc !important;
  fill-opacity: 0.8 !important;
}

.blocklyScrollbarBackground {
  fill: transparent !important;
}

.blocklyScrollbarHandle {
  fill: #a2a2a2 !important;
}

/* 트래시캔 스타일 */
.blocklyTrash {
  cursor: pointer !important;
  fill: #888 !important;
}

.blocklyTrash:hover {
  fill: #000 !important;
}

/* 줌 컨트롤 스타일 */
.blocklyZoom {
  cursor: pointer !important;
  fill: #888 !important;
  font-family: sans-serif !important;
  font-size: 12px !important;
}

.blocklyZoom:hover {
  fill: #000 !important;
}

/* 텍스트/폰트/letter-spacing 강제 규칙은 부트 단계에서 주입됨
   (blockly-boot.js의 _injectMinimalCSS). 여기서는 중복을 제거한다. */

/* 더 세밀한 조건 섹션 라벨 위치 조정 */
/* 특정 라벨 위치 보정 제거 (셀렉터 호환성 문제 및 겹침 유발) */
/* 유지하려면 블록 정의 쪽에서 padding/spacing으로 조정 */

/* 연결점 스타일 */
.blocklyHighlightedConnectionPath {
  fill: none !important;
  stroke: #fc3 !important;
  stroke-width: 0.6px !important;
}

/* 12.3.0 zelos 렌더러 지원 */
.blocklyPathLight {
  fill: none !important;
  stroke-linejoin: round !important;
  stroke-width: 1px !important;
}

.blocklyPathDark {
  fill: none !important;
  stroke-linejoin: round !important;
  stroke-width: 1px !important;
}

/* 12.3.0 개선된 코멘트 스타일 */
.blocklyCommentForeignObject {
  position: relative !important;
}

.blocklyCommentTextarea {
  background-color: #fef49c !important;
  border: 0 !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 3px !important;
  resize: none !important;
  display: block !important;
  overflow: hidden !important;
}

/* 12.3.0 향상된 그리드 스타일
   - fill을 강제로 지정하면 Blockly가 주입하는 grid pattern이 사라집니다.
   - stroke만 지정하고 fill은 건드리지 않아야 격자 무늬가 보입니다. */
.blocklyMainBackground {
  stroke: #c6c6c6 !important;
  stroke-width: 1 !important;
  /* DO NOT set fill here so the injected url(#gridPattern) remains active. */
}

/* 12.3.0 터치 디바이스 지원 */
.blocklySelected > .blocklyPath {
  stroke: #fc3 !important;
  stroke-width: 0.6px !important;
}

/* 폴백 알림 스타일 (12.3.0 compatible) */
.blockly-fallback-notice {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #ffeaa7;
  color: #2d3436;
  padding: 4px 8px;
  border-radius: 3px; /* 12.3.0 둥근 모서리 */
  font-size: 11px;
  z-index: 1000;
  border: 1px solid #fdcb6e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 12.3.0 그림자 */
}

/* Full height 보장 (12.3.0 기준) */
.blocklyDiv {
  position: relative !important;
  height: 100% !important;
}

/* Mutator 기어 아이콘 스타일 - 12.3.0 지원 */
.blocklyIconGroup {
  fill: #666 !important;
  cursor: pointer !important;
}

.blocklyIconGroup:hover {
  fill: #000 !important;
}

.blocklyIconSymbol {
  fill: inherit !important;
}

/* Mutator 다이얼로그 스타일 */
.blocklyMutatorBackground {
  fill: #fff !important;
  stroke: #ddd !important;
  stroke-width: 1px !important;
}

.blocklyMutatorRoot {
  background: #f9f9f9 !important;
}

/* 텍스트/letter-spacing 관련 규칙은 부트 로더에서 관리 */

/* Blockly 드롭다운 메뉴 스타일링 개선 */
.blocklyDropDownDiv {
  z-index: 1000 !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.blocklyDropDownDiv .goog-menuitem {
  background-color: #ffffff !important;
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  padding: 4px 8px !important;
  color: #1f2937 !important;
  border: none !important;
}

.blocklyDropDownDiv .goog-menuitem-highlight {
  background-color: #e5f2ff !important;
  color: #1f2937 !important;
}

.blocklyDropDownDiv .goog-menuitem:hover {
  background-color: #f0f9ff !important;
  color: #1f2937 !important;
}

/* 드롭다운 화살표 배경 개선 */
.blocklyFieldDropdown {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  padding: 2px 6px 2px 4px !important;
  margin: 0 4px 0 2px !important;
  box-sizing: border-box !important;
}

/* 드롭다운 화살표 스타일 */
.blocklyFieldDropdown .blocklyDropdownArrow {
  fill: #6b7280 !important;
  stroke: none !important;
}

.blocklyFieldDropdown:hover .blocklyDropdownArrow {
  fill: #374151 !important;
}

/* Blockly Field 텍스트 정렬 개선 */
.blocklyText {
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11pt !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  fill: #1f2937 !important;
}

/* 🔧 FIX: 캔버스 블록 텍스트 색상 강제 적용 (인라인 속성 오버라이드) */
/* Blockly가 인라인으로 fill 속성을 설정하므로 더 구체적인 선택자 필요 */
/* SVG 요소의 인라인 fill 속성을 CSS로 오버라이드 */
.blocklyMainWorkspace .blocklyText,
.blocklyMainWorkspace text.blocklyText,
.blocklyMainWorkspace g.blocklyEditableText > text,
.blocklyMainWorkspace g.blocklyNonEditableText > text,
.blocklyMainWorkspace .blocklyDraggable text,
.blocklyMainWorkspace text[fill],
svg.blocklySvg .blocklyMainWorkspace text {
  fill: #000000 !important;
}

/* 툴박스는 이미 정상 작동하므로 유지 */
.blocklyFlyout .blocklyText,
.blocklyToolboxDiv .blocklyText {
  fill: #000000 !important;
}

/* 🔧 추가: 모든 blockly SVG text 요소에 대한 최종 안전장치 */
#blocklyDiv svg text,
#blocklyDiv text {
  fill: #000000 !important;
}

/* 🔧 필수 조건 경고 아이콘 (빨간색 *) - 노멀 모드와 동일한 스타일 */
.blocklyValidationWarning,
.blocklyMainWorkspace .blocklyValidationWarning,
#blocklyDiv .blocklyValidationWarning {
  fill: #EF4444 !important;
}

/* 🔧 FIX: 블록 너비 자동 조절 허용 (너비 제약 제거) */
.blocklyDraggable,
.blocklyBlockCanvas,
.blocklyBlockCanvas .blocklyPath {
  min-width: auto !important;
  max-width: none !important;
}

/* 블록이 내용에 맞게 자동으로 크기 조절되도록 허용 */
.blocklyDraggable > g {
  min-width: 0 !important;
}

/* Blockly Field 레이블과 Input 간격 조정 */
.blocklyField {
  vertical-align: baseline !important;
}

/* 특정 End Condition 필드 정렬 */
.blocklyFieldTextInput {
  vertical-align: baseline !important;
}

/* =======================================================
   Clickable Button Fields (FieldLabel-based buttons)
   - Blockly v12.3.0 compatible button styling
   - Used for AddFunction block selection buttons
   ======================================================= */

/* 기본 버튼 필드 스타일 */
text.blockly-button-field {
  cursor: pointer !important;
  fill: #3b82f6 !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  transition: fill 0.15s ease !important;
}

/* 호버 상태 */
text.blockly-button-field:hover {
  fill: #2563eb !important;
}

/* 기본값 경고 상태 */
text.blockly-button-field.blockly-danger {
  fill: #ef4444 !important;
}

text.blockly-button-field.blockly-danger:hover {
  fill: #dc2626 !important;
}

/* 제거 버튼 특별 스타일 */
text.blockly-remove-button {
  fill: #ef4444 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

text.blockly-remove-button:hover {
  fill: #dc2626 !important;
}

/* 버튼 필드 비활성화 상태 (필요시) */
text.blockly-button-field.disabled {
  cursor: not-allowed !important;
  fill: #9ca3af !important;
  opacity: 0.6 !important;
}

/* 버튼 필드를 포함하는 블록의 선택 박스 스타일 개선 */
.blocklySelected text.blockly-button-field {
  fill: #60a5fa !important;
}

.blocklySelected text.blockly-remove-button {
  fill: #f87171 !important;
}

/* =======================================================
   Icon Button Fields (FieldIconButton)
   - Custom icon + text button field for file selection
   - Matches Razor component design (Figma)
   ======================================================= */

/* Icon Button Container */
.blockly-icon-button-field {
  cursor: pointer !important;
}

/* Icon Button Background - Default State */
.blockly-icon-button-bg {
  fill: white !important;
  stroke: #d1d5db !important; /* Gray-40 equivalent */
  stroke-width: 1 !important;
  cursor: pointer !important;
  transition: fill 0.15s ease !important;
}

.blockly-icon-button-bg:hover {
  fill: #f9fafb !important; /* Gray-5 equivalent */
}

/* Icon Button Background - Danger State (no pattern selected) */
.blockly-icon-button-bg.danger {
  fill: white !important;
  stroke: #fca5a5 !important; /* Red-300 equivalent */
  stroke-width: 1 !important;
}

.blockly-icon-button-bg.danger:hover {
  fill: #fef2f2 !important; /* Red-50 equivalent */
}

/* Icon Button Icon */
.blockly-icon-button-icon {
  pointer-events: none !important; /* Click passes through to button */
}

/* Icon Button Text - Default State */
.blockly-icon-button-text {
  fill: #1f2937 !important; /* Gray-95 equivalent */
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  cursor: pointer !important;
  pointer-events: none !important; /* Click passes through to button */
}

/* Icon Button Text - Danger State */
.blockly-icon-button-text.danger {
  fill: #ef4444 !important; /* System-Danger-50 equivalent */
}

/* Icon Button - Selected Block State */
.blocklySelected .blockly-icon-button-bg {
  stroke-width: 1.5 !important; /* Slightly thicker border when block is selected */
}

.blocklySelected .blockly-icon-button-bg:hover {
  fill: #eff6ff !important; /* Slightly blue tint when selected */
}