/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* 動畫定義 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.95);
  }
}

/* 主題系統 - 力林綠主題 */
.theme-powerforest-green {
  --main-bg-color: #1a472a;
  --main-text-color: #ffffff;
  --title-text-color: #1a472a;
  --navigator-bg: #e8f5e8;
  --navigator-text: #333333;
  --data-bg: #f0f8ff;
  --data-text: #333333;
  --toolbox-bg: #fff3e0;
  --toolbox-text: #333333;
  --block-a-bg: #f3e5f5;
  --block-a-text: #333333;
  --block-b-bg: #e0f2f1;
  --block-b-text: #333333;
  --border-color: #cccccc;
  --outer-border-color: #ffffff;
  --tab-bg: #f8f9fa;
  --tab-active-bg: #bbdefb;
  --tab-inactive-bg: #d4edda;
  --button-bg: #1a472a;
  --button-text: #ffffff;
  --button-hover-bg: #4caf50;
  --button-active-bg: #0f2e1f;
  --toolbox-item-bg: #e0e0e0;
  --toolbox-item-hover-bg: #d0d0d0;
  --toolbox-category-bg: #d0d0d0;
  --toolbox-category-text: #1f2937;
  --toolbox-category-bg-gradient: linear-gradient(
    135deg,
    #f3f4f6 0%,
    #e5e7eb 100%
  );
  --toolbox-category-border: #d1d5db;
  --toolbox-block-label: #6b7280;
  --toolbox-block-text: #374151;
  --grid-row-even: #ffffff;
  --grid-row-odd: #f9fafb;
  --grid-header: #f3f4f6;
  --grid-selected: #dbeafe;
  --grid-border: #e5e7eb;
  --page-button-bg: #f8f9fa;
  --page-button-text: #333333;
  --page-button-border: #dee2e6;
  --textarea-text-color: #333333;
  --modal-bg: #ffffff;
  --modal-text: #333333;
  --modal-border: #93c5fd;
  --modal-header-border: #e5e7eb;
  --modal-description-text: #6b7280;
  --modal-header-bg: #ffffff;
  --modal-header-text: #374151;
  --modal-button-cancel-bg: #f3f4f6;
  --modal-button-cancel-border: #e5e7eb;
  --modal-button-cancel-text: #333333;
  --modal-button-purple-bg: #8b5cf6;
  --modal-button-purple-border: #7c3aed;
  --modal-button-purple-text: #ffffff;
}

/* 主題系統 - 白色主題 */
.theme-white {
  --main-bg-color: #ffffff;
  --main-text-color: #333333;
  --title-text-color: #333333;
  --navigator-bg: #f8f9fa;
  --navigator-text: #333333;
  --data-bg: #ffffff;
  --data-text: #333333;
  --toolbox-bg: #f8f9fa;
  --toolbox-text: #333333;
  --block-a-bg: #ffffff;
  --block-a-text: #333333;
  --block-b-bg: #f8f9fa;
  --block-b-text: #333333;
  --border-color: #dee2e6;
  --outer-border-color: #e9ecef;
  --tab-bg: #ffffff;
  --tab-active-bg: #007bff;
  --tab-inactive-bg: #e9ecef;
  --button-bg: #007bff;
  --button-text: #ffffff;
  --button-hover-bg: #0056b3;
  --button-active-bg: #004085;
  --toolbox-item-bg: #ffffff;
  --toolbox-item-hover-bg: #e9ecef;
  --toolbox-category-bg: #f8f9fa;
  --toolbox-category-text: #1f2937;
  --toolbox-category-bg-gradient: linear-gradient(
    135deg,
    #f3f4f6 0%,
    #e5e7eb 100%
  );
  --toolbox-category-border: #d1d5db;
  --toolbox-block-label: #6b7280;
  --toolbox-block-text: #374151;
  --grid-row-even: #ffffff;
  --grid-row-odd: #f9fafb;
  --grid-header: #f3f4f6;
  --grid-selected: #dbeafe;
  --grid-border: #e5e7eb;
  --page-button-bg: #f8f9fa;
  --page-button-text: #333333;
  --page-button-border: #dee2e6;
  --textarea-text-color: #333333;
  --modal-bg: #ffffff;
  --modal-text: #333333;
  --modal-border: #93c5fd;
  --modal-header-border: #e5e7eb;
  --modal-description-text: #6b7280;
  --modal-header-bg: #ffffff;
  --modal-header-text: #374151;
  --modal-button-cancel-bg: #f3f4f6;
  --modal-button-cancel-border: #e5e7eb;
  --modal-button-cancel-text: #333333;
  --modal-button-purple-bg: #8b5cf6;
  --modal-button-purple-border: #7c3aed;
  --modal-button-purple-text: #ffffff;
}

/* 預設主題（力林綠） */
body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-size: 13px; /* 全域預設字體大小 */
}

/* ===== Styles moved from welcome/index.html.erb ===== */
.main-wrapper {
  width: 90vw;
  max-width: 1600px;
  min-width: 320px;
  margin: 0 auto;
  margin-bottom: 300px;
}

#datagrid {
  width: 100%;
  min-height: 300px;
  margin-bottom: 20px;
}

body {
  background-color: var(--main-bg-color);
  font-family: sans-serif;
  color: var(--main-text-color);
}

