/* PapaRadar Components Module - UI組件模組 */
/* 包含：按鈕、表格、表單、圖表、控制面板、模態框等組件樣式 */

/* ===== 按鈕組件系統 ===== */

/* 基礎按鈕樣式 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    min-height: 36px;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* 按鈕變體 */
.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--primary-bg);
    border-color: var(--btn-primary-bg);
}

.btn-primary:hover:not(:disabled) {
    background: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--text-primary);
    border-color: var(--glass-border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--btn-secondary-hover);
    border-color: var(--accent-color);
}

.btn-danger {
    background: var(--btn-danger-bg);
    color: var(--text-primary);
    border-color: var(--btn-danger-bg);
}

.btn-danger:hover:not(:disabled) {
    background: var(--btn-danger-hover);
    border-color: var(--btn-danger-hover);
    transform: translateY(-1px);
}

.btn-success {
    background: var(--btn-success-bg);
    color: var(--primary-bg);
    border-color: var(--btn-success-bg);
}

.btn-success:hover:not(:disabled) {
    background: var(--btn-success-hover);
    border-color: var(--btn-success-hover);
    transform: translateY(-1px);
}

/* 按鈕大小 */
.btn-sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    min-height: 28px;
}

.btn-lg {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-base);
    min-height: 44px;
}

/* 圓形按鈕 */
.btn-circle {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

/* ===== 控制面板組件 - 簡化折疊設計 ===== */

/* 控制面板折疊按鈕列 */
.controls-toggle-bar {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-sm);
}

.controls-toggle-btn {
    background: linear-gradient(135deg, var(--accent-color) 0%, #4f46e5 100%);
    border: none;
    color: var(--primary-bg);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.controls-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.toggle-icon {
    font-size: 1em;
    transition: transform var(--transition-normal);
}

.controls-toggle-btn.collapsed .toggle-icon {
    transform: rotate(180deg);
}

/* 控制面板容器 */
.controls-container {
    background: var(--accent-bg);
    border-radius: var(--radius-md);
    padding: var(--space-xs);
    /* 從 var(--space-md) 縮小到 var(--space-xs) */
    margin-bottom: var(--space-xs);
    /* 從 var(--space-md) 縮小到 var(--space-xs) */
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
    overflow: visible;
    /* 確保內容完整顯示 */
    /* 移除固定高度限制，讓內容自然展開 */
}

/* 收合狀態 */
.controls-container.collapsed {
    height: 0;
    padding: 0;
    margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
    /* 收合時才隱藏溢出 */
    transform: scaleY(0);
    transform-origin: top;
}

/* K線圖容器 - 關鍵修正 */
.chart-container {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
    /* 讓動態高度計算系統控制高度 */
    flex: 1;
    min-height: 400px;
    /* 保持最小高度 */
    height: auto;
    /* 由 JavaScript 動態設定 */
}

/* chartContainer 內的 kbarContainer_review 應該填滿父容器 */
#chartContainer #kbarContainer_review {
    width: 100% !important;
    height: 100% !important;
    /* 將由 JavaScript 動態調整 */
}

/* Tab1 使用 flexbox 布局 - 移除固定高度，讓動態計算接管 */
#tab1.active {
    display: flex;
    flex-direction: column;
    /* height: calc(100vh - 120px); 註解掉，使用動態計算 */
    min-height: calc(100vh - 120px);
    /* 保持最小高度 */
    padding: var(--space-sm);
}

/* Tab2 (OP Table) 也使用 flexbox 布局以填滿高度 */
#tab2.active {
    display: flex;
    flex-direction: column;
    /* height: calc(100vh - 120px); 註解掉，使用動態計算 */
    min-height: calc(100vh - 120px);
    /* 保持最小高度 */
    padding: var(--space-sm);
}

#tab2.active .op-table-container {
    flex-grow: 1;
    /* 讓表格容器填滿剩餘空間 */
    min-height: 0;
    /* flexbox 縮放修正 */
    /* 高度將由 JavaScript 動態設定 */
    overflow-y: auto;
    /* 超過高度時顯示滾動條 */
    overflow-x: auto;
    /* 水平滾動支援 */
}

/* 收合狀態下，chart-container 獲得更多空間 */
.controls-container.collapsed+.chart-container {
    /* flex: 1 會自動填滿所有可用空間 */
}

/* 基本控制區域 - 專業卡片風格 */
.basic-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.2),
        0 2px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.basic-controls::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--success-color) 0%, var(--accent-color) 50%, var(--success-color) 100%);
}

/* 日期和週期控制 */
.date-period-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.date-control-group,
.period-control-group,
.time-axis-control,
.price-axis-control,
.people-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 確保內容居中對齊 */
    gap: var(--space-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    backdrop-filter: blur(5px);
    transition: all var(--transition-normal);
}

.date-control-group:hover,
.period-control-group:hover,
.time-axis-control:hover,
.price-axis-control:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-1px);
}

.people-controls:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--success-color);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
    transform: translateY(-1px);
}

.date-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 2px;
    /* 從 var(--space-xs) 縮小到 2px，與統一標準一致 */
    /* 限制高度與其他控制項一致 */
    height: 28px;
    box-sizing: border-box;
}

/* 控制標籤美化 */
.control-label {
    font-size: var(--text-xs);
    color: var(--accent-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
    text-align: center;
    /* 確保文字居中 */
    width: 100%;
    /* 確保標籤占滿寬度以便居中 */
    position: relative;
    /* 為偽元素定位 */
}

/* 為 control-label 添加短下底線 */
.control-label::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    /* 縮短下底線長度為標籤寬度的60% */
    height: 1px;
    background: var(--accent-color);
    opacity: 0.6;
    /* 降低透明度讓線條更柔和 */
}

