overview-components 1.1.119 → 1.1.121

package/dist/components/lit-case-variables-tab.js

@@ -57,6 +57,7 @@ export class LitCaseVariablesTab extends LitElement {
         this.sortableGroupId = `group-${Math.random().toString(36).substring(2, 9)}`;
         this.activeSettingsCell = null;
         this.settingsPopperOpen = false;
+        this.conditionSubFolders = new Map();
         this.language = 'cs';
         this.BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
         this.closeSettingsPopper = () => {
@@ -181,7 +182,7 @@ export class LitCaseVariablesTab extends LitElement {
         };
         this.getCellValue = (cell) => {
             const rawValue = cell?.[`value_${this.userLang}`] || cell?.value || '';
-            const value = typeof rawValue === 'string' ? rawValue : String(rawValue ?? '');
+            const value = this.formatDisplayValue(rawValue);
             return html `<div>${this.getHeader(cell)}</div>
             <div
                 style="${styleMap(this.computeValueStyles(cell))}"
@@ -202,6 +203,7 @@ export class LitCaseVariablesTab extends LitElement {
             </div> `;
         };
         this.getCellCurrency = (cell) => {
+            const resolvedCurrency = this.resolveCurrencyType(cell);
             return html `<div>${this.getHeader(cell)}</div>
             <div
                 style="${styleMap(this.computeValueStyles(cell))}"
@@ -210,7 +212,7 @@ export class LitCaseVariablesTab extends LitElement {
                 ${cell?.value
                 ? formatCurrency(cell.value, {
                     locale: this.userLang || 'cs',
-                    currency: cell.currencyType,
+                    currency: resolvedCurrency,
                     numberOfDecimal: typeof cell.numberOfDecimal === 'number' ? cell.numberOfDecimal : 2,
                 })
                 : ''}
@@ -251,14 +253,14 @@ export class LitCaseVariablesTab extends LitElement {
         };
         this.getInlineCellValue = (cell) => {
             let rawValue = cell?.[`value_${this.userLang}`] || cell?.value || '';
-            let value = typeof rawValue === 'string' ? rawValue : String(rawValue ?? '');
+            let value = this.formatDisplayValue(rawValue);
             // Format value based on cell.type
             switch (cell.type) {
                 case 'currency':
                     value = cell?.value
                         ? formatCurrency(cell.value, {
                             locale: this.userLang || 'cs',
-                            currency: cell.currencyType,
+                            currency: this.resolveCurrencyType(cell),
                             numberOfDecimal: typeof cell.numberOfDecimal === 'number' ? cell.numberOfDecimal : 2,
                         })
                         : '';
@@ -284,7 +286,7 @@ export class LitCaseVariablesTab extends LitElement {
                     value = `${Math.round(progressNumeric * 100)}%`;
                     break;
                 default:
-                    value = typeof rawValue === 'string' ? rawValue : String(rawValue ?? '');
+                    value = this.formatDisplayValue(rawValue);
             }
             return html `
             <div style="display: flex;align-items: center; justify-content: end; gap: 0.5rem;">
@@ -316,6 +318,166 @@ export class LitCaseVariablesTab extends LitElement {
         `;
         };
     }
+    normalizeConditions(formatting) {
+        if (!formatting)
+            return [];
+        // Backward compat: single object → wrap in array
+        const arr = Array.isArray(formatting) ? formatting : [formatting];
+        // Ensure every condition has 'enabled' as boolean (tweakpane requires a concrete type)
+        return arr.map((c) => ({
+            ...c,
+            enabled: typeof c.enabled === 'boolean' ? c.enabled : true,
+        }));
+    }
+    createDefaultCondition(cell) {
+        return {
+            enabled: true,
+            variable: cell.field,
+            operator: this.getDefaultOperatorForCell(cell),
+            value: '',
+            cellVariant: 'default',
+            valueVariant: 'default',
+            progressColor: 'primary',
+        };
+    }
+    rebuildConditionFolders(parentFolder, config, cell) {
+        // Dispose old sub-folders for this cell
+        const key = cell.field;
+        const oldFolders = this.conditionSubFolders.get(key) || [];
+        for (const f of oldFolders) {
+            try {
+                f.dispose();
+            }
+            catch (_e) { /* already disposed */ }
+        }
+        this.conditionSubFolders.set(key, []);
+        // Clean up tracked inputs for this cell's conditions
+        for (const [k] of this.operatorInputs) {
+            if (k.startsWith(`${key}_condition_`)) {
+                this.operatorInputs.delete(k);
+            }
+        }
+        for (const [k] of this.conditionValueInputs) {
+            if (k.startsWith(`${key}_condition_`)) {
+                this.conditionValueInputs.delete(k);
+            }
+        }
+        const conditions = config.conditions;
+        const folders = [];
+        conditions.forEach((conditionObj, idx) => {
+            const subFolder = parentFolder.addFolder({
+                title: `${msg('Podmínka')} ${idx + 1}`,
+                expanded: idx === conditions.length - 1,
+            });
+            folders.push(subFolder);
+            this.buildSingleConditionFolder(subFolder, conditionObj, config, cell, idx);
+            // Delete condition button
+            const deleteBtn = subFolder.addButton({ title: msg('Smazat podmínku') });
+            deleteBtn.on('click', () => {
+                this.removeConditionFromCell(cell, idx);
+                config.conditions = this.normalizeConditions(this.rows.find((c) => c.field === cell.field)?.conditionalFormatting);
+                this.rebuildConditionFolders(parentFolder, config, cell);
+            });
+        });
+        this.conditionSubFolders.set(key, folders);
+    }
+    buildSingleConditionFolder(folder, conditionObj, _config, cell, conditionIndex) {
+        // Enable toggle
+        const enabledInput = folder.addBinding(conditionObj, 'enabled', {
+            label: msg('Povolit'),
+        });
+        enabledInput.on('change', (ev) => {
+            this.setConditionalFormatting(cell, conditionIndex, 'enabled', ev.value);
+        });
+        // Variable selector
+        const variableOptions = this.getAllAvailableVariables();
+        if (variableOptions.length > 0) {
+            if (!conditionObj.variable) {
+                conditionObj.variable = cell.field;
+                this.setConditionalFormatting(cell, conditionIndex, 'variable', cell.field);
+            }
+            const variableInput = folder.addBinding(conditionObj, 'variable', {
+                view: 'list',
+                label: msg('Proměnná'),
+                options: variableOptions,
+            });
+            variableInput.on('change', (ev) => {
+                this.setConditionalFormatting(cell, conditionIndex, 'variable', ev.value);
+                this.updateConditionalFormattingOperators(folder, conditionObj, cell, conditionIndex, ev.value);
+            });
+        }
+        // Operator
+        const variableType = this.getVariableTypeByField(conditionObj.variable);
+        const tempCell = { ...cell, field: conditionObj.variable, type: variableType };
+        const operatorOptions = this.getOperatorOptionsForCell(tempCell);
+        const operatorInput = folder.addBinding(conditionObj, 'operator', {
+            view: 'list',
+            label: msg('Operátor'),
+            options: operatorOptions,
+        });
+        operatorInput.on('change', (ev) => {
+            this.setConditionalFormatting(cell, conditionIndex, 'operator', ev.value);
+        });
+        const operatorKey = `${cell.field}_condition_${conditionIndex}_operator`;
+        this.operatorInputs.set(operatorKey, operatorInput);
+        // Value input
+        this.addConditionalFormattingValueInput(folder, conditionObj, cell, conditionIndex, conditionObj.variable);
+        // Cell Variant
+        const cellVariantOptions = [
+            { text: msg('Výchozí'), value: 'default' },
+            { text: msg('Primární'), value: 'primary' },
+            { text: msg('Úspěch'), value: 'success' },
+            { text: msg('Varování'), value: 'warning' },
+            { text: msg('Chyba'), value: 'error' },
+            { text: msg('Informace'), value: 'info' },
+        ];
+        const cellVariantInput = folder.addBinding(conditionObj, 'cellVariant', {
+            view: 'list',
+            label: msg('Styl buňky'),
+            options: cellVariantOptions,
+        });
+        cellVariantInput.on('change', (ev) => {
+            this.setConditionalFormatting(cell, conditionIndex, 'cellVariant', ev.value);
+        });
+        this.colorizeVariantSelect(cellVariantInput, cellVariantOptions, conditionObj, 'cellVariant');
+        // Value Variant
+        const valueVariantOptions = [
+            { text: msg('Výchozí'), value: 'default' },
+            { text: msg('Primární'), value: 'primary' },
+            { text: msg('Úspěch'), value: 'success' },
+            { text: msg('Varování'), value: 'warning' },
+            { text: msg('Chyba'), value: 'error' },
+            { text: msg('Informace'), value: 'info' },
+        ];
+        const valueVariantInput = folder.addBinding(conditionObj, 'valueVariant', {
+            view: 'list',
+            label: msg('Barva hodnoty'),
+            options: valueVariantOptions,
+        });
+        valueVariantInput.on('change', (ev) => {
+            this.setConditionalFormatting(cell, conditionIndex, 'valueVariant', ev.value);
+        });
+        this.colorizeVariantSelect(valueVariantInput, valueVariantOptions, conditionObj, 'valueVariant');
+        // Progress Color (only for progress type)
+        if (cell.type === 'progress') {
+            const progressColorOptions = [
+                { text: msg('Primární'), value: 'primary' },
+                { text: msg('Úspěch'), value: 'success' },
+                { text: msg('Varování'), value: 'warning' },
+                { text: msg('Chyba'), value: 'error' },
+                { text: msg('Informace'), value: 'info' },
+            ];
+            const progressColorInput = folder.addBinding(conditionObj, 'progressColor', {
+                view: 'list',
+                label: msg('Barva Progressu'),
+                options: progressColorOptions,
+            });
+            progressColorInput.on('change', (ev) => {
+                this.setConditionalFormatting(cell, conditionIndex, 'progressColor', ev.value);
+            });
+            this.colorizeVariantSelect(progressColorInput, progressColorOptions, conditionObj, 'progressColor');
+        }
+    }
     createCellSettingsConfig(cell) {
         // If cell type is 'select' or 'multiselect', set cellType to 'string'
         let cellType = cell.type || 'string';
@@ -345,14 +507,8 @@ export class LitCaseVariablesTab extends LitElement {
             buttonFullWidth: cell.buttonFullWidth ?? false,
             currencyType: cell.currencyType || 'CZK',
             customCSS: JSON.stringify(cell.cellStyle || {}),
-            // Conditional formatting - simplified structure
-            conditionEnabled: !!cell.conditionalFormatting?.enabled,
-            conditionVariable: cell.conditionalFormatting?.variable ?? '',
-            conditionOperator: cell.conditionalFormatting?.operator ?? '',
-            conditionValue: cell.conditionalFormatting?.value ?? '',
-            conditionCellVariant: cell.conditionalFormatting?.cellVariant ?? 'default',
-            conditionValueVariant: cell.conditionalFormatting?.valueVariant ?? 'default',
-            conditionProgressColor: cell.conditionalFormatting?.progressColor ?? 'primary',
+            // Conditional formatting - array of conditions (backward compat: wrap single object)
+            conditions: this.normalizeConditions(cell.conditionalFormatting),
             // Conditional hide cell settings
             hideConditionEnabled: !!cell.hideCondition?.enabled,
             hideConditionVariable: cell.hideCondition?.variable ?? '',
@@ -448,19 +604,15 @@ export class LitCaseVariablesTab extends LitElement {
         }
         return undefined;
     }
-    updateConditionalFormattingOperators(folder, config, cell, variableName) {
-        // Get the type of the selected variable to ensure correct operators
+    updateConditionalFormattingOperators(folder, conditionObj, cell, conditionIndex, variableName) {
         const variableType = this.getVariableTypeByField(variableName);
-        // Create a temporary cell object with the new variable and its type
         const tempCell = { ...cell, field: variableName, type: variableType };
         const newOperatorOptions = this.getOperatorOptionsForCell(tempCell);
-        // Find existing operator binding and its position
-        const operatorKey = `${cell.field}_condition_operator`;
+        const operatorKey = `${cell.field}_condition_${conditionIndex}_operator`;
         const existingOperatorInput = this.operatorInputs.get(operatorKey);
         let insertIndex = -1;
         if (existingOperatorInput) {
             try {
-                // Find the index of the existing operator input
                 insertIndex = folder.children.indexOf(existingOperatorInput);
                 existingOperatorInput.dispose();
                 this.operatorInputs.delete(operatorKey);
@@ -469,24 +621,20 @@ export class LitCaseVariablesTab extends LitElement {
                 console.warn('Could not dispose existing operator binding:', error);
             }
         }
-        // Reset operator to default for new variable type
         const defaultOperator = this.getDefaultOperatorForCell(tempCell);
-        config.conditionOperator = defaultOperator;
-        this.setConditionalFormatting(cell, 'operator', defaultOperator);
-        // Add new operator binding with updated options
-        const operatorInput = folder.addBinding(config, 'conditionOperator', {
+        conditionObj.operator = defaultOperator;
+        this.setConditionalFormatting(cell, conditionIndex, 'operator', defaultOperator);
+        const operatorInput = folder.addBinding(conditionObj, 'operator', {
             view: 'list',
             label: msg('Operátor'),
             options: newOperatorOptions,
-            index: insertIndex >= 0 ? insertIndex : undefined, // Insert at same position if possible
+            index: insertIndex >= 0 ? insertIndex : undefined,
         });
         operatorInput.on('change', (ev) => {
-            this.setConditionalFormatting(cell, 'operator', ev.value);
+            this.setConditionalFormatting(cell, conditionIndex, 'operator', ev.value);
         });
-        // Store the new operator input for future disposal
         this.operatorInputs.set(operatorKey, operatorInput);
-        // Update the value input to match the new variable type
-        this.addConditionalFormattingValueInput(folder, config, cell, variableName);
+        this.addConditionalFormattingValueInput(folder, conditionObj, cell, conditionIndex, variableName);
     }
     updateHideConditionOperators(folder, config, cell, variableName) {
         // Get the type of the selected variable to ensure correct operators
@@ -577,14 +725,12 @@ export class LitCaseVariablesTab extends LitElement {
         // Store the new value input for future disposal
         this.hideValueInputs.set(valueKey, hideValueInput);
     }
-    addConditionalFormattingValueInput(folder, config, cell, variableName) {
-        // Find and dispose existing value input if it exists
-        const valueKey = `${cell.field}_condition_value`;
+    addConditionalFormattingValueInput(folder, conditionObj, cell, conditionIndex, variableName) {
+        const valueKey = `${cell.field}_condition_${conditionIndex}_value`;
         const existingValueInput = this.conditionValueInputs.get(valueKey);
         let insertIndex = -1;
         if (existingValueInput) {
             try {
-                // Find the index of the existing value input
                 insertIndex = folder.children.indexOf(existingValueInput);
                 existingValueInput.dispose();
                 this.conditionValueInputs.delete(valueKey);
@@ -593,20 +739,17 @@ export class LitCaseVariablesTab extends LitElement {
                 console.warn('Could not dispose existing condition value binding:', error);
             }
         }
-        // Get the type and valueOptions of the selected variable
         const variableType = this.getVariableTypeByField(variableName);
         const valueOptions = this.getValueOptionsByField(variableName);
         let conditionValueInput;
-        // If variable is type 'select' or 'multiselect' and has valueOptions, create a dropdown
         if ((variableType === 'select' || variableType === 'multiselect') &&
             valueOptions &&
             valueOptions.length > 0) {
-            // Convert valueOptions from {label, value} to {text, value} for Tweakpane
             const tweakpaneOptions = valueOptions.map((opt) => ({
                 text: opt.label,
                 value: opt.value,
             }));
-            conditionValueInput = folder.addBinding(config, 'conditionValue', {
+            conditionValueInput = folder.addBinding(conditionObj, 'value', {
                 view: 'list',
                 label: msg('Hodnota'),
                 options: tweakpaneOptions,
@@ -614,16 +757,14 @@ export class LitCaseVariablesTab extends LitElement {
             });
         }
         else {
-            // Otherwise, create a text input
-            conditionValueInput = folder.addBinding(config, 'conditionValue', {
+            conditionValueInput = folder.addBinding(conditionObj, 'value', {
                 label: msg('Hodnota'),
                 index: insertIndex >= 0 ? insertIndex : undefined,
             });
         }
         conditionValueInput.on('change', (ev) => {
-            this.setConditionalFormatting(cell, 'value', ev.value);
+            this.setConditionalFormatting(cell, conditionIndex, 'value', ev.value);
         });
-        // Store the new value input for future disposal
         this.conditionValueInputs.set(valueKey, conditionValueInput);
     }
     getBreakpoint() {
@@ -713,24 +854,44 @@ export class LitCaseVariablesTab extends LitElement {
         });
         return variables.sort((a, b) => a.text.localeCompare(b.text));
     }
-    setConditionalFormatting(cell, property, value) {
-        // Update the cell in the rows array
+    setConditionalFormatting(cell, conditionIndex, property, value) {
         this.rows = this.rows.map((c) => {
             if (c.field === cell.field) {
                 const updatedCell = { ...c };
-                // Initialize conditional formatting if not exists
-                if (!updatedCell.conditionalFormatting) {
-                    updatedCell.conditionalFormatting = {
-                        // Set default operator when creating new conditional formatting
-                        operator: this.getDefaultOperatorForCell(cell),
-                    };
+                // Normalize to array
+                const conditions = this.normalizeConditions(updatedCell.conditionalFormatting).map((cond) => ({ ...cond }));
+                // Ensure index exists
+                if (!conditions[conditionIndex]) {
+                    conditions[conditionIndex] = this.createDefaultCondition(cell);
                 }
-                else {
-                    // Create a copy of conditionalFormatting to avoid mutating the original
-                    updatedCell.conditionalFormatting = { ...updatedCell.conditionalFormatting };
-                }
-                // Set the property
-                updatedCell.conditionalFormatting[property] = value;
+                conditions[conditionIndex][property] = value;
+                updatedCell.conditionalFormatting = conditions;
+                return updatedCell;
+            }
+            return c;
+        });
+        this.handleSettingsChanged(this.rows);
+    }
+    addConditionToCell(cell) {
+        this.rows = this.rows.map((c) => {
+            if (c.field === cell.field) {
+                const updatedCell = { ...c };
+                const conditions = this.normalizeConditions(updatedCell.conditionalFormatting).map((cond) => ({ ...cond }));
+                conditions.push(this.createDefaultCondition(cell));
+                updatedCell.conditionalFormatting = conditions;
+                return updatedCell;
+            }
+            return c;
+        });
+        this.handleSettingsChanged(this.rows);
+    }
+    removeConditionFromCell(cell, conditionIndex) {
+        this.rows = this.rows.map((c) => {
+            if (c.field === cell.field) {
+                const updatedCell = { ...c };
+                const conditions = this.normalizeConditions(updatedCell.conditionalFormatting).map((cond) => ({ ...cond }));
+                conditions.splice(conditionIndex, 1);
+                updatedCell.conditionalFormatting = conditions;
                 return updatedCell;
             }
             return c;
@@ -847,6 +1008,89 @@ export class LitCaseVariablesTab extends LitElement {
             this.settingsPopperOpen = true;
         }
     }
+    getVariantColor(variant) {
+        const entry = LitCaseVariablesTab.VARIANT_CSS_VARS[variant];
+        if (!entry)
+            return '#9ca3af';
+        const styles = getComputedStyle(this);
+        return styles.getPropertyValue(entry.var).trim() || entry.fallback;
+    }
+    colorizeVariantSelect(binding, options, config, configKey) {
+        const el = binding.element;
+        if (!el)
+            return;
+        const selectEl = el.querySelector('select');
+        if (!selectEl)
+            return;
+        // Hide the native select
+        const valueContainer = el.querySelector('.tp-lblv_v');
+        if (!valueContainer)
+            return;
+        selectEl.style.display = 'none';
+        // Also hide the dropdown arrow
+        const arrow = valueContainer.querySelector('.tp-lstv_m');
+        if (arrow)
+            arrow.style.display = 'none';
+        // Create swatches container
+        const swatchContainer = document.createElement('div');
+        swatchContainer.style.cssText = 'display:flex;gap:4px;flex-wrap:wrap;align-items:center;';
+        const borderVarMap = {
+            default: 'var(--text-secondary, #9ca3af)',
+            primary: 'var(--color-primary-main, #76b703)',
+            secondary: 'var(--color-secondary-main, #6b7280)',
+            success: 'var(--color-success-main, #22c55e)',
+            warning: 'var(--color-warning-main, #f59e0b)',
+            error: 'var(--color-error-main, #ef4444)',
+            info: 'var(--color-info-main, #3b82f6)',
+            custom: 'var(--color-primary-main, #8b5cf6)',
+            ai: 'var(--color-primary-main, #a855f7)',
+        };
+        options.forEach((opt) => {
+            const color = this.getVariantColor(opt.value);
+            const borderColor = borderVarMap[opt.value] || 'var(--text-secondary, #9ca3af)';
+            const isCustom = opt.value === 'custom';
+            // Wrapper for positioning the tooltip
+            const wrapper = document.createElement('div');
+            wrapper.style.cssText = 'position:relative;display:inline-flex;';
+            const swatch = document.createElement('div');
+            swatch.dataset.value = opt.value;
+            if (isCustom) {
+                swatch.style.cssText = `
+                    width:16px;height:16px;border-radius:50%;cursor:pointer;
+                    background:conic-gradient(#ef4444,#f59e0b,#22c55e,#3b82f6,#8b5cf6,#ef4444);
+                    border:2px dashed var(--text-secondary, #9ca3af);transition:box-shadow .15s;flex-shrink:0;
+                `;
+            }
+            else {
+                swatch.style.cssText = `
+                    width:16px;height:16px;border-radius:50%;background:${color};cursor:pointer;
+                    border:2px solid ${borderColor};transition:box-shadow .15s;flex-shrink:0;
+                `;
+            }
+            // Tooltip using SimpleTooltip component
+            const tip = document.createElement('simple-tooltip');
+            tip.textContent = opt.text;
+            tip.placement = 'top';
+            tip.offset = 6;
+            tip.openDelayMs = 200;
+            tip.target = swatch;
+            wrapper.appendChild(tip);
+            if (config[configKey] === opt.value) {
+                swatch.style.boxShadow = `0 0 0 2px #fff, 0 0 0 4px ${borderColor}`;
+            }
+            swatch.addEventListener('click', () => {
+                config[configKey] = opt.value;
+                binding.refresh();
+                swatchContainer.querySelectorAll('[data-value]').forEach((s) => {
+                    s.style.boxShadow = 'none';
+                });
+                swatch.style.boxShadow = `0 0 0 2px #fff, 0 0 0 4px ${borderColor}`;
+            });
+            wrapper.appendChild(swatch);
+            swatchContainer.appendChild(wrapper);
+        });
+        valueContainer.appendChild(swatchContainer);
+    }
     // Sanitize field name for use in CSS selectors
     sanitizeFieldName(field) {
         return field.replace(/[^a-zA-Z0-9-_]/g, '-');
@@ -948,6 +1192,27 @@ export class LitCaseVariablesTab extends LitElement {
             container: container,
             title: `${cell.headerName || cell.field}`,
         });
+        // Apply app theme CSS variables to Tweakpane
+        const styles = getComputedStyle(this);
+        const bgPaper = styles.getPropertyValue('--background-paper').trim() || '#fff';
+        const bgDefault = styles.getPropertyValue('--background-default').trim() || '#fff';
+        const textPrimary = styles.getPropertyValue('--text-primary').trim() || '#111827';
+        const textSecondary = styles.getPropertyValue('--text-secondary').trim() || '#5d6371';
+        const colorDivider = styles.getPropertyValue('--color-divider').trim() || '#e5e7eb';
+        const containerEl = container;
+        containerEl.style.setProperty('--tp-base-background-color', bgPaper);
+        containerEl.style.setProperty('--tp-base-shadow-color', 'rgba(0,0,0,0)');
+        containerEl.style.setProperty('--tp-button-background-color', bgDefault);
+        containerEl.style.setProperty('--tp-button-foreground-color', textPrimary);
+        containerEl.style.setProperty('--tp-container-background-color', colorDivider);
+        containerEl.style.setProperty('--tp-container-background-color-hover', colorDivider);
+        containerEl.style.setProperty('--tp-container-foreground-color', textPrimary);
+        containerEl.style.setProperty('--tp-input-background-color', bgDefault);
+        containerEl.style.setProperty('--tp-input-foreground-color', textPrimary);
+        containerEl.style.setProperty('--tp-label-foreground-color', textSecondary);
+        containerEl.style.setProperty('--tp-monitor-background-color', colorDivider);
+        containerEl.style.setProperty('--tp-monitor-foreground-color', textSecondary);
+        containerEl.style.setProperty('--tp-groove-foreground-color', colorDivider);
         const config = this.createCellSettingsConfig(cell);
         // Add size controls for desktop and mobile (only if not in grid variables mode)
         if (!this.gridVariables) {
@@ -1072,6 +1337,7 @@ export class LitCaseVariablesTab extends LitElement {
                 hideCssInput();
             }
         });
+        this.colorizeVariantSelect(cellVariantInput, cellVariantOptions, config, 'cellVariant');
         // Add cell type-specific controls
         this.addCellTypeSpecificControls(pane, config, cell);
         // Add conditional formatting section
@@ -1079,106 +1345,16 @@ export class LitCaseVariablesTab extends LitElement {
             title: msg('Podmíněné formátování buněk'),
             expanded: false,
         });