h1 {
  font-weight: normal;
  font-size: 140%;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-top: 2em;
  margin-bottom: 2em;
  align-items: stretch;
  gap: 1em;
}

.container.top-row {
  height: calc((100vh - 15em) / 2); /* 調整為視窗高度的一半 */
  min-height: 300px;
  max-height: calc((100vh - 15em) / 2);
}

/* 第2列（AI 互動區）的高度設定 */
.container:not(.top-row) {
  min-height: 500px;
  max-height: calc(100vh - 40em);
}

.container.bottom-row {
  margin-top: 4em;
}

.container.bottom-row > .block-section.column {
  flex: 1;
}

.block-section.column,
.block-section.code-area,
.blockly-area-outer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  justify-content: stretch;
}

.blockly-area {
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.block-section {
  background: var(--navigator-bg);
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  padding: 1em;
  margin: 1em;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  box-sizing: border-box;
}

.block-header-with-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 2.6em;
  margin-bottom: 6px;
}

.block-header-with-btn h3 {
  margin: 0;
  font-size: 13px;
  font-weight: bold;
  line-height: 2.6em;
  margin-right: auto;
  color: var(--title-text-color);
}

.block-header-with-btn button {
  margin-left: 16px;
  height: 2.2em;
  font-size: 1em;
  padding: 0 18px;
}

.block-section.column textarea {
  flex: 1 1 0;
  min-height: 300px;
  margin-bottom: 0;
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  background-color: var(--tab-bg);
  color: var(--textarea-text-color);
  border: 1px solid var(--border-color);
}

.block-section.column {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

#blocklyDiv {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  /* 顯示工作區捲軸 */
  overflow: auto;
  /* 防止自動捲動行為 */
  scroll-behavior: auto;
  /* 設定積木工作區字體大小 */
  font-size: 13px;
}

/* 顯示工作區捲軸 */
#blocklyDiv .blocklyScrollbarVertical,
#blocklyDiv .blocklyScrollbarHorizontal,
#blocklyDiv .blocklyScrollbarVertical .blocklyScrollbarHandle,
#blocklyDiv .blocklyScrollbarHorizontal .blocklyScrollbarHandle,
#blocklyDiv .blocklyScrollbarVertical .blocklyScrollbarBackground,
#blocklyDiv .blocklyScrollbarHorizontal .blocklyScrollbarBackground {
  display: block !important;
}

/* 確保 Blockly 工作區 SVG 也能顯示捲軸 */
#blocklyDiv .blocklyWorkspace {
  overflow: visible !important;
}

#blocklyDiv .blocklyMainBackground {
  overflow: visible !important;
}

/* 允許顯示 Blockly 工作區捲軸（如需再次隱藏，改為 display:none） */

.block-section.column > #blocklyDiv {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: auto;
}

/* Code area panels: light background and vertical scrolling */
.code-area pre {
  background-color: var(--tab-bg);
  color: var(--textarea-text-color);
  overflow-y: auto;
}

/* Hide Blockly toolbox/flyout (and its scrollbars) when container marks toolbox-hidden */
#blocklyDiv.toolbox-hidden .blocklyToolboxDiv,
#blocklyDiv.toolbox-hidden .blocklyFlyout,
#blocklyDiv.toolbox-hidden .blocklyFlyoutBackground,
#blocklyDiv.toolbox-hidden .blocklyFlyoutScrollbar,
#blocklyDiv.toolbox-hidden .blocklyScrollbarVertical,
#blocklyDiv.toolbox-hidden .blocklyScrollbarHorizontal {
  display: none !important;
}

/* 當 toolbox 隱藏時，強制隱藏所有相關的捲軸 */
#blocklyDiv.toolbox-hidden .blocklyScrollbarVertical,
#blocklyDiv.toolbox-hidden .blocklyScrollbarHorizontal,
#blocklyDiv.toolbox-hidden .blocklyScrollbarVertical .blocklyScrollbarHandle,
#blocklyDiv.toolbox-hidden .blocklyScrollbarHorizontal .blocklyScrollbarHandle,
#blocklyDiv.toolbox-hidden
  .blocklyScrollbarVertical
  .blocklyScrollbarBackground,
#blocklyDiv.toolbox-hidden
  .blocklyScrollbarHorizontal
  .blocklyScrollbarBackground {
  display: none !important;
}

/* Always hide toolbox/flyout scrollbars (keep content; just remove the bars) */
#blocklyDiv .blocklyToolboxDiv .blocklyScrollbarVertical,
#blocklyDiv .blocklyToolboxDiv .blocklyScrollbarHorizontal,
#blocklyDiv
  .blocklyToolboxDiv
  .blocklyScrollbarVertical
  .blocklyScrollbarHandle,
#blocklyDiv
  .blocklyToolboxDiv
  .blocklyScrollbarHorizontal
  .blocklyScrollbarHandle,
#blocklyDiv
  .blocklyToolboxDiv
  .blocklyScrollbarVertical
  .blocklyScrollbarBackground,
#blocklyDiv
  .blocklyToolboxDiv
  .blocklyScrollbarHorizontal
  .blocklyScrollbarBackground,
#blocklyDiv .blocklyFlyout .blocklyScrollbarVertical,
#blocklyDiv .blocklyFlyout .blocklyScrollbarHorizontal,
#blocklyDiv .blocklyFlyout .blocklyScrollbarVertical .blocklyScrollbarHandle,
#blocklyDiv .blocklyFlyout .blocklyScrollbarHorizontal .blocklyScrollbarHandle,
#blocklyDiv
  .blocklyFlyout
  .blocklyScrollbarVertical
  .blocklyScrollbarBackground,
