/**
 * 管理組合 Modal v2 - 品牌橘色系設計
 * 繼承 full_screen_modal_base.css
 *
 * 使用 .fsm-* 共用類別 + .em-* 特化類別
 */

/* 引入共用框架基礎樣式 */
@import url('./full_screen_modal_base.css');

/* =====================================================
   editor_modal 特化變數
   ===================================================== */

:root {
    /* 三欄佈局調整 */
    --em-column-left-width: 280px;
    --em-column-right-width: 340px;
}

/* =====================================================
   特化：三欄佈局覆蓋
   ===================================================== */

#editorModalV2 .fsm-columns-container {
    grid-template-columns: var(--em-column-left-width) 1fr var(--em-column-right-width);
}

/* =====================================================
   特化：左欄（組合清單）
   ===================================================== */

#editorModalV2 .fsm-column--left .fsm-list-item {
    padding: 12px 16px;
}

#editorModalV2 .fsm-column--left .fsm-list-item-icon {
    margin-right: 10px;
    color: var(--fsm-text-muted);
    font-size: 14px;
}

#editorModalV2 .fsm-column--left .fsm-list-item.active .fsm-list-item-icon {
    color: var(--fsm-primary);
}

/* =====================================================
   特化：中欄（組合內容）
   ===================================================== */

#editorModalV2 .fsm-column--center .fsm-table tbody tr {
    cursor: pointer;
}

#editorModalV2 .fsm-column--center .fsm-table tbody tr.selected {
    background: var(--fsm-primary-light);
    border-left: 3px solid var(--fsm-primary);
}

#editorModalV2 .fsm-column--center .fsm-table tbody tr.newly-added {
    animation: emHighlightFade 4s ease-out forwards;
}

@keyframes emHighlightFade {
    0% {
        background: linear-gradient(90deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.15));
        border-left: 3px solid #22C55E;
    }
    100% {
        background: transparent;
        border-left: 3px solid transparent;
    }
}

/* 序號欄位 */
#editorModalV2 .fsm-table td:first-child {
    width: 50px;
    text-align: center;
    color: var(--fsm-text-muted);
    font-weight: 500;
}

/* 代碼欄位 */
#editorModalV2 .fsm-table td:nth-child(2) {
    width: 80px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 600;
    color: var(--fsm-primary);
}

/* =====================================================
   特化：右欄（查詢股票）
   ===================================================== */

/* 樹狀視圖固定高度 */
#editorModalV2 .fsm-column--right .fsm-tree-view {
    max-height: 200px;
    border-bottom: 1px solid var(--fsm-border);
}

/* 查詢表格容器 */
#editorModalV2 #editorLookupContainer {
    flex: 1;
    min-height: 150px;
}

/* 查詢表格選中狀態 */
#editorModalV2 #editorLookupTable tbody tr.selected {
    background: var(--fsm-primary-light);
}

#editorModalV2 #editorLookupTable tbody tr {
    cursor: pointer;
}

/* =====================================================
   特化：樹狀視圖市場/產業層級
   ===================================================== */

.em-tree-market {
    font-weight: 600;
    color: var(--fsm-text);
}

.em-tree-market .fsm-tree-node-icon {
    color: var(--fsm-primary);
}

.em-tree-industry {
    font-weight: 400;
}

.em-tree-industry .fsm-tree-node-icon {
    color: var(--fsm-text-muted);
}

.em-tree-industry.active {
    background: var(--fsm-primary-light);
}

.em-tree-industry.active .fsm-tree-node-label {
    color: var(--fsm-primary);
    font-weight: 500;
}

/* =====================================================
   特化：工具列按鈕狀態
   ===================================================== */

#editorModalV2 .fsm-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#editorModalV2 .fsm-action-btn[data-action="save-order"] {
    min-width: 80px;
}

#editorModalV2 .fsm-action-btn[data-action="save-order"].has-changes {
    background: var(--fsm-primary);
    color: white;
    border-color: var(--fsm-primary);
    animation: emPulse 1.5s infinite;
}

@keyframes emPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--fsm-primary-light);
    }
    50% {
        box-shadow: 0 0 0 8px transparent;
    }
}

/* =====================================================
   特化：名稱編輯器
   ===================================================== */

#editorModalV2 .fsm-name-editor {
    max-width: 300px;
}

#editorModalV2 .fsm-name-input {
    font-size: 14px;
}

#editorModalV2 .fsm-name-input.modified {
    border-color: var(--fsm-primary);
    background: var(--fsm-primary-lighter);
}

/* =====================================================
   特化：響應式調整
   ===================================================== */

@media (max-width: 1200px) {
    #editorModalV2 .fsm-columns-container {
        grid-template-columns: 240px 1fr 300px;
    }
}

@media (max-width: 1024px) {
    #editorModalV2 .fsm-columns-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
    }

    #editorModalV2 .fsm-column--left {
        grid-row: 1;
    }

    #editorModalV2 .fsm-column--center {
        grid-row: 1;
    }

    #editorModalV2 .fsm-column--right {
        grid-column: 1 / -1;
        max-height: 280px;
    }

    #editorModalV2 .fsm-column--right .fsm-tree-view {
        max-height: 120px;
    }
}

@media (max-width: 768px) {
    #editorModalV2 .fsm-columns-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    #editorModalV2 .fsm-column {
        max-height: 250px;
    }

    #editorModalV2 .fsm-toolbar--actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    #editorModalV2 .fsm-action-btn {
        font-size: 12px;
        padding: 4px 8px;
    }

    #editorModalV2 .fsm-name-editor {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
    }

    #editorModalV2 .fsm-column-header {
        flex-wrap: wrap;
    }
}

/* =====================================================
   特化：載入狀態
   ===================================================== */

#editorModalV2 .em-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 251, 245, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

#editorModalV2 .em-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--fsm-border-solid);
    border-top-color: var(--fsm-primary);
    border-radius: 50%;
    animation: emSpin 0.8s linear infinite;
}

@keyframes emSpin {
    to {
        transform: rotate(360deg);
    }
}

/* =====================================================
   特化：確認對話框
   ===================================================== */

#editorModalV2 .em-confirm-message {
    font-size: 14px;
    color: var(--fsm-text);
    margin-bottom: 16px;
}

#editorModalV2 .em-confirm-warning {
    font-size: 13px;
    color: var(--color-danger);
    background: var(--color-danger-subtle);
    padding: 12px;
    border-radius: var(--fsm-radius-sm);
    margin-bottom: 16px;
}

#editorModalV2 .em-confirm-warning i {
    margin-right: 8px;
}