/* 修正 people-controls 中 control-label 的垂直對齊問題 */
.people-controls .control-label {
    margin-bottom: var(--space-xs) !important;
    /* 確保與其他控制項相同的下邊距 */
    align-self: center;
    /* 確保在容器中居中 */
    /* 確保與其他 control-label 完全一致 */
    line-height: 1.2;
    padding: 0;
    margin-top: 0 !important;
}

/* 修正 people-controls 的對齊問題 - 基於實際測量結果 */
.people-controls {
    /* 統一與其他控制項的高度和對齊 */
    padding: var(--space-sm) !important;
    /* 確保與其他控制項相同的 padding */
    gap: var(--space-sm) !important;
    /* 確保與其他控制項相同的 gap */
    /* 修正容器高度差異 */
    box-sizing: border-box !important;
    min-height: auto !important;
}

/* 日期顯示 */
.date-display {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 50px;
    text-align: center;
    font-size: var(--text-sm);
}

/* 導航按鈕 */
.date-nav-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
}

.date-nav-btn:hover {
    background: var(--accent-color);
    color: var(--primary-bg);
    border-color: var(--accent-color);
    transform: scale(1.1);
}

/* 週期選擇 - 智能響應式 */
.period-buttons {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.period-select {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--text-sm);
    font-weight: 600;
    width: 100%;
    backdrop-filter: blur(5px);
    display: none;
    /* 預設隱藏 */
}

.period-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
}

/* 響應式顯示控制 */
.desktop-only {
    display: flex;
}

.mobile-only {
    display: none;
}

.period-btn {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--text-sm);
    font-weight: 600;
    min-width: 40px;
    position: relative;
    overflow: hidden;
}

.period-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.period-btn:hover::before {
    left: 100%;
}

.period-btn.active {
    background: linear-gradient(135deg, var(--accent-color) 0%, #4f46e5 100%);
    color: var(--primary-bg);
    border-color: var(--accent-color);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
}

.period-btn:hover:not(.active) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

/* 軸控制區域 - 透明布局容器 */
.axis-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    /* 移除背景和邊框，讓內部控制組與其他控制組處於同一視覺層次 */
}

/* 軸控制按鈕容器 */
.axis-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    justify-content: center;
}

.axis-btn {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--text-sm);
    font-weight: 600;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.axis-btn:hover {
    background: linear-gradient(135deg, var(--accent-color) 0%, #4f46e5 100%);
    color: var(--primary-bg);
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* 人員切換按鈕 - 單一按鈕設計 */
.people-toggle-btn {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--text-sm);
    font-weight: 600;
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
}

.people-toggle-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.people-toggle-btn:hover::before {
    left: 100%;
}

.people-toggle-btn.papa-active {
    background: linear-gradient(135deg, var(--success-color) 0%, #10b981 100%);
    color: var(--primary-bg);
    border-color: var(--success-color);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.people-toggle-btn.john-active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: var(--primary-bg);
    border-color: #f59e0b;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.people-toggle-btn:hover:not(.papa-active):not(.john-active) {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
    border-color: var(--success-color);
    color: var(--success-color);
    transform: translateY(-1px);
}

/* 舊版按鈕組（保留用於桌面版） */
.people-buttons {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* 確保按鈕垂直居中 */
}

.people-btn {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--text-sm);
    font-weight: 600;
    position: relative;
    overflow: hidden;
    /* 確保與 axis-btn 相同的高度（compact-layout.css 設定 axis-btn 為 28px） */
    height: 28px;
    min-height: 28px;
}

.people-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.people-btn:hover::before {
    left: 100%;
}

.people-btn.active {
    background: linear-gradient(135deg, var(--success-color) 0%, #10b981 100%);
    color: var(--primary-bg);
    border-color: var(--success-color);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
    transform: translateY(-1px);
}

.people-btn:hover:not(.active) {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
    border-color: var(--success-color);
    color: var(--success-color);
    transform: translateY(-1px);
}

/* ===== 模式控制區域 ===== */

/* 主要模式控制容器 */
.mode-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin: var(--space-lg) 0;
}

/* 模式區塊容器 */
.mode-sections-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: flex-start;
    /* 頂部對齊 */
}

/* 單個模式區塊 - 自適應寬度 */
.mode-section {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
    flex: 0 1 auto;
    /* 允許擴展以填充可用空間 */
    min-width: fit-content;
    /* 最小寬度適應內容 */
    max-width: 100%;
    /* 不超過父容器 */
}

.mode-section-title {
    font-size: var(--text-sm);
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    /* 為偽元素定位 */
}

/* 為 mode-section-title 添加短下底線 */
/*.mode-section-title::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    width: 60%; !* 縮短下底線長度為標題寬度的60% *!*/
/*    height: 2px; !* 保持原有的2px厚度 *!*/
/*    background: var(--accent-color);*/
/*    opacity: 0.6; !* 降低透明度讓線條更柔和 *!*/
/*}*/

/* 模式按鈕行 */
.mode-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* 自訂功能區塊 - 預設為橫向 flexbox 排列 */
.custom-controls {
    display: flex;
    flex-wrap: nowrap;
    /* 桌面版不換行，使用滾動 */
    gap: 0;
    /* 移除間距 */
    justify-content: flex-start;
    /* 改為左對齊 */
    overflow-x: auto;
    /* 允許橫向滾動 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Firefox 顯示細滾動條 */
    padding: 0;
    /* 移除內邊距 */
}