#blocklyDiv
  .blocklyFlyout
  .blocklyScrollbarHorizontal
  .blocklyScrollbarBackground,
#blocklyDiv .blocklyFlyout .blocklyFlyoutScrollbar,
#blocklyDiv
  .blocklyFlyout
  .blocklyFlyoutScrollbar
  .blocklyFlyoutScrollbarHandle,
#blocklyDiv
  .blocklyFlyout
  .blocklyFlyoutScrollbar
  .blocklyFlyoutScrollbarBackground {
  display: none !important;
}

/* 防止 Blockly 輸入欄位 focus 時自動捲動 */
#blocklyDiv input,
#blocklyDiv textarea,
#blocklyDiv .blocklyTextInput {
  scroll-margin: 0 !important;
  scroll-padding: 0 !important;
}

/* Blockly 積木文字大小設定 */
#blocklyDiv .blocklyText,
#blocklyDiv .blocklyEditableText,
#blocklyDiv .blocklyNonEditableText,
#blocklyDiv .blocklyFieldTextInput,
#blocklyDiv .blocklyFieldDropdown,
#blocklyDiv .blocklyFieldNumber,
#blocklyDiv .blocklyFieldCheckbox,
#blocklyDiv .blocklyFieldVariable,
#blocklyDiv .blocklyFieldAngle,
#blocklyDiv .blocklyFieldColour,
#blocklyDiv .blocklyFieldDate {
  font-size: 13px !important;
}

/* Blockly 積木標籤文字 */
#blocklyDiv .blocklyTreeLabel {
  font-size: 13px !important;
}

/* Blockly 工具箱文字 */
#blocklyDiv .blocklyToolboxDiv .blocklyTreeLabel {
  font-size: 13px !important;
}

/* 防止 Blockly SVG 元素 focus 時自動捲動 */
#blocklyDiv path,
#blocklyDiv rect,
#blocklyDiv text,
#blocklyDiv g,
#blocklyDiv svg {
  scroll-margin: 0 !important;
  scroll-padding: 0 !important;
  scroll-behavior: auto !important;
}

/* 防止 Blockly SVG 元素獲得焦點時觸發 scrollIntoView */
#blocklyDiv *:focus {
  scroll-margin: 0 !important;
  scroll-padding: 0 !important;
}

/* 防止整個頁面在 focus 時自動捲動 */
html {
  scroll-behavior: auto !important;
}

body {
  scroll-behavior: auto !important;
}

/* Code tab textareas: fill remaining height and disable resize */
.block-section.code-area .mt-4 {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.block-section.code-area [data-controller="tabs"] {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.block-section.code-area [role="tabpanel"] {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.block-section.code-area [role="tabpanel"] textarea {
  flex: 1 1 0;
  min-height: 0;
  resize: none;
  width: 100%;
}

.fit-text-btn {
  width: 100%;
  margin: 6px 0;
  box-sizing: border-box;
  font-size: 1em;
  height: 3.4em;
  background-color: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--button-bg);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.fit-text-btn:hover {
  background-color: var(--button-hover-bg);
  border-color: var(--button-bg);
}
.fit-text-btn:active {
  background-color: var(--button-active-bg);
  border-color: var(--button-active-bg);
}
.fit-text-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
}

/* Full-width large button variant (same size as .fit-text-btn, different color) */
.fit-text-btn-alt {
  width: 100%;
  margin: 6px 0;
  box-sizing: border-box;
  font-size: 1em;
  height: 3.4em;
  background-color: #d97706; /* amber-600：設定/次要主動作（互補於藍） */
  color: #fff;
  border: 1px solid #b45309; /* amber-700 */
  border-radius: 8px;
  cursor: pointer;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.fit-text-btn-alt:hover {
  background-color: #b45309;
  border-color: #92400e;
}
.fit-text-btn-alt:active {
  background-color: #92400e;
  border-color: #78350f;
}
.fit-text-btn-alt:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.35);
}

/* Primary buttons for headers (Save / Open / Load) */
.btn-primary {
  background-color: #2563eb; /* blue-600 */
  color: #fff;
  border: 1px solid #1d4ed8; /* blue-700 */
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* Secondary (新增空白列) */
.btn-secondary {
  background-color: #16a34a; /* green-600：新增/確認 */
  color: #fff;
  border: 1px solid #15803d; /* green-700 */
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
.btn-secondary:hover {
  background-color: #15803d;
  border-color: #166534;
}
.btn-secondary:active {
  background-color: #166534;
  border-color: #14532d;
}
.btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.35);
}

/* Danger (刪除選取列) */
.btn-danger {
  background-color: #dc2626; /* red-600：刪除 */
  color: #fff;
  border: 1px solid #b91c1c; /* red-700 */
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #991b1b;
}
.btn-danger:active {
  background-color: #991b1b;
  border-color: #7f1d1d;
}
.btn-danger:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35);
}

