overview-components 1.1.162 → 1.1.165

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

@@ -0,0 +1,3763 @@
+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) {
+                const openInNewTab = cell.openInNewTab !== false;
+                if (openInNewTab) {
+                    window.open(url, '_blank');
+                }
+                else {
+                    window.location.href = url;
+                }
+            }
+        };
+        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 || '';
+            const openInNewTab = cell.openInNewTab !== false;
+            return html `<div>${this.getHeader(cell)}</div>
+            <a
+                class="link"
+                href=${linkUrl}
+                target=${openInNewTab ? '_blank' : '_self'}
+                rel=${openInNewTab ? 'noopener noreferrer' : ''}
+                >${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 || '',
+            openInNewTab: cell.openInNewTab !== false,
+            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);
+        });
+        // Open in new tab
+        const openInNewTabInput = pane.addBinding(config, 'openInNewTab', {
+            label: msg('Otevřít v nové záložce'),
+        });
+        openInNewTabInput.on('change', (ev) => {
+            this.setOpenInNewTab(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);
+        });
+        // Open in new tab
+        const openInNewTabInput = pane.addBinding(config, 'openInNewTab', {
+            label: msg('Otevřít v nové záložce'),
+        });
+        openInNewTabInput.on('change', (ev) => {
+            this.setOpenInNewTab(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);
+    }
+    setOpenInNewTab(cell, openInNewTab) {
+        this.rows = this.rows.map((c) => {
+            if (c.field === cell.field) {
+                return { ...c, openInNewTab };
+            }
+            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) {
+        return template.replace(/\{([^}]+)\}/g, (_match, variableName) => {
+            const name = variableName.trim();
+            const variableValue = this.getVariableValue(name);
+            if (variableValue === undefined || variableValue === null || variableValue === '') {
+                console.warn(`[lit-case-variables-tab] Dynamic link variable "{${name}}" resolved to empty.`);
+                return '';
+            }
+            return String(variableValue);
+        });
+    }
+    collapseEmptyPathSegments(url) {
+        const schemeMatch = url.match(/^([a-z][a-z0-9+.-]*:\/\/)(.*)$/i);
+        const scheme = schemeMatch ? schemeMatch[1] : '';
+        const rest = schemeMatch ? schemeMatch[2] : url;
+        const [pathAndAuthority, query = ''] = rest.split('?');
+        const collapsedPath = pathAndAuthority.replace(/\/{2,}/g, '/').replace(/\/+$/g, '');
+        return scheme + collapsedPath + (query ? `?${query}` : '');
+    }
+    getLinkUrl(cell) {
+        const href = cell.href || '';
+        const resolved = href.includes('{') ? this.replaceDynamicVariables(href) : href;
+        const raw = cell.linkType === 'dynamic' ? `${this.hostURL}/${resolved}` : resolved;
+        return this.collapseEmptyPathSegments(raw);
+    }
+    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