{% extends "rotation/base.html" %}

{% block rotation_content %}
<div class="rotation-header">
    <h1>策略配置</h1>
    <div class="header-meta">
        <span class="meta-item">📅 {{ current_date|date:"Y-m-d" }}</span>
        <a href="{% url 'rotation:account_configs' %}" class="btn-accent">账户轮动配置</a>
        <button class="btn-primary" onclick="showCreateConfigModal()">+ 新建模板</button>
    </div>
</div>

<!-- 账户配置快览 -->
{% if user_accounts %}
<div class="section-card">
    <div class="section-card-header">
        <h3>我的账户轮动配置</h3>
        <a href="{% url 'rotation:account_configs' %}" class="link-more">管理全部 →</a>
    </div>
    <div class="account-quick-list">
        {% for account in user_accounts %}
        <div class="account-quick-item">
            <span class="aq-name">{{ account.account_name }}</span>
            <span class="aq-type type-{{ account.account_type }}">{{ account.get_account_type_display }}</span>
            {% if account.rotation_config %}
                <span class="aq-risk risk-{{ account.rotation_config.risk_tolerance }}">
                    {{ account.rotation_config.get_risk_tolerance_display }}
                </span>
                {% if account.rotation_config.is_enabled %}
                <span class="aq-status on">轮动启用</span>
                {% else %}
                <span class="aq-status off">未启用</span>
                {% endif %}
            {% else %}
            <span class="aq-status unconfigured">未配置</span>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<h2 class="section-title">全局策略模板</h2>