/* Utility（編輯、設定等中性操作） */
.btn-utility {
  background-color: #475569; /* slate-600 */
  color: #fff;
  border: 1px solid #334155; /* slate-700 */
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
.btn-utility:hover {
  background-color: #334155;
  border-color: #1f2937;
}
.btn-utility:active {
  background-color: #1f2937;
  border-color: #0f172a;
}
.btn-utility:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.35);
}
.btn-primary:hover {
  background-color: #1d4ed8; /* blue-700 */
  border-color: #1e40af; /* blue-800 */
}
.btn-primary:active {
  background-color: #1e40af; /* blue-800 */
  border-color: #1e3a8a; /* blue-900 */
}
.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

.info-text-block {
  margin: 3em 1em 0em;
  width: auto;
  background-color: #eff6ff; /* blue-50 */
  padding: 1em 1.2em 1em 1.4em;
  box-sizing: border-box;
  clear: both;
  gap: 1em;
  border-radius: 8px;
  border: 1px solid #93c5fd; /* blue-300 */
  box-shadow: 0 2px 8px 0 #e0e6ed;
  color: #1f2937; /* gray-800 */
  position: relative;
  overflow: hidden;
}

.info-text-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #3b82f6; /* blue-500 */
}

.info-text-block a {
  color: #2563eb;
  text-decoration: underline;
}
.info-text-block strong,
.info-text-block b {
  color: #1e40af; /* blue-800 */
}
.info-text-block code {
  background: rgba(30, 64, 175, 0.08);
  color: #1e3a8a;
  padding: 0.05em 0.35em;
  border-radius: 4px;
}

.NavigatorBlock {
  width: 300px;
  flex: 0 0 300px;
  height: 400px;
  padding: 1em;
  margin: 1em;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}

.NavigatorBlock label {
  width: auto;
  flex-shrink: 1;
  margin: 0;
  padding: 0;
}

.DataBlock {
  flex: 1 1 0;
}

/* 工具箱樣式 */
.toolbox-container {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5em;
  background-color: var(--toolbox-bg);
  border-radius: 6px;
  border: 2px solid var(--border-color);
}

.toolbox-container xml {
  display: block;
}

.toolbox-container .blocklyToolboxDiv {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.toolbox-container .blocklyFlyout {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.toolbox-container .blocklyFlyoutBackground {
  display: none !important;
}

.toolbox-container .blocklyScrollbarVertical,
.toolbox-container .blocklyScrollbarHorizontal {
  display: none !important;
}

/* 工具箱中的分類樣式 */
.toolbox-container .blocklyTreeRoot {
  padding: 0;
  margin: 0;
}

.toolbox-container .blocklyTreeRow {
  padding: 8px 12px;
  margin: 2px 0;
  border-radius: 4px;
  background-color: var(--toolbox-item-bg);
  color: var(--toolbox-text);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.toolbox-container .blocklyTreeRow:hover {
  background-color: var(--toolbox-item-hover-bg);
  color: var(--toolbox-text);
  border-color: var(--border-color);
  border-width: 2px;
  transform: translateX(2px);
}

.toolbox-container .blocklyTreeRow.blocklyTreeSelected {
  background-color: #3b82f6;
  color: #fff;
  border-color: #2563eb;
}

.toolbox-container .blocklyTreeIcon {
  margin-right: 8px;
}

.toolbox-container .blocklyTreeLabel {
  font-size: 13px;
  font-weight: 500;
}

/* 工具箱積木樣式 */
.toolbox-block {
  padding: 16px 10px;
  margin: 6px 0;
  background-color: var(--toolbox-category-bg);
  color: var(--toolbox-text);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: grab;
  transition: all 0.2s ease;
  user-select: none;
  text-align: center;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.toolbox-block:hover {
  background-color: var(--toolbox-category-bg);
  color: var(--toolbox-text);
  border-color: var(--border-color);
  border-width: 2px;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.toolbox-block:active {
  cursor: grabbing;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 積木圖示樣式 */
.toolbox-block svg {
  width: auto; /* 預設寬度 */
  max-width: 80%; /* 上限 80% 按鈕寬度 */
  height: auto; /* 等比縮放 */
  max-height: 36px; /* 高度上限 */
  overflow: visible; /* 避免被裁切 */
  display: block;
  margin: 0 auto;
}

/* 積木標籤樣式 */
.toolbox-block-label {
  font-size: 13px;
  color: var(--toolbox-block-label);
  margin-top: 8px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}

/* 積木文字備用樣式 */
.toolbox-block-text {
  font-size: 13px;
  color: var(--toolbox-block-text);
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

/* 分類標題樣式 */
.toolbox-container category {
  display: block;
  margin-bottom: 1.5em;
}

.toolbox-container category[name]::before {
  content: attr(name);
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--toolbox-category-text);
  margin-bottom: 1em;
  padding: 10px 16px;
  background: var(--toolbox-category-bg-gradient);
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--toolbox-category-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* DataGridXL styles removed (migrated to AG Grid) */

/* === AG Grid: Zebra rows + alternating column tint === */
#grid-host .ag-row-even .ag-cell {
  background-color: var(--grid-row-even);
}
#grid-host .ag-row-odd .ag-cell {
  background-color: var(--grid-row-odd);
}

/* 移除隔欄變色（保留列斑馬紋） */
/* 標題底色（移除隔欄變色） */
#grid-host .ag-header-cell {
  background-color: var(--grid-header);
}

/* === AG Grid: 選取列高亮 === */
#grid-host .ag-row.ag-row-selected .ag-cell {
  background-color: var(--grid-selected) !important; /* blue-100 */
  background-image: none !important;
}

/* === AG Grid: Focus cell 邊框 === */
#grid-host .ag-cell.ag-cell-focus {
  border: 2px solid #3b82f6 !important; /* blue-500 */
  border-radius: 2px !important;
}

/* Subtle vertical separators */
#grid-host .ag-cell,
#grid-host .ag-header-cell {
  border-right: 1px solid var(--grid-border);
}
#grid-host .ag-header-cell:last-child,
#grid-host .ag-row .ag-cell:last-child {
  border-right: none;
}