-        // Enable/disable conditional formatting
-        const conditionEnabledInput = conditionFolder.addBinding(config, 'conditionEnabled', {
-            label: msg('Povolit podmínky'),
-        });
-        conditionEnabledInput.on('change', (ev) => {
-            this.setConditionalFormatting(cell, 'enabled', ev.value);
-        });
-        // Variable selector - compare against variables from grid (including current cell)
-        const variableOptions = this.getAllAvailableVariables();
-        if (variableOptions.length > 0) {
-            // Set default variable to current cell's field if not already set
-            if (!config.conditionVariable) {
-                config.conditionVariable = cell.field;
-                this.setConditionalFormatting(cell, 'variable', cell.field);
-            }
-            const conditionVariableInput = conditionFolder.addBinding(config, 'conditionVariable', {
-                view: 'list',
-                label: msg('Proměnná'),
-                options: variableOptions,
-            });
-            conditionVariableInput.on('change', (ev) => {
-                this.setConditionalFormatting(cell, 'variable', ev.value);
-                // Update operators when variable changes
-                this.updateConditionalFormattingOperators(conditionFolder, config, cell, ev.value);
-            });
-        }
-        // Condition operator - use operators based on cell type
-        // Get the actual cell/variable to determine correct operators
-        const conditionVariableType = this.getVariableTypeByField(config.conditionVariable);
-        const tempConditionCell = {
-            ...cell,
-            field: config.conditionVariable,
-            type: conditionVariableType,
-        };
-        const operatorOptions = this.getOperatorOptionsForCell(tempConditionCell);
-        const operatorInput = conditionFolder.addBinding(config, 'conditionOperator', {
-            view: 'list',
-            label: msg('Operátor'),
-            options: operatorOptions,
-        });
-        operatorInput.on('change', (ev) => {
-            this.setConditionalFormatting(cell, 'operator', ev.value);
-        });
-        // Store the operator input for future disposal
-        const operatorKey = `${cell.field}_condition_operator`;
-        this.operatorInputs.set(operatorKey, operatorInput);
-        // Condition value - dynamic input based on variable type
-        this.addConditionalFormattingValueInput(conditionFolder, config, cell, config.conditionVariable);
-        // Conditional Cell Variant
-        const conditionCellVariantOptions = [
-            { text: msg('Výchozí'), value: 'default' },
-            { text: msg('Primární'), value: 'primary' },
-            { text: msg('Úspěch'), value: 'success' },
-            { text: msg('Varování'), value: 'warning' },
-            { text: msg('Chyba'), value: 'error' },
-            { text: msg('Informace'), value: 'info' },
-        ];
-        const conditionCellVariantInput = conditionFolder.addBinding(config, 'conditionCellVariant', {
-            view: 'list',
-            label: msg('Styl buňky'),
-            options: conditionCellVariantOptions,
-        });
-        conditionCellVariantInput.on('change', (ev) => {
-            this.setConditionalFormatting(cell, 'cellVariant', ev.value);
-        });
-        // Conditional Value Variant
-        const conditionValueVariantOptions = [
-            { text: msg('Výchozí'), value: 'default' },
-            { text: msg('Primární'), value: 'primary' },
-            { text: msg('Úspěch'), value: 'success' },
-            { text: msg('Varování'), value: 'warning' },
-            { text: msg('Chyba'), value: 'error' },
-            { text: msg('Informace'), value: 'info' },
-        ];
-        const conditionValueVariantInput = conditionFolder.addBinding(config, 'conditionValueVariant', {
-            view: 'list',
-            label: msg('Barva hodnoty'),
-            options: conditionValueVariantOptions,
-        });
-        conditionValueVariantInput.on('change', (ev) => {
-            this.setConditionalFormatting(cell, 'valueVariant', ev.value);
+        // "Add Condition" button
+        const addConditionBtn = conditionFolder.addButton({ title: `+ ${msg('Přidat podmínku')}` });
+        addConditionBtn.on('click', () => {
+            this.addConditionToCell(cell);
+            // Rebuild conditions UI
+            config.conditions = this.normalizeConditions(this.rows.find((c) => c.field === cell.field)?.conditionalFormatting);
+            this.rebuildConditionFolders(conditionFolder, config, cell);
         });
-        // Conditional Progress Color (only for progress type)
-        if (cell.type === 'progress') {
-            const conditionProgressColorOptions = [
-                { text: msg('Primární'), value: 'primary' },
-                { text: msg('Úspěch'), value: 'success' },
-                { text: msg('Varování'), value: 'warning' },
-                { text: msg('Chyba'), value: 'error' },
-                { text: msg('Informace'), value: 'info' },
-            ];
-            const conditionProgressColorInput = conditionFolder.addBinding(config, 'conditionProgressColor', {
-                view: 'list',
-                label: msg('Barva Progressu'),
-                options: conditionProgressColorOptions,
-            });
-            conditionProgressColorInput.on('change', (ev) => {
-                this.setConditionalFormatting(cell, 'progressColor', ev.value);
-            });
-        }
+        // Build initial condition sub-folders
+        this.rebuildConditionFolders(conditionFolder, config, cell);
         // Add conditional hide section
         const hideFolder = pane.addFolder({
             title: msg('Podmíněné skrytí buněk'),
@@ -1318,6 +1494,7 @@ export class LitCaseVariablesTab extends LitElement {
                 this.setValueVariant(ev.value, cell);
             }
         });
+        this.colorizeVariantSelect(valueVariantInput, valueVariantOptions, config, 'valueVariant');
     }
     addLinkControls(pane, config, cell) {
         // Link Type selector
@@ -1370,6 +1547,7 @@ export class LitCaseVariablesTab extends LitElement {
                 this.setValueVariant(ev.value, cell);
             }
         });