/* 自訂功能組 - 統一定義（合併原本分散的多處定義） */
.custom-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 讓按鈕和輸入框並排，而不是佔滿整行 */
    gap: 0;
    /* 移除內部間距 */
    padding: 0;
    /* 移除內邊距 */
    background: transparent;
    /* 移除背景 */
    border: none;
    /* 移除邊框 */
    border-radius: 0;
    transition: var(--transition-fast);
    flex: 1 1 auto;
    /* 自動調整，不強制固定比例 */
    min-width: 200px;
    /* 最小寬度 */
    flex-wrap: nowrap;
    /* 電腦版內部元素不換行 */
    min-height: auto;
    height: auto;
}

/* 確保按鈕不會被拉伸 */
.custom-group .mode-btn,
.custom-group .search-btn {
    flex: 0 0 auto;
    /* 按鈕保持原始大小，不擴展 */
}

/* admin 版本：通過 body class 控制佈局 */
.admin-user .custom-group,
body[data-user-role="admin"] .custom-group {
    flex: 1 1 auto;
    min-width: 200px;
}

/* 模式按鈕美化 */
.mode-btn {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all var(--transition-normal);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.mode-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.mode-btn:hover::before {
    left: 100%;
}

.mode-btn.active {
    background: linear-gradient(135deg, var(--accent-color) 0%, #4f46e5 100%);
    color: var(--primary-bg);
    border-color: var(--accent-color);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
}

.mode-btn:hover:not(.active) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* 現代化輸入框設計 */
.custom-input,
.custom-input-small {
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    color: var(--input-text);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: 'Courier New', monospace;
    font-weight: 500;
    transition: all var(--transition-normal);
    position: relative;
}

.custom-input:focus,
.custom-input-small:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.custom-input::placeholder,
.custom-input-small::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}

.custom-input {
    flex: 1;
    min-width: 150px;
}

.custom-input-small {
    width: 80px;
    text-align: center;
}

/* 自訂選擇器美化 */
.custom-select {
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    color: var(--input-text);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    /* 確保選擇框寬度合適 */
    flex: 0 0 auto;
    min-width: 60px;
    max-width: 80px;
}

.custom-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* 搜尋按鈕 */
.search-btn {
    background: linear-gradient(135deg, var(--success-color) 0%, #10b981 100%);
    border: none;
    color: white;
    padding: var(--space-sm) var(--space-md);
    /* 減少 padding，從 space-lg 改為 space-md */
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all var(--transition-normal);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    /* 確保搜尋按鈕寬度合適，不會過大 */
    flex: 0 0 auto;
    /* 不擴展，保持內容寬度 */
    white-space: nowrap;
    /* 防止按鈕文字換行 */
    min-width: auto;
    /* 重置最小寬度 */
    width: auto;
    /* 確保寬度自適應內容 */
}

/* 電腦版搜尋按鈕寬度控制 - 使用更具體的選擇器確保優先級 */
@media screen and (min-width: 768px) {
    .custom-group .search-btn {
        width: auto !important;
        /* 電腦版強制使用 auto 寬度 */
        flex: 0 0 auto !important;
    }
}

/* 自訂功能面板：所有角色都適用寬度約束 - 覆蓋全局的 min-width: 200px */
#customFeaturesPanel .custom-group {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    /* 關鍵：允許寬度自動縮小以適應父容器 */
}

#customFeaturesPanel .search-btn {
    flex: 0 0 auto;
}

.search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.search-btn:active {
    transform: translateY(0);
}

/* 美化圖標和分隔符 */
.section-icon {
    font-size: 1.1em;
    margin-right: var(--space-xs);
}

.btn-icon {
    font-size: 0.9em;
    margin-right: var(--space-xs);
}

.input-separator {
    color: var(--accent-color);
    font-weight: bold;
    padding: 0 var(--space-xs);
    font-size: 0.9em;
}

/* 專業看盤軟體樣式 */
.mode-section {
    position: relative;
    overflow: hidden;
}

.mode-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-color) 0%, transparent 100%);
}

/* 按鈕群組動畫 */
.mode-buttons-row {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 自訂輸入框焦點效果 */
.custom-input:focus,
.custom-input-small:focus,
.custom-select:focus {
    background: rgba(99, 102, 241, 0.05);
    border-color: var(--accent-color);
    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.1),
        0 2px 8px rgba(99, 102, 241, 0.15);
}

/* ===== 左側資料組塊美化 ===== */

/* 資料組塊 */
.data-group {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.data-group:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 20px rgba(99, 102, 241, 0.1);
    transform: translateY(-1px);
}

.data-group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-color) 0%, transparent 50%, var(--success-color) 100%);
    opacity: 0.6;
}

.data-group-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: var(--space-xs);
}

.data-group-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-color) 0%, transparent 100%);
}

/* Grafana 框架容器美化 */
.power-frames-container {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
}

.power-frame-wrapper {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.power-frame {
    border-radius: var(--radius-sm);
}

/* 股票容器美化 */
.stocks-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.stock-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.stock-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.stock-name {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    font-weight: 600;
}

.stock-value,
.stock-CDF {
    font-size: var(--text-sm);
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

/* ===== 表單組件 ===== */
.form-group {
    margin-bottom: var(--space-md);
}

.form-label {
    display: block;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-xs);
}

.form-input,
.date-input {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    width: 100%;
    transition: var(--transition-fast);
}

.form-input:focus,
.date-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
}

.form-input::placeholder {
    color: var(--input-placeholder);
}

/* 日期顯示控制 */
.date-display {
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-family: 'Courier New', monospace;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    user-select: none;
    white-space: nowrap;
    text-align: center;
    min-width: 50px;
    flex: 1;
}

.date-display:hover {
    border-color: var(--accent-color);
    background: rgba(0, 212, 255, 0.1);
}