/* （移除客製分隔線設定，改用通用規則） */

/* 移除 AG Grid header 之間的「|」分隔（resize handle 或 pseudo-element）*/
#grid-host .ag-header-cell-resize {
  display: none !important;
}
#grid-host .ag-header-cell::after {
  content: none !important;
}

/* AG Grid 文字過長以省略號呈現（配合 AG Grid tooltip 顯示完整內容） */
#grid-host .ag-ellipsis {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* AG Grid 文字顏色覆蓋 */
#grid-host .ag-header-cell,
#grid-host .ag-cell,
#grid-host .ag-header-cell-text,
#grid-host .ag-cell-value,
#grid-host .ag-cell-wrapper,
#grid-host .ag-cell *,
#grid-host .ag-header-cell *,
#grid-host .ag-cell input,
#grid-host .ag-cell select,
#grid-host .ag-cell textarea,
#grid-host .ag-cell button,
#grid-host .ag-cell span,
#grid-host .ag-cell div,
#grid-host .ag-cell label {
  color: #333333 !important;
}

/* Modal 中的 AG Grid 文字顏色 */
#ft-reg-modal #grid-host .ag-header-cell,
#ft-reg-modal #grid-host .ag-cell,
#ft-reg-modal #grid-host .ag-header-cell-text,
#ft-reg-modal #grid-host .ag-cell-value,
#ft-reg-modal #grid-host .ag-cell-wrapper,
#ft-reg-modal #grid-host .ag-cell *,
#ft-reg-modal #grid-host .ag-header-cell *,
#ft-reg-modal #grid-host .ag-cell input,
#ft-reg-modal #grid-host .ag-cell select,
#ft-reg-modal #grid-host .ag-cell textarea,
#ft-reg-modal #grid-host .ag-cell button,
#ft-reg-modal #grid-host .ag-cell span,
#ft-reg-modal #grid-host .ag-cell div,
#ft-reg-modal #grid-host .ag-cell label {
  color: #333333 !important;
}

/* AG Grid 動態生成的內容文字顏色 */
.ag-theme-quartz .ag-cell,
.ag-theme-quartz .ag-header-cell,
.ag-theme-quartz .ag-cell *,
.ag-theme-quartz .ag-header-cell *,
.ag-theme-quartz input,
.ag-theme-quartz select,
.ag-theme-quartz textarea,
.ag-theme-quartz button,
.ag-theme-quartz span,
.ag-theme-quartz div,
.ag-theme-quartz label {
  color: #333333 !important;
}

/* Modal 中所有文字強制使用深色（排除按鈕） */
#ft-reg-modal *,
#ft-reg-modal * * {
  color: #333333 !important;
}

/* 排除按鈕文字，讓按鈕保持原色 */
#ft-reg-modal button,
#ft-reg-modal button * {
  color: inherit !important;
}

/* Modal 中特定元素的文字顏色覆蓋 */
#ft-reg-modal h3,
#ft-reg-modal button,
#ft-reg-modal input,
#ft-reg-modal select,
#ft-reg-modal textarea,
#ft-reg-modal div,
#ft-reg-modal span,
#ft-reg-modal label {
  color: #333333 !important;
}

/* Modal 中按鈕文字保持原色（白色按鈕上的文字） */
#ft-reg-modal button[style*="background: var(--modal-button-purple-bg)"],
#ft-reg-modal button[style*="background: var(--modal-button-purple-bg)"] *,
#ft-reg-modal .btn-primary,
#ft-reg-modal .btn-primary *,
#ft-reg-modal #ft-reg-add,
#ft-reg-modal #ft-reg-add *,
#ft-reg-modal #ft-reg-ok,
#ft-reg-modal #ft-reg-ok * {
  color: #ffffff !important;
}

/* 被禁用的 checkbox 樣式 */
#ft-reg-modal input[type="checkbox"]:disabled,
#ft-reg-modal input[type="checkbox"]:disabled + label,
#ft-reg-modal input[type="checkbox"][disabled],
#ft-reg-modal input[type="checkbox"][disabled] + label {
  opacity: 0.5 !important;
  background-color: #cccccc !important;
  border-color: #999999 !important;
}

/* AG-Grid 中被禁用的 checkbox */
.ag-theme-quartz input[type="checkbox"]:disabled,
.ag-theme-quartz input[type="checkbox"][disabled],
#grid-host input[type="checkbox"]:disabled,
#grid-host input[type="checkbox"][disabled] {
  opacity: 0.5 !important;
  background-color: #cccccc !important;
  border-color: #999999 !important;
  color: #666666 !important;
}