+        this.colorizeVariantSelect(valueVariantInput, valueVariantOptions, config, 'valueVariant');
     }
     addButtonControls(pane, config, cell) {
         // Button Variant
@@ -1387,20 +1565,22 @@ export class LitCaseVariablesTab extends LitElement {
             this.setButtonVariant(cell, ev.value);
         });
         // Button Color
+        const buttonColorOptions = [
+            { text: msg('Primární'), value: 'primary' },
+            { text: msg('Druhé'), value: 'secondary' },
+            { text: msg('Chyba'), value: 'error' },
+            { text: msg('Varování'), value: 'warning' },
+            { text: msg('AI'), value: 'ai' },
+        ];
         const colorInput = pane.addBinding(config, 'buttonColor', {
             view: 'list',
             label: msg('Barva tlačítka'),
-            options: [
-                { text: msg('Primární'), value: 'primary' },
-                { text: msg('Druhé'), value: 'secondary' },
-                { text: msg('Chyba'), value: 'error' },
-                { text: msg('Varování'), value: 'warning' },
-                { text: msg('AI'), value: 'ai' },
-            ],
+            options: buttonColorOptions,
         });
         colorInput.on('change', (ev) => {
             this.setButtonColor(cell, ev.value);
         });
+        this.colorizeVariantSelect(colorInput, buttonColorOptions, config, 'buttonColor');
         // Button Full Width
         const fullWidthInput = pane.addBinding(config, 'buttonFullWidth', {
             label: msg('Tlačítko na celou šířku'),
@@ -1460,6 +1640,7 @@ export class LitCaseVariablesTab extends LitElement {
                 this.setValueVariant(ev.value, cell);
             }
         });