<!-- Configs List -->
<div class="configs-container">
    {% for config in configs %}
    <div class="config-card {% if not config.is_active %}inactive{% endif %}">
        <div class="config-header">
            <div class="config-title">
                <span class="config-name">{{ config.name }}</span>
                <span class="config-badge strategy-{{ config.strategy_type }}">
                    {% for value, label in strategy_types %}
                        {% if value == config.strategy_type %}{{ label }}{% endif %}
                    {% endfor %}
                </span>
                {% if config.is_active %}
                <span class="status-badge active">启用</span>
                {% else %}
                <span class="status-badge inactive">未启用</span>
                {% endif %}
            </div>

            <div class="config-actions">
                {% if config.is_active %}
                <button class="action-btn deactivate" onclick="toggleConfig({{ config.id }}, false)" title="停用">⏸</button>
                {% else %}
                <button class="action-btn activate" onclick="toggleConfig({{ config.id }}, true)" title="启用">▶</button>
                {% endif %}
                <button class="action-btn generate" onclick="generateSignal({{ config.id }}, '{{ config.name }}')" title="生成信号">🔄</button>
                <button
                    class="action-btn edit"
                    onclick="editConfig(this)"
                    title="编辑"
                    data-config-id="{{ config.id }}"
                    data-name="{{ config.name|escape }}"
                    data-description="{{ config.description|default:''|escape }}"
                    data-strategy-type="{{ config.strategy_type }}"
                    data-asset-universe="{{ config.asset_universe|join:',' }}"
                    data-rebalance-frequency="{{ config.rebalance_frequency }}"
                    data-top-n="{{ config.top_n|default:3 }}"
                    data-min-weight="{{ config.min_weight|default:0 }}"
                    data-max-weight="{{ config.max_weight|default:1 }}"
                    data-max-turnover="{{ config.max_turnover|default:1 }}"
                    data-lookback-period="{{ config.lookback_period|default:252 }}"
                >✏️</button>
            </div>
        </div>

        {% if config.description %}
        <div class="config-description">{{ config.description }}</div>
        {% endif %}

        <div class="config-details">
            <div class="detail-row">
                <span class="detail-label">资产池:</span>
                <span class="detail-value">
                    {% if config.asset_universe %}
                        {{ config.asset_universe|join:", " }}
                    {% else %}
                        <em>未配置</em>
                    {% endif %}
                </span>
            </div>
            <div class="detail-row">
                <span class="detail-label">调仓频率:</span>
                <span class="detail-value">{{ config.rebalance_frequency }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">权重范围:</span>
                <span class="detail-value">{{ config.min_weight }} - {{ config.max_weight }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">最大换手率:</span>
                <span class="detail-value">{{ config.max_turnover }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">回溯周期:</span>
                <span class="detail-value">{{ config.lookback_period }} 天</span>
            </div>
            {% if config.top_n %}
            <div class="detail-row">
                <span class="detail-label">选资产数:</span>
                <span class="detail-value">{{ config.top_n }}</span>
            </div>
            {% endif %}
        </div>

        {% if config.latest_signal %}
            {% with signal=config.latest_signal %}
            <div class="config-signal">
                <div class="signal-header">
                    <span>最新信号</span>
                    <span class="signal-date">{{ signal.signal_date }}</span>
                </div>
                <div class="signal-body">
                    <div class="signal-regime">
                        <span class="regime-label">当前象限:</span>
                        <span class="regime-value regime-{{ signal.current_regime }}">{{ signal.current_regime }}</span>
                    </div>
                    <div class="signal-action">
                        <span class="action-label">操作建议:</span>
                        <span class="action-value action-{{ signal.action_required }}">{{ signal.action_required }}</span>
                    </div>
                    {% if signal.target_allocation %}
                    <div class="signal-allocation">
                        <span class="allocation-label">目标配置:</span>
                        <div class="allocation-bars">
                            {% for asset, weight in signal.target_allocation.items %}
                            <div class="allocation-item">
                                <span class="asset-name">{{ asset }}</span>
                                <div class="weight-bar">
                                    <div class="weight-fill" style="width: {% widthratio weight 1 100 %}%"></div>
                                </div>
                                <span class="weight-value">{% widthratio weight 1 100 %}%</span>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endwith %}
        {% else %}
        <div class="config-no-signal">
            <span>暂无信号数据</span>
            <button class="btn-small" onclick="generateSignal({{ config.id }}, '{{ config.name }}')">生成信号</button>
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>

{% if not configs %}
<div class="empty-state">
    <div class="empty-icon">⚙️</div>
    <p>暂无策略配置</p>
    <button class="btn-primary" onclick="showCreateConfigModal()">+ 创建第一个配置</button>
</div>
{% endif %}

<!-- Create/Edit Config Modal -->
<div id="configModal" class="modal" hidden>
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">新建策略配置</h3>
            <button class="modal-close" onclick="closeConfigModal()">&times;</button>
        </div>
        <form id="configForm" class="modal-body">
            <input type="hidden" name="config_id" id="configId">

            <div class="form-group">
                <label>配置名称 *</label>
                <input type="text" name="name" id="configName" class="form-input" required>
            </div>

            <div class="form-group">
                <label>策略类型 *</label>
                <select name="strategy_type" id="strategyType" class="form-select" required>
                    {% for value, label in strategy_types %}
                    <option value="{{ value }}">{{ label }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label>描述</label>
                <textarea name="description" id="configDescription" class="form-textarea" rows="3"></textarea>
            </div>

            <div class="form-group">
                <label>资产池 *</label>
                <input type="hidden" name="asset_universe" id="assetUniverse">
                <div class="asset-picker">
                    <div id="selectedAssets" class="selected-assets"></div>
                    <button type="button" id="assetPickerToggle" class="asset-picker-toggle">
                        搜索并选择资产
                    </button>
                    <div class="asset-picker-help">资产池来自轮动资产维护页，不接受手填代码。</div>
                    <div id="assetPickerPanel" class="asset-picker-panel" hidden>
                        <input
                            type="text"
                            id="assetSearch"
                            class="form-input"
                            placeholder="搜索资产代码或简称，例如 510300 / 沪深300ETF"
                            autocomplete="off"
                        >
                        <div id="assetOptions" class="asset-options">
                            {% for asset in assets %}
                            <label
                                class="asset-option"
                                data-code="{{ asset.code }}"
                                data-name="{{ asset.name }}"
                                data-category="{{ asset.get_category_display }}"
                            >
                                <input type="checkbox" class="asset-option-checkbox" value="{{ asset.code }}">
                                <span class="asset-option-main">
                                    <span class="asset-option-name">{{ asset.name }}</span>
                                    <span class="asset-option-code">{{ asset.code }}</span>
                                </span>
                                <span class="asset-option-category">{{ asset.get_category_display }}</span>
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label>调仓频率</label>
                    <select name="rebalance_frequency" id="rebalanceFreq" class="form-select">
                        {% for freq in frequencies %}
                        <option value="{{ freq }}"{% if freq == 'monthly' %} selected{% endif %}>{{ freq }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>选资产数</label>
                    <input type="number" name="top_n" id="topN" class="form-input" value="3" min="1" max="10">
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label>最小权重</label>
                    <input type="number" name="min_weight" id="minWeight" class="form-input" value="0" step="0.01" min="0" max="1">
                </div>
                <div class="form-group">
                    <label>最大权重</label>
                    <input type="number" name="max_weight" id="maxWeight" class="form-input" value="1" step="0.01" min="0" max="1">
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label>最大换手率</label>
                    <input type="number" name="max_turnover" id="maxTurnover" class="form-input" value="1" step="0.1" min="0" max="2">
                </div>
                <div class="form-group">
                    <label>回溯周期 (天)</label>
                    <input type="number" name="lookback_period" id="lookbackPeriod" class="form-input" value="252" min="10" max="1000">
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn-secondary" onclick="closeConfigModal()">取消</button>
                <button type="submit" class="btn-primary">保存配置</button>
            </div>
        </form>
    </div>
</div>

<script>
// Toggle config active status
async function toggleConfig(configId, activate) {
    const url = activate
        ? `/api/rotation/configs/${configId}/activate/`
        : `/api/rotation/configs/${configId}/deactivate/`;

    try {
        const res = await fetch(url, {
            method: 'POST',
            headers: { 'X-CSRFToken': window.csrfToken }
        });

        if (res.ok) {
            showToast(activate ? '配置已启用' : '配置已停用', 'success');
            location.reload();
        } else {
            showToast('操作失败', 'error');
        }
    } catch (e) {
        showToast('操作失败: ' + e.message, 'error');
    }
}

// Generate signal for config
async function generateSignal(configId, configName) {
    if (!await confirmAction(`确认为配置 "${configName}" 生成新信号？`)) {
        return;
    }

    try {
        const res = await fetch('{% url "rotation:generate_signal" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': window.csrfToken
            },
            body: JSON.stringify({ config_name: configName })
        });

        const data = await res.json();

        if (data.success) {
            showToast('信号生成成功', 'success');
            location.reload();
        } else {
            showToast('生成失败: ' + (data.error || '未知错误'), 'error');
        }
    } catch (e) {
        showToast('生成失败: ' + e.message, 'error');
    }
}

const configModal = document.getElementById('configModal');
const configForm = document.getElementById('configForm');
const assetUniverseInput = document.getElementById('assetUniverse');
const assetSearchInput = document.getElementById('assetSearch');
const assetPickerToggle = document.getElementById('assetPickerToggle');
const assetPickerPanel = document.getElementById('assetPickerPanel');
const selectedAssetsContainer = document.getElementById('selectedAssets');
const assetOptionNodes = Array.from(document.querySelectorAll('.asset-option'));
const assetSelection = new Set();
const assetCatalog = new Map(
    assetOptionNodes.map((node) => [
        node.dataset.code,
        {
            code: node.dataset.code,
            name: node.dataset.name,
            category: node.dataset.category,
        }
    ])
);

function openConfigModal() {
    configModal.hidden = false;
    document.body.classList.add('modal-open');
}

function setAssetPickerOpen(open) {
    assetPickerPanel.hidden = !open;
    assetPickerToggle.classList.toggle('active', open);
    if (open) {
        assetSearchInput.focus();
    }
}

function setSelectedAssets(assetCodes) {
    assetSelection.clear();
    assetCodes.filter(Boolean).forEach((code) => assetSelection.add(code));
    syncAssetSelectionUI();
}

function syncAssetSelectionUI() {
    assetUniverseInput.value = Array.from(assetSelection).join(',');

    assetOptionNodes.forEach((node) => {
        const checkbox = node.querySelector('.asset-option-checkbox');
        const selected = assetSelection.has(node.dataset.code);
        checkbox.checked = selected;
        node.classList.toggle('selected', selected);
    });

    const selectedCodes = Array.from(assetSelection);
    if (!selectedCodes.length) {
        selectedAssetsContainer.innerHTML = '<span class="selected-assets-empty">未选择资产</span>';
        assetPickerToggle.textContent = '搜索并选择资产';
        return;
    }

    assetPickerToggle.textContent = `已选择 ${selectedCodes.length} 个资产`;

    selectedAssetsContainer.innerHTML = selectedCodes
        .map((code) => {
            const asset = assetCatalog.get(code) || { code, name: code };
            return `
                <button type="button" class="selected-asset-chip" data-remove-code="${code}">
                    <span>${asset.name}</span>
                    <span class="selected-asset-chip-code">${code}</span>
                    <span class="selected-asset-chip-remove">&times;</span>
                </button>
            `;
        })
        .join('');
}

function filterAssetOptions(keyword) {
    const normalized = (keyword || '').trim().toLowerCase();
    assetOptionNodes.forEach((node) => {
        const haystack = `${node.dataset.code} ${node.dataset.name} ${node.dataset.category}`.toLowerCase();
        node.hidden = normalized && !haystack.includes(normalized);
    });
}

// Edit config
function editConfig(button) {
    document.getElementById('configId').value = button.dataset.configId;
    document.getElementById('configName').value = button.dataset.name || '';
    document.getElementById('configDescription').value = button.dataset.description || '';
    document.getElementById('strategyType').value = button.dataset.strategyType || 'momentum';
    document.getElementById('rebalanceFreq').value = button.dataset.rebalanceFrequency || 'monthly';
    document.getElementById('topN').value = button.dataset.topN || 3;
    document.getElementById('minWeight').value = button.dataset.minWeight || 0;
    document.getElementById('maxWeight').value = button.dataset.maxWeight || 1;
    document.getElementById('maxTurnover').value = button.dataset.maxTurnover || 1;
    document.getElementById('lookbackPeriod').value = button.dataset.lookbackPeriod || 252;
    setSelectedAssets((button.dataset.assetUniverse || '').split(',').map((item) => item.trim()).filter(Boolean));
    assetSearchInput.value = '';
    filterAssetOptions('');
    setAssetPickerOpen(false);
    document.getElementById('modalTitle').textContent = '编辑策略配置';
    openConfigModal();
}

// Show create modal
function showCreateConfigModal() {
    configForm.reset();
    document.getElementById('configId').value = '';
    document.getElementById('modalTitle').textContent = '新建策略配置';
    setSelectedAssets([]);
    assetSearchInput.value = '';
    filterAssetOptions('');
    setAssetPickerOpen(false);
    openConfigModal();
}

// Close modal
function closeConfigModal() {
    configModal.hidden = true;
    document.body.classList.remove('modal-open');
}

// Form submit
configForm.addEventListener('submit', async function(e) {
    e.preventDefault();

    const formData = new FormData(this);
    const configId = formData.get('config_id');

    const data = {
        name: formData.get('name'),
        description: formData.get('description'),
        strategy_type: formData.get('strategy_type'),
        asset_universe: Array.from(assetSelection),
        rebalance_frequency: formData.get('rebalance_frequency'),
        top_n: parseInt(formData.get('top_n')) || 3,
        min_weight: parseFloat(formData.get('min_weight')) || 0,
        max_weight: parseFloat(formData.get('max_weight')) || 1,
        max_turnover: parseFloat(formData.get('max_turnover')) || 1,
        lookback_period: parseInt(formData.get('lookback_period')) || 252,
        is_active: true,
    };

    const url = configId
        ? `/api/rotation/configs/${configId}/`
        : '/api/rotation/configs/';

    const method = configId ? 'PUT' : 'POST';

    try {
        if (!assetSelection.size) {
            showToast('请至少选择一个资产加入资产池', 'error');
            return;
        }

        const res = await fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': window.csrfToken
            },
            body: JSON.stringify(data)
        });

        if (res.ok) {
            showToast(configId ? '配置已更新' : '配置已创建', 'success');
            closeConfigModal();
            location.reload();
        } else {
            const err = await res.json();
            showToast('保存失败: ' + (err.detail || '未知错误'), 'error');
        }
    } catch (e) {
        showToast('保存失败: ' + e.message, 'error');
    }
});

