overview-components 1.1.159 → 1.1.161

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

@@ -1,3718 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { property, state } from 'lit/decorators.js';
-import Sortable from 'sortablejs';
-import { repeat } from 'lit/directives/repeat.js';
-import { Pane } from 'tweakpane';
-// components
-import '../shared/lit-icon.js';
-import '../shared/lit-button.js';
-import '../shared/lit-menu.js';
-import '../shared/lit-menu-item.js';
-import '../shared/lit-checkbox.js';
-import '../shared/lit-input.js';
-import '../shared/simple-popper.js';
-import '../assets/illustration/not-found.js';
-import { tooltip } from '../shared/simple-tooltip.js';
-import '../shared/lit-tooltip.js';
-import '../shared/lit-progress-bar.js';
-import '../shared/lit-modal.js';
-import '../shared/lit-modal-header.js';
-import '../shared/lit-modal-body.js';
-import '../shared/lit-modal-footer.js';
-import '../shared/lit-select-field.js';
-import '../shared/lit-select.js';
-import '../shared/lit-label.js';
-import '../shared/lit-icon-button.js';
-import '../shared/lit-toggle.js';
-import '../shared/lit-text-field.js';
-import './lit-tabs-overview.js';
-// utils
-import { formatDate } from '../utils/date.js';
-import { formatCurrency, formatDecimal } from '../utils/formatNumber.js';
-import { setLocale, getLocale, LOCALE_LANGS } from '../utils/localization.js';
-import { msg } from '@lit/localize';
-import { isEqual } from 'lodash';
-import { getOperatorsByColumnType, getDefaultOperator, } from '../utils/getOperatorByType.js';
-export class LitCaseVariablesTab extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.rows = [];
-        this.variables = [];
-        this.hideTabWhen = false;
-        this.userLang = 'cs';
-        this.allowedLang = ['cs'];
-        this.dateFormat = null;
-        this.isLoading = false;
-        this.enableSettings = false;
-        this.gridVariables = false;
-        this.onSettingsChanged = (rows) => { };
-        this.hostURL = '';
-        this.currentBreakpoint = this.getBreakpoint();
-        this.isOpen = false;
-        this.filterText = '';
-        this.isMobile = window.innerWidth <= 600;
-        this.expertModeModalOpen = false;
-        this.expertModeCell = null;
-        this.expertModeConfig = {
-            enabled: false,
-            leftType: 'column',
-            leftSource: '',
-            leftValue: '',
-            leftAggregation: 'sum',
-            operation: 'none',
-            rightType: 'variable',
-            rightSource: '',
-            rightValue: '',
-            rightAggregation: 'sum',
-            headerName: '',
-            headerNameMutations: {},
-            pmEnabled: false,
-            pmLeftType: 'column',
-            pmLeftSource: '',
-            pmLeftValue: '',
-            pmLeftAggregation: 'sum',
-            pmOperation: 'none',
-            pmRightType: 'variable',
-            pmRightSource: '',
-            pmRightValue: '',
-            pmRightAggregation: 'sum',
-        };
-        this._resolvedExpertValues = new Map();
-        this._resizeListener = this.handleResize.bind(this);
-        this.sortableInstances = [];
-        this.settingsPanes = new Map();
-        this.operatorInputs = new Map(); // Track conditional formatting operator inputs
-        this.conditionValueInputs = new Map(); // Track conditional formatting value inputs
-        this.hideOperatorInputs = new Map(); // Track hide condition operator inputs
-        this.hideValueInputs = new Map(); // Track hide condition value inputs
-        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 = () => {
-            // Clean up any existing tweakpanes before closing
-            this.destroySettingsPanes();
-            this.settingsPopperOpen = false;
-            this.activeSettingsCell = null;
-        };
-        this.handleSettingsChanged = (newRows) => {
-            this.onSettingsChanged?.(newRows);
-        };
-        this.addCustomEmptyCell = () => {
-            // Generate a unique field name for the custom cell
-            const customCellCount = this.rows.filter((cell) => cell.field.startsWith('custom_cell_')).length;
-            const fieldName = `custom_cell_${customCellCount + 1}`;
-            // Create a new empty custom cell (without tooltip, headerName, or value)
-            const newCell = {
-                field: fieldName,
-                type: 'string',
-                size: { xs: 4, sm: 2, md: 1, lg: 1, xl: 1 },
-            };
-            const newRows = [...this.rows, newCell];
-            this.rows = newRows;
-            this.handleSettingsChanged(newRows);
-            // Automatically open settings for the new cell to allow user to customize it
-            setTimeout(() => {
-                this.toggleSettingsPane(newCell);
-            }, 100);
-        };
-        this.getHeaderActions = (cell) => {
-            return html `<div class="header-buttons">
-            ${this.enableSettings
-                ? html `
-                      <div style="position: relative;">
-                          <lit-icon
-                              icon="cog"
-                              size="1rem"
-                              style="cursor: pointer"
-                              @click=${() => this.toggleSettingsPane(cell)}
-                              id="settings-trigger-${cell.field}"
-                          ></lit-icon>
-
-                          ${this.activeSettingsCell?.field === cell.field
-                    ? html `
-                                    <simple-popper
-                                        .showing=${this.settingsPopperOpen}
-                                        .placement=${'bottom'}
-                                        .manualOpening=${true}
-                                        .maxWidthAsTarget=${false}
-                                        .onClose=${this.closeSettingsPopper}
-                                    >
-                                        ${this.renderSettingsContent()}
-                                    </simple-popper>
-                                `
-                    : ''}
-                      </div>
-
-                      <div class="drag-handle">
-                          <lit-icon icon="hamburger" size="1rem"></lit-icon>
-                      </div>
-                  `
-                : null}
-        </div>`;
-        };
-        this.getHeaderLabel = (cell) => {
-            const tooltipText = cell?.[`tooltip_${(this.userLang)}`] || cell?.tooltip;
-            return html ` <div
-            style="${cell?.headerStyle ? styleMap(cell?.headerStyle) : ''}"
-            class="process-data-heading"
-        >
-            ${cell?.[`headerName_${(this.userLang)}`] ||
-                cell?.headerName ||
-                ''}
-            ${tooltipText
-                ? html `
-                      <lit-icon
-                          ${tooltip(tooltipText, 'right', 100)}
-                          size="12px"
-                          icon="informative"
-                      ></lit-icon>
-                  `
-                : ''}
-        </div>`;
-        };
-        this.getHeader = (cell) => {
-            return html ` <div class="header-cell">
-            ${this.getHeaderLabel(cell)} ${this.getHeaderActions(cell)}
-        </div>`;
-        };
-        this.handleButtonClick = (cell) => {
-            // First try the original buttonFn if it exists and is a function
-            if (cell.buttonFn && typeof cell.buttonFn === 'function') {
-                cell.buttonFn();
-                return;
-            }
-            // Otherwise use the href functionality like links
-            const url = this.getLinkUrl(cell);
-            if (url) {
-                window.open(url, '_blank');
-            }
-        };
-        this.getCellButton = (cell) => {
-            return html `
-            <div style="display: flex; justify-content: space-between">
-                <lit-button
-                    style="flex-grow: 1; margin-right: 0.5rem"
-                    .fullWidth="${cell.buttonFullWidth}"
-                    variant="${cell.buttonVariant || 'contained'}"
-                    color="${cell.buttonColor || 'primary'}"
-                    label="${cell?.headerName}"
-                    @click=${() => this.handleButtonClick(cell)}
-                ></lit-button>
-                ${this.getHeaderActions(cell)}
-            </div>
-        `;
-        };
-        this.getCellLink = (cell) => {
-            const linkUrl = this.getLinkUrl(cell);
-            const displayText = cell?.value || linkUrl || '';
-            return html `<div>${this.getHeader(cell)}</div>
-            <a class="link" href=${linkUrl} target="_blank">${displayText} </a> `;
-        };
-        this.getCellValue = (cell) => {
-            const langValue = cell?.[`value_${(this.userLang)}`];
-            const rawValue = (langValue !== null && langValue !== undefined && langValue !== '') ? langValue : (cell?.value ?? '');
-            const value = this.formatDisplayValue(rawValue);
-            return html `<div>${this.getHeader(cell)}</div>
-            <div
-                style="${styleMap(this.computeValueStyles(cell))}"
-                class="process-data-value"
-            >
-                ${unsafeHTML(value)}
-            </div> `;
-        };
-        this.getCellDate = (cell) => {
-            return html `<div>${this.getHeader(cell)}</div>
-            <div
-                style="${styleMap(this.computeValueStyles(cell))}"
-                class="process-data-value"
-            >
-                ${cell?.value
-                ? formatDate(cell.value, this.getLocaleLang(), !!this.dateFormat, this.dateFormat)
-                : ''}
-            </div> `;
-        };
-        this.getCellCurrency = (cell) => {
-            const resolvedCurrency = this.resolveCurrencyType(cell);
-            return html `<div>${this.getHeader(cell)}</div>
-            <div
-                style="${styleMap(this.computeValueStyles(cell))}"
-                class="process-data-value"
-            >
-                ${cell?.value != null
-                ? formatCurrency(cell.value, {
-                    locale: this.getLocaleLang(),
-                    currency: resolvedCurrency,
-                    numberOfDecimal: typeof cell.numberOfDecimal === 'number' ? cell.numberOfDecimal : 2,
-                })
-                : ''}
-            </div> `;
-        };
-        this.getCellNumber = (cell) => {
-            return html `<div>${this.getHeader(cell)}</div>
-            <div
-                style="${styleMap(this.computeValueStyles(cell))}"
-                class="process-data-value"
-            >
-                ${cell?.value != null
-                ? formatDecimal(cell.value, {
-                    locale: this.getLocaleLang(),
-                    numberOfDecimal: typeof cell.numberOfDecimal === 'number'
-                        ? cell.numberOfDecimal
-                        : undefined,
-                })
-                : ''}
-            </div> `;
-        };
-        this.getCellProgress = (cell) => {
-            const numericValue = this.parseProgressValue(cell?.value);
-            const progressMax = this.resolveProgressMax(cell);
-            const percentage = progressMax > 0 ? (numericValue / progressMax) * 100 : 0;
-            const progressColor = this.computeProgressColor(cell);
-            return html `<div>${this.getHeader(cell)}</div>
-            <div
-                style="${styleMap(this.computeValueStyles(cell))}"
-                class="process-data-value"
-            >
-                <lit-progress-bar
-                    .progress="${percentage}"
-                    .color="${progressColor}"
-                    label=""
-                    style="width: 100%;"
-                ></lit-progress-bar>
-            </div> `;
-        };
-        this.getCellCheckbox = (cell) => {
-            const checked = this.parseBooleanValue(cell?.value);
-            return html `<div>${this.getHeader(cell)}</div>
-            <div class="process-data-value">
-                <lit-checkbox
-                    .checked=${checked}
-                    .disabled=${true}
-                ></lit-checkbox>
-            </div> `;
-        };
-        this.getInlineCellValue = (cell) => {
-            const langVal = cell?.[`value_${(this.userLang)}`];
-            let rawValue = (langVal !== null && langVal !== undefined && langVal !== '') ? langVal : (cell?.value ?? '');
-            let value = this.formatDisplayValue(rawValue);
-            // Format value based on cell.type
-            switch (cell.type) {
-                case 'currency':
-                    value = cell?.value != null
-                        ? formatCurrency(cell.value, {
-                            locale: this.getLocaleLang(),
-                            currency: this.resolveCurrencyType(cell),
-                            numberOfDecimal: typeof cell.numberOfDecimal === 'number' ? cell.numberOfDecimal : 2,
-                        })
-                        : '';
-                    break;
-                case 'number':
-                    value = cell?.value != null
-                        ? formatDecimal(cell.value, {
-                            locale: this.getLocaleLang(),
-                            numberOfDecimal: typeof cell.numberOfDecimal === 'number'
-                                ? cell.numberOfDecimal
-                                : undefined,
-                        })
-                        : '';
-                    break;
-                case 'date':
-                    value = cell?.value
-                        ? formatDate(cell.value, this.getLocaleLang(), !!this.dateFormat, this.dateFormat)
-                        : '';
-                    break;
-                case 'progress':
-                    // For progress, show percentage value based on progressMax variable
-                    const progressNumeric = this.parseProgressValue(cell?.value);
-                    const progressMaxVal = this.resolveProgressMax(cell);
-                    const progressPercent = progressMaxVal > 0 ? (progressNumeric / progressMaxVal) * 100 : 0;
-                    value = `${parseFloat(progressPercent.toFixed(2))}%`;
-                    break;
-                case 'checkbox':
-                    value = this.parseBooleanValue(cell?.value) ? msg('Ano') : msg('Ne');
-                    break;
-                default:
-                    value = this.formatDisplayValue(rawValue);
-            }
-            return html `
-            <div style="display: flex;align-items: center; justify-content: end; gap: 0.5rem;">
-                <div
-                    style="${styleMap({
-                ...this.computeCellStyles(cell),
-                width: 'fit-content',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'end',
-                gap: '0.5rem',
-                padding: '0.375rem',
-            })}"
-                >
-                    <div
-                        style="display: flex;align-items: center; justify-content: end; gap: 0.5rem; flex-direction: row"
-                    >
-                        <div>${this.getHeaderLabel(cell)}</div>
-                        <div
-                            style="${styleMap(this.computeValueStyles(cell))}"
-                            class="process-data-value"
-                        >
-                            ${value}
-                        </div>
-                        <div>${this.getHeaderActions(cell)}</div>
-                    </div>
-                </div>
-            </div>
-        `;
-        };
-    }
-    normalizeConditions(formatting) {
-        if (!formatting)
-            return [];
-        // Backward compat: single object → wrap in array
-        const arr = Array.isArray(formatting) ? formatting : [formatting];
-        // Ensure every condition property has a concrete type (tweakpane throws
-        // "No matching controller" when a bound value is undefined/null/unsupported)
-        const defaults = {
-            enabled: true,
-            variable: '',
-            operator: '',
-            value: '',
-            cellVariant: 'default',
-            valueVariant: 'default',
-            progressColor: 'primary',
-        };
-        return arr.map((c) => ({
-            ...defaults,
-            ...c,
-            // Force value to string — it may arrive as number, array, object, null
-            value: c.value != null ? String(c.value) : '',
-            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) {
-        // Guard: ensure all bound properties have concrete types for tweakpane
-        if (typeof conditionObj.enabled !== 'boolean')
-            conditionObj.enabled = true;
-        if (typeof conditionObj.variable !== 'string')
-            conditionObj.variable = cell.field || '';
-        if (typeof conditionObj.operator !== 'string')
-            conditionObj.operator = '';
-        if (conditionObj.value == null || typeof conditionObj.value !== 'string')
-            conditionObj.value = conditionObj.value != null ? String(conditionObj.value) : '';
-        if (typeof conditionObj.cellVariant !== 'string')
-            conditionObj.cellVariant = 'default';
-        if (typeof conditionObj.valueVariant !== 'string')
-            conditionObj.valueVariant = 'default';
-        if (typeof conditionObj.progressColor !== 'string')
-            conditionObj.progressColor = 'primary';
-        // 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' for settings display
-        let cellType = cell.type || 'string';
-        if (cellType === 'select' || cellType === 'multiselect') {
-            cellType = 'string';
-        }
-        return {
-            size: cell.size?.lg ?? 1,
-            mobileSize: cell.size?.xs ?? 4,
-            cellVariant: cell.cellVariant || 'default',
-            cellCustomStyles: cell.cellCustomStyles || false,
-            valueVariant: cell.valueVariant || 'default',
-            valueCustomStyles: cell.valueCustomStyles || false,
-            fontWeight: cell.valueStyle?.fontWeight === 'bold',
-            cellType,
-            // Cell content properties
-            headerName: cell.headerName || '',
-            cellValue: cell.value || '',
-            // Cell type specific properties
-            href: cell.href || '',
-            linkType: cell.linkType || 'custom',
-            dynamicLink: cell.dynamicLink || '',
-            numberOfDecimal: cell.numberOfDecimal ?? 2,
-            progressColor: cell.progressColor || 'primary',
-            progressMax: cell.progressMax ?? 100,
-            buttonVariant: cell.buttonVariant || 'contained',
-            buttonColor: cell.buttonColor || 'primary',
-            buttonFullWidth: cell.buttonFullWidth ?? false,
-            currencyType: cell.currencyType || 'CZK',
-            customCSS: JSON.stringify(cell.cellStyle || {}),
-            // 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 ?? '',
-            hideConditionOperator: cell.hideCondition?.operator ?? '',
-            hideConditionValue: cell.hideCondition?.value ?? '',
-        };
-    }
-    getOperatorOptionsForCell(cell) {
-        // Map Cell type to FieldType for operators
-        let variableType = 'string'; // default type
-        if (cell.type) {
-            switch (cell.type) {
-                case 'select':
-                case 'checkbox':
-                    variableType = 'select';
-                    break;
-                case 'multiselect':
-                    variableType = 'multiselect';
-                    break;
-                case 'number':
-                case 'currency':
-                case 'progress':
-                    variableType = 'number';
-                    break;
-                case 'date':
-                    variableType = 'date';
-                    break;
-                case 'string':
-                case 'button':
-                case 'link':
-                default:
-                    variableType = 'string';
-                    break;
-            }
-        }
-        return getOperatorsByColumnType(variableType).map((op) => ({
-            text: op.label,
-            value: op.value,
-        }));
-    }
-    getDefaultOperatorForCell(cell) {
-        let variableType = 'string'; // default type
-        // Map Cell type to FieldType for operators
-        if (cell.type) {
-            switch (cell.type) {
-                case 'select':
-                case 'checkbox':
-                    variableType = 'select';
-                    break;
-                case 'multiselect':
-                    variableType = 'multiselect';
-                    break;
-                case 'number':
-                case 'currency':
-                case 'progress':
-                    variableType = 'number';
-                    break;
-                case 'date':
-                    variableType = 'date';
-                    break;
-                case 'string':
-                case 'button':
-                case 'link':
-                default:
-                    variableType = 'string';
-                    break;
-            }
-        }
-        return getDefaultOperator(variableType);
-    }
-    getVariableTypeByField(fieldName) {
-        // First check variables array
-        const cellInVariables = this.variables.find((variable) => variable.field === fieldName);
-        if (cellInVariables?.type) {
-            return cellInVariables.type;
-        }
-        // Then check in rows array
-        const cellInRows = this.rows.find((cell) => cell.field === fieldName);
-        if (cellInRows?.type) {
-            return cellInRows.type;
-        }
-        // Default to string if not found
-        return 'string';
-    }
-    getValueOptionsByField(fieldName) {
-        // Firs check in variables array
-        const cellInVariables = this.variables.find((variable) => variable.field === fieldName);
-        if (cellInVariables?.valueOptions) {
-            return cellInVariables.valueOptions;
-        }
-        // Than check in rows
-        const cellInRows = this.rows.find((cell) => cell.field === fieldName);
-        if (cellInRows?.valueOptions) {
-            return cellInRows.valueOptions;
-        }
-        return undefined;
-    }
-    updateConditionalFormattingOperators(folder, conditionObj, cell, conditionIndex, variableName) {
-        const variableType = this.getVariableTypeByField(variableName);
-        const tempCell = { ...cell, field: variableName, type: variableType };
-        const newOperatorOptions = this.getOperatorOptionsForCell(tempCell);
-        const operatorKey = `${cell.field}_condition_${conditionIndex}_operator`;
-        const existingOperatorInput = this.operatorInputs.get(operatorKey);
-        let insertIndex = -1;
-        if (existingOperatorInput) {
-            try {
-                insertIndex = folder.children.indexOf(existingOperatorInput);
-                existingOperatorInput.dispose();
-                this.operatorInputs.delete(operatorKey);
-            }
-            catch (error) {
-                console.warn('Could not dispose existing operator binding:', error);
-            }
-        }
-        const defaultOperator = this.getDefaultOperatorForCell(tempCell);
-        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,
-        });
-        operatorInput.on('change', (ev) => {
-            this.setConditionalFormatting(cell, conditionIndex, 'operator', ev.value);
-        });
-        this.operatorInputs.set(operatorKey, operatorInput);
-        this.addConditionalFormattingValueInput(folder, conditionObj, cell, conditionIndex, variableName);
-    }
-    updateHideConditionOperators(folder, config, cell, variableName) {
-        // Get the type of the selected variable to ensure correct operators
-        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}_hide_operator`;
-        const existingOperatorInput = this.hideOperatorInputs.get(operatorKey);
-        let insertIndex = -1;
-        if (existingOperatorInput) {
-            try {
-                // Find the index of the existing operator input
-                insertIndex = folder.children.indexOf(existingOperatorInput);
-                existingOperatorInput.dispose();
-                this.hideOperatorInputs.delete(operatorKey);
-            }
-            catch (error) {
-                console.warn('Could not dispose existing hide operator binding:', error);
-            }
-        }
-        // Reset operator to default for new variable type
-        const defaultOperator = this.getDefaultOperatorForCell(tempCell);
-        config.hideConditionOperator = defaultOperator;
-        this.setHideCondition(cell, 'operator', defaultOperator);
-        // Add new operator binding with updated options
-        const hideOperatorInput = folder.addBinding(config, 'hideConditionOperator', {
-            view: 'list',
-            label: msg('Operátor'),
-            options: newOperatorOptions,
-            index: insertIndex >= 0 ? insertIndex : undefined, // Insert at same position if possible
-        });
-        hideOperatorInput.on('change', (ev) => {
-            this.setHideCondition(cell, 'operator', ev.value);
-        });
-        // Store the new operator input for future disposal
-        this.hideOperatorInputs.set(operatorKey, hideOperatorInput);
-        // Update the value input to match the new variable type
-        this.addHideConditionValueInput(folder, config, cell, variableName);
-    }
-    addHideConditionValueInput(folder, config, cell, variableName) {
-        // Find and dispose existing value input if it exists
-        const valueKey = `${cell.field}_hide_value`;
-        const existingValueInput = this.hideValueInputs.get(valueKey);
-        let insertIndex = -1;
-        if (existingValueInput) {
-            try {
-                // Find the index of the existing value input
-                insertIndex = folder.children.indexOf(existingValueInput);
-                existingValueInput.dispose();
-                this.hideValueInputs.delete(valueKey);
-            }
-            catch (error) {
-                console.warn('Could not dispose existing hide value binding:', error);
-            }
-        }
-        // Get the type and valueOptions of the selected variable
-        const variableType = this.getVariableTypeByField(variableName);
-        const valueOptions = this.getValueOptionsByField(variableName);
-        let hideValueInput;
-        // 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,
-            }));
-            hideValueInput = folder.addBinding(config, 'hideConditionValue', {
-                view: 'list',
-                label: msg('Hodnota'),
-                options: tweakpaneOptions,
-                index: insertIndex >= 0 ? insertIndex : undefined,
-            });
-        }
-        else {
-            // Otherwise, create a text input
-            hideValueInput = folder.addBinding(config, 'hideConditionValue', {
-                label: msg('Hodnota'),
-                index: insertIndex >= 0 ? insertIndex : undefined,
-            });
-        }
-        hideValueInput.on('change', (ev) => {
-            this.setHideCondition(cell, 'value', ev.value);
-        });
-        // Store the new value input for future disposal
-        this.hideValueInputs.set(valueKey, hideValueInput);
-    }
-    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 {
-                insertIndex = folder.children.indexOf(existingValueInput);
-                existingValueInput.dispose();
-                this.conditionValueInputs.delete(valueKey);
-            }
-            catch (error) {
-                console.warn('Could not dispose existing condition value binding:', error);
-            }
-        }
-        const variableType = this.getVariableTypeByField(variableName);
-        const valueOptions = this.getValueOptionsByField(variableName);
-        // Ensure value is a string before binding (tweakpane requires a concrete type)
-        if (conditionObj.value == null || typeof conditionObj.value !== 'string') {
-            conditionObj.value = conditionObj.value != null ? String(conditionObj.value) : '';
-        }
-        let conditionValueInput;
-        if ((variableType === 'select' || variableType === 'multiselect') &&
-            valueOptions &&
-            valueOptions.length > 0) {
-            const tweakpaneOptions = valueOptions.map((opt) => ({
-                text: opt.label,
-                value: opt.value,
-            }));
-            conditionValueInput = folder.addBinding(conditionObj, 'value', {
-                view: 'list',
-                label: msg('Hodnota'),
-                options: tweakpaneOptions,
-                index: insertIndex >= 0 ? insertIndex : undefined,
-            });
-        }
-        else {
-            conditionValueInput = folder.addBinding(conditionObj, 'value', {
-                label: msg('Hodnota'),
-                index: insertIndex >= 0 ? insertIndex : undefined,
-            });
-        }
-        conditionValueInput.on('change', (ev) => {
-            this.setConditionalFormatting(cell, conditionIndex, 'value', ev.value);
-        });
-        this.conditionValueInputs.set(valueKey, conditionValueInput);
-    }
-    getBreakpoint() {
-        const width = window.innerWidth;
-        if (width >= 1920)
-            return 'xl';
-        if (width >= 1280)
-            return 'lg';
-        if (width >= 960)
-            return 'md';
-        if (width >= 600)
-            return 'sm';
-        return 'xs';
-    }
-    // Function to handle resize events
-    handleResize() {
-        const newBreakpoint = this.getBreakpoint();
-        if (newBreakpoint !== this.currentBreakpoint) {
-            this.currentBreakpoint = newBreakpoint; // Update property
-        }
-        this.isMobile = window.innerWidth <= 600;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        window.addEventListener('resize', this._resizeListener); // Add listener
-        this.isMobile = window.innerWidth <= 600;
-        if (!this.dateFormat) {
-            const userSettings = localStorage.getItem('userSettings');
-            const storedFormat = userSettings
-                ? JSON.parse(userSettings)?.state?.dateFormat
-                : undefined;
-            this.dateFormat = storedFormat;
-        }
-    }
-    disconnectedCallback() {
-        this.destroySortables();
-        this.destroySettingsPanes();
-        window.removeEventListener('resize', this._resizeListener); // Remove listener
-        super.disconnectedCallback();
-    }
-    firstUpdated() {
-        if (this.enableSettings) {
-            this.initSortable();
-        }
-    }
-    setFontWeight(cell) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                const isBold = c.valueStyle?.fontWeight === 'bold';
-                return {
-                    ...c,
-                    valueCustomStyles: true,
-                    valueVariant: 'default',
-                    valueStyle: {
-                        ...(c.valueStyle || {}),
-                        fontWeight: isBold ? '500' : 'bold',
-                    },
-                };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    getAllAvailableVariables() {
-        const variables = [];
-        // Add variables from current rows (including all cells)
-        this.rows.forEach((cell) => {
-            variables.push({
-                text: `${cell.headerName || cell.field} (${cell.field})`,
-                value: cell.field,
-            });
-        });
-        // Add variables from variables array (that are not in current rows)
-        const existingFields = this.rows.map((cell) => cell.field);
-        this.variables.forEach((variable) => {
-            if (!existingFields.includes(variable.field)) {
-                const name = variable.headerName || variable.field;
-                variables.push({
-                    text: `${name} (${variable.field})`,
-                    value: variable.field,
-                });
-            }
-        });
-        return variables.sort((a, b) => a.text.localeCompare(b.text));
-    }
-    setConditionalFormatting(cell, conditionIndex, property, value) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                const updatedCell = { ...c };
-                // Normalize to array
-                const conditions = this.normalizeConditions(updatedCell.conditionalFormatting).map((cond) => ({ ...cond }));
-                // Ensure index exists
-                if (!conditions[conditionIndex]) {
-                    conditions[conditionIndex] = this.createDefaultCondition(cell);
-                }
-                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;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setCellStyle(style, cell) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return { ...c, cellStyle: style };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setCellVariant(variant, cell) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                const updatedCell = { ...c, cellVariant: variant };
-                // If setting a semantic variant, disable custom styles
-                if (variant !== 'default') {
-                    updatedCell.cellCustomStyles = false;
-                }
-                return updatedCell;
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setValueVariant(variant, cell) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                const updatedCell = { ...c, valueVariant: variant };
-                // If setting a semantic variant, disable custom styles
-                if (variant !== 'default') {
-                    updatedCell.valueCustomStyles = false;
-                }
-                return updatedCell;
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    enableCellCustomStyles(cell) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return {
-                    ...c,
-                    cellCustomStyles: true,
-                    cellVariant: 'default',
-                };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    enableValueCustomStyles(cell) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return {
-                    ...c,
-                    valueCustomStyles: true,
-                    valueVariant: 'default',
-                };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    destroySortables() {
-        this.sortableInstances.forEach((instance) => {
-            instance.destroy();
-        });
-        this.sortableInstances = [];
-    }
-    destroySettingsPanes() {
-        this.settingsPanes.forEach((pane, field) => {
-            try {
-                if (pane) {
-                    pane.dispose();
-                }
-            }
-            catch (error) {
-                // Silently catch disposal errors (usually means already disposed)
-                if (error.type !== 'alreadydisposed') {
-                    console.error(`Error disposing pane for ${field}:`, error);
-                }
-            }
-        });
-        this.settingsPanes.clear();
-        // Remove any floating tooltip containers (legacy cleanup)
-        document.querySelectorAll('.tweakpane-floating-tooltip').forEach((el) => {
-            el.remove();
-        });
-        // Clean up any leftover tweakpane containers in document
-        document.querySelectorAll('[id^="tweakpane-"]').forEach((el) => {
-            const parentContainer = el.closest('.tweakpane-container');
-            if (parentContainer) {
-                parentContainer.remove();
-            }
-        });
-    }
-    toggleSettingsPane(cell) {
-        // If clicking the same cell, toggle the popper
-        if (this.activeSettingsCell?.field === cell.field) {
-            this.settingsPopperOpen = !this.settingsPopperOpen;
-            if (!this.settingsPopperOpen) {
-                this.activeSettingsCell = null;
-            }
-        }
-        else {
-            // Different cell, show popper for this cell
-            this.activeSettingsCell = cell;
-            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, '-');
-    }
-    renderSettingsContent() {
-        if (!this.activeSettingsCell)
-            return null;
-        const cell = this.activeSettingsCell;
-        return html `
-            <div class="tweakpane-container" @click=${(e) => e.stopPropagation()}>
-                <div id="tweakpane-${this.sanitizeFieldName(cell.field)}"></div>
-            </div>
-        `;
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('userLang')) {
-            const localeLang = this.getLocaleLang();
-            if (getLocale() !== localeLang) {
-                setLocale(localeLang).then(() => this.requestUpdate());
-            }
-        }
-        // Initialize tweakpane when activeSettingsCell changes and popper is open
-        if (changedProperties.has('activeSettingsCell') ||
-            changedProperties.has('settingsPopperOpen')) {
-            if (this.activeSettingsCell && this.settingsPopperOpen) {
-                // Use requestAnimationFrame + small delay to ensure DOM is ready (container is in shadowRoot)
-                requestAnimationFrame(() => {
-                    this.initializeTweakpane(this.activeSettingsCell, 0);
-                });
-            }
-        }
-    }
-    initializeTweakpaneWithRetry(cell, attempt = 1) {
-        // Clean up any existing pane for this cell first
-        const existingPane = this.settingsPanes.get(cell.field);
-        if (existingPane) {
-            try {
-                existingPane.dispose();
-            }
-            catch (error) {
-                // Silently catch disposal errors (usually means already disposed)
-                if (error.type !== 'alreadydisposed') {
-                    console.error(`Error disposing existing pane for ${cell.field}:`, error);
-                }
-            }
-            this.settingsPanes.delete(cell.field);
-        }
-        // Increased retries and delay for slower PCs
-        const maxAttempts = 20;
-        const retryDelay = 100; // 100ms per retry = 2000ms total
-        const selector = `#tweakpane-${this.sanitizeFieldName(cell.field)}`;
-        const container = document.querySelector(selector) || this.shadowRoot?.querySelector(selector);
-        if (container) {
-            this.initializeTweakpane(cell, 0);
-        }
-        else if (attempt < maxAttempts) {
-            setTimeout(() => {
-                // Check if we're still supposed to be showing this cell
-                if (this.activeSettingsCell?.field === cell.field && this.settingsPopperOpen) {
-                    this.initializeTweakpaneWithRetry(cell, attempt + 1);
-                }
-            }, retryDelay);
-        }
-        else {
-            console.warn(`Failed to find tweakpane container for ${cell.field} after ${maxAttempts} attempts (${maxAttempts * retryDelay}ms)`);
-        }
-    }
-    initializeTweakpane(cell, retryCount = 0) {
-        // Get the container from shadow DOM (always available in fixed overlay)
-        const selector = `#tweakpane-${this.sanitizeFieldName(cell.field)}`;
-        const container = document.querySelector(selector) || this.shadowRoot?.querySelector(selector);
-        if (!container) {
-            // Increased retries for slower PCs
-            const maxRetries = 5;
-            const retryDelay = 150;
-            if (retryCount < maxRetries) {
-                console.warn(`Tweakpane container not found, retrying... (${retryCount + 1}/${maxRetries})`);
-                setTimeout(() => {
-                    this.initializeTweakpane(cell, retryCount + 1);
-                }, retryDelay);
-                return;
-            }
-            else {
-                console.error(`Tweakpane container not found: #tweakpane-${this.sanitizeFieldName(cell.field)}`);
-                return;
-            }
-        }
-        // Clear any existing pane for this cell
-        const existingPane = this.settingsPanes.get(cell.field);
-        if (existingPane) {
-            try {
-                existingPane.dispose();
-            }
-            catch (error) {
-                // Silently catch disposal errors (usually means already disposed)
-                if (error.type !== 'alreadydisposed') {
-                    console.error(`Error disposing existing pane for ${cell.field}:`, error);
-                }
-            }
-            this.settingsPanes.delete(cell.field);
-        }
-        // Create Tweakpane in the container
-        const pane = new Pane({
-            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) {
-            // Desktop size input
-            const desktopSizeInput = pane.addBinding(config, 'size', {
-                view: 'list',
-                label: msg('Velikost desktop'),
-                options: [
-                    { text: msg('Skrytý'), value: 0 },
-                    { text: msg('1 sloupec'), value: 1 },
-                    { text: msg('2 sloupce'), value: 2 },
-                    { text: msg('3 sloupce'), value: 3 },
-                    { text: msg('4 sloupce'), value: 4 },
-                ],
-            });
-            desktopSizeInput.on('change', (ev) => {
-                this.setCellSize(ev.value, cell, 'lg');
-            });
-            // Mobile size input
-            const mobileSizeInput = pane.addBinding(config, 'mobileSize', {
-                view: 'list',
-                label: msg('Velikost mobil'),
-                options: [
-                    { text: msg('Skrytý'), value: 0 },
-                    { text: msg('1 sloupec'), value: 1 },
-                    { text: msg('2 sloupce'), value: 2 },
-                    { text: msg('3 sloupce'), value: 3 },
-                    { text: msg('4 sloupce'), value: 4 },
-                ],
-            });
-            mobileSizeInput.on('change', (ev) => {
-                this.setCellSize(ev.value, cell, 'xs');
-            });
-        }
-        // Add cell type control - at the top
-        const cellTypeInput = pane.addBinding(config, 'cellType', {
-            view: 'list',
-            label: msg('Typ buňky'),
-            options: [
-                { text: msg('Text'), value: 'string' },
-                { text: msg('Tlačítko'), value: 'button' },
-                { text: msg('Odkaz'), value: 'link' },
-                { text: msg('Datum'), value: 'date' },
-                { text: msg('Měna'), value: 'currency' },
-                { text: msg('Progress'), value: 'progress' },
-                { text: msg('Číslo'), value: 'number' },
-                { text: msg('Checkbox'), value: 'checkbox' },
-            ],
-        });
-        cellTypeInput.on('change', (ev) => {
-            this.setCellType(cell, ev.value);
-        });
-        // Add header name and value controls (only for custom cells)
-        const isCustomCell = cell.field.startsWith('custom_cell_');
-        if (isCustomCell) {
-            const headerNameInput = pane.addBinding(config, 'headerName', {
-                label: msg('Název buňky'),
-            });
-            headerNameInput.on('change', (ev) => {
-                this.setCellHeaderName(cell, ev.value);
-            });
-            // Add cell value control for custom cells
-            const cellValueInput = pane.addBinding(config, 'cellValue', {
-                label: msg('Hodnota buňky'),
-                multiline: cell.type === 'string',
-            });
-            cellValueInput.on('change', (ev) => {
-                this.setCellValue(cell, ev.value);
-            });
-        }
-        // Add cell variant control - common for all types
-        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' },
-            { text: msg('Vlastní'), value: 'custom' },
-        ];
-        const cellVariantInput = pane.addBinding(config, 'cellVariant', {
-            view: 'list',
-            label: msg('Styl buňky'),
-            options: cellVariantOptions,
-        });
-        // Add CSS input for custom styles (always present but controlled by visibility)
-        const cssInput = pane.addBinding(config, 'customCSS', {
-            label: msg('CSS buňky'),
-            multiline: true,
-            rows: 4,
-        });
-        cssInput.on('change', (ev) => {
-            try {
-                const cssObject = JSON.parse(ev.value || '{}');
-                this.setCellStyle(cssObject, cell);
-            }
-            catch (error) {
-                console.error('Invalid JSON for custom CSS:', error);
-            }
-        });
-        const showCssInput = () => {
-            if (cssInput.element) {
-                cssInput.element.style.display = '';
-            }
-        };
-        const hideCssInput = () => {
-            if (cssInput.element) {
-                cssInput.element.style.display = 'none';
-            }
-        };
-        // Set initial visibility based on whether custom style is selected
-        if (config.cellCustomStyles) {
-            showCssInput();
-        }
-        else {
-            hideCssInput();
-        }
-        cellVariantInput.on('change', (ev) => {
-            if (ev.value === 'custom') {
-                this.enableCellCustomStyles(cell);
-                showCssInput();
-            }
-            else {
-                this.setCellVariant(ev.value, cell);
-                hideCssInput();
-            }
-        });
-        this.colorizeVariantSelect(cellVariantInput, cellVariantOptions, config, 'cellVariant');
-        // Add cell type-specific controls
-        this.addCellTypeSpecificControls(pane, config, cell);
-        // Add conditional formatting section
-        const conditionFolder = pane.addFolder({
-            title: msg('Podmíněné formátování buněk'),
-            expanded: false,
-        });
-        // "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);
-        });
-        // 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'),
-            expanded: false,
-        });
-        // Enable/disable conditional hide
-        const hideConditionEnabledInput = hideFolder.addBinding(config, 'hideConditionEnabled', {
-            label: msg('Povolit podmínky skrytí'),
-        });
-        hideConditionEnabledInput.on('change', (ev) => {
-            this.setHideCondition(cell, 'enabled', ev.value);
-        });
-        // Variable selector for hide condition
-        const hideVariableOptions = this.getAllAvailableVariables();
-        if (hideVariableOptions.length > 0) {
-            // Set default variable to current cell's field if not already set
-            if (!config.hideConditionVariable) {
-                config.hideConditionVariable = cell.field;
-                this.setHideCondition(cell, 'variable', cell.field);
-            }
-            const hideConditionVariableInput = hideFolder.addBinding(config, 'hideConditionVariable', {
-                view: 'list',
-                label: msg('Proměnná'),
-                options: hideVariableOptions,
-            });
-            hideConditionVariableInput.on('change', (ev) => {
-                this.setHideCondition(cell, 'variable', ev.value);
-                // Update operators when variable changes
-                this.updateHideConditionOperators(hideFolder, config, cell, ev.value);
-            });
-        }
-        // Hide condition operator - use operators based on cell type
-        // Get the actual cell/variable to determine correct operators
-        const hideVariableType = this.getVariableTypeByField(config.hideConditionVariable);
-        const tempHideCell = {
-            ...cell,
-            field: config.hideConditionVariable,
-            type: hideVariableType,
-        };
-        const hideOperatorOptions = this.getOperatorOptionsForCell(tempHideCell);
-        const hideOperatorInput = hideFolder.addBinding(config, 'hideConditionOperator', {
-            view: 'list',
-            label: msg('Operátor'),
-            options: hideOperatorOptions,
-        });
-        hideOperatorInput.on('change', (ev) => {
-            this.setHideCondition(cell, 'operator', ev.value);
-        });
-        // Store the operator input for future disposal
-        const hideOperatorKey = `${cell.field}_hide_operator`;
-        this.hideOperatorInputs.set(hideOperatorKey, hideOperatorInput);
-        // Hide condition value - dynamic input based on variable type
-        this.addHideConditionValueInput(hideFolder, config, cell, config.hideConditionVariable);
-        // Expert mode button
-        const expertBtn = pane.addButton({ title: msg('Expertní mód') });
-        expertBtn.on('click', () => {
-            this.openExpertModeModal(cell);
-        });
-        // Add delete button
-        const deleteBtn = pane.addButton({ title: msg('Smazat buňku') });
-        deleteBtn.on('click', () => {
-            this.removeCellFromRows(cell.field);
-            this.closeSettingsPopper();
-        });
-        this.settingsPanes.set(cell.field, pane);
-        return pane;
-    }
-    addCellTypeSpecificControls(pane, config, cell) {
-        const cellType = cell.type || 'string';
-        // Create a tab for the current cell type only
-        const tabTitle = this.getCellTypeTabTitle(cellType);
-        if (tabTitle) {
-            const tab = pane.addTab({
-                pages: [{ title: tabTitle }],
-            });
-            const tabPage = tab.pages[0];
-            // Add controls based on cell type
-            switch (cellType) {
-                case 'link':
-                    this.addLinkControls(tabPage, config, cell);
-                    break;
-                case 'number':
-                    this.addNumberControls(tabPage, config, cell);
-                    break;
-                case 'progress':
-                    this.addProgressControls(tabPage, config, cell);
-                    break;
-                case 'button':
-                    this.addButtonControls(tabPage, config, cell);
-                    break;
-                case 'currency':
-                    this.addCurrencyControls(tabPage, config, cell);
-                    break;
-                case 'date':
-                    this.addDateControls(tabPage, config, cell);
-                    break;
-                case 'checkbox':
-                    // Checkbox has no additional type-specific controls
-                    break;
-                default:
-                    this.addStringControls(tabPage, config, cell);
-                    break;
-            }
-        }
-    }
-    getCellTypeTabTitle(cellType) {
-        const typeTitles = {
-            string: msg('Nastavení textu'),
-            link: msg('Nastavení odkazu'),
-            number: msg('Nastavení čísla'),
-            button: msg('Nastavení tlačítka'),
-            currency: msg('Nastavení měny'),
-            date: msg('Nastavení data'),
-            progress: msg('Nastavení postupu'),
-            checkbox: msg('Nastavení checkboxu'),
-        };
-        return typeTitles[cellType] || msg('Nastavení buňky');
-    }
-    addStringControls(pane, config, cell) {
-        // Value Bold
-        const fontInput = pane.addBinding(config, 'fontWeight', {
-            label: msg('Tučná hodnota'),
-        });
-        fontInput.on('change', () => {
-            this.setFontWeight(cell);
-        });
-        // 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 = pane.addBinding(config, 'valueVariant', {
-            view: 'list',
-            label: 'Value Color',
-            options: valueVariantOptions,
-        });
-        valueVariantInput.on('change', (ev) => {
-            if (ev.value === 'custom') {
-                this.enableValueCustomStyles(cell);
-            }
-            else {
-                this.setValueVariant(ev.value, cell);
-            }
-        });
-        this.colorizeVariantSelect(valueVariantInput, valueVariantOptions, config, 'valueVariant');
-    }
-    addLinkControls(pane, config, cell) {
-        // Link Type selector
-        const linkTypeInput = pane.addBinding(config, 'linkType', {
-            view: 'list',
-            label: msg('Typ odkazu'),
-            options: [
-                { text: msg('Vlastní URL'), value: 'custom' },
-                { text: msg('Dynamický odkaz'), value: 'dynamic' },
-            ],
-        });
-        linkTypeInput.on('change', (ev) => {
-            this.setLinkType(cell, ev.value);
-        });
-        // Custom URL input (shown when linkType is 'custom')
-        const hrefInput = pane.addBinding(config, 'href', {
-            label: msg('Vlastní URL'),
-        });
-        hrefInput.on('change', (ev) => {
-            this.setHref(cell, ev.value);
-        });
-    }
-    addNumberControls(pane, config, cell) {
-        // Value Bold
-        const fontInput = pane.addBinding(config, 'fontWeight', {
-            label: msg('Hodnota tučně'),
-        });
-        fontInput.on('change', () => {
-            this.setFontWeight(cell);
-        });
-        // 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 = pane.addBinding(config, 'valueVariant', {
-            view: 'list',
-            label: 'Value Color',
-            options: valueVariantOptions,
-        });
-        valueVariantInput.on('change', (ev) => {
-            if (ev.value === 'custom') {
-                this.enableValueCustomStyles(cell);
-            }
-            else {
-                this.setValueVariant(ev.value, cell);
-            }
-        });
-        this.colorizeVariantSelect(valueVariantInput, valueVariantOptions, config, 'valueVariant');
-    }
-    addButtonControls(pane, config, cell) {
-        // Button Variant
-        const variantInput = pane.addBinding(config, 'buttonVariant', {
-            view: 'list',
-            label: msg('Varianta tlačítka'),
-            options: [
-                { text: msg('Vyplněné'), value: 'contained' },
-                { text: msg('Ohraničené'), value: 'outlined' },
-                { text: msg('Textové'), value: 'text' },
-                { text: msg('Čárkované'), value: 'dashed' },
-            ],
-        });
-        variantInput.on('change', (ev) => {
-            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: 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'),
-        });
-        fullWidthInput.on('change', (ev) => {
-            this.setButtonFullWidth(cell, ev.value);
-        });
-        // Add link configuration for buttons (same as links)
-        // Link Type selector
-        const linkTypeInput = pane.addBinding(config, 'linkType', {
-            view: 'list',
-            label: msg('Typ odkazu'),
-            options: [
-                { text: msg('Vlastní URL'), value: 'custom' },
-                { text: msg('Dynamický odkaz'), value: 'dynamic' },
-            ],
-        });
-        linkTypeInput.on('change', (ev) => {
-            this.setLinkType(cell, ev.value);
-        });
-        // Custom URL input (shown when linkType is 'custom')
-        const hrefInput = pane.addBinding(config, 'href', {
-            label: msg('Vlastní URL'),
-        });
-        hrefInput.on('change', (ev) => {
-            this.setHref(cell, ev.value);
-        });
-    }
-    addCurrencyControls(pane, config, cell) {
-        // Value Bold
-        const fontInput = pane.addBinding(config, 'fontWeight', {
-            label: msg('Tučná hodnota'),
-        });
-        fontInput.on('change', () => {
-            this.setFontWeight(cell);
-        });
-        // 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' },
-            { text: msg('Vlastní'), value: 'custom' },
-        ];
-        const valueVariantInput = pane.addBinding(config, 'valueVariant', {
-            view: 'list',
-            label: 'Value Color',
-            options: valueVariantOptions,
-        });
-        valueVariantInput.on('change', (ev) => {
-            if (ev.value === 'custom') {
-                this.enableValueCustomStyles(cell);
-            }
-            else {
-                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'),
-            min: 0,
-            max: 10,
-            step: 1,
-        });
-        decimalInput.on('change', (ev) => {
-            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: currencyOptions,
-        });
-        currencyInput.on('change', (ev) => {
-            this.setCurrencyType(cell, ev.value);
-        });
-    }
-    addDateControls(pane, config, cell) {
-        // Value Bold
-        const fontInput = pane.addBinding(config, 'fontWeight', {
-            label: msg('Tučná hodnota'),
-        });
-        fontInput.on('change', () => {
-            this.setFontWeight(cell);
-        });
-        // 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 = pane.addBinding(config, 'valueVariant', {
-            view: 'list',
-            label: 'Value Color',
-            options: valueVariantOptions,
-        });
-        valueVariantInput.on('change', (ev) => {
-            if (ev.value === 'custom') {
-                this.enableValueCustomStyles(cell);
-            }
-            else {
-                this.setValueVariant(ev.value, cell);
-            }
-        });
-        this.colorizeVariantSelect(valueVariantInput, valueVariantOptions, config, 'valueVariant');
-    }
-    addProgressControls(pane, config, cell) {
-        // Progress Max — numeric value for 100%
-        const progressMaxInput = pane.addBinding(config, 'progressMax', {
-            label: msg('Hodnota 100%'),
-            min: 1,
-            step: 1,
-        });
-        progressMaxInput.on('change', (ev) => {
-            this.setProgressMax(cell, ev.value);
-        });
-        // 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: 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' },
-            { 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 = pane.addBinding(config, 'valueVariant', {
-            view: 'list',
-            label: 'Value Color',
-            options: valueVariantOptions,
-        });
-        valueVariantInput.on('change', (ev) => {
-            if (ev.value === 'custom') {
-                this.enableValueCustomStyles(cell);
-            }
-            else {
-                this.setValueVariant(ev.value, cell);
-            }
-        });
-        this.colorizeVariantSelect(valueVariantInput, valueVariantOptions, config, 'valueVariant');
-    }
-    getVariableValue(fieldName) {
-        // First check in variables array for a matching field
-        if (this.variables && Array.isArray(this.variables)) {
-            const variableObj = this.variables.find((variable) => variable.field === fieldName);
-            if (variableObj) {
-                return variableObj.value;
-            }
-        }
-        // Then check in current rows
-        const rowCell = this.rows.find((cell) => cell.field === fieldName);
-        if (rowCell) {
-            return rowCell.value;
-        }
-        // Finally check in variables array
-        const variableItem = this.variables.find((variable) => variable.field === fieldName);
-        if (variableItem) {
-            return variableItem.value;
-        }
-        return '';
-    }
-    evaluateCondition(variableField, conditionValue, operator) {
-        // Get the value of the selected variable
-        const variableValue = this.getVariableValue(variableField);
-        // For isEmpty/isNotEmpty operators, check the raw value first
-        if (operator === 'isEmpty') {
-            return (variableValue === null ||
-                variableValue === undefined ||
-                variableValue === '' ||
-                (typeof variableValue === 'string' && variableValue.trim() === ''));
-        }
-        if (operator === 'isNotEmpty') {
-            return !(variableValue === null ||
-                variableValue === undefined ||
-                variableValue === '' ||
-                (typeof variableValue === 'string' && variableValue.trim() === ''));
-        }
-        // Determine field type for proper comparison
-        const fieldCell = this.rows.find((cell) => cell.field === variableField);
-        // Determine field type for proper comparison
-        let fieldType = 'string';
-        if (fieldCell) {
-            // Use cell.type directly for field type determination
-            switch (fieldCell.type) {
-                case 'number':
-                case 'progress':
-                case 'currency':
-                    fieldType = 'number';
-                    break;
-                case 'date':
-                    fieldType = 'date';
-                    break;
-                case 'select':
-                case 'checkbox':
-                    fieldType = 'select';
-                    break;
-                case 'multiselect':
-                    fieldType = 'multiselect';
-                    break;
-                case 'string':
-                case 'button':
-                case 'link':
-                default:
-                    fieldType = 'string';
-                    break;
-            }
-        }
-        const variableStr = String(variableValue || '').toLowerCase();
-        const conditionStr = String(conditionValue || '').toLowerCase();
-        const variableNum = parseFloat(variableValue);
-        const conditionNum = parseFloat(conditionValue);
-        // For date fields, parse dates for comparison
-        let variableDate = null;
-        let conditionDate = null;
-        if (fieldType === 'date') {
-            variableDate = variableValue ? new Date(variableValue) : null;
-            conditionDate = conditionValue ? new Date(conditionValue) : null;
-        }
-        switch (operator) {
-            case '=':
-                // Use numeric comparison for number/currency/progress types
-                if (fieldType === 'number' /*  ||
-                fieldType === 'currency' ||
-                fieldType === 'progress' */) {
-                    return (!isNaN(variableNum) && !isNaN(conditionNum) && variableNum === conditionNum);
-                }
-                else if (fieldType === 'date') {
-                    if (!variableDate || !conditionDate)
-                        return false;
-                    return variableDate.getTime() === conditionDate.getTime();
-                }
-                else {
-                    return variableStr === conditionStr;
-                }
-            case '!=':
-                // Use numeric comparison for number/currency/progress types
-                if (fieldType === 'number' /* ||
-                fieldType === 'currency' ||
-                fieldType === 'progress' */) {
-                    return (!isNaN(variableNum) && !isNaN(conditionNum) && variableNum !== conditionNum);
-                }
-                else if (fieldType === 'date') {
-                    if (!variableDate || !conditionDate)
-                        return true;
-                    return variableDate.getTime() !== conditionDate.getTime();
-                }
-                else {
-                    return variableStr !== conditionStr;
-                }
-            case '>':
-                if (fieldType === 'date') {
-                    if (!variableDate || !conditionDate)
-                        return false;
-                    return variableDate.getTime() > conditionDate.getTime();
-                }
-                return !isNaN(variableNum) && !isNaN(conditionNum) && variableNum > conditionNum;
-            case '>=':
-                if (fieldType === 'date') {
-                    if (!variableDate || !conditionDate)
-                        return false;
-                    return variableDate.getTime() >= conditionDate.getTime();
-                }
-                return !isNaN(variableNum) && !isNaN(conditionNum) && variableNum >= conditionNum;
-            case '<':
-                if (fieldType === 'date') {
-                    if (!variableDate || !conditionDate)
-                        return false;
-                    return variableDate.getTime() < conditionDate.getTime();
-                }
-                return !isNaN(variableNum) && !isNaN(conditionNum) && variableNum < conditionNum;
-            case '<=':
-                if (fieldType === 'date') {
-                    if (!variableDate || !conditionDate)
-                        return false;
-                    return variableDate.getTime() <= conditionDate.getTime();
-                }
-                return !isNaN(variableNum) && !isNaN(conditionNum) && variableNum <= conditionNum;
-            case 'contains':
-                return variableStr.includes(conditionStr);
-            case 'doesNotContain':
-                return !variableStr.includes(conditionStr);
-            case 'startsWith':
-                return variableStr.startsWith(conditionStr);
-            case 'endsWith':
-                return variableStr.endsWith(conditionStr);
-            case 'is':
-                // "is" operator - for select type fields only
-                // Use exact value matching (case-sensitive)
-                return String(variableValue) === String(conditionValue);
-            case 'not':
-                // "not" operator (is not) - for select type fields only
-                // Use exact value matching (case-sensitive)
-                return String(variableValue) !== String(conditionValue);
-            case 'in':
-                // "in" operator - for multiselect fields
-                // variableValue is an array, check if conditionValue is in that array
-                if (Array.isArray(variableValue)) {
-                    return variableValue.includes(conditionValue);
-                }
-                // Fallback: check if variableValue is in conditionValue list
-                if (Array.isArray(conditionValue)) {
-                    return conditionValue.includes(variableValue);
-                }
-                else {
-                    // Parse comma-separated string
-                    const values = String(conditionValue)
-                        .split(',')
-                        .map((v) => v.trim());
-                    return values.includes(String(variableValue));
-                }
-            case 'nin':
-                // "nin" operator (not in) - for multiselect fields
-                // variableValue is an array, check if conditionValue is not in that array
-                if (Array.isArray(variableValue)) {
-                    return !variableValue.includes(conditionValue);
-                }
-                // Fallback: check if variableValue is not in conditionValue list
-                if (Array.isArray(conditionValue)) {
-                    return !conditionValue.includes(variableValue);
-                }
-                else {
-                    // Parse comma-separated string
-                    const values = String(conditionValue)
-                        .split(',')
-                        .map((v) => v.trim());
-                    return !values.includes(String(variableValue));
-                }
-            case 'isAnyOfValue':
-                // "isAnyOfValue" operator - checks if variableValue matches any of the comma-separated values
-                if (!conditionValue)
-                    return false;
-                // If variableValue is an array (for multiselect), check if any element matches any condition value
-                if (Array.isArray(variableValue)) {
-                    const conditionValues = String(conditionValue)
-                        .split(',')
-                        .map((v) => v.trim().toLowerCase());
-                    return variableValue.some((val) => conditionValues.includes(String(val).toLowerCase()));
-                }
-                // For single values, check if variableValue matches any of the condition values
-                const values = String(conditionValue)
-                    .split(',')
-                    .map((v) => v.trim().toLowerCase());
-                return values.includes(variableStr);
-            default:
-                return false;
-        }
-    }
-    computeCellStyles(cell) {
-        // Priority order:
-        // 1. Conditional formatting (highest)
-        // 2. Custom cellStyle (if cellCustomStyles = true)
-        // 3. Semantic cellVariant
-        // 4. Default styles (lowest)
-        let styles = {};
-        // 4. Default styles (base)
-        // (none for now, could add default cell styling here)
-        // 3. Semantic cellVariant
-        if (cell.cellVariant && cell.cellVariant !== 'default') {
-            const variantStyle = this.getCellVariantStyle(cell.cellVariant);
-            styles = { ...styles, ...variantStyle };
-        }
-        // 2. Custom cellStyle (if explicitly enabled)
-        if (cell.cellCustomStyles && cell.cellStyle) {
-            styles = { ...styles, ...cell.cellStyle };
-        }
-        // 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;
-    }
-    getCellVariantStyle(variant) {
-        const variantMap = {
-            primary: {
-                backgroundColor: 'var(--color-primary-light)',
-                borderRadius: '8px',
-                border: '1px solid var(--color-primary-dark)',
-            },
-            success: {
-                backgroundColor: 'var(--color-success-light)',
-                borderRadius: '8px',
-                border: '1px solid var(--color-success-dark)',
-            },
-            warning: {
-                backgroundColor: 'var(--color-warning-light)',
-                borderRadius: '8px',
-                border: '1px solid var(--color-warning-dark)',
-            },
-            error: {
-                backgroundColor: 'var(--color-error-light)',
-                borderRadius: '8px',
-                border: '1px solid var(--color-error-dark)',
-            },
-            info: {
-                backgroundColor: 'var(--color-info-light)',
-                borderRadius: '8px',
-                border: '1px solid var(--color-info-dark)',
-            },
-        };
-        return variantMap[variant] || {};
-    }
-    computeValueStyles(cell) {
-        // Priority order:
-        // 1. Conditional formatting value variant (highest)
-        // 2. Custom valueStyle (if valueCustomStyles = true)
-        // 3. Semantic valueVariant + Independent fontWeight
-        // 4. Default styles (lowest)
-        let styles = {};
-        // 4. Default styles (base)
-        // (none for now, could add default value styling here)
-        // 3. Semantic valueVariant
-        if (cell.valueVariant && cell.valueVariant !== 'default') {
-            const variantStyle = this.getValueVariantStyle(cell.valueVariant);
-            styles = { ...styles, ...variantStyle };
-        }
-        // 3b. Independent fontWeight (works alongside variants)
-        if (cell.fontWeight && cell.fontWeight !== 'normal') {
-            styles = { ...styles, fontWeight: cell.fontWeight };
-        }
-        // 2. Custom valueStyle (if explicitly enabled)
-        if (cell.valueCustomStyles && cell.valueStyle) {
-            styles = { ...styles, ...cell.valueStyle };
-        }
-        // 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;
-    }
-    // Helper method to convert progress value (string or number) to numeric value
-    parseProgressValue(value) {
-        if (typeof value === 'number') {
-            return value;
-        }
-        else if (typeof value === 'string') {
-            const parsed = parseFloat(value);
-            return !isNaN(parsed) ? parsed : 0;
-        }
-        return 0;
-    }
-    computeProgressColor(cell) {
-        // Priority order:
-        // 1. Conditional formatting progressColor (highest)
-        // 2. Cell progressColor property
-        // 3. Default 'primary' color (lowest)
-        let progressColor = cell.progressColor || 'primary';
-        // 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;
-    }
-    getValueVariantStyle(variant) {
-        const variantMap = {
-            primary: {
-                color: 'var(--color-primary-main)',
-                fontWeight: '500',
-            },
-            success: {
-                color: 'var(--color-success-main)',
-                fontWeight: '500',
-            },
-            warning: {
-                color: 'var(--color-warning-main)',
-                fontWeight: '500',
-            },
-            error: {
-                color: 'var(--color-error-main)',
-                fontWeight: '500',
-            },
-            info: {
-                color: 'var(--color-info-main)',
-                fontWeight: '500',
-            },
-        };
-        return variantMap[variant] || {};
-    }
-    shouldHideCell(cell) {
-        const hideCondition = cell.hideCondition;
-        if (!hideCondition?.enabled || !hideCondition?.variable || this.enableSettings) {
-            return false;
-        }
-        return this.evaluateCondition(hideCondition.variable, hideCondition.value, hideCondition.operator);
-    }
-    initSortable() {
-        this.updateComplete.then(() => {
-            const containers = this.shadowRoot?.querySelectorAll('.grid-container');
-            if (!containers?.length)
-                return;
-            containers.forEach((container) => {
-                let originalNodes = [];
-                const sortableInstance = Sortable.create(container, {
-                    group: this.tabId || this.sortableGroupId,
-                    animation: 150,
-                    handle: '.drag-handle',
-                    ghostClass: 'sortable-ghost',
-                    chosenClass: 'sortable-chosen',
-                    dragClass: 'sortable-drag',
-                    sort: true,
-                    onStart: (evt) => {
-                        originalNodes = Array.from(evt.from.childNodes);
-                    },
-                    onEnd: (evt) => {
-                        evt.from.innerHTML = '';
-                        originalNodes.forEach((node) => evt.from.appendChild(node));
-                        const { oldIndex, newIndex } = evt;
-                        if (oldIndex == null || newIndex == null || oldIndex === newIndex)
-                            return;
-                        const updated = [...this.rows];
-                        const [movedItem] = updated.splice(oldIndex, 1);
-                        updated.splice(newIndex, 0, movedItem);
-                        this.rows = updated;
-                        this.handleSettingsChanged?.(updated);
-                    },
-                });
-                this.sortableInstances.push(sortableInstance);
-            });
-        });
-    }
-    getLocaleLang() {
-        if (this.userLang && LOCALE_LANGS.has(this.userLang)) {
-            return this.userLang;
-        }
-        return 'cs';
-    }
-    setCellSize(size, cell, breakpoint = 'lg') {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                const updatedCell = { ...c };
-                if (!updatedCell.size) {
-                    updatedCell.size = {};
-                }
-                if (breakpoint === 'xs') {
-                    updatedCell.size.xs = size;
-                    updatedCell.size.sm = size;
-                }
-                else if (breakpoint === 'lg') {
-                    updatedCell.size.md = size;
-                    updatedCell.size.lg = size;
-                    updatedCell.size.xl = size;
-                }
-                else {
-                    updatedCell.size[breakpoint] = size;
-                }
-                return updatedCell;
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setCellType(cell, type) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return { ...c, type };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-        // Simply close the settings popper when cell type changes
-        // User can reopen to see the new type-specific controls
-        //this.closeSettingsPopper();
-    }
-    setHideCondition(cell, property, value) {
-        // Update the cell in the rows array
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                const updatedCell = { ...c };
-                // Initialize hide condition if not exists
-                if (!updatedCell.hideCondition) {
-                    updatedCell.hideCondition = {
-                        // Set default operator when creating new hide condition
-                        operator: this.getDefaultOperatorForCell(cell),
-                    };
-                }
-                else {
-                    // Create a copy of hideCondition to avoid mutating the original
-                    updatedCell.hideCondition = { ...updatedCell.hideCondition };
-                }
-                // Set the property
-                updatedCell.hideCondition[property] = value;
-                return updatedCell;
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setHref(cell, href) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return { ...c, href };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setLinkType(cell, linkType) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                const updatedCell = { ...c, linkType: linkType };
-                // Clear other link properties when switching types
-                {
-                    updatedCell.href = '';
-                }
-                return updatedCell;
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setNumberOfDecimal(cell, numberOfDecimal) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return { ...c, numberOfDecimal };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setButtonVariant(cell, variant) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return { ...c, buttonVariant: variant };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setButtonColor(cell, color) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return { ...c, buttonColor: color };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setButtonFullWidth(cell, fullWidth) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return { ...c, buttonFullWidth: fullWidth };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setCurrencyType(cell, currencyType) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return { ...c, currencyType };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setProgressMax(cell, progressMax) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return { ...c, progressMax };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setProgressColor(cell, progressColor) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return { ...c, progressColor };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setCellHeaderName(cell, headerName) {
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return { ...c, headerName };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    setCellValue(cell, value) {
-        // Update the cell in the rows array
-        this.rows = this.rows.map((c) => {
-            if (c.field === cell.field) {
-                return { ...c, value };
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-    }
-    removeCellFromRows(field) {
-        this.destroySortables();
-        const updatedRows = this.rows.filter((c) => c.field !== field);
-        this.rows = [];
-        this.updateComplete.then(() => {
-            this.rows = [...updatedRows];
-            this.initSortable();
-            this.handleSettingsChanged(this.rows);
-        });
-    }
-    closePopover() {
-        this.isOpen = false;
-    }
-    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);
-    }
-    toggleRowCell(key) {
-        const exists = this.rows.some((cell) => cell.field === key);
-        if (exists) {
-            this.removeCellFromRows(key);
-        }
-        else {
-            const raw = this.variables.find((variable) => variable.field === key);
-            if (!raw)
-                return;
-            const newCell = {
-                field: key,
-                type: raw.type,
-                headerName: raw.headerName,
-                value: raw.value,
-                size: { xs: 4, sm: 2, md: 1, lg: 1, xl: 1 },
-                tooltip: raw.tooltip,
-            };
-            const newRows = [...this.rows];
-            newRows.push(newCell);
-            this.rows = newRows;
-            this.handleSettingsChanged(newRows);
-        }
-    }
-    replaceDynamicVariables(template) {
-        // Replace {variableName} patterns with actual variable values
-        return template.replace(/\{([^}]+)\}/g, (match, variableName) => {
-            const variableValue = this.getVariableValue(variableName.trim());
-            return String(variableValue || '');
-        });
-    }
-    getLinkUrl(cell) {
-        const href = cell.href || '';
-        // Check if href contains ${variable} patterns
-        if (href.includes('{')) {
-            // Replace ${variableName} patterns with actual values
-            return `${this.hostURL}/${this.replaceDynamicVariables(href)}`;
-        }
-        // Return static href as-is
-        return href;
-    }
-    formatDisplayValue(rawValue) {
-        if (rawValue === null || rawValue === undefined)
-            return '';
-        if (typeof rawValue === 'string') {
-            // Handle string representations of arrays, e.g. "[Finance, Legal, HR]"
-            if (rawValue.startsWith('[') && rawValue.endsWith(']')) {
-                const inner = rawValue.slice(1, -1).trim();
-                if (inner.length > 0) {
-                    return inner.split(',').map((s) => s.trim()).filter((s) => s !== '').join(', ');
-                }
-                return '';
-            }
-            return rawValue;
-        }
-        if (Array.isArray(rawValue)) {
-            return rawValue
-                .map((v) => this.formatDisplayValue(v))
-                .filter((v) => v !== '')
-                .join(', ');
-        }
-        if (typeof rawValue === 'object') {
-            const entries = Object.entries(rawValue)
-                .map(([key, v]) => {
-                const val = this.formatDisplayValue(v);
-                return val ? `${key}: ${val}` : '';
-            })
-                .filter((entry) => entry !== '');
-            return entries.length > 0 ? entries.join(' | ') : '';
-        }
-        return String(rawValue);
-    }
-    getAllDataGridRefs() {
-        if (this.dataGridRefs?.length)
-            return this.dataGridRefs;
-        if (this.dataGridRef)
-            return [{ id: '_default', label: 'DataGrid', ref: this.dataGridRef }];
-        return [];
-    }
-    hasAnyDataGridRef() {
-        return this.getAllDataGridRefs().length > 0;
-    }
-    getDataGridBySource(source) {
-        const refs = this.getAllDataGridRefs();
-        if (!source) {
-            return refs.length === 1 ? refs[0].ref : null;
-        }
-        const entry = refs.find((r) => r.id === source);
-        return entry?.ref || null;
-    }
-    resolveExpertOperand(type, value, source, aggregation = 'sum') {
-        if (!value)
-            return null;
-        if (type === 'column') {
-            const grid = this.getDataGridBySource(source || '');
-            if (!grid)
-                return null;
-            const rows = grid.row || [];
-            const values = rows.map((row) => parseFloat(row[value])).filter((v) => !isNaN(v));
-            if (values.length === 0)
-                return 0;
-            switch (aggregation) {
-                case 'sum':
-                    return values.reduce((acc, v) => acc + v, 0);
-                case 'avg':
-                    return values.reduce((acc, v) => acc + v, 0) / values.length;
-                case 'min':
-                    return Math.min(...values);
-                case 'max':
-                    return Math.max(...values);
-                case 'count':
-                    return values.length;
-                default:
-                    return values.reduce((acc, v) => acc + v, 0);
-            }
-        }
-        // type === 'variable'
-        // Use pre-computed expert value if available, otherwise fall back to raw value
-        if (this._resolvedExpertValues.has(value)) {
-            return this._resolvedExpertValues.get(value);
-        }
-        const variable = [...this.rows, ...this.variables].find((v) => v.field === value);
-        if (!variable)
-            return null;
-        const parsed = parseFloat(String(variable.value || 0));
-        return isNaN(parsed) ? 0 : parsed;
-    }
-    computeExpertValue(cell) {
-        const config = cell.expertMode;
-        if (!config?.enabled)
-            return null;
-        const leftType = config.leftType || 'column';
-        const rightType = config.rightType || 'variable';
-        const left = this.resolveExpertOperand(leftType, config.leftValue || config.sourceColumn || '', config.leftSource, config.leftAggregation || 'sum');
-        if (left === null)
-            return null;
-        if (config.operation === 'none')
-            return left;
-        const rightValue = config.rightValue || config.variableField || '';
-        if (!rightValue)
-            return left;
-        const right = this.resolveExpertOperand(rightType, rightValue, config.rightSource, config.rightAggregation || 'sum');
-        if (right === null)
-            return left;
-        switch (config.operation) {
-            case '+':
-                return left + right;
-            case '-':
-                return left - right;
-            case '*':
-                return left * right;
-            case '/':
-                return right !== 0 ? left / right : null;
-            default:
-                return left;
-        }
-    }
-    precomputeExpertValues() {
-        this._resolvedExpertValues.clear();
-        const maxPasses = 3;
-        for (let pass = 0; pass < maxPasses; pass++) {
-            let changed = false;
-            for (const cell of this.rows) {
-                const expertValue = this.computeExpertValue(cell);
-                if (expertValue !== null) {
-                    const prev = this._resolvedExpertValues.get(cell.field);
-                    if (prev !== expertValue) {
-                        this._resolvedExpertValues.set(cell.field, expertValue);
-                        changed = true;
-                    }
-                }
-            }
-            if (!changed)
-                break;
-        }
-    }
-    getCellWithExpertValue(cell) {
-        const expertValue = this._resolvedExpertValues.get(cell.field);
-        if (expertValue !== undefined) {
-            return { ...cell, value: expertValue };
-        }
-        return cell;
-    }
-    openExpertModeModal(cell) {
-        this.closeSettingsPopper();
-        this.expertModeCell = cell;
-        const existing = cell.expertMode;
-        const defaultSource = this.getAllDataGridRefs().length === 1 ? this.getAllDataGridRefs()[0].id : '';
-        // Load headerName mutations from cell
-        const mutations = {};
-        const supportedLangs = ['cs', 'en', 'de', 'sk', 'pl', 'hu', 'fr', 'it', 'es', 'sr'];
-        supportedLangs.forEach((lang) => {
-            const val = cell[`headerName_${lang}`];
-            if (val)
-                mutations[lang] = val;
-        });
-        this.expertModeConfig = {
-            enabled: existing?.enabled || false,
-            leftType: existing?.leftType || 'column',
-            leftSource: existing?.leftSource || defaultSource,
-            leftValue: existing?.leftValue || existing?.sourceColumn || '',
-            leftAggregation: existing?.leftAggregation || 'sum',
-            operation: existing?.operation || 'none',
-            rightType: existing?.rightType || 'variable',
-            rightSource: existing?.rightSource || defaultSource,
-            rightValue: existing?.rightValue || existing?.variableField || '',
-            rightAggregation: existing?.rightAggregation || 'sum',
-            headerName: cell.headerName || '',
-            headerNameMutations: mutations,
-            pmEnabled: existing?.pmEnabled || false,
-            pmLeftType: existing?.pmLeftType || 'column',
-            pmLeftSource: existing?.pmLeftSource || defaultSource,
-            pmLeftValue: existing?.pmLeftValue || '',
-            pmLeftAggregation: existing?.pmLeftAggregation || 'sum',
-            pmOperation: existing?.pmOperation || 'none',
-            pmRightType: existing?.pmRightType || 'variable',
-            pmRightSource: existing?.pmRightSource || defaultSource,
-            pmRightValue: existing?.pmRightValue || '',
-            pmRightAggregation: existing?.pmRightAggregation || 'sum',
-        };
-        this.expertModeModalOpen = true;
-    }
-    saveExpertMode() {
-        if (!this.expertModeCell)
-            return;
-        this.rows = this.rows.map((c) => {
-            if (c.field === this.expertModeCell.field) {
-                const { headerName, headerNameMutations, ...expertModeData } = this.expertModeConfig;
-                const updated = {
-                    ...c,
-                    expertMode: expertModeData,
-                    headerName: headerName,
-                };
-                // Write language mutations
-                Object.entries(headerNameMutations).forEach(([lang, val]) => {
-                    updated[`headerName_${lang}`] = val;
-                });
-                // Remove empty mutations
-                const supportedLangs = ['cs', 'en', 'de', 'sk', 'pl', 'hu', 'fr', 'it', 'es', 'sr'];
-                supportedLangs.forEach((lang) => {
-                    if (!headerNameMutations[lang]) {
-                        delete updated[`headerName_${lang}`];
-                    }
-                });
-                return updated;
-            }
-            return c;
-        });
-        this.handleSettingsChanged(this.rows);
-        this.expertModeModalOpen = false;
-        this.expertModeCell = null;
-    }
-    getGridColumnOptions(source) {
-        const grid = this.getDataGridBySource(source || '');
-        if (!grid?.columns)
-            return [];
-        return grid.columns
-            .filter((col) => {
-            const type = col.type;
-            return type === 'number' || type === 'currency' || type === 'range' || type === 'numberRange';
-        })
-            .map((col) => ({
-            label: col.headerName || col.field,
-            value: col.field,
-        }));
-    }
-    getGridSourceOptions() {
-        return this.getAllDataGridRefs().map((entry) => ({
-            label: entry.label,
-            value: entry.id,
-        }));
-    }
-    getExpertVariableOptions() {
-        const numericTypes = ['currency', 'number'];
-        const variables = [];
-        this.rows.forEach((cell) => {
-            if (cell.type && numericTypes.includes(cell.type)) {
-                variables.push({
-                    label: cell.headerName || cell.field,
-                    value: cell.field,
-                });
-            }
-        });
-        const existingFields = this.rows.map((cell) => cell.field);
-        this.variables.forEach((variable) => {
-            if (!existingFields.includes(variable.field) && variable.type && numericTypes.includes(variable.type)) {
-                variables.push({
-                    label: variable.headerName || variable.field,
-                    value: variable.field,
-                });
-            }
-        });
-        return variables.sort((a, b) => a.label.localeCompare(b.label));
-    }
-    getExpertModePreviewValue() {
-        if (!this.expertModeConfig.enabled || !this.expertModeConfig.leftValue) {
-            return '-';
-        }
-        const tempCell = { field: '__preview__', expertMode: { ...this.expertModeConfig } };
-        const value = this.computeExpertValue(tempCell);
-        if (value === null)
-            return 'N/A';
-        return formatDecimal(value, { locale: this.getLocaleLang(), numberOfDecimal: 2 }) || String(value);
-    }
-    computeProgressMaxExpertValue(config) {
-        if (!config?.pmEnabled)
-            return null;
-        const leftType = config.pmLeftType || 'column';
-        const rightType = config.pmRightType || 'variable';
-        const left = this.resolveExpertOperand(leftType, config.pmLeftValue || '', config.pmLeftSource, config.pmLeftAggregation || 'sum');
-        if (left === null)
-            return null;
-        if (config.pmOperation === 'none')
-            return left;
-        const rightValue = config.pmRightValue || '';
-        if (!rightValue)
-            return left;
-        const right = this.resolveExpertOperand(rightType, rightValue, config.pmRightSource, config.pmRightAggregation || 'sum');
-        if (right === null)
-            return left;
-        switch (config.pmOperation) {
-            case '+': return left + right;
-            case '-': return left - right;
-            case '*': return left * right;
-            case '/': return right !== 0 ? left / right : null;
-            default: return left;
-        }
-    }
-    getProgressMaxPreviewValue() {
-        if (!this.expertModeConfig.pmEnabled || !this.expertModeConfig.pmLeftValue) {
-            return '-';
-        }
-        const value = this.computeProgressMaxExpertValue(this.expertModeConfig);
-        if (value === null)
-            return 'N/A';
-        return formatDecimal(value, { locale: this.getLocaleLang(), numberOfDecimal: 2 }) || String(value);
-    }
-    getExpertOperandLabel(type, value, source, aggregation = 'sum') {
-        if (!value)
-            return '?';
-        if (type === 'column') {
-            const refs = this.getAllDataGridRefs();
-            const sourceLabel = refs.length > 1
-                ? refs.find((r) => r.id === source)?.label || ''
-                : '';
-            const aggLabel = (aggregation || 'sum').toUpperCase();
-            return sourceLabel ? `${aggLabel}(${sourceLabel}.${value})` : `${aggLabel}(${value})`;
-        }
-        const variable = [...this.rows, ...this.variables].find((v) => v.field === value);
-        return variable?.headerName || value;
-    }
-    renderExpertOperandSelector(side, label, tooltipText, prefix = '') {
-        const pre = prefix || '';
-        const typeKey = (pre + (side === 'left' ? 'LeftType' : 'RightType'));
-        const sourceKey = (pre + (side === 'left' ? 'LeftSource' : 'RightSource'));
-        const valueKey = (pre + (side === 'left' ? 'LeftValue' : 'RightValue'));
-        const aggregationKey = (pre + (side === 'left' ? 'LeftAggregation' : 'RightAggregation'));
-        const enabledKey = (pre ? pre + 'Enabled' : 'enabled');
-        // For non-prefixed keys (default), use original camelCase: leftType, rightType, etc.
-        const typeKeyFinal = pre ? typeKey : (side === 'left' ? 'leftType' : 'rightType');
-        const sourceKeyFinal = pre ? sourceKey : (side === 'left' ? 'leftSource' : 'rightSource');
-        const valueKeyFinal = pre ? valueKey : (side === 'left' ? 'leftValue' : 'rightValue');
-        const aggregationKeyFinal = pre ? aggregationKey : (side === 'left' ? 'leftAggregation' : 'rightAggregation');
-        const currentType = this.expertModeConfig[typeKeyFinal];
-        const currentSource = this.expertModeConfig[sourceKeyFinal];
-        const currentValue = this.expertModeConfig[valueKeyFinal];
-        const currentAggregation = this.expertModeConfig[aggregationKeyFinal];
-        const isEnabled = !!this.expertModeConfig[enabledKey];
-        const typeOptions = [
-            { label: msg('Tabulka'), value: 'column' },
-            { label: msg('Proměnná'), value: 'variable' },
-        ];
-        const aggregationOptions = [
-            { label: 'SUM', value: 'sum' },
-            { label: 'AVG', value: 'avg' },
-            { label: 'MIN', value: 'min' },
-            { label: 'MAX', value: 'max' },
-            { label: 'COUNT', value: 'count' },
-        ];
-        const gridSourceOptions = this.getGridSourceOptions();
-        const showSourceSelector = currentType === 'column' && gridSourceOptions.length >= 1;
-        const valueOptions = currentType === 'column'
-            ? this.getGridColumnOptions(currentSource)
-            : this.getExpertVariableOptions();
-        return html `
-            <div style="flex: 1; display: flex; flex-direction: column; gap: 4px;">
-                <lit-label .label="${label}" .tooltip="${tooltipText}"></lit-label>
-                <div style="display: flex; flex-direction: column; gap: 4px;">
-                    <lit-select
-                        .options=${typeOptions}
-                        .value=${currentType}
-                        .placeholder=${msg('Vyberte typ')}
-                        .disabled=${!isEnabled}
-                        .onChange=${(value) => {
-            const val = (Array.isArray(value) ? value[0] : value);
-            this.expertModeConfig = {
-                ...this.expertModeConfig,
-                [typeKeyFinal]: val || 'column',
-                [valueKeyFinal]: '',
-            };
-            this.requestUpdate();
-        }}
-                    ></lit-select>
-                    ${currentType === 'column' && gridSourceOptions.length === 0
-            ? html `
-                            <div style="
-                                display: flex;
-                                align-items: center;
-                                gap: 0.375rem;
-                                padding: 0.5rem 0.75rem;
-                                background: var(--color-info-light, #e0f2fe);
-                                color: var(--color-info-dark, #0369a1);
-                                border-radius: var(--border-radius-small, 8px);
-                                font-size: 0.75rem;
-                                font-weight: 500;
-                            ">
-                                <lit-icon name="info" size="16"></lit-icon>
-                                ${msg('Pro výpočet z tabulky je nutné přidat tabulku.')}
-                            </div>
-                        `
-            : html `
-                            ${showSourceSelector
-                ? html `
-                                    <lit-select
-                                        .options=${gridSourceOptions}
-                                        .value=${currentSource}
-                                        .placeholder=${msg('Vyberte tabulku')}
-                                        .disabled=${!isEnabled}
-                                        .onChange=${(value) => {
-                    const val = Array.isArray(value) ? value[0] : value;
-                    this.expertModeConfig = {
-                        ...this.expertModeConfig,
-                        [sourceKeyFinal]: val || '',
-                        [valueKeyFinal]: '',
-                    };
-                    this.requestUpdate();
-                }}
-                                    ></lit-select>
-                                `
-                : ''}
-                            <lit-select
-                                .options=${valueOptions}
-                                .value=${currentValue}
-                                .placeholder=${currentType === 'column' ? msg('Vyberte sloupec') : msg('Vyberte proměnnou')}
-                                .disabled=${!isEnabled}
-                                .onChange=${(value) => {
-                const val = Array.isArray(value) ? value[0] : value;
-                this.expertModeConfig = {
-                    ...this.expertModeConfig,
-                    [valueKeyFinal]: val || '',
-                };
-                this.requestUpdate();
-            }}
-                            ></lit-select>
-                            ${currentType === 'column'
-                ? html `
-                                    <lit-select
-                                        .options=${aggregationOptions}
-                                        .value=${currentAggregation}
-                                        .placeholder=${msg('Vyberte agregaci')}
-                                        .disabled=${!isEnabled}
-                                        .onChange=${(value) => {
-                    const val = Array.isArray(value) ? value[0] : value;
-                    this.expertModeConfig = {
-                        ...this.expertModeConfig,
-                        [aggregationKeyFinal]: val || 'sum',
-                    };
-                    this.requestUpdate();
-                }}
-                                    ></lit-select>
-                                `
-                : ''}
-                        `}
-                </div>
-            </div>
-        `;
-    }
-    renderExpertModeModal() {
-        const operationOptions = [
-            { label: msg('Žádná'), value: 'none' },
-            { label: '+ (' + msg('Sčítání') + ')', value: '+' },
-            { label: '- (' + msg('Odčítání') + ')', value: '-' },
-            { label: '× (' + msg('Násobení') + ')', value: '*' },
-            { label: '÷ (' + msg('Dělení') + ')', value: '/' },
-        ];
-        const isNoOperation = this.expertModeConfig.operation === 'none';
-        const closeModal = () => {
-            this.expertModeModalOpen = false;
-            this.expertModeCell = null;
-        };
-        return html `
-            <lit-modal
-                .open=${this.expertModeModalOpen}
-                .onClose=${closeModal}
-                .closeOnOutsideClick=${false}
-                style="min-width: 60vw;"
-            >
-                <lit-modal-header
-                    style="display: flex; align-items: center; justify-content: space-between; color: var(--text-secondary, #777);"
-                >
-                    ${msg('Expertní mód')} - ${this.expertModeCell?.headerName || this.expertModeCell?.field || ''}
-                    <lit-icon-button
-                        .icon="${'close'}"
-                        variant="text"
-                        color="secondary"
-                        size="${'small'}"
-                        @click=${closeModal}
-                    ></lit-icon-button>
-                </lit-modal-header>
-                <lit-modal-body>
-                    <div style="height: 400px;">
-                        <lit-tabs-overview
-                            .tabs=${[
-            ...(this.expertModeCell?.type === 'progress'
-                ? [{ id: 'progressMax', label: { default: msg('Hodnota 100%') }, icon: 'accomplish' }]
-                : []),
-            ...(this.expertModeCell?.type === 'number' || this.expertModeCell?.type === 'currency' || this.expertModeCell?.type === 'progress'
-                ? [{ id: 'calculation', label: { default: msg('Výpočet') }, icon: 'calculator' }]
-                : []),
-            ...(this.expertModeCell?.field.startsWith('custom_cell_')
-                ? [{ id: 'header', label: { default: msg('Název buňky') }, icon: 'lang' }]
-                : []),
-        ]}
-                            .userLang=${this.userLang}
-                        >
-                            <!-- Tab: Výpočet (Calculation) -->
-                            <div slot="calculation" style="display: flex; flex-direction: column; gap: 1rem;">
-                                <lit-toggle
-                                    .label="${msg('Povolit expertní výpočet')}"
-                                    .tooltip="${msg('Vypočítá hodnotu na základě vybraných sloupců/proměnných a zvolené matematické operace.')}"
-                                    .checked=${this.expertModeConfig.enabled}
-                                    @change=${(e) => {
-            this.expertModeConfig = {
-                ...this.expertModeConfig,
-                enabled: e.detail,
-            };
-        }}
-                                ></lit-toggle>
-
-                                ${this.expertModeConfig.enabled ? html `
-                                <div style="display: flex; flex-direction: row; gap: 1rem; align-items: flex-start;">
-                                    ${this.renderExpertOperandSelector('left', msg('Levý operand'), msg('Vyberte typ a hodnotu levého operandu. Sloupec vypočítá agregaci (SUM, AVG, MIN, MAX, COUNT) všech hodnot, proměnná použije hodnotu vybrané buňky.'))}
-
-                                    <div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; min-width: 120px;">
-                                        <lit-label .label="${msg('Operace')}" .tooltip="${msg('Matematická operace mezi levým a pravým operandem. Zvolte Žádná pro zobrazení pouze levého operandu.')}"></lit-label>
-                                        <lit-select
-                                            .options=${operationOptions}
-                                            .value=${this.expertModeConfig.operation}
-                                            .placeholder=${msg('Vyberte operaci')}
-                                            .onChange=${(value) => {
-            const val = Array.isArray(value) ? value[0] : value;
-            this.expertModeConfig = {
-                ...this.expertModeConfig,
-                operation: val || '+',
-            };
-            this.requestUpdate();
-        }}
-                                        ></lit-select>
-                                    </div>
-
-                                    ${!isNoOperation ? this.renderExpertOperandSelector('right', msg('Pravý operand'), msg('Vyberte typ a hodnotu pravého operandu. Sloupec vypočítá agregaci (SUM, AVG, MIN, MAX, COUNT) všech hodnot, proměnná použije hodnotu vybrané buňky.')) : ''}
-                                </div>
-
-                                <div
-                                    style="
-                                        padding: 0.75rem;
-                                        background: var(--background-default, #f5f5f5);
-                                        border-radius: var(--border-radius-small, 8px);
-                                        font-size: 0.8125rem;
-                                        color: var(--text-secondary, #5d6371);
-                                    "
-                                >
-                                    <div style="font-weight: 600; margin-bottom: 0.25rem;">${msg('Náhled výpočtu')}</div>
-                                    <div>
-                                        ${this.getExpertOperandLabel(this.expertModeConfig.leftType, this.expertModeConfig.leftValue, this.expertModeConfig.leftSource, this.expertModeConfig.leftAggregation)}
-                                        ${this.expertModeConfig.operation !== 'none'
-            ? html `${this.expertModeConfig.operation} ${this.getExpertOperandLabel(this.expertModeConfig.rightType, this.expertModeConfig.rightValue, this.expertModeConfig.rightSource, this.expertModeConfig.rightAggregation)}`
-            : ''}
-                                        = <strong style="color: var(--text-primary, #111827);">${this.getExpertModePreviewValue()}</strong>
-                                    </div>
-                                </div>
-                                ` : ''}
-                            </div>
-
-                            <!-- Tab: Hodnota 100% (Progress Max) -->
-                            ${this.expertModeCell?.type === 'progress' ? html `
-                            <div slot="progressMax" style="display: flex; flex-direction: column; gap: 1rem;">
-                                <lit-toggle
-                                    .label="${msg('Vypočítat hodnotu 100%')}"
-                                    .tooltip="${msg('Vypočítá hodnotu pro 100% na základě vybraných sloupců/proměnných a zvolené matematické operace.')}"
-                                    .checked=${this.expertModeConfig.pmEnabled}
-                                    @change=${(e) => {
-            this.expertModeConfig = {
-                ...this.expertModeConfig,
-                pmEnabled: e.detail,
-            };
-        }}
-                                ></lit-toggle>
-
-                                ${this.expertModeConfig.pmEnabled ? html `
-                                <div style="display: flex; flex-direction: row; gap: 1rem; align-items: flex-start;">
-                                    ${this.renderExpertOperandSelector('left', msg('Levý operand'), msg('Vyberte typ a hodnotu levého operandu pro výpočet hodnoty 100%.'), 'pm')}
-
-                                    <div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; min-width: 120px;">
-                                        <lit-label .label="${msg('Operace')}" .tooltip="${msg('Matematická operace mezi levým a pravým operandem.')}"></lit-label>
-                                        <lit-select
-                                            .options=${operationOptions}
-                                            .value=${this.expertModeConfig.pmOperation}
-                                            .placeholder=${msg('Vyberte operaci')}
-                                            .onChange=${(value) => {
-            const val = Array.isArray(value) ? value[0] : value;
-            this.expertModeConfig = {
-                ...this.expertModeConfig,
-                pmOperation: val || 'none',
-            };
-            this.requestUpdate();
-        }}
-                                        ></lit-select>
-                                    </div>
-
-                                    ${this.expertModeConfig.pmOperation !== 'none' ? this.renderExpertOperandSelector('right', msg('Pravý operand'), msg('Vyberte typ a hodnotu pravého operandu pro výpočet hodnoty 100%.'), 'pm') : ''}
-                                </div>
-
-                                <div
-                                    style="
-                                        padding: 0.75rem;
-                                        background: var(--background-default, #f5f5f5);
-                                        border-radius: var(--border-radius-small, 8px);
-                                        font-size: 0.8125rem;
-                                        color: var(--text-secondary, #5d6371);
-                                    "
-                                >
-                                    <div style="font-weight: 600; margin-bottom: 0.25rem;">${msg('Náhled hodnoty 100%')}</div>
-                                    <div>
-                                        ${this.getExpertOperandLabel(this.expertModeConfig.pmLeftType, this.expertModeConfig.pmLeftValue, this.expertModeConfig.pmLeftSource, this.expertModeConfig.pmLeftAggregation)}
-                                        ${this.expertModeConfig.pmOperation !== 'none'
-            ? html `${this.expertModeConfig.pmOperation} ${this.getExpertOperandLabel(this.expertModeConfig.pmRightType, this.expertModeConfig.pmRightValue, this.expertModeConfig.pmRightSource, this.expertModeConfig.pmRightAggregation)}`
-            : ''}
-                                        = <strong style="color: var(--text-primary, #111827);">${this.getProgressMaxPreviewValue()}</strong>
-                                    </div>
-                                </div>
-                                ` : ''}
-                            </div>
-                            ` : ''}
-
-                            <!-- Tab: Název buňky (Header) -->
-                            <div slot="header" style="display: flex; flex-direction: column; gap: 1rem;">
-                                <lit-label
-                                    .label="${msg('Název buňky')}"
-                                    .tooltip="${msg('Název buňky zobrazený v záhlaví. Můžete nastavit překlad pro různé jazyky.')}"
-                                ></lit-label>
-                                <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-                                    <lit-text-field
-                                        .label="${msg('Výchozí název')}"
-                                        .value=${this.expertModeConfig.headerName}
-                                        @onChange=${(e) => {
-            this.expertModeConfig = {
-                ...this.expertModeConfig,
-                headerName: e.detail,
-            };
-        }}
-                                    ></lit-text-field>
-
-                                    ${(this.allowedLang || []).map((lang) => html `
-                                            <lit-text-field
-                                                .label="${msg('Název')} ${lang.toUpperCase()}"
-                                                .placeholder="${msg('Zadejte název')} ${lang.toUpperCase()}"
-                                                .value=${this.expertModeConfig.headerNameMutations[lang] || ''}
-                                                @onChange=${(e) => {
-            this.expertModeConfig = {
-                ...this.expertModeConfig,
-                headerNameMutations: {
-                    ...this.expertModeConfig.headerNameMutations,
-                    [lang]: e.detail,
-                },
-            };
-        }}
-                                            ></lit-text-field>
-                                        `)}
-                                </div>
-                            </div>
-                        </lit-tabs-overview>
-                    </div>
-                </lit-modal-body>
-                <lit-modal-footer
-                    style="display: flex; flex-direction: row; gap: 0.5rem; justify-content: center;"
-                >
-                    <lit-button
-                        .label="${msg('Uložit')}"
-                        .icon="check"
-                        .size="medium"
-                        @click=${() => this.saveExpertMode()}
-                    ></lit-button>
-                    <lit-button
-                        color="secondary"
-                        .label="${msg('Zrušit')}"
-                        variant="text"
-                        .icon="close"
-                        .size="medium"
-                        @click=${closeModal}
-                    ></lit-button>
-                </lit-modal-footer>
-            </lit-modal>
-        `;
-    }
-    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;
-    }
-    resolveProgressMax(cell) {
-        // 1. If expert mode progressMax computation is enabled, use it
-        const config = cell.expertMode;
-        if (config?.pmEnabled) {
-            const computed = this.computeProgressMaxExpertValue(config);
-            if (computed !== null && computed > 0)
-                return computed;
-        }
-        // 2. Otherwise use static progressMax from tweakpane
-        const staticMax = cell.progressMax;
-        if (typeof staticMax === 'number' && staticMax > 0)
-            return staticMax;
-        return 100;
-    }
-    parseBooleanValue(value) {
-        if (typeof value === 'boolean')
-            return value;
-        if (typeof value === 'string') {
-            const lower = value.toLowerCase().trim();
-            return lower === 'true' || lower === '1' || lower === 'yes' || lower === 'ano';
-        }
-        if (typeof value === 'number')
-            return value !== 0;
-        return !!value;
-    }
-    render() {
-        if (this.hideTabWhen)
-            return null;
-        this.precomputeExpertValues();
-        const filteredKeys = this.variables
-            .map((variable) => variable.field)
-            .filter((key) => {
-            const item = this.variables.find((variable) => variable.field === key);
-            const headerName = item?.headerName || '';
-            return (key.toLowerCase().includes(this.filterText) ||
-                headerName.toLowerCase().includes(this.filterText));
-        });
-        return html `
-            ${this.enableSettings
-            ? html `
-                      <div
-                          style="display: flex; gap: 0.5rem; justify-content: right; margin-bottom: 1rem; flex-wrap: wrap;"
-                      >
-                          <lit-button
-                              color="secondary"
-                              variant="${'dashed'}"
-                              label="${msg('Přiřadit vlastní buňku')}"
-                              icon="add"
-                              .fullWidth=${this.isMobile}
-                              @click="${this.addCustomEmptyCell}"
-                              class="add-variable-button"
-                          ></lit-button>
-                          <lit-button
-                              color="secondary"
-                              variant="${'dashed'}"
-                              label="${msg('Přiřadit proměnnou')}"
-                              icon="add"
-                              .fullWidth=${this.isMobile}
-                              @click="${this.toggleCustomPopover}"
-                              class="add-variable-button"
-                          ></lit-button>
-
-                          <simple-popper
-                              .showing=${this.isOpen}
-                              .placement=${'bottom-end'}
-                              .manualOpening=${true}
-                              .maxWidthAsTarget=${false}
-                              .minWidth=${'400px'}
-                              .minHeight=${'300px'}
-                              .onClose=${() => this.closePopover()}
-                          >
-                              <div
-                                  class="popper-input"
-                                  style="position: sticky; top: 0; z-index: 1;"
-                              >
-                                  <lit-input
-                                      id="variable-filter-input"
-                                      .value=${this.filterText}
-                                      .onInput=${(value) => {
-                this.filterText = value?.toLowerCase?.() || '';
-            }}
-                                      .onClear=${() => {
-                this.filterText = '';
-            }}
-                                      placeholder="${msg('Zadejte název proměnné')}"
-                                      .size=${'small'}
-                                  ></lit-input>
-                              </div>
-                              <lit-menu tabindex="0">
-                                  ${this.variables
-                .map((variable) => variable.field)
-                .filter((key) => {
-                const item = this.variables.find((variable) => variable.field === key);
-                const headerName = item?.headerName || '';
-                return (key.toLowerCase().includes(this.filterText) ||
-                    headerName.toLowerCase().includes(this.filterText));
-            })
-                .sort((a, b) => {
-                const aIsUnderscore = a.startsWith('_');
-                const bIsUnderscore = b.startsWith('_');
-                if (aIsUnderscore && !bIsUnderscore)
-                    return 1;
-                if (!aIsUnderscore && bIsUnderscore)
-                    return -1;
-                const aItem = this.variables.find((v) => v.field === a);
-                const bItem = this.variables.find((v) => v.field === b);
-                const aName = aItem?.headerName || a;
-                const bName = bItem?.headerName || b;
-                return aName.localeCompare(bName, this.getLocaleLang());
-            })
-                .map((key) => html `
-                                              <lit-menu-item
-                                                  .onClick=${() => this.toggleRowCell(key)}
-                                                  .isActive=${this.existingFields.includes(key)}
-                                              >
-                                                  <span class="menu-item--multiple">
-                                                      <lit-checkbox
-                                                          class="cursor"
-                                                          .checked=${this.existingFields.includes(key)}
-                                                      ></lit-checkbox>
-                                                      ${this.variables.find((variable) => variable.field === key)?.headerName || key}
-                                                      (${key})
-                                                  </span>
-                                              </lit-menu-item>
-                                          `)}
-                              </lit-menu>
-
-                              ${isEqual(filteredKeys.length, 0)
-                ? html `
-                                        <div
-                                            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>
-                                            </div>
-                                            ${msg('Nenalezeno')}
-                                        </div>
-                                    `
-                : null}
-                          </simple-popper>
-                      </div>
-                  `
-            : ''}
-            ${this.isLoading
-            ? html `<lit-loader></lit-loader>`
-            : this.gridVariables
-                ? html ` <div class="grid-container">
-                        ${repeat(this.rows, (cell, index) => cell.field, (cell) => {
-                    const resolvedCell = this.getCellWithExpertValue(cell);
-                    const classes = `cell--span4`;
-                    return html `
-                                    <div class="${classes}" data-field="${cell.field}">
-                                        ${this.getInlineCellValue(resolvedCell)}
-                                    </div>
-                                `;
-                })}
-                    </div>`
-                : html `
-                        <div class="grid-container">
-                            ${repeat(this.rows, (cell, index) => cell.field, (cell) => {
-                    const resolvedCell = this.getCellWithExpertValue(cell);
-                    const bpIndex = this.BREAKPOINTS.indexOf(this.currentBreakpoint);
-                    const spanSize = this.gridVariables
-                        ? 4
-                        : (this.BREAKPOINTS.slice(0, bpIndex + 1)
-                            .reverse()
-                            .map((bp) => cell.size?.[bp])
-                            .find((s) => s !== undefined) ?? 2);
-                    const classes = `cell--span${spanSize} cell ${this.shouldHideCell(cell) ? 'hidden-cell' : ''}`;
-                    return html `
-                                        <div
-                                            class="${classes}"
-                                            style="${styleMap(this.computeCellStyles(cell))}"
-                                            data-field="${cell.field}"
-                                        >
-                                            ${resolvedCell?.type === 'button'
-                        ? this.getCellButton(resolvedCell)
-                        : resolvedCell.type === 'link'
-                            ? this.getCellLink(resolvedCell)
-                            : resolvedCell.type === 'progress'
-                                ? this.getCellProgress(resolvedCell)
-                                : resolvedCell.type === 'currency'
-                                    ? this.getCellCurrency(resolvedCell)
-                                    : resolvedCell.type === 'date'
-                                        ? this.getCellDate(resolvedCell)
-                                        : resolvedCell.type === 'number'
-                                            ? this.getCellNumber(resolvedCell)
-                                            : resolvedCell.type === 'checkbox'
-                                                ? this.getCellCheckbox(resolvedCell)
-                                                : this.getCellValue(resolvedCell)}
-                                        </div>
-                                    `;
-                })}
-                        </div>
-                    `}
-            ${this.settingsPopperOpen && this.activeSettingsCell
-            ? html `
-                      <div class="tweakpane-overlay" @click=${this.closeSettingsPopper}>
-                          <div class="tweakpane-panel" @click=${(e) => e.stopPropagation()}>
-                              ${this.renderSettingsContent()}
-                          </div>
-                      </div>
-                  `
-            : ''}
-            ${this.renderExpertModeModal()}
-        `;
-    }
-}
-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 `
-            :host {
-                font-family: 'Inter', sans-serif;
-            }
-
-            .header-cell {
-                min-height: 1.25rem;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-            }
-
-            .drag-handle {
-                cursor: grab;
-                opacity: 0.6;
-                transition: opacity 0.2s;
-            }
-
-            .drag-handle:hover {
-                opacity: 1;
-            }
-
-            .grid-container {
-                display: grid;
-                justify-content: start;
-                align-items: start;
-                gap: 0.5rem;
-                border: 1px dashed transparent;
-                border-radius: var(--border-radius-small, 8px);
-                transition: border-color 0.2s;
-            }
-
-            .grid-container.sortable-drag-over {
-                border-color: var(--color-primary-main, #76b703);
-            }
-
-            .process-data-heading {
-                font-size: 0.75rem;
-                color: var(--text-secondary, #5d6371);
-                font-weight: 400 !important;
-                display: flex;
-                gap: 5px;
-                align-items: center;
-            }
-
-            .process-data-value {
-                min-height: 1.25rem;
-                font-size: 0.8125rem;
-                color: var(--text-primary, #111827);
-                margin: 0;
-                font-weight: 500;
-                display: flex;
-                align-items: center;
-            }
-
-            .status {
-                color: var(--color-primary-main, #76b703);
-            }
-
-            .link {
-                font-size: 0.8125rem;
-                text-decoration: none;
-                color: var(--text-primary, #111827);
-                border-bottom: 0.0625rem solid var(--color-primary-main, #76b703);
-            }
-
-            .cell {
-                padding: 0.375rem;
-                border-radius: var(--border-radius-small, 8px);
-                border: 1px solid transparent;
-                transition: all 0.2s;
-                min-height: 2.625rem;
-            }
-
-            .cell.one-column {
-                min-height: 0 !important;
-            }
-
-            .cell.sortable-ghost {
-                opacity: 0.5;
-                border-color: var(--color-primary-main, #76b703);
-            }
-
-            .cell.sortable-chosen {
-                transform: scale(1.02);
-                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            }
-
-            .link:hover {
-                color: var(--color-primary-main, #76b703);
-            }
-
-            .settings-buttons {
-                display: flex;
-                align-items: center;
-            }
-
-            .header-buttons {
-                display: flex;
-                gap: 0.5rem;
-                color: var(--text-secondary, #777);
-            }
-
-            .size-button {
-                margin-right: 0.5rem;
-                cursor: pointer;
-            }
-
-            .size-button--active {
-                text-decoration: underline;
-                font-weight: bold;
-            }
-
-            .popper-input {
-                margin-bottom: 0.5rem;
-                background-color: var(--background-paper, #fff);
-                z-index: 1;
-            }
-
-            .cell-background {
-                width: 14px;
-                height: 14px;
-                border-radius: 4px;
-                border: 1px solid #ccc;
-                cursor: pointer;
-                margin-right: 0.5rem;
-            }
-
-            .bold-toggle {
-                cursor: pointer;
-            }
-
-            .bold-toggle--active {
-                text-decoration: underline;
-                font-weight: bold;
-            }
-
-            .color-label {
-                margin: 0.5rem 0 0.25rem 0;
-            }
-
-            .cell-background--active {
-                border-bottom: 1px solid white;
-                margin-top: 1px;
-                margin-right: 0.5rem;
-            }
-
-            .add-variable-button {
-                display: inline-block;
-            }
-
-            @media (max-width: 600px) {
-                .add-variable-button {
-                    display: block;
-                    width: 100%;
-                }
-            }
-
-            .cell--span0 {
-                display: none;
-            }
-            .cell--span1 {
-                grid-column: span 1 / span 1;
-            }
-            .cell--span2 {
-                grid-column: span 2 / span 2;
-            }
-            .cell--span3 {
-                grid-column: span 3 / span 3;
-            }
-            .cell--span4 {
-                grid-column: span 4 / span 4;
-            }
-
-            /* Responzívne nastavenie počtu stĺpcov */
-            @media (min-width: 0px) {
-                .grid-container {
-                    grid-template-columns: repeat(4, minmax(0, 1fr)); /* xs */
-                }
-            }
-
-            @media (min-width: var(--breakpoint-sm, 600px)) {
-                .grid-container {
-                    grid-template-columns: repeat(4, minmax(0, 1fr)); /* sm */
-                }
-            }
-
-            @media (min-width: var(--breakpoint-md, 960px)) {
-                .grid-container {
-                    grid-template-columns: repeat(4, minmax(0, 1fr)); /* md */
-                }
-            }
-
-            @media (min-width: var(--breakpoint-lg, 1280px)) {
-                .grid-container {
-                    grid-template-columns: repeat(4, minmax(0, 1fr)); /* lg */
-                }
-            }
-
-            @media (min-width: var(--breakpoint-xl, 1536px)) {
-                .grid-container {
-                    grid-template-columns: repeat(4, minmax(0, 1fr));
-                }
-            }
-
-            .hidden-cell {
-                display: none;
-            }
-
-            .tweakpane-container {
-                min-width: 250px;
-                max-width: 300px;
-            }
-
-            /* Basic Tweakpane in tooltip styling - applying to document to bypass shadow DOM */
-            :host([data-tweakpane-loaded]) {
-                display: block;
-            }
-        `,
-];
-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);
-__decorate([
-    property({ type: Array })
-], LitCaseVariablesTab.prototype, "variables", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitCaseVariablesTab.prototype, "hideTabWhen", void 0);
-__decorate([
-    property({ type: String })
-], LitCaseVariablesTab.prototype, "userLang", void 0);
-__decorate([
-    property({ type: Array })
-], LitCaseVariablesTab.prototype, "allowedLang", void 0);
-__decorate([
-    property({ type: String })
-], LitCaseVariablesTab.prototype, "dateFormat", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitCaseVariablesTab.prototype, "isLoading", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitCaseVariablesTab.prototype, "enableSettings", void 0);
-__decorate([
-    property({ type: String })
-], LitCaseVariablesTab.prototype, "tabId", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitCaseVariablesTab.prototype, "gridVariables", void 0);
-__decorate([
-    property({ type: Function })
-], LitCaseVariablesTab.prototype, "onSettingsChanged", void 0);
-__decorate([
-    property({ type: String })
-], LitCaseVariablesTab.prototype, "hostURL", void 0);
-__decorate([
-    property({ attribute: false })
-], LitCaseVariablesTab.prototype, "dataGridRef", void 0);
-__decorate([
-    property({ attribute: false })
-], LitCaseVariablesTab.prototype, "dataGridRefs", void 0);
-__decorate([
-    state()
-], LitCaseVariablesTab.prototype, "currentBreakpoint", void 0);
-__decorate([
-    state()
-], LitCaseVariablesTab.prototype, "isOpen", void 0);
-__decorate([
-    state()
-], LitCaseVariablesTab.prototype, "filterText", void 0);
-__decorate([
-    state()
-], LitCaseVariablesTab.prototype, "isMobile", void 0);
-__decorate([
-    state()
-], LitCaseVariablesTab.prototype, "expertModeModalOpen", void 0);
-__decorate([
-    state()
-], LitCaseVariablesTab.prototype, "expertModeCell", void 0);
-__decorate([
-    state()
-], LitCaseVariablesTab.prototype, "expertModeConfig", void 0);
-__decorate([
-    state()
-], LitCaseVariablesTab.prototype, "activeSettingsCell", void 0);
-__decorate([
-    state()
-], LitCaseVariablesTab.prototype, "settingsPopperOpen", void 0);
-if (!window.customElements.get('lit-case-variables-tab')) {
-    window.customElements.define('lit-case-variables-tab', LitCaseVariablesTab);
-}
-//# sourceMappingURL=lit-case-variables-tab.js.map