/* ===== 表格組件 ===== */
.table-container {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.fancytable,
.fancytable_sub,
.fancytable_gap {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.fancytable tr,
.fancytable_sub tr,
.fancytable_gap tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-fast);
}

.fancytable tr:last-child,
.fancytable_sub tr:last-child,
.fancytable_gap tr:last-child {
    border-bottom: none;
}

.fancytable tr:hover,
.fancytable_sub tr:hover,
.fancytable_gap tr:hover {
    background: var(--table-row-hover);
}

.header-cell {
    color: var(--text-secondary);
    padding: var(--space-sm) 0;
    font-weight: 500;
    width: 50%;
}

.fancytable td:last-child,
.fancytable_sub td:last-child,
.fancytable_gap td:last-child {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.gap-value {
    color: var(--accent-color);
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

/* OP 表格 */
.op-table-container {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow-x: auto;
    /* Allow horizontal scrolling */
    overflow-y: auto;
    /* Keep vertical scrolling */
}

.optable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-xs);
    background: transparent;
}

.optable th,
.optable td {
    padding: var(--space-sm);
    text-align: center;
    border: 1px solid var(--glass-border);
    white-space: nowrap;
    position: relative;
}

.optable th {
    background: var(--table-header-bg);
    color: var(--text-secondary);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 100;
}

.optable td {
    background: var(--card-bg);
}

.optable tbody tr:hover {
    background: rgba(var(--accent-color-rgb), 0.1);
}

/* 特定表頭樣式 */
.call-header {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: white !important;
}

.put-header {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important;
    color: white !important;
}

.power-header {
    background: #000000 !important;
    color: white !important;
}

.strike-price {
    background: var(--warning-bg) !important;
    color: var(--warning-text) !important;
    font-weight: 800;
    min-width: 80px;
}

/* ===== Sparkline 迷你走勢圖 ===== */
.sparkline-header {
    min-width: 60px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.sparkline-cell {
    padding: 2px 4px !important;
    min-width: 60px;
    max-width: 80px;
}

.sparkline-canvas {
    display: block;
    width: 60px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.sparkline-canvas:hover {
    transform: scale(1.1);
}

/* Sparkline 呼吸動畫 (可選) */
@keyframes sparklinePulse {

    0%,
    100% {
        opacity: 0.9;
    }

    50% {
        opacity: 1;
    }
}

.sparkline-canvas.updating {
    animation: sparklinePulse 0.5s ease-in-out;
}

/* 📱 手機版：縮小 Sparkline 欄位（節省空間但保持可見） */
@media (max-width: 768px) {
    .sparkline-header {
        min-width: 40px;
        font-size: 10px;
    }

    .sparkline-cell {
        padding: 1px 2px !important;
        min-width: 40px;
        max-width: 45px;
    }

    .sparkline-canvas {
        width: 40px;
        height: 18px;
    }
}

.call-header {
    background: rgba(255, 71, 87, 0.2);
    color: var(--danger-color);
}

/* ===== OP表統一管理系統 ===== */

/* OP表包裝器基礎樣式 */
.optable-wrapper {
    margin-top: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

/* OP表標題 */
.optable-header {
    padding: var(--space-md);
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--glass-border);
}

.optable-header h3 {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--text-primary);
    font-weight: 600;
}

/* Desktop Admin: Tab1 底部顯示 */
#optableContainer-desktop {
    display: none;
    /* 預設隱藏 */
}

/* Mobile/User: Tab2 顯示 */
#optableContainer-mobile {
    display: block;
    /* 預設顯示 */
}

/* Admin Mobile: Tab2 顯示 */
#optableContainer-admin-mobile {
    display: none;
    /* 預設隱藏 */
}

/* 權限和設備控制 - Desktop */
@media (min-width: 768px) {

    /* Desktop Admin: 在tab1顯示完整版，在tab2隱藏 */
    .admin-user #optableContainer-desktop {
        display: block;
    }

    .admin-user #optableContainer-mobile {
        display: none;
    }

    .admin-user #optableContainer-admin-mobile {
        display: none;
    }

    /* Desktop User: 只在tab2顯示簡化版 */
    .user-role #optableContainer-desktop {
        display: none;
    }

    .user-role #optableContainer-mobile {
        display: block;
    }

    .user-role #optableContainer-admin-mobile {
        display: none;
    }
}

/* 權限和設備控制 - Mobile */
@media (max-width: 767px) {

    /* Mobile Admin: 在tab2顯示admin版本 */
    .admin-user #optableContainer-desktop {
        display: none;
    }

    .admin-user #optableContainer-mobile {
        display: none;
    }

    .admin-user #optableContainer-admin-mobile {
        display: block;
    }

    /* Mobile User: 在tab2顯示簡化版 */
    .user-role #optableContainer-desktop {
        display: none;
    }

    .user-role #optableContainer-mobile {
        display: block;
    }

    .user-role #optableContainer-admin-mobile {
        display: none;
    }
}

/* 表格樣式差異 */
.admin-table {
    font-size: var(--text-xs);
}

.user-table {
    font-size: var(--text-sm);
}

/* Admin 表格可能有更多欄位，調整間距 */
.admin-table th,
.admin-table td {
    padding: var(--space-xs) var(--space-sm);
}

.user-table th,
.user-table td {
    padding: var(--space-sm);
}

.put-header {
    background: rgba(0, 255, 136, 0.2);
    color: var(--success-color);
}

.power-header {
    background: var(--accent-bg);
    color: var(--accent-color);
}

.strike-price {
    background: var(--warning-color);
    color: var(--primary-bg);
    font-weight: bold;
}

/* ===== 圖表組件 ===== */
.chart-container {
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    height: 300px;
    overflow: hidden;
}

#kbarContainer_review {
    width: 100%;
    height: 100%;
}