/* 被禁用的 checkbox 容器背景 */
#ft-reg-modal .checkbox-disabled,
#ft-reg-modal .disabled-checkbox,
.ag-theme-quartz .checkbox-disabled,
.ag-theme-quartz .disabled-checkbox,
#grid-host .checkbox-disabled,
#grid-host .disabled-checkbox {
  background-color: #f0f0f0 !important;
  border: 1px solid #d0d0d0 !important;
}

/* 針對 Modal 中 FT REG Grid 的參數 Bits 和暫存器 Bits 欄位 */
#ft-reg-modal .ft-reg-row > div:nth-child(3),
#ft-reg-modal .ft-reg-row > div:nth-child(8),
#ft-reg-modal .ft-reg-group > div:nth-child(3),
#ft-reg-modal .ft-reg-group > div:nth-child(8) {
  background-color: #e8e8e8 !important;
}

/* 針對這些欄位內的所有元素 */
#ft-reg-modal .ft-reg-row > div:nth-child(3) *,
#ft-reg-modal .ft-reg-row > div:nth-child(8) *,
#ft-reg-modal .ft-reg-group > div:nth-child(3) *,
#ft-reg-modal .ft-reg-group > div:nth-child(8) * {
  background-color: #e8e8e8 !important;
}

/* Modal 中參數 Bits 和暫存器 Bits header 的底色 */
#ft-reg-modal #ft-reg-header > div:nth-child(3),
#ft-reg-modal #ft-reg-header > div:nth-child(8) {
  background-color: #e8e8e8 !important;
}

/* 針對 checkbox 本身的背景 */
#ft-reg-modal .ft-reg-row > div:nth-child(3) input[type="checkbox"],
#ft-reg-modal .ft-reg-row > div:nth-child(8) input[type="checkbox"],
#ft-reg-modal .ft-reg-group > div:nth-child(3) input[type="checkbox"],
#ft-reg-modal .ft-reg-group > div:nth-child(8) input[type="checkbox"] {
  background-color: #d8d8d8 !important;
}

/* 針對 Modal 中所有 checkbox 容器 */
#ft-reg-modal .checkbox-container,
#ft-reg-modal .bits-container {
  background-color: #e8e8e8 !important;
  padding: 4px !important;
  border-radius: 4px !important;
}

/* 在 Quartz 主題下，cell 內容為 flex 佈局，需要讓內容允許縮小 */
#grid-host .ag-ellipsis .ag-cell-wrapper,
#grid-host .ag-ellipsis .ag-cell-value {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block;
}

/* 調試：印出是否套用 ellipsis 類別（僅在 DevTools 可見，無視覺影響）*/
/*
#grid-host .ag-ellipsis { outline: 0; }
*/

/* Blockly 積木文字大小設定 */
#blocklyDiv .blocklyText,
#blocklyDiv .blocklyEditableText,
#blocklyDiv .blocklyNonEditableText,
#blocklyDiv .blocklyFieldTextInput,
#blocklyDiv .blocklyFieldDropdown,
#blocklyDiv .blocklyFieldNumber,
#blocklyDiv .blocklyFieldCheckbox,
#blocklyDiv .blocklyFieldVariable,
#blocklyDiv .blocklyFieldAngle,
#blocklyDiv .blocklyFieldColour,
#blocklyDiv .blocklyFieldDate {
  font-size: 13px !important;
}

/* Blockly 積木標籤文字 */
#blocklyDiv .blocklyTreeLabel {
  font-size: 13px !important;
}

/* Blockly 工具箱文字 */
#blocklyDiv .blocklyToolboxDiv .blocklyTreeLabel {
  font-size: 13px !important;
}

/* Blockly 輸入欄位統一樣式 */
/* 數字輸入欄位 */
.toolbox-container .blocklyNumberField rect {
  fill: transparent !important; /* 透明背景 */
  stroke: #b0b0b0 !important; /* 更深的灰色邊框 */
  stroke-width: 1 !important; /* 邊框寬度 */
  rx: 4 !important; /* 圓角 */
  ry: 4 !important; /* 圓角 */
}

/* Checkbox 輸入欄位 */
.blocklyCheckboxField rect {
  fill: transparent !important; /* 透明背景 */
  stroke: #b0b0b0 !important; /* 更深的灰色邊框 */
  stroke-width: 1 !important; /* 邊框寬度 */
  rx: 4 !important; /* 圓角 */
  ry: 4 !important; /* 圓角 */
}

/* 工具箱中的文字輸入欄位 */
.toolbox-container .blocklyFieldTextInput > rect,
.toolbox-container .blocklyEditableField > rect,
.toolbox-container .blocklyNonEditableField > rect {
  fill: transparent !important; /* 透明背景 */
  stroke: #b0b0b0 !important; /* 更深的灰色邊框 */
  stroke-width: 1 !important; /* 邊框寬度 */
  rx: 4 !important; /* 圓角 */
  ry: 4 !important; /* 圓角 */
}

/* 更強的選擇器，針對所有可能的工具箱文字輸入欄位 */
.blocklyFlyout .blocklyEditableField > rect,
.blocklyFlyout .blocklyNonEditableField > rect,
.blocklyFlyoutBackground .blocklyEditableField > rect,
.blocklyFlyoutBackground .blocklyNonEditableField > rect {
  fill: transparent !important; /* 透明背景 */
  stroke: #b0b0b0 !important; /* 更深的灰色邊框 */
  stroke-width: 1 !important; /* 邊框寬度 */
  rx: 4 !important; /* 圓角 */
  ry: 4 !important; /* 圓角 */
}