assetSearchInput.addEventListener('input', function() {
    filterAssetOptions(this.value);
});

assetPickerToggle.addEventListener('click', function() {
    setAssetPickerOpen(assetPickerPanel.hidden);
});

assetOptionNodes.forEach((node) => {
    node.querySelector('.asset-option-checkbox').addEventListener('change', (event) => {
        if (event.target.checked) {
            assetSelection.add(event.target.value);
        } else {
            assetSelection.delete(event.target.value);
        }
        syncAssetSelectionUI();
    });
});

selectedAssetsContainer.addEventListener('click', (event) => {
    const removeButton = event.target.closest('[data-remove-code]');
    if (!removeButton) {
        return;
    }
    assetSelection.delete(removeButton.dataset.removeCode);
    syncAssetSelectionUI();
});

// Close modal on outside click
window.addEventListener('click', function(e) {
    if (e.target === configModal) {
        closeConfigModal();
        return;
    }
    if (!assetPickerPanel.hidden && !e.target.closest('.asset-picker')) {
        setAssetPickerOpen(false);
    }
});

syncAssetSelectionUI();
</script>

<style>
/* 账户快览区 */
.section-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 24px;
    overflow: hidden;
}

.section-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
}

.section-card-header h3 { font-size: 14px; font-weight: 600; color: #374151; margin: 0; }
.link-more { font-size: 13px; color: #3b82f6; text-decoration: none; }
.link-more:hover { text-decoration: underline; }

.account-quick-list { padding: 8px 0; }

.account-quick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 13px;
    border-bottom: 1px solid #f9fafb;
}

.account-quick-item:last-child { border-bottom: none; }

.aq-name { font-weight: 500; color: #111827; min-width: 120px; }

.aq-type {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
}

.type-real { background: #fef3c7; color: #92400e; }
.type-simulated { background: #ede9fe; color: #5b21b6; }

.aq-risk {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
}

.risk-conservative { background: #dbeafe; color: #1e40af; }
.risk-moderate { background: #dcfce7; color: #166534; }
.risk-aggressive { background: #fce7f3; color: #831843; }

.aq-status {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: auto;
}

.aq-status.on { background: #d1fae5; color: #065f46; }
.aq-status.off { background: #f3f4f6; color: #6b7280; }
.aq-status.unconfigured { background: #fef9c3; color: #713f12; }

.section-title { font-size: 16px; font-weight: 600; color: #111827; margin: 0 0 16px 0; }

.btn-accent {
    padding: 8px 16px;
    background: #7c3aed;
    color: white;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
}

.btn-accent:hover { background: #6d28d9; }

#configModal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

#configModal[hidden] {
    display: none !important;
}

#configModal .modal-content {
    background: white;
    border-radius: 12px;
    width: min(760px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

#configModal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

#configModal .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

#configModal .modal-body {
    padding: 20px;
}

#configModal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 6px;
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.asset-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.asset-picker-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px dashed #93c5fd;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.asset-picker-toggle.active {
    border-style: solid;
}

.asset-picker-help {
    font-size: 12px;
    color: #6b7280;
}

.asset-picker-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.asset-options {
    display: grid;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
}

.asset-option {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    cursor: pointer;
}

.asset-option.selected {
    border-color: #2563eb;
    background: #eff6ff;
}

.asset-option-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.asset-option-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.asset-option-code {
    font-size: 12px;
    color: #6b7280;
}

.asset-option-category {
    font-size: 11px;
    color: #1d4ed8;
    background: #dbeafe;
    border-radius: 999px;
    padding: 4px 8px;
}

.selected-assets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 24px;
}

.selected-assets-empty {
    font-size: 12px;
    color: #9ca3af;
}

.selected-asset-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e3a8a;
    cursor: pointer;
}

.selected-asset-chip-code {
    font-size: 12px;
    color: #475569;
}

.selected-asset-chip-remove {
    font-size: 16px;
    line-height: 1;
}

.btn-primary, .btn-secondary, .btn-small {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.btn-primary {
    background: #3b82f6;
    color: white;
}

.btn-secondary {
    background: #e5e7eb;
    color: #374151;
}

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
    background: #3b82f6;
    color: white;
}

@media (max-width: 768px) {
    #configModal {
        padding: 12px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .asset-option {
        grid-template-columns: 18px 1fr;
    }

    .asset-option-category {
        justify-self: start;
    }
}
</style>
{% endblock %}