.chart-embed {
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    height: 400px;
    min-height: 400px;
    /* 確保最小高度 */
    overflow: hidden;
    display: flex;
    /* 使用 flex 布局 */
    flex-direction: column;
    /* 垂直方向 */
}

.chart-embed iframe {
    width: 100%;
    height: 100%;
    flex: 1;
    /* 填滿父容器 */
    border: none;
}

/* ===== 區間控制組件 ===== */
.interval-controls {
    background: var(--accent-bg);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contract-selector {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.contract-selector label {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.contract-dropdown {
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    flex: 1;
    min-width: 150px;
}

.interval-buttons {
    display: flex;
    gap: var(--space-sm);
}

.interval-btn {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: var(--transition-fast);
}

.interval-btn.active {
    background: var(--accent-color);
    color: var(--primary-bg);
    border-color: var(--accent-color);
}

/* ===== 模態框組件 ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: var(--z-modal);
    backdrop-filter: blur(5px);
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.modal-content {
    background: var(--secondary-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.modal-close:hover {
    background: var(--danger-color);
    color: var(--text-primary);
}

/* ===== 載入指示器 ===== */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-muted);
    border-top: 2px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-md);
    z-index: var(--z-modal);
}

.loading-text {
    color: var(--text-primary);
    font-size: var(--text-sm);
}

/* ===== 提示工具組件 ===== */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--overlay-bg);
    color: var(--text-primary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
    z-index: var(--z-tooltip);
}

.tooltip::before {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--overlay-bg);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
}

.tooltip:hover::after,
.tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* ===== 標籤組件 ===== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    background: var(--card-bg);
    color: var(--text-secondary);
    border-radius: var(--radius-xl);
    font-size: var(--text-xs);
    font-weight: 500;
    border: 1px solid var(--glass-border);
}

.badge-primary {
    background: var(--accent-color);
    color: var(--primary-bg);
    border-color: var(--accent-color);
}

.badge-success {
    background: var(--success-color);
    color: var(--primary-bg);
    border-color: var(--success-color);
}

.badge-danger {
    background: var(--danger-color);
    color: var(--text-primary);
    border-color: var(--danger-color);
}

.badge-warning {
    background: var(--warning-color);
    color: var(--primary-bg);
    border-color: var(--warning-color);
}

/* ===== 頂部容器 Logo 動畫 ===== */
.logo-animated {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    transition: all 0.3s ease;
}

.logo-animated:hover {
    transform: scale(1.05);
}

.logo-image-main {
    height: calc(var(--header-height) - 20px);
    /* 適合 topContainer 高度，留 10px 上下邊距 */
    width: auto;
    max-width: 50px;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

.logo-image-main:hover {
    filter: drop-shadow(0 4px 16px rgba(var(--accent-color-rgb), 0.3));
    transform: rotate(5deg);
}

.logo-text-main {
    font-size: var(--text-lg);
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-color) 0%, #4f46e5 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: logoGlow 3s ease-in-out infinite alternate;
}