/* 覆蓋 Blockly 預設的 padding - 只針對工具箱中的元素 */
.toolbox-container .blocklyEditableField,
.toolbox-container .blocklyNonEditableField,
.blocklyFlyout .blocklyEditableField,
.blocklyFlyout .blocklyNonEditableField,
.blocklyFlyoutBackground .blocklyEditableField,
.blocklyFlyoutBackground .blocklyNonEditableField {
  padding: 0 !important; /* 移除預設的 padding */
}

/* 針對文字輸入欄位的特殊處理 - 只針對工具箱中的元素 */
.toolbox-container .blocklyFieldTextInput,
.blocklyFlyout .blocklyFieldTextInput,
.blocklyFlyoutBackground .blocklyFieldTextInput {
  padding: 0 !important; /* 移除預設的 padding */
}

/* Function Group 選單的 optgroup 樣式 */
#functionGroupFilter optgroup {
  font-weight: bold;
  color: var(--title-text-color);
  background-color: var(--tab-bg);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-color);
}

#functionGroupFilter optgroup option {
  font-weight: normal;
  color: var(--main-text-color);
  background-color: var(--main-bg-color);
  padding: 6px 16px;
  margin-left: 8px;
}

#functionGroupFilter optgroup option:hover {
  background-color: var(--button-hover-bg);
  color: var(--button-text);
}

/* 深色主題的 optgroup 樣式 */
.theme-powerforest-green #functionGroupFilter optgroup {
  color: var(--title-text-color);
  background-color: var(--tab-bg);
}

.theme-powerforest-green #functionGroupFilter optgroup option {
  color: var(--main-text-color);
  background-color: var(--main-bg-color);
}

.theme-powerforest-green #functionGroupFilter optgroup option:hover {
  background-color: var(--button-hover-bg);
  color: var(--button-text);
}

/* 編輯模式保留藍色邊框，但確保粗細一致 */
.ag-cell-inline-editing {
  border: 1px solid #3b82f6 !important; /* 使用明確的藍色 */
  border-radius: var(--ag-card-radius) !important;
  box-shadow: var(--ag-card-shadow) !important;
  outline: none !important;
}

/* 確保編輯模式下的 focus-within 狀態也有藍色邊框 */
.ag-cell-inline-editing:focus-within {
  border: 1px solid #3b82f6 !important; /* 使用明確的藍色 */
  outline: none !important;
}

/* 編輯模式下的輸入框沒有額外邊框 */
.ag-cell-inline-editing .ag-cell-editor input,
.ag-cell-inline-editing .ag-cell-editor textarea {
  border: none !important;
  outline: none !important;
}

/* 移除所有 focus 狀態的黑邊框 */
.ag-cell-focus,
.ag-cell-focus:not(.ag-cell-range-selected):focus-within,
.ag-cell-focus:not(.ag-cell-range-selected),
.ag-cell-range-single-cell,
.ag-row-selected,
.ag-row-focus {
  border: none !important;
  outline: none !important;
}

/* 移除所有方向性的 focus 邊框 */
.ag-ltr .ag-cell-focus,
.ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
.ag-ltr .ag-context-menu-open .ag-cell-focus,
.ag-ltr .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected),
.ag-ltr .ag-cell-range-single-cell,
.ag-ltr .ag-cell-range-single-cell.ag-cell-range-handle,
.ag-rtl .ag-cell-focus,
.ag-rtl .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
.ag-rtl .ag-context-menu-open .ag-cell-focus,
.ag-rtl .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected),
.ag-rtl .ag-cell-range-single-cell,
.ag-rtl .ag-cell-range-single-cell.ag-cell-range-handle {
  border: none !important;
  outline: none !important;
}

/* 移除選中行的邊框 */
.ag-row-selected::before,
.ag-row-selected::after {
  border: none !important;
}

/* 移除範圍選擇的邊框 */
.ag-cell-range-selected {
  border: none !important;
  outline: none !important;
}

/* 移除所有可能的邊框殘留 */
.ag-cell {
  border: none !important;
  outline: none !important;
}

/* 現代化階層選單樣式 */
#functionGroupFilter {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

#functionGroupFilter:hover {
  border-color: #3b82f6;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1);
}

#functionGroupFilter:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 選單選項樣式 */
#functionGroupFilter option {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 12px;
  margin: 2px 0;
  border-radius: 4px;
  transition: all 0.15s ease;
}

/* 主分類樣式 */
#functionGroupFilter option[style*="color: #1e40af"] {
  font-weight: 600 !important;
  color: #1e40af !important;
  background-color: #f8fafc;
  border-left: 3px solid #3b82f6;
  margin-left: 4px;
}

/* 子分類樣式 */
#functionGroupFilter option[style*="color: #6b7280"] {
  font-weight: 400 !important;
  color: #6b7280 !important;
  background-color: #ffffff;
  border-left: 3px solid #e5e7eb;
  margin-left: 8px;
}

/* 懸停效果 */
#functionGroupFilter option:hover {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  transform: translateX(2px);
}

/* All 選項特殊樣式 */
#functionGroupFilter option[value="all"] {
  font-weight: 600;
  color: #1f2937;
  background-color: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 4px;
}

#functionGroupFilter option[value="all"]:hover {
  background-color: #e5e7eb !important;
  color: #111827 !important;
}