+        this.colorizeVariantSelect(valueVariantInput, valueVariantOptions, config, 'valueVariant');
         // Number of Decimals
         const decimalInput = pane.addBinding(config, 'numberOfDecimal', {
             label: msg('Počet desetinných míst'),
@@ -1471,26 +1652,35 @@ export class LitCaseVariablesTab extends LitElement {
             this.setNumberOfDecimal(cell, ev.value);
         });
         // Currency Type
+        const currencyOptions = [
+            { text: 'CZK', value: 'CZK' },
+            { text: 'EUR', value: 'EUR' },
+            { text: 'USD', value: 'USD' },
+            { text: 'GBP', value: 'GBP' },
+            { text: 'CHF', value: 'CHF' },
+            { text: 'PLN', value: 'PLN' },
+            { text: 'HUF', value: 'HUF' },
+            { text: 'JPY', value: 'JPY' },
+            { text: 'AUD', value: 'AUD' },
+            { text: 'CAD', value: 'CAD' },
+            { text: 'NOK', value: 'NOK' },
+            { text: 'SEK', value: 'SEK' },
+            { text: 'DKK', value: 'DKK' },
+            { text: 'CNY', value: 'CNY' },
+            { text: 'RUB', value: 'RUB' },
+        ];
+        // Add variables as currency source options
+        const variableOptions = this.getAllAvailableVariables();
+        variableOptions.forEach((v) => {
+            currencyOptions.push({
+                text: `${v.text}`,
+                value: `var:${v.value}`,
+            });
+        });
         const currencyInput = pane.addBinding(config, 'currencyType', {
             view: 'list',
             label: msg('Typ měny'),
-            options: [
-                { text: 'CZK', value: 'CZK' },
-                { text: 'EUR', value: 'EUR' },
-                { text: 'USD', value: 'USD' },
-                { text: 'GBP', value: 'GBP' },
-                { text: 'CHF', value: 'CHF' },
-                { text: 'PLN', value: 'PLN' },
-                { text: 'HUF', value: 'HUF' },
-                { text: 'JPY', value: 'JPY' },
-                { text: 'AUD', value: 'AUD' },
-                { text: 'CAD', value: 'CAD' },
-                { text: 'NOK', value: 'NOK' },
-                { text: 'SEK', value: 'SEK' },
-                { text: 'DKK', value: 'DKK' },
-                { text: 'CNY', value: 'CNY' },
-                { text: 'RUB', value: 'RUB' },
-            ],
+            options: currencyOptions,
         });
         currencyInput.on('change', (ev) => {
             this.setCurrencyType(cell, ev.value);
@@ -1526,23 +1716,26 @@ export class LitCaseVariablesTab extends LitElement {
                 this.setValueVariant(ev.value, cell);
             }
         });
+        this.colorizeVariantSelect(valueVariantInput, valueVariantOptions, config, 'valueVariant');
     }
     addProgressControls(pane, config, cell) {
         // Progress Color
+        const progressColorOptions = [
+            { text: msg('Primární'), value: 'primary' },
+            { text: msg('Úspěch'), value: 'success' },
+            { text: msg('Varování'), value: 'warning' },
+            { text: msg('Chyba'), value: 'error' },
+            { text: msg('Informace'), value: 'info' },
+        ];
         const progressColorInput = pane.addBinding(config, 'progressColor', {
             view: 'list',
             label: msg('Barva postupu'),
-            options: [
-                { text: msg('Primární'), value: 'primary' },
-                { text: msg('Úspěch'), value: 'success' },
-                { text: msg('Varování'), value: 'warning' },
-                { text: msg('Chyba'), value: 'error' },
-                { text: msg('Informace'), value: 'info' },
-            ],
+            options: progressColorOptions,
         });
         progressColorInput.on('change', (ev) => {
             this.setProgressColor(cell, ev.value);
         });
+        this.colorizeVariantSelect(progressColorInput, progressColorOptions, config, 'progressColor');
         // Value Variant (for progress text color if needed)
         const valueVariantOptions = [
             { text: msg('Výchozí'), value: 'default' },
@@ -1565,6 +1758,7 @@ export class LitCaseVariablesTab extends LitElement {
                 this.setValueVariant(ev.value, cell);
             }
         });