@keyframes logoGlow {
    0% {
        filter: brightness(1);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    100% {
        filter: brightness(1.2);
        text-shadow: 0 2px 8px rgba(var(--accent-color-rgb), 0.4);
    }
}

/* 響應式調整 */
@media (max-width: 768px) {
    .logo-text-main {
        display: none;
        /* 手機版隱藏文字，只顯示圖標 */
    }

    .logo-image-main {
        height: calc(var(--header-height) - 16px);
        max-width: 40px;
    }
}

@media (max-width: 480px) {
    .logo-image-main {
        height: calc(var(--header-height) - 12px);
        max-width: 35px;
    }
}

/* ===== 緊湊版面優化 - 組件模組 ===== */

/* 基本控制區域緊湊優化 */
.basic-controls {
    margin-bottom: var(--space-xs);
    /* 從 16px 進一步縮小到 4px */
    padding: var(--space-xs);
    /* 從 8px 進一步縮小到 4px */
    gap: var(--space-xs);
    /* 從 8px 進一步縮小到 4px */
}

/* 日期和週期控制組優化 */
.date-period-controls {
    gap: var(--space-xs);
    /* 從 8px 進一步縮小到 4px */
}

.date-control-group,
.period-control-group,
.time-axis-control,
.price-axis-control,
.people-controls {
    padding: 4px;
    /* 從 6px 進一步縮小到 4px */
    gap: 4px;
    /* 從 6px 進一步縮小到 4px - 這是 label 和下面元素之間的距離 */
    /* 修正對齊問題 - 所有控制組使用相同的對齊方式 */
    align-items: flex-start;
    /* 從上方對齊 */
    justify-content: center;
    /* 內容置中 */
    /* 確保所有控制項高度一致 */
    box-sizing: border-box;
    min-height: auto;
}

/* 強制修正 people-controls 對齊問題 - 最高優先級 */
.people-controls {
    padding: 4px !important;
    /* 與其他控制項同步為 4px */
    gap: 4px !important;
    /* 與其他控制項同步為 4px */
    align-items: flex-start !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 強制統一所有 control-label 的樣式 */
.date-control-group .control-label,
.period-control-group .control-label,
.time-axis-control .control-label,
.price-axis-control .control-label,
.people-controls .control-label {
    margin: 0 0 6px 0 !important;
    /* 統一下邊距為 6px */
    padding: 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    width: 100% !important;
    /* 確保沒有其他外邊距影響位置 */
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 日期控制組特別優化 - 更緊湊的日期顯示 */
.date-control-group {
    padding: 4px 6px;
    /* 上下減少到 4px */
}

.date-control-group .date-display {
    padding: 2px 6px;
    /* 日期顯示區域更緊湊 */
    line-height: 1.1;
    /* 縮小行高 */
    margin: 2px 0;
    /* 減少上下邊距 */
}

/* 軸控制區域優化 */
.axis-controls {
    gap: var(--space-xs);
    /* 從 8px 進一步縮小到 4px */
}

/* 軸控制按鈕縮小 */
.axis-btn {
    width: 28px;
    /* 從 32px 縮小到 28px */
    height: 28px;
    /* 從 32px 縮小到 28px */
    padding: 2px 6px;
    /* 與統一標準一致 */
    font-size: var(--text-xs);
    /* 與統一標準一致 */
}

/* 模式控制區域優化 */
.mode-controls {
    gap: var(--space-xs);
    /* 從 16px 進一步縮小到 4px */
    margin: var(--space-xs) 0;
    /* 從 16px 進一步縮小到 4px */
}

.mode-sections-grid {
    gap: var(--space-xs);
    /* 從 8px 進一步縮小到 4px */
}

.mode-section {
    padding: var(--space-xs);
    /* 從 8px 進一步縮小到 4px */
}

.mode-section-title {
    margin-bottom: var(--space-xs);
    /* 從 8px 進一步縮小到 4px */
    padding-bottom: 2px;
    /* 從 4px 縮小到 2px */
}

.mode-buttons-row {
    gap: 4px;
    /* 從 6px 縮小到 4px */
}

/* 模式按鈕縮小 */
.mode-btn {
    padding: 4px var(--space-xs);
    /* 從 6px 8px 進一步縮小到 4px 4px */
    font-size: 13px;
    /* 稍微增大字體，從 12px (--text-xs) 增加到 13px */
}

/* 自訂輸入框優化 - 整合至緊湊版面設計 */
.custom-input {
    flex: 1 1 auto;
    /* 在容器內自適應 */
    min-width: 100px;
    /* 最小寬度 */
    max-width: 180px;
    /* 限制最大寬度 */
    height: 28px;
    /* 與 mode-btn 相同高度 */
    padding: 2px 6px;
    /* 縮小內邊距 */
    font-size: var(--text-xs);
    /* 統一字體大小 */
}

.custom-input-small {
    width: 75px;
    /* 從 60px 增加到 75px，可容納5個數字 */
    min-width: 75px;
    height: 28px;
    /* 與 mode-btn 相同高度 */
    padding: 2px 6px;
    /* 縮小內邊距 */
    font-size: var(--text-xs);
    /* 統一字體大小 */
}

/* ===== rightControlPanel 按鈕統一樣式 ===== */

/* 確保 section-content 是正確的 flex 容器 */
#rightControlPanel .section-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.panel-section .indicator-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
}

/* 基本模式和進階模式的按鈕 - 確保100%寬度 */
.panel-section .indicator-list>.indicator-item {
    width: 100% !important;
    /* 按鈕也撐滿寬度 - 使用!important確保優先級 */
    display: block !important;
    /* 改為 block 而不是 flex */
    box-sizing: border-box !important;
    flex: none !important;
    /* 移除 flex 屬性避免衝突 */
    max-width: 100% !important;
    /* 覆蓋任何max-width限制 */
    min-width: 100% !important;
    /* 覆蓋任何min-width限制 */
}

.panel-section .indicator-item {
    width: 100% !important;
    display: block !important;
    /* 改為 block 而不是 flex */
    box-sizing: border-box !important;
    flex: none !important;
    /* 移除 flex 屬性避免衝突 */
    max-width: 100% !important;
    /* 覆蓋任何max-width限制 */
    min-width: 100% !important;
    /* 覆蓋任何min-width限制 */
}

.panel-section .contract-select-dropdown,
.panel-section .custom-select {
    width: 100% !important;
    /* 下拉式選單也撐滿寬度 - 使用!important確保優先級 */
    box-sizing: border-box;
    flex: 1 1 100% !important;
    /* 確保在flex容器中也能撐滿 */
    max-width: 100% !important;
    /* 覆蓋任何max-width限制 */
    min-width: 100% !important;
    /* 覆蓋任何min-width限制 */
}

/* ===== 自訂功能區統一布局：所有尺寸都是兩行 ===== */
/* 第一行：按鈕，第二行：其他元素 */

/* 所有 custom-group 允許換行 */
.custom-group {
    flex-wrap: wrap !important;
}

/* 所有 custom-group 中的主按鈕獨占第一行 */
.custom-group .indicator-item {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: var(--space-xs);
}

/* 黃金切割：按鈕一行，輸入框一行 */
.custom-group:has(#golden_star),
.custom-group:has(#goldenBtn) {
    flex-wrap: wrap;
}

.custom-group:has(#golden_star) #goldenBtn,
.custom-group:has(#goldenBtn) #goldenBtn {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: var(--space-xs);
}

.custom-group:has(#golden_star) .custom-input-small,
.custom-group:has(#goldenBtn) .custom-input-small,
#golden_star,
#golden_end {
    flex: 1 1 0;
    min-width: 50px;
    max-width: none;
}

.custom-group:has(#golden_star) .input-separator,
.custom-group:has(#goldenBtn) .input-separator {
    flex: 0 0 auto;
    margin: 0 4px;
}

/* 缺口組：按鈕一行，daySelect + searchGapBtn 各占一半第二行 */
.custom-group:has(#gapBtn) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.custom-group:has(#gapBtn) #gapBtn {
    flex: 0 0 100% !important;
    width: 100% !important;
}

.custom-group:has(#gapBtn) #daySelect {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.custom-group:has(#gapBtn) #searchGapBtn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* 自訂價位組：按鈕一行，輸入框一行 */
.custom-group:has(#customBtn) #customBtn {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: var(--space-xs);
}

.custom-group:has(#customBtn) .custom-input {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}

/* 自訂OP組：按鈕一行，輸入框一行 */
.custom-group:has(#customOpBtn) #customOpBtn {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: var(--space-xs);
}

.custom-group:has(#customOpBtn) .custom-input {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}

/* 移除舊的margin設定 */
#goldenBtn+#golden_star {
    margin-left: 0;
}

#golden_star+.input-separator {
    margin: 0 4px;
}

.input-separator+#golden_end {
    margin-left: 0;
}

/* 焦點和動畫優化 */
.mode-btn,
.period-btn,
.axis-btn {
    transition: all 0.2s ease;
    /* 縮短動畫時間讓反應更快 */
}

/* 統一所有控制區域元素的高度與 mode-btn 一致 */
.custom-select,
.search-btn,
.date-nav-btn,
.date-display,
.date-input-wrapper,
.period-btn,
.period-select,
.axis-btn,
.people-btn {
    height: 32px !important;
    /* 加大高度 */
    padding: 4px 10px !important;
    /* 加大內邊距 */
    font-size: 15px !important;
    /* 加大字體 */
    line-height: 1.2 !important;
    /* 統一行高 */
    box-sizing: border-box !important;
    /* 確保盒模型一致 */
    min-height: 32px !important;
    /* 確保最小高度 */
    max-height: 32px !important;
    /* 確保最大高度 */
}

/* 特別調整 date-input-wrapper 的內邊距 */
.date-input-wrapper {
    padding: 2px !important;
    /* 更小的內邊距，為內部元素留空間 */
}

/* 修正分析師控制項的對齊問題 - 使用 admin-only 類別統一控制 */
.people-controls {
    padding: 4px !important;
    /* 與其他控制項統一 */
    gap: 4px !important;
    /* 與其他控制項統一 */
    align-items: center !important;
    /* 強制居中對齊 */
    justify-content: center !important;
    /* 強制置中 */
    flex-direction: column !important;
}

/* 修正分析師按鈕容器的對齊 */
.people-controls .people-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 文字大小微調 */
.control-label {
    font-size: 13px;
    /* 加大字體 */
    line-height: 1.2;
}

.date-display {
    font-size: var(--text-xs);
    /* 從 --text-sm 縮小到 --text-xs */
    padding: 2px 6px !important;
    /* 強制覆蓋，更緊湊的內距 */
    line-height: 1.1 !important;
    /* 強制覆蓋，縮小行高 */
    margin: 2px 0 !important;
    /* 強制覆蓋，減少上下邊距 */
}

/* 永久顯示的基本控制樣式 - 包含完整的 basic-controls */
.permanent-controls {
    background: var(--accent-bg);
    border-radius: var(--radius-md);
    padding: var(--space-xs);
    margin-bottom: var(--space-xs);
    box-shadow: var(--shadow-lg);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* permanent-controls 內的 basic-controls 維持原有佈局 */
.permanent-controls .basic-controls {
    /* 保持原有的 basic-controls 樣式 */
}


/*!* ===== 自訂功能區域優化 - 覆蓋原有樣式 ===== *!*/

/*!* 電腦版:自訂功能橫向排列 *!*/
/*.custom-controls {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 8px;*/
/*    align-items: stretch;*/
/*}*/

/*!* 自訂功能組 - 統一卡片設計 *!*/
/*.custom-group {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 6px;*/
/*    padding: 10px;*/
/*    background: rgba(255, 255, 255, 0.03);*/
/*    border: 1px solid rgba(255, 255, 255, 0.1);*/
/*    border-radius: 8px;*/
/*    transition: all 0.2s;*/
/*    flex: 0 1 auto;*/
/*    min-width: 200px;*/
/*    max-width: 280px;*/
/*}*/

/*.custom-group:hover {*/
/*    background: rgba(255, 255, 255, 0.06);*/
/*    border-color: var(--accent-color);*/
/*    transform: translateY(-1px);*/
/*    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);*/
/*}*/

/*!* 按鈕 - 統一寬度 *!*/
/*.custom-group .mode-btn {*/
/*    width: 100%;*/
/*    text-align: center;*/
/*    justify-content: center;*/
/*}*/

/*!* 輸入框和選擇器 - 統一樣式 *!*/
/*.custom-group .custom-input,*/
/*.custom-group .custom-select {*/
/*    width: 100%;*/
/*    height: 32px;*/
/*    padding: 6px 10px;*/
/*    font-size: 13px;*/
/*    background: rgba(0, 0, 0, 0.3);*/
/*    border: 1px solid rgba(255, 255, 255, 0.15);*/
/*    border-radius: 6px;*/
/*    color: var(--text-primary);*/
/*}*/


/*!* 搜尋按鈕 *!*/
/*.custom-group .search-btn {*/
/*    width: 100%;*/
/*    height: 32px;*/
/*}*/

/*!* 黃金切割輸入框並排 *!*/
/*.custom-group .custom-input-small {*/
/*    flex: 1;*/
/*    height: 32px;*/
/*    padding: 6px 8px;*/
/*    font-size: 13px;*/
/*    text-align: center;*/
/*    background: rgba(0, 0, 0, 0.3);*/
/*    border: 1px solid rgba(255, 255, 255, 0.15);*/
/*    border-radius: 6px;*/
/*    color: var(--text-primary);*/
/*}*/

/* 🔥 TradingView 風格畫線工具側邊欄 (Sidebar Layout) */
.lwc-drawing-sidebar {
    width: 48px;
    background: #1e222d;
    border-right: 1px solid #2a2e39;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    z-index: 20;
    flex-shrink: 0;
    /* 防止被壓縮 */
}

/* 圖表區域 Wrapper */
.lwc-chart-area {
    flex: 1;
    position: relative;
    /* height: 100%; 由 html 結構控制 */
    display: flex;
    flex-direction: column;
    background: #131722;
    overflow: hidden;
    /* 防止溢出 */
}

/* 工具欄群組 */
.toolbar-group {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    border-bottom: 1px solid #2a2e39;
}

.toolbar-group:last-child {
    border-bottom: none;
    margin-top: auto;
}

/* 工具按鈕 */
.tool-btn {
    width: 40px;
    height: 40px;
    margin: 2px 4px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #787b86;
    /* Demo 顏色 */
    font-size: 18px;
    transition: all 0.15s ease;
    position: relative;
}

.tool-btn:hover {
    background: #2a2e39;
    color: #d1d4dc;
}

.tool-btn.active {
    background: #2962ff;
    color: #fff;
}

.tool-btn.danger:hover {
    background: #f23645;
    color: #fff;
}

/* 工具提示 (CSS Based) */
.tool-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 48px;
    /* Button width + margin */
    top: 50%;
    transform: translateY(-50%);
    background: #363a45;
    color: #d1d4dc;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.tool-btn:hover::after {
    opacity: 1;
    visibility: visible;
}

/* SVG Icon 樣式 */
.tool-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.5;
    /* Demo 使用 1.5 */
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 🔥 當啟用時，使用 Flex 佈局以適應側邊欄 */
#lightweight_container.active {
    display: flex !important;
}

/* ===== Lightweight Charts 側邊欄佈局 ===== */
.lwc-drawing-sidebar {
    width: 48px;
    min-width: 48px;
    flex-shrink: 0;
    /* 🔥 確保不會被壓縮 */
    background: #1e222d;
    border-right: 1px solid #2a2e39;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    /* 移除 z-index，讓 flexbox 自然佈局，不覆蓋 */
    /* height: 100% 改為 auto，讓容器決定高度 */
}

.lwc-chart-area {
    flex: 1;
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 工具欄分組 */
.lwc-drawing-sidebar .toolbar-group {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    border-bottom: 1px solid #2a2e39;
}

.lwc-drawing-sidebar .toolbar-group:last-child {
    border-bottom: none;
    margin-top: auto;
}

/* ===== 頂部畫線工具 Dropdown ===== */
.drawing-tools-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

.drawing-tool-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #b2b5be;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
    text-align: left;
    width: 100%;
}

.drawing-tool-btn svg {
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}

.drawing-tool-btn svg path[fill="currentColor"],
.drawing-tool-btn svg circle[fill="currentColor"] {
    fill: currentColor;
    stroke: none;
}

.drawing-tool-btn:hover {
    background: #2a2e39;
    color: #f0f3fa;
}

.drawing-tool-btn.active {
    background: #2962ff;
    color: white;
    border-color: #2962ff;
}

.drawing-tool-btn.active svg {
    stroke: white;
}

.drawing-tools-divider {
    height: 1px;
    background: #2a2e39;
    margin: 8px 0;
}

.drawing-action-btn {
    color: #787b86;
}

.drawing-action-btn:hover {
    background: #2a2e39;
    color: #b2b5be;
}

.drawing-action-btn.danger:hover {
    background: rgba(242, 54, 69, 0.15);
    color: #f23645;
}

/* 手機版 Drawing Dropdown 樣式調整 */
@media screen and (max-width: 768px) {
    .drawing-tools-content {
        padding: 12px;
    }

    .drawing-tool-btn {
        padding: 14px 16px;
        font-size: 14px;
    }
}

/* ===== 手機版：左側 Sidebar 轉成水平排列在圖表上方 ===== */
@media screen and (max-width: 768px) {

    /* LWC 容器改成垂直排列 */
    #lightweight_container {
        flex-direction: column !important;
    }

    /* Sidebar 變成水平排列 */
    .lwc-drawing-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        padding: 4px 8px !important;
        border-right: none !important;
        border-bottom: 1px solid #2a2e39 !important;
        justify-content: flex-start;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lwc-drawing-sidebar .toolbar-group {
        flex-direction: row !important;
        padding: 0 !important;
        border-bottom: none !important;
        border-right: 1px solid #2a2e39;
        padding-right: 4px !important;
        gap: 2px;
    }

    .lwc-drawing-sidebar .toolbar-group:last-child {
        border-right: none;
        margin-top: 0 !important;
    }

    .lwc-drawing-sidebar .tool-btn {
        width: 32px !important;
        height: 32px !important;
        padding: 6px !important;
    }
}

/* ===== Legend 位置調整（不被側邊欄擋住） ===== */
.lightweight-legend {
    left: 10px !important;
    /* 在 chart-area 內，不受 sidebar 影響 */
}

/* ===== 手機版畫線工具切換按鈕 ===== */
.mobile-drawing-toggle {
    display: none;
    /* 電腦版隱藏 */
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: auto;
    border-radius: 4px;
    transition: background 0.2s;
    pointer-events: auto !important;
    /* 🔥 確保可以接收點擊事件 */
}

.mobile-drawing-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-drawing-toggle.active {
    background: #2962ff;
}

/* 手機版顯示切換按鈕 */
@media screen and (max-width: 768px) {
    .mobile-drawing-toggle {
        display: block;
    }

    /* 預設隱藏 sidebar */
    .lwc-drawing-sidebar {
        display: none !important;
    }

    /* 當 sidebar 顯示時 */
    .lwc-drawing-sidebar.visible {
        display: flex !important;
    }

    /* modes-bar-content 使用 flex 讓按鈕靠右 */
    .modes-bar-content {
        display: flex;
        align-items: center;
        width: 100%;
    }
}