/* AG-Grid 強制顯示隔線 */
.ag-theme-quartz .ag-cell {
  border-right: 1px solid var(--ag-secondary-border-color) !important;
}

.ag-theme-quartz .ag-header-cell {
  border-right: 1px solid var(--ag-secondary-border-color) !important;
}

/* AG-Grid 調整大小控制 */
.ag-theme-quartz .ag-header-cell-resize {
  display: block !important;
  width: 4px !important;
  background-color: var(--ag-secondary-border-color) !important;
  cursor: col-resize !important;
}

.ag-theme-quartz .ag-header-cell-resize:hover {
  background-color: var(--ag-active-color) !important;
}

/* AG-Grid 多行儲存格樣式 */
.ag-theme-quartz .ag-cell {
  white-space: normal !important;
  word-break: break-word !important;
}

/* 保留 function_description 和 output_delay 欄位的換行符號 */
.ag-theme-quartz .ag-cell[col-id="function_description"],
.ag-theme-quartz .ag-cell[col-id="output_delay_rising_falling"],
.ag-theme-quartz .ag-row .ag-cell[col-id="function_description"],
.ag-theme-quartz .ag-row .ag-cell[col-id="output_delay_rising_falling"] {
  line-height: 1.4 !important;  /* 調整行高，減少多餘空白 */
  padding-top: 6px !important;  /* 減少上邊距 */
  padding-bottom: 6px !important;  /* 減少下邊距 */
}

/* function_description 欄位啟用橫向捲軸，行高自動調整 */
.ag-theme-quartz .ag-cell[col-id="function_description"],
.ag-theme-quartz .ag-row .ag-cell[col-id="function_description"] {
  overflow: hidden !important;  /* cell 本身隱藏溢出，由內部 wrapper 處理捲軸 */
  word-break: normal !important;  /* 不強制斷字 */
  white-space: normal !important;  /* 覆蓋全局規則 */
  position: relative !important;  /* 確保定位正常 */
}

/* 確保 cell-wrapper 支援橫向捲軸 - 這是顯示捲軸的關鍵層級 */
.ag-theme-quartz .ag-cell[col-id="function_description"] .ag-cell-wrapper,
.ag-theme-quartz .ag-row .ag-cell[col-id="function_description"] .ag-cell-wrapper {
  align-items: flex-start !important;
  height: auto !important;
  overflow-x: auto !important;  /* 啟用橫向捲軸 */
  overflow-y: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  display: block !important;  /* 確保 wrapper 為 block 元素 */
  /* 確保可以顯示捲軸 */
  -webkit-overflow-scrolling: touch !important;  /* iOS 平滑滾動 */
  scrollbar-width: thin !important;  /* Firefox 細捲軸 */
}

/* 確保 cell-value 可以超出寬度並觸發橫向捲軸 */
.ag-theme-quartz .ag-cell[col-id="function_description"] .ag-cell-value,
.ag-theme-quartz .ag-row .ag-cell[col-id="function_description"] .ag-cell-value {
  white-space: pre !important;  /* 保留換行符號但不自動換行 */
  display: inline-block !important;
  min-width: min-content !important;  /* 允許內容決定最小寬度 */
  width: max-content !important;  /* 根據內容寬度，超出父元素時會觸發捲軸 */
  word-break: keep-all !important;  /* 保持單詞完整 */
  overflow: visible !important;  /* 允許內容超出 */
  box-sizing: content-box !important;  /* 確保寬度計算包含內容 */
}

/* output_delay 欄位保持原樣（pre-wrap） */
.ag-theme-quartz .ag-cell[col-id="output_delay_rising_falling"],
.ag-theme-quartz .ag-row .ag-cell[col-id="output_delay_rising_falling"] {
  white-space: pre-wrap !important;
}

/* 減少 function_description 欄位的 cell-wrapper 內距 */
.ag-theme-quartz .ag-cell[col-id="function_description"] .ag-cell-wrapper {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  align-items: flex-start !important;  /* 文字頂部對齊，減少垂直空間 */
  /* 確保 overflow 設定不被覆蓋 */
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.ag-theme-quartz .ag-cell[col-id="output_delay_rising_falling"] .ag-cell-wrapper {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  align-items: flex-start !important;  /* 文字頂部對齊，減少垂直空間 */
}

/* function_description 欄位的 tooltip 樣式 - 使用與儲存格相同的斷行處理 */
.ag-theme-quartz .ag-tooltip {
  white-space: pre !important;  /* 保留換行符號但不自動換行 */
  max-width: 500px !important;
  word-break: keep-all !important;  /* 保持單詞完整 */
  overflow-x: auto !important;  /* 啟用橫向捲軸 */
  overflow-y: auto !important;  /* 啟用縱向捲軸（當內容有多行時） */
  max-height: 300px !important;  /* 限制最大高度 */
  -webkit-overflow-scrolling: touch !important;  /* iOS 平滑滾動 */
  scrollbar-width: thin !important;  /* Firefox 細捲軸 */
}

/* Modal 按鈕樣式 */
#modal-save-btn:hover {
  background-color: #1d4ed8 !important;
}

#modal-cancel-btn:hover {
  background-color: var(--border-color) !important;
}

/* Modal 背景點擊關閉 */
#text-editor-modal {
  cursor: pointer;
}

#text-editor-modal > div {
  cursor: default;
}