+        this.colorizeVariantSelect(valueVariantInput, valueVariantOptions, config, 'valueVariant');
     }
     getVariableValue(fieldName) {
         // First check in variables array for a matching field
@@ -1587,9 +1781,6 @@ export class LitCaseVariablesTab extends LitElement {
         return '';
     }
     evaluateCondition(variableField, conditionValue, operator) {
-        if (this.enableSettings) {
-            return false; // Disable conditional formatting when in settings mode
-        }
         // Get the value of the selected variable
         const variableValue = this.getVariableValue(variableField);
         // For isEmpty/isNotEmpty operators, check the raw value first
@@ -1792,15 +1983,18 @@ export class LitCaseVariablesTab extends LitElement {
         if (cell.cellCustomStyles && cell.cellStyle) {
             styles = { ...styles, ...cell.cellStyle };
         }
-        // 1. Conditional formatting cell variant (highest priority)
-        const conditionalFormatting = cell.conditionalFormatting;
-        if (conditionalFormatting?.enabled && conditionalFormatting?.variable) {
-            const conditionMet = this.evaluateCondition(conditionalFormatting.variable, conditionalFormatting.value, conditionalFormatting.operator);
-            if (conditionMet &&
-                conditionalFormatting.cellVariant &&
-                conditionalFormatting.cellVariant !== 'default') {
-                const conditionalCellStyle = this.getCellVariantStyle(conditionalFormatting.cellVariant);
-                styles = { ...styles, ...conditionalCellStyle };
+        // 1. Conditional formatting cell variant (highest priority, first match wins)
+        const conditions = this.normalizeConditions(cell.conditionalFormatting);
+        for (const condition of conditions) {
+            if (condition?.enabled && condition?.variable) {
+                const conditionMet = this.evaluateCondition(condition.variable, condition.value, condition.operator);
+                if (conditionMet &&
+                    condition.cellVariant &&
+                    condition.cellVariant !== 'default') {
+                    const conditionalCellStyle = this.getCellVariantStyle(condition.cellVariant);
+                    styles = { ...styles, ...conditionalCellStyle };
+                    break;
+                }
             }
         }
         return styles;
@@ -1857,15 +2051,18 @@ export class LitCaseVariablesTab extends LitElement {
         if (cell.valueCustomStyles && cell.valueStyle) {
             styles = { ...styles, ...cell.valueStyle };
         }
-        // 1. Conditional formatting value variant (highest priority)
-        const conditionalFormatting = cell.conditionalFormatting;
-        if (conditionalFormatting?.enabled && conditionalFormatting?.variable) {
-            const conditionMet = this.evaluateCondition(conditionalFormatting.variable, conditionalFormatting.value, conditionalFormatting.operator);
-            if (conditionMet &&
-                conditionalFormatting.valueVariant &&
-                conditionalFormatting.valueVariant !== 'default') {
-                const conditionalValueStyle = this.getValueVariantStyle(conditionalFormatting.valueVariant);
-                styles = { ...styles, ...conditionalValueStyle };
+        // 1. Conditional formatting value variant (highest priority, first match wins)
+        const conditions = this.normalizeConditions(cell.conditionalFormatting);
+        for (const condition of conditions) {
+            if (condition?.enabled && condition?.variable) {
+                const conditionMet = this.evaluateCondition(condition.variable, condition.value, condition.operator);
+                if (conditionMet &&
+                    condition.valueVariant &&
+                    condition.valueVariant !== 'default') {
+                    const conditionalValueStyle = this.getValueVariantStyle(condition.valueVariant);
+                    styles = { ...styles, ...conditionalValueStyle };
+                    break;
+                }
             }
         }
         return styles;
@@ -1887,12 +2084,15 @@ export class LitCaseVariablesTab extends LitElement {
         // 2. Cell progressColor property
         // 3. Default 'primary' color (lowest)
         let progressColor = cell.progressColor || 'primary';
-        // 1. Conditional formatting progressColor (highest priority)
-        const conditionalFormatting = cell.conditionalFormatting;
-        if (conditionalFormatting?.enabled && conditionalFormatting?.variable) {
-            const conditionMet = this.evaluateCondition(conditionalFormatting.variable, conditionalFormatting.value, conditionalFormatting.operator);
-            if (conditionMet && conditionalFormatting.progressColor) {
-                progressColor = conditionalFormatting.progressColor;
+        // 1. Conditional formatting progressColor (highest priority, first match wins)
+        const conditions = this.normalizeConditions(cell.conditionalFormatting);
+        for (const condition of conditions) {
+            if (condition?.enabled && condition?.variable) {
+                const conditionMet = this.evaluateCondition(condition.variable, condition.value, condition.operator);
+                if (conditionMet && condition.progressColor) {
+                    progressColor = condition.progressColor;
+                    break;
+                }
             }
         }
         return progressColor;
@@ -2131,6 +2331,15 @@ export class LitCaseVariablesTab extends LitElement {
     }
     toggleCustomPopover() {
         this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.updateComplete.then(() => {
+                setTimeout(() => {
+                    const input = this.shadowRoot?.querySelector('#variable-filter-input') ||
+                        document.querySelector('#variable-filter-input');
+                    input?.focus();
+                }, 100);
+            });
+        }
     }
     get existingFields() {
         return this.rows.flat().map((cell) => cell.field);
@@ -2175,6 +2384,26 @@ export class LitCaseVariablesTab extends LitElement {
         // Return static href as-is
         return href;
     }
+    formatDisplayValue(rawValue) {
+        if (Array.isArray(rawValue)) {
+            return rawValue.map((v) => String(v ?? '')).join(', ');
+        }
+        return typeof rawValue === 'string' ? rawValue : String(rawValue ?? '');
+    }
+    resolveCurrencyType(cell) {
+        const currencyType = cell.currencyType || 'CZK';
+        if (currencyType.startsWith('var:')) {
+            const variableField = currencyType.substring(4);
+            const variable = this.variables.find((v) => v.field === variableField)
+                || this.rows.find((c) => c.field === variableField);
+            const resolved = String(variable?.value || '').toUpperCase();
+            if (LitCaseVariablesTab.SUPPORTED_CURRENCIES.includes(resolved)) {
+                return resolved;
+            }
+            return 'CZK';
+        }
+        return currencyType;
+    }
     render() {
         if (this.hideTabWhen)
             return null;
@@ -2265,6 +2494,8 @@ export class LitCaseVariablesTab extends LitElement {
                               .placement=${'top-end'}
                               .manualOpening=${true}
                               .maxWidthAsTarget=${false}
+                              .minWidth=${'400px'}
+                              .minHeight=${'300px'}
                               .onClose=${() => this.closePopover()}
                           >
                               <div
@@ -2272,6 +2503,7 @@ export class LitCaseVariablesTab extends LitElement {
                                   style="position: sticky; top: 0; z-index: 1;"
                               >
                                   <lit-input
+                                      id="variable-filter-input"
                                       .value=${this.filterText}
                                       .onInput=${(value) => {
                 this.filterText = value?.toLowerCase?.() || '';
@@ -2300,7 +2532,12 @@ export class LitCaseVariablesTab extends LitElement {
                     return 1;
                 if (!aIsUnderscore && bIsUnderscore)
                     return -1;
-                return a.localeCompare(b);
+                const lang = this.userLang || 'cs';
+                const aItem = this.variables.find((v) => v.field === a);
+                const bItem = this.variables.find((v) => v.field === b);
+                const aName = aItem?.[`tvar_name_${lang}`] || a;
+                const bName = bItem?.[`tvar_name_${lang}`] || b;
+                return aName.localeCompare(bName, lang);
             })
                 .map((key) => html `
                                               <lit-menu-item
@@ -2322,7 +2559,7 @@ export class LitCaseVariablesTab extends LitElement {
                               ${isEqual(filteredKeys.length, 0)
                 ? html `
                                         <div
-                                            style="display: flex;flex-direction: column; align-items: center"
+                                            style="display: flex;flex-direction: column; align-items: center; justify-content: center; height: 15.625rem;"
                                         >
                                             <div style="max-height: 7.125rem; max-width: 7.125rem">
                                                 <not-found></not-found>
@@ -2347,6 +2584,17 @@ export class LitCaseVariablesTab extends LitElement {
         `;
     }
 }
+LitCaseVariablesTab.VARIANT_CSS_VARS = {
+    default: { var: '--background-paper', fallback: '#9ca3af' },
+    primary: { var: '--color-primary-light', fallback: '#76b703' },
+    secondary: { var: '--color-secondary-light', fallback: '#6b7280' },
+    success: { var: '--color-success-light', fallback: '#22c55e' },
+    warning: { var: '--color-warning-light', fallback: '#f59e0b' },
+    error: { var: '--color-error-light', fallback: '#ef4444' },
+    info: { var: '--color-info-light', fallback: '#3b82f6' },
+    custom: { var: '--color-primary-light', fallback: '#8b5cf6' },
+    ai: { var: '--color-primary-light', fallback: '#a855f7' },
+};
 LitCaseVariablesTab.styles = [
     // styles,
     css `
@@ -2566,6 +2814,10 @@ LitCaseVariablesTab.styles = [
             }
         `,
 ];
+LitCaseVariablesTab.SUPPORTED_CURRENCIES = [
+    'CZK', 'EUR', 'USD', 'GBP', 'CHF', 'PLN', 'HUF',
+    'JPY', 'AUD', 'CAD', 'NOK', 'SEK', 'DKK', 'CNY', 'RUB',
+];
 __decorate([
     property({ type: Array })
 ], LitCaseVariablesTab.prototype, "rows", void 0);