/* FormulaBuilder 組件樣式 - 重構版本 */

/* 工具箱樣式 */
.clickable-toolbox-item {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clickable-toolbox-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.clickable-toolbox-item.selected {
    border: 2px solid #ff9800;
    transform: scale(1.05);
}

.clickable-toolbox-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.clickable-toolbox-item.selected {
    animation: selectedPulse 1.5s infinite;
    border: 2px solid #1976d2;
    box-shadow: 0 0 10px rgba(25, 118, 210, 0.5);
}

@@keyframes selectedPulse {
    0% {
        box-shadow: 0 0 10px rgba(25, 118, 210, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 20px rgba(25, 118, 210, 0.8);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 10px rgba(25, 118, 210, 0.5);
        transform: scale(1);
    }
}

/* 畫布樣式 */
.formula-tree-canvas {
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-lines-default) !important;
}

    .formula-tree-canvas:hover {
        border-color: #1976d2 !important;
        background-color: rgba(25, 118, 210, 0.05) !important;
    }

/* 樹狀結構佈局 - 解決重疊問題 */
.formula-tree-root {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 200px;
    padding: 20px;
}

.formula-tree-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 8px;
    position: relative;
    z-index: 1; /* 基礎層級 */
}

/* 運算子容器 - 改善自適應佈局 */
.operator-container {
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 16px 12px 12px 12px; /* 頂部增加間距避免標籤重疊 */
    margin: 12px 8px; /* 增加垂直間距 */
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 200px; /* 減少最小寬度，讓內容控制 */
    width: auto; /* 讓寬度自適應內容 */
    max-width: none; /* 移除最大寬度限制 */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2; /* 容器層級 */
    box-sizing: border-box;
}

/* 函數容器 - 相同的改善 */
.function-container {
    border: 2px solid #4facfe;
    border-radius: 12px;
    padding: 16px 12px 12px 12px; /* 頂部增加間距 */
    margin: 12px 8px; /* 增加垂直間距 */
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.2);
    min-width: 180px; /* 減少最小寬度 */
    width: auto; /* 讓寬度自適應內容 */
    max-width: none; /* 移除最大寬度限制 */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2; /* 容器層級 */
    box-sizing: border-box;
}

/* 運算子插槽 - 自適應內容大小避免重疊 */
.operator-slots {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px; /* 增加間距 */
    width: 100%;
    flex-wrap: wrap;
    margin-top: 8px; /* 增加頂部間距 */
}

.operator-slot,
.function-parameters .operator-slot {
    flex: 0 0 auto; /* 不拉伸，讓內容決定大小 */
    min-height: 60px; /* 減少最小高度，讓內容控制 */
    min-width: 80px; /* 減少最小寬度 */
    width: auto; /* 讓寬度自適應內容 */
    height: auto; /* 讓高度自適應內容 */
    padding: 12px; /* 保持內邊距 */
    border: 2px dashed #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
    cursor: pointer;
    z-index: 1; /* 插槽基礎層級 */
    box-sizing: border-box; /* 確保 padding 和 border 計算在內 */
}

    /* 當插槽填滿時，移除大小限制讓內容完全控制 */
    .operator-slot.filled,
    .function-parameters .operator-slot.filled {
        border-style: solid;
        border-color: #4caf50;
        background-color: var(--mud-palette-surface) !important;
        color: var(--mud-palette-text-primary) !important;
        cursor: default;
        min-height: auto; /* 移除最小高度限制 */
        min-width: auto; /* 租除最小寬度限制 */
        width: auto; /* 完全自適應內容寬度 */
        height: auto; /* 完全自適應內容高度 */
        padding: 8px; /* 減少內邊距給內容更多空間 */
    }

    /* 空插槽的內容樣式 */
    .operator-slot .slot-content {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

/* 函數參數插槽 - 同樣的自適應處理 */
.function-parameters .operator-slot {
    width: 100%; /* 函數參數寬度填滿容器 */
    max-width: none; /* 移除最大寬度限制 */
    margin: 4px 0; /* 垂直間距 */
}

    .function-parameters .operator-slot.filled {
        width: auto; /* 填滿時讓內容控制寬度 */
        max-width: 100%; /* 但不要超過容器寬度 */
    }

/* 數值元素 */
.value-element {
    padding: 10px 18px; /* 增加內邊距 */
    border-radius: 8px;
    /* 不設 background-color，讓 inline style (element.Color) 決定 */
    color: var(--mud-palette-text-primary) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
    min-width: 90px; /* 增加最小寬度 */
    position: relative;
    z-index: 1; /* 基礎層級 */
}

    .value-element:hover {
        transform: scale(1.08); /* 稍微縮小變形 */
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 3; /* hover 時提升層級 */
    }

/* 空畫布 */
.empty-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
}

/* 移除按鈕 - 改善位置避免重疊 */
.remove-button {
    position: absolute;
    top: -12px; /* 移到更上方 */
    right: -12px; /* 移到更右邊 */
    width: 28px; /* 稍微增大 */
    height: 28px;
    border-radius: 50%;
    background-color: #f44336;
    color: white;
    border: 2px solid white; /* 增加白色邊框提升視覺層級 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 3px 8px rgba(244, 67, 54, 0.4); /* 增強陰影 */
    transition: all 0.2s ease;
    z-index: 10; /* 最高層級，避免被覆蓋 */
}

    .remove-button:hover {
        background-color: #d32f2f;
        transform: scale(1.15); /* 稍微增大hover效果 */
        box-shadow: 0 4px 12px rgba(244, 67, 54, 0.6);
    }

/* 插槽標籤樣式 */
.slot-label {
    position: absolute;
    top: -16px;
    left: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-surface);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ddd;
    z-index: 5;
    white-space: nowrap;
}

.operator-slot.filled .slot-label,
.function-parameters .operator-slot.filled .slot-label {
    border-color: #4caf50;
    color: var(--mud-palette-success);
}

.operator-slot.clickable .slot-label {
    border-color: #1976d2;
    color: var(--mud-palette-primary);
    background-color: rgba(25, 118, 210, 0.1);
}

/* Round 函數插槽特殊樣式 */
.round-slot-decimal {
    background-color: #e8f5e8 !important;
    border-color: #4caf50 !important;
}

.round-slot-rounding {
    background-color: #f3e5f5 !important;
    border-color: #9c27b0 !important;
}

/* 函數頭部樣式 */
.function-header {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(79, 172, 254, 0.3);
}

.operator-header {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 響應式設計 */
@@media (max-width: 768px) {
    .operator-slots {
        flex-direction: column;
        align-items: center;
        gap: 16px; /* 移動設備上增加間距 */
    }

    .operator-slot {
        width: 100%;
        max-width: none;
        min-height: 80px; /* 移動設備上稍微縮小 */
    }

    .operator-container,
    .function-container {
        min-width: auto;
        width: 100%;
        max-width: 320px; /* 稍微增加最大寬度 */
        margin: 8px 4px; /* 減少移動設備間距 */
    }

    .slot-label {
        top: -14px; /* 移動設備上調整位置 */
        left: 8px;
        font-size: 11px;
    }

    .remove-button {
        top: -10px;
        right: -10px;
        width: 24px;
        height: 24px;
    }
}

/* 防止元素選取影響佈局 */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 可編輯的文字輸入框除外 */
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Loader 樣式 - 全螢幕中央旋轉 */
.loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background: var(--mud-palette-background);
}