/* ═══════════ LABELFORGE DESIGNER — CSS CUSTOM PROPERTIES ═══════════
 *
 * Override these in your app's CSS to theme the designer:
 *
 *   :root {
 *     --lf-primary: #2563EB;        // your brand color
 *     --lf-surface: #1e1e2e;        // dark mode surface
 *     --lf-font: 'Inter', sans-serif;
 *   }
 *
 * All internal styles reference these properties, so a single
 * override file re-skins the entire designer.
 */

:root {
    /* ── Colors ── */
    --lf-primary: #2563EB;
    --lf-primary-hover: #1d4ed8;
    --lf-primary-text: #ffffff;
    --lf-surface: #ffffff;
    --lf-surface-alt: #f8fafc;
    --lf-surface-raised: #ffffff;
    --lf-border: #e2e8f0;
    --lf-border-focus: #2563EB;
    --lf-text: #0f172a;
    --lf-text-secondary: #475569;
    --lf-text-muted: #475569;
    --lf-danger: #ef4444;
    --lf-success: #22c55e;
    --lf-warning: #eab308;
    --lf-canvas-bg: #f1f5f9;
    --lf-canvas-grid: #e2e8f0;
    --lf-selection: rgba(37, 99, 235, 0.15);
    --lf-handle: #2563EB;

    /* ── Reference / non-printing element appearance ── */
    --lf-ref-opacity: 0.4;
    --lf-ref-border: 1px dashed #94a3b8;
    --lf-ref-bg: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,0.03) 4px, rgba(0,0,0,0.03) 8px);

    /* ── Typography ── */
    --lf-font: 'Inter', system-ui, -apple-system, sans-serif;
    --lf-font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --lf-font-size-xs: 0.75rem;
    --lf-font-size-sm: 0.8125rem;
    --lf-font-size-base: 0.875rem;

    /* ── Spacing ── */
    --lf-radius: 6px;
    --lf-radius-lg: 8px;
    --lf-panel-width: 240px;
    --lf-toolbar-height: 40px;

    /* ── Shadows ── */
    --lf-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --lf-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ── Dark theme ──
 * Activates on either:
 *   - legacy: a `lf-dark` class on any ancestor (host page demo pattern)
 *   - built-in toggle: `data-theme="dark"` on the designer root (set by
 *     CycleThemeAsync; persisted in localStorage key `lf_designer_theme`)
 *   - host-driven: `data-theme="dark"` anywhere up the tree
 */
.lf-dark,
[data-theme="dark"] {
    --lf-surface: #1e1e2e;
    --lf-surface-alt: #181825;
    --lf-surface-raised: #313244;
    --lf-border: #45475a;
    --lf-border-focus: #89b4fa;
    --lf-text: #cdd6f4;
    --lf-text-secondary: #a6adc8;
    --lf-text-muted: #9399b2;
    --lf-canvas-bg: #11111b;
    --lf-canvas-grid: #313244;
    --lf-primary: #89b4fa;
    --lf-primary-hover: #74c7ec;
    --lf-primary-text: #1e1e2e;
    --lf-danger-text: #f87171; /* lighter red for 4.5:1 contrast on dark surface */
    --lf-selection: rgba(137, 180, 250, 0.15);
    --lf-handle: #89b4fa;
    --lf-ref-opacity: 0.35;
    --lf-ref-border: 1px dashed #9399b2;
    --lf-ref-bg: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.03) 4px, rgba(255,255,255,0.03) 8px);
}
/* ═══════════ LABELFORGE DESIGNER — COMPONENT STYLES ═══════════
 * All colors/fonts reference CSS custom properties from labelforge-designer.css.
 * Consumers override those properties to re-theme the entire designer.
 */

.lf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Desktop shell (WPF + BlazorWebView 4-tab layout) ── */
.lf-desktop-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.lf-desktop-tabs {
    display: flex;
    gap: 0;
    background: var(--lf-surface-alt, #1e293b);
    border-bottom: 1px solid var(--lf-border, #334155);
    flex-shrink: 0;
}

.lf-desktop-tab {
    padding: 8px 20px;
    border: none;
    background: transparent;
    color: var(--lf-text-dim, #94a3b8);
    font-size: 0.875rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.lf-desktop-tab:hover { color: var(--lf-text, #e2e8f0); }

.lf-tab-active {
    color: var(--lf-text, #e2e8f0);
    border-bottom-color: var(--lf-primary, #3b82f6);
}

.lf-desktop-content {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Inside desktop shell, designer/print fill the content area (not viewport) */
.lf-desktop-content .lf-designer,
.lf-desktop-content .lf-print {
    height: 100%;
}

.lf-desktop-status {
    padding: 8px 16px;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.lf-status-success { background: #166534; color: #bbf7d0; }
.lf-status-error { background: #991b1b; color: #fecaca; }

.lf-designer {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    font-family: var(--lf-font);
    font-size: var(--lf-font-size-base);
    color: var(--lf-text);
    background: var(--lf-surface);
}

/* ── Toolbar ── */
/* Toolbar rules moved to DesignerToolbar.razor.css (CSS isolation). */

.lf-btn {
    padding: 5px 12px;
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius);
    background: var(--lf-surface);
    color: var(--lf-text);
    font-size: var(--lf-font-size-xs);
    font-family: var(--lf-font);
    cursor: pointer;
    transition: all 0.15s;
}
.lf-btn:hover { background: var(--lf-surface-alt); }
.lf-btn:disabled { opacity: 0.4; cursor: default; }
.lf-btn-active { background: var(--lf-primary); color: var(--lf-primary-text); border-color: var(--lf-primary); }
.lf-btn-primary { background: var(--lf-primary); color: var(--lf-primary-text); border-color: var(--lf-primary); }
.lf-btn-primary:hover { background: var(--lf-primary-hover); }
.lf-btn-danger { color: var(--lf-danger-text, var(--lf-danger)); border-color: var(--lf-danger); }
.lf-btn-danger:hover { background: var(--lf-danger); color: #fff; }
.lf-btn-sm { padding: 2px 8px; font-size: var(--lf-font-size-xs); }
.lf-btn-xs { padding: 1px 6px; font-size: var(--lf-font-size-xs); line-height: 1.2; }
.lf-btn:focus-visible {
    outline: 2px solid var(--lf-border-focus);
    outline-offset: 2px;
}
.lf-toolbox-item-btn:focus-visible,
.lf-toolbox-item-move:focus-visible,
.lf-toolbox-item-remove:focus-visible {
    outline: 2px solid var(--lf-border-focus);
    outline-offset: 1px;
}

/* ── Body wrap (body + status bar) ── */
.lf-designer-body-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Tab strip (Visual / Form) ── */
.lf-tab-strip {
    display: flex;
    border-bottom: 1px solid var(--lf-border, #ddd);
    background: var(--lf-surface-alt, #f8f8f8);
    padding: 0 0.5rem;
    gap: 0;
    flex-shrink: 0;
}

.lf-tab {
    padding: 0.4rem 1rem;
    border: none;
    background: transparent;
    color: var(--lf-muted, #888);
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.lf-tab:hover {
    color: var(--lf-text, #333);
}

.lf-tab-active {
    color: var(--lf-primary, #0066cc);
    border-bottom-color: var(--lf-primary, #0066cc);
    font-weight: 600;
}

.lf-tab-badge {
    display: inline-block;
    font-size: 0.65rem;
    background: var(--lf-primary, #0066cc);
    color: #fff;
    border-radius: 8px;
    padding: 0 5px;
    margin-left: 4px;
    min-width: 16px;
    text-align: center;
    vertical-align: middle;
}

/* ── Body: left panel + canvas + right panel ── */
.lf-designer-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.lf-status-banner {
    padding: 6px 12px;
    background: var(--lf-warning, #854d0e);
    color: #fef3c7;
    font-size: 0.8125rem;
    flex-shrink: 0;
    cursor: pointer;
}

/* Status bar rules moved to DesignerStatusBar.razor.css (CSS isolation).
   .lf-status-success / .lf-status-error above are for the TOAST banner,
   not the status bar; those stay global. */

/* ── Panels ──
   Width is owned by the per-side variants (.lf-panel-left / -right /
   -zpl) so the splitter-driven --lf-left-rail-width / --lf-right-rail-
   width CSS custom properties actually take effect. The base rule used
   to set width + min-width + max-width all to --lf-panel-width which
   clamped every panel to 240px regardless of the rail variable. */
.lf-panel {
    background: var(--lf-surface);
    border-color: var(--lf-border);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.lf-panel-left {
    width: var(--lf-left-rail-width, 220px);
    border-right: 1px solid var(--lf-border);
}
.lf-panel-right {
    width: var(--lf-right-rail-width, 260px);
    border-left: 1px solid var(--lf-border);
}
.lf-panel-zpl {
    width: 320px;
    border-left: 1px solid var(--lf-border);
    background: var(--lf-surface-alt);
    display: flex;
    flex-direction: column;
}
.lf-zpl-output {
    flex: 1;
    overflow: auto;
    margin: 0;
    padding: 8px;
    font-family: var(--lf-font-mono);
    font-size: var(--lf-font-size-xs);
    line-height: 1.4;
    color: var(--lf-text);
    background: var(--lf-surface);
    border-top: 1px solid var(--lf-border);
    border-bottom: 1px solid var(--lf-border);
    white-space: pre-wrap;
    word-break: break-all;
}
.lf-zpl-stats {
    padding: 4px 8px;
    font-size: var(--lf-font-size-xs);
    color: var(--lf-text-muted);
}

.lf-panel-title {
    font-size: var(--lf-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lf-text-secondary);
    margin: 8px 0 6px;
}

/* Collapsible-section rules moved to CollapsibleSection.razor.css. */

/* ── Rail splitters ── */
.lf-splitter {
    width: 6px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 2;
}
.lf-splitter:hover,
.lf-splitter:active {
    background: var(--lf-primary);
    opacity: 0.4;
}
/* Body class toggled by lf-designer-splitters.js while a drag is in flight.
   Gives the whole document a resize cursor + blocks text selection so dragging
   across any part of the viewport feels right. */
body.lf-splitter-dragging {
    cursor: col-resize;
    user-select: none;
}
body.lf-splitter-dragging * {
    cursor: col-resize !important;
}
/* Widths moved above; keep the variants ungrowable. */

/* ── Toolbox pin + items ── */
.lf-symbol-cell,
.lf-add-cell,
.lf-placeholder-cell {
    position: relative;
    display: inline-flex;
}
.lf-symbol-cell .lf-symbol-btn,
.lf-add-cell .lf-add-btn,
.lf-placeholder-cell .lf-placeholder-btn {
    flex: 1;
}
.lf-toolbox-pin {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    border: 1px solid var(--lf-border, #ddd);
    background: var(--lf-surface, #fff);
    color: var(--lf-text-muted);
    cursor: pointer;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 80ms linear;
    z-index: 1;
}
.lf-symbol-cell:hover .lf-toolbox-pin,
.lf-add-cell:hover .lf-toolbox-pin,
.lf-placeholder-cell:hover .lf-toolbox-pin,
.lf-toolbox-pin:focus-visible {
    opacity: 1;
}
.lf-toolbox-pin:hover {
    background: var(--lf-primary);
    color: #fff;
    border-color: var(--lf-primary);
}

.lf-symbol-source-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    border: 1px solid var(--lf-border, #ddd);
    background: var(--lf-surface, #fff);
    color: var(--lf-text-muted);
    text-decoration: none;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 80ms linear;
    z-index: 1;
}
.lf-symbol-cell:hover .lf-symbol-source-link,
.lf-symbol-source-link:focus-visible {
    opacity: 1;
}
.lf-symbol-source-link:hover {
    background: var(--lf-primary);
    color: #fff;
    border-color: var(--lf-primary);
    text-decoration: none;
}
.lf-toolbox-empty {
    font-size: var(--lf-font-size-xs);
    color: var(--lf-text-muted);
    padding: 4px 2px;
    line-height: 1.4;
}
.lf-toolbox-pin-hint {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--lf-border, #ddd);
    color: var(--lf-text-muted);
    font-size: 10px;
    line-height: 12px;
    text-align: center;
}
.lf-toolbox-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lf-toolbox-item {
    display: flex;
    gap: 2px;
    align-items: stretch;
}
.lf-toolbox-item-btn {
    flex: 1;
    text-align: left;
    font-size: var(--lf-font-size-xs);
    padding: 4px 6px;
    background: var(--lf-surface);
    /* Previously color was unset -- user-agent default (ButtonText / black)
       rendered as black on dark-mode --lf-surface (#1e1e2e). Use the theme
       text token so dark / light modes both stay legible. */
    color: var(--lf-text);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--lf-font);
}
.lf-toolbox-item-btn:hover {
    background: var(--lf-surface-alt);
}
.lf-toolbox-item-move,
.lf-toolbox-item-remove {
    width: 18px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--lf-text-muted);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}
.lf-toolbox-item-move:hover:not(:disabled),
.lf-toolbox-item-remove:hover {
    color: var(--lf-text);
}
.lf-toolbox-item-move:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.lf-toolbox-item-remove:hover {
    color: var(--lf-danger);
}
.lf-toolbox-item-remove {
    font-size: 14px;
}
.lf-toolbox-add {
    margin-top: 6px;
    width: 100%;
}
.lf-toolbox-rename {
    display: flex;
    gap: 2px;
    align-items: stretch;
    margin-bottom: 4px;
}
.lf-toolbox-rename .lf-input {
    flex: 1;
    min-width: 0;
}

/* Preferences dialog rules moved to DesignerPrefsDialog.razor.css. */

/* ── Utility classes (replace inline styles in razor) ── */
.lf-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lf-row-between-mb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.lf-modal-title {
    font-weight: 700;
    font-size: var(--lf-font-size-base);
}
.lf-modal-body {
    margin-top: 12px;
}
.lf-json-textarea {
    font-family: var(--lf-font-mono);
    font-size: var(--lf-font-size-xs);
    resize: vertical;
}
.lf-helper-text {
    font-size: var(--lf-font-size-xs);
    color: var(--lf-text-muted);
    margin: 8px 0;
}
.lf-panel-title-mt {
    margin-top: 8px;
}
.lf-flex-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.lf-flex-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lf-input-flex-1 { flex: 1; }
.lf-input-flex-2 { flex: 2; }
.lf-hash-snippet {
    font-family: var(--lf-font-mono);
    font-size: 0.65rem;
}
.lf-danger-note {
    color: var(--lf-danger);
    font-size: var(--lf-font-size-xs);
    margin-top: 4px;
}
.lf-component-browser {
    max-height: 200px;
    overflow-y: auto;
}
.lf-component-empty {
    padding: 10px 8px;
    font-size: 0.78rem;
    color: var(--lf-text-muted, #475569);
    line-height: 1.5;
    background: var(--lf-bg-alt, #f8fafc);
    border-radius: 4px;
}
.lf-component-category {
    font-size: 0.7rem;
    color: var(--lf-text-muted);
    margin: 4px 0 2px;
}
.lf-component-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
    margin: 1px 0;
}
.lf-component-row > .lf-component-add-btn {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.lf-component-delete {
    flex: 0 0 auto;
    width: 22px;
    border: 1px solid var(--lf-border, #cbd5e1);
    background: var(--lf-surface, #fff);
    color: var(--lf-text-muted, #475569);
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.lf-component-delete:hover {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}
.lf-component-add-btn {
    width: 100%;
    text-align: left;
    font-size: var(--lf-font-size-xs);
    padding: 3px 6px;
    margin: 1px 0;
}
.lf-component-count {
    color: var(--lf-text-muted);
    font-size: 0.65rem;
}

/* ── Add buttons ── */
.lf-add-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.lf-add-btn {
    flex: 1 1 45%;
    padding: 6px 8px;
    border: 1px dashed var(--lf-border);
    border-radius: var(--lf-radius);
    background: transparent;
    color: var(--lf-text-secondary);
    font-size: var(--lf-font-size-xs);
    font-family: var(--lf-font);
    cursor: pointer;
    transition: all 0.15s;
}
.lf-add-btn:hover {
    border-color: var(--lf-primary);
    color: var(--lf-primary);
    background: var(--lf-selection);
}

/* ── Placeholders ── */
.lf-placeholder-category { margin-bottom: 6px; }
.lf-placeholder-cat-name {
    font-size: var(--lf-font-size-xs);
    font-weight: 600;
    color: var(--lf-text-secondary);
    margin: 4px 0 2px;
}
.lf-placeholder-btn {
    display: inline-block;
    padding: 1px 6px;
    margin: 1px;
    border: 1px solid var(--lf-border);
    border-radius: 3px;
    background: var(--lf-surface-alt);
    color: var(--lf-text);
    font-size: var(--lf-font-size-xs);
    font-family: var(--lf-font-mono);
    cursor: pointer;
    transition: all 0.1s;
}
.lf-placeholder-btn:hover {
    background: var(--lf-primary);
    color: var(--lf-primary-text);
    border-color: var(--lf-primary);
}

/* ── Properties ── */
.lf-prop {
    margin-bottom: 6px;
}
.lf-prop label {
    display: block;
    font-size: var(--lf-font-size-xs);
    color: var(--lf-text-secondary);
    margin-bottom: 2px;
}
/*
 * Header row for a property that has a label AND an inline annotation
 * (e.g. a StandardsBadge). The label and the badge are siblings — the
 * badge MUST NOT live inside the <label> element because <button> is a
 * labelable HTML element and would steal the implicit label association
 * from the actual form control, leaving the form control unlabeled for
 * screen readers (per HTML5 § 4.10.4 "The label element").
 */
.lf-prop-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.lf-prop-header label {
    display: inline;
    margin-bottom: 0;
}
.lf-prop-row {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: var(--lf-font-size-xs);
    color: var(--lf-text-muted);
}

.lf-input {
    width: 100%;
    max-width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius);
    background: var(--lf-surface);
    color: var(--lf-text);
    font-size: var(--lf-font-size-sm);
    font-family: var(--lf-font);
    box-sizing: border-box;
}
.lf-input:focus { border-color: var(--lf-border-focus); outline: none; }
.lf-input:focus-visible {
    border-color: var(--lf-border-focus);
    outline: 2px solid var(--lf-border-focus);
    outline-offset: 0;
}
.lf-input-sm { width: 60px; }
select.lf-input { cursor: pointer; }
textarea.lf-input { resize: vertical; font-family: var(--lf-font-mono); }

/* ── Canvas area ── */
.lf-canvas-area {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: safe center;
    justify-content: safe center;
    background: var(--lf-canvas-bg);
    padding: 24px;
    position: relative;
}

.lf-canvas {
    position: relative;
    background: #fff;
    box-shadow: var(--lf-shadow);
    border-radius: 2px;
}
.lf-canvas-grid {
    background-image:
        linear-gradient(to right, var(--lf-canvas-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--lf-canvas-grid) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
}

/* ── Alignment guides (shown while dragging) ── */
.lf-guide {
    position: absolute;
    background: var(--lf-primary);
    pointer-events: none;
    z-index: 999;
}
.lf-guide-vertical {
    top: 0;
    bottom: 0;
    width: 1px;
}
.lf-guide-horizontal {
    left: 0;
    right: 0;
    height: 1px;
}

/* ── Coordinates overlay (shown while dragging) ── */
.lf-coords-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1500;
    background: var(--lf-surface-raised);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius);
    padding: 6px 10px;
    box-shadow: var(--lf-shadow);
    display: flex;
    gap: 12px;
    font-family: var(--lf-font-mono);
    font-size: var(--lf-font-size-xs);
    color: var(--lf-text);
    pointer-events: none;
}

/* ── Empty canvas ── */
.lf-empty-canvas {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.lf-empty-canvas-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px dashed var(--lf-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--lf-text-muted);
}
.lf-empty-canvas-text {
    margin-top: 12px;
    font-size: var(--lf-font-size-sm);
    color: var(--lf-text-secondary);
    font-weight: 500;
}
.lf-empty-canvas-hint {
    margin-top: 4px;
    font-size: var(--lf-font-size-xs);
    color: var(--lf-text-muted);
}

/* ── Elements on canvas ── */
.lf-element {
    cursor: move;
    user-select: none;
    transition: box-shadow 0.1s;
}
.lf-element:hover {
    box-shadow: 0 0 0 1px var(--lf-primary);
}
.lf-selected {
    box-shadow: 0 0 0 2px var(--lf-primary) !important;
}

.lf-el-text {
    display: block;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
}

.lf-barcode-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px dashed var(--lf-border);
    color: var(--lf-text-muted);
    font-size: var(--lf-font-size-xs);
    pointer-events: none;
}

/* ── Resize handles ── */
.lf-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--lf-handle);
    border: 1px solid #fff;
    border-radius: 2px;
    z-index: 1000;
}
.lf-handle-nw { top: -4px; left: -4px; cursor: nw-resize; }
.lf-handle-ne { top: -4px; right: -4px; cursor: ne-resize; }
.lf-handle-sw { bottom: -4px; left: -4px; cursor: sw-resize; }
.lf-handle-se { bottom: -4px; right: -4px; cursor: se-resize; }

/* ── Revision history ── */
.lf-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lf-font-size-xs);
}
.lf-history-table th {
    text-align: left;
    padding: 6px 8px;
    background: var(--lf-surface-alt);
    color: var(--lf-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
    border-bottom: 1px solid var(--lf-border);
}
.lf-history-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--lf-border);
}
.lf-chain-ok {
    padding: 6px 10px;
    background: #dcfce7;
    color: #166534;
    border-radius: var(--lf-radius);
    font-size: 0.75rem;
    margin-bottom: 8px;
}
.lf-chain-error {
    padding: 6px 10px;
    background: #fee2e2;
    color: #991b1b;
    border-radius: var(--lf-radius);
    font-size: 0.75rem;
    margin-bottom: 8px;
    font-weight: 600;
}

/* ── Export overlay ── */
.lf-export-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lf-export-panel {
    background: var(--lf-surface);
    border-radius: var(--lf-radius-lg);
    padding: 16px;
    width: 600px;
    max-width: 90vw;
    max-height: 80vh;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* ── Variable rows ── */
.lf-var-row {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-bottom: 4px;
}
.lf-var-row .lf-input-sm {
    flex: 1;
    width: auto;
}

/* ── Symbol grid (GHS + medical) ── */
.lf-symbol-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}
.lf-symbol-btn {
    aspect-ratio: 1;
    padding: 4px;
    border: 1px solid var(--lf-border);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
}
.lf-symbol-btn:hover {
    border-color: var(--lf-primary);
    background: var(--lf-selection);
}
.lf-symbol-btn svg,
.lf-symbol-btn img {
    width: 100%;
    height: 100%;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

/* Constrain inline SVGs on canvas elements */
.lf-element svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* ── Element list ── */
.lf-element-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 8px;
    max-height: 200px;
    overflow-y: auto;
}
.lf-element-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 6px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--lf-text);
    font-size: var(--lf-font-size-xs);
    font-family: var(--lf-font);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}
.lf-element-list-item:hover { background: var(--lf-surface-alt); }
.lf-element-list-active {
    background: var(--lf-selection) !important;
    color: var(--lf-primary);
    font-weight: 600;
}
.lf-element-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: var(--lf-surface-alt);
    color: var(--lf-text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    font-family: var(--lf-font-mono);
    flex-shrink: 0;
}
.lf-element-list-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--lf-warning, #c90);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    cursor: help;
}
.lf-element-list-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Toolbar extras moved to DesignerToolbar.razor.css. */

/* ── LabelPrintComponent ── */
/* ═══════════ LABEL PRINT COMPONENT ═══════════ */

.lf-print {
    font-family: var(--lf-font);
    color: var(--lf-text);
    background: var(--lf-surface);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lf-print-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--lf-border);
    background: var(--lf-surface-alt);
}

.lf-print-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.lf-print-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.lf-print-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lf-text-secondary);
    margin: 16px 0 8px;
}

.lf-print-empty {
    color: var(--lf-text-muted);
    font-style: italic;
}

/* ── Template grid ── */
.lf-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.lf-template-card {
    display: block;
    padding: 16px;
    border: 2px solid var(--lf-border);
    border-radius: var(--lf-radius-lg);
    background: var(--lf-surface);
    color: var(--lf-text);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    font-family: var(--lf-font);
}
.lf-template-card:hover { border-color: var(--lf-primary); }
.lf-template-selected { border-color: var(--lf-primary); background: var(--lf-selection); }

.lf-template-card-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; margin-top: 8px; }
.lf-template-card-size { font-size: 0.75rem; color: var(--lf-text-secondary); }
.lf-template-card-elements { font-size: 0.7rem; color: var(--lf-text-muted); }

/* ── Template thumbnails ── */
.lf-template-thumb-wrap {
    width: 100%;
    background: #fff;
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius);
    overflow: hidden;
    position: relative;
    pointer-events: none;
}
.lf-template-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    transform-origin: top left;
    pointer-events: none;
}

/* ── Search ── */
.lf-print-search { margin-bottom: 8px; }

.lf-search-results {
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius);
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.lf-search-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--lf-border);
    background: var(--lf-surface);
    cursor: pointer;
    font-family: var(--lf-font);
    font-size: 0.875rem;
    text-align: left;
}
.lf-search-result:hover { background: var(--lf-surface-alt); }
.lf-search-result:last-child { border-bottom: none; }
.lf-search-result-name { font-weight: 500; }
.lf-search-result-id { font-size: 0.75rem; color: var(--lf-text-muted); font-family: var(--lf-font-mono); }

/* ── Data fields ── */
.lf-data-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.lf-data-field { margin-bottom: 4px; }
.lf-data-field label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--lf-text-secondary);
    margin-bottom: 2px;
}

/* ── Preview ── */
.lf-print-preview-body {
    display: flex;
    gap: 20px;
}

.lf-print-preview-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lf-canvas-bg);
    border-radius: var(--lf-radius-lg);
    padding: 20px;
    min-height: 200px;
}

.lf-print-preview-frame {
    background: #fff;
    box-shadow: var(--lf-shadow);
}

.lf-preview-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.lf-preview-records {
    margin-bottom: 12px;
    padding: 8px;
    background: var(--lf-surface-alt);
    border-radius: var(--lf-radius);
}
.lf-preview-records label {
    display: block;
    margin-bottom: 4px;
}

.lf-raw-preview {
    background: var(--lf-surface-alt, #f1f5f9);
    color: var(--lf-text, #0f172a);
    font-family: var(--lf-font-mono, monospace);
    font-size: 0.7rem;
    padding: 12px;
    border-radius: var(--lf-radius, 6px);
    border: 1px solid var(--lf-border, #e2e8f0);
    overflow: auto;
    max-height: 500px;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

.lf-print-settings {
    width: 280px;
    flex-shrink: 0;
}

/* ── Actions ── */
.lf-print-next {
    margin-top: 16px;
}

.lf-print-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.lf-btn-large {
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
}

.lf-btn-back {
    padding: 4px 10px;
    font-size: 0.8rem;
}

.lf-print-status {
    padding: 8px 12px;
    border-radius: var(--lf-radius);
    font-size: 0.85rem;
    margin-top: 8px;
}
.lf-print-success { background: #dcfce7; color: #166534; }
.lf-print-error { background: #fee2e2; color: #991b1b; }
.lf-print-warning { background: #fef3c7; color: #92400e; }

/* ── Step indicator ── */
.lf-step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--lf-border);
    background: var(--lf-surface);
}
.lf-step {
    color: var(--lf-text-muted);
    font-weight: 500;
}
.lf-step-active {
    color: var(--lf-primary);
    font-weight: 700;
}
.lf-step-done {
    color: var(--lf-success, #22c55e);
}
.lf-step-arrow {
    color: var(--lf-border);
    font-size: 0.7rem;
}

/* ── Job summary ── */
.lf-job-summary {
    padding: 10px;
    background: var(--lf-surface-alt);
    border-radius: var(--lf-radius);
    margin-top: 12px;
}
.lf-summary-line {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lf-text);
}
.lf-summary-detail {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--lf-text-secondary);
    margin-top: 2px;
}

/* ── Serialize/separator sections ── */
.lf-serialize-section {
    padding: 8px;
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius);
    margin-bottom: 8px;
}

/* ── StandardsBadge ── */
/*
 * StandardsBadge — scoped styles for the inline regulatory traceability badge.
 *
 * The badge is intentionally subtle: it sits next to a feature in the property
 * panel and gets out of the way until the user wants details. The popup is a
 * lightweight modal so screen real estate isn't sacrificed.
 */

.lf-std-badge-wrap {
    position: relative;
    display: inline-block;
    margin-left: 6px;
}

.lf-std-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--lf-text-muted, #6b7280);
    background: var(--lf-surface-2, #f3f4f6);
    border: 1px solid var(--lf-border, #d1d5db);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background 120ms, border-color 120ms, color 120ms;
}

.lf-std-badge:hover {
    background: var(--lf-surface-3, #e5e7eb);
    border-color: var(--lf-primary);
    color: var(--lf-primary);
}

.lf-std-badge-icon {
    font-weight: 700;
    font-size: 12px;
}

.lf-std-badge-label {
    font-weight: 500;
    white-space: nowrap;
}

.lf-std-badge-count {
    font-size: 10px;
    opacity: 0.8;
}

.lf-std-badge-compact {
    padding: 2px 6px;
}

.lf-std-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9998;
}

.lf-std-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: min(560px, 90vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--lf-surface, #ffffff);
    color: var(--lf-text, #111827);
    border: 1px solid var(--lf-border, #d1d5db);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    font-size: 13px;
}

/*
 * The popup is focusable (tabindex=-1) so the @onkeydown handler can catch
 * Escape, but we don't want a persistent focus ring on the dialog frame —
 * only on actual interactive elements inside it. Hide the outline on the
 * dialog itself; rely on browser defaults for the close button + links.
 */
.lf-std-popup:focus {
    outline: none;
}

.lf-std-popup:focus-visible {
    outline: none;
}

.lf-std-badge:focus-visible,
.lf-std-popup-close:focus-visible,
.lf-std-popup-link-url:focus-visible {
    outline: 2px solid var(--lf-primary);
    outline-offset: 2px;
}

/*
 * Focus-trap sentinels: invisible to sighted users but participate in the
 * tab order so we can detect focus escaping the dialog and bounce it back.
 * Per W3C ARIA APG dialog-modal pattern. The "visually-hidden but focusable"
 * trick uses absolute positioning + 1×1 clip to keep the element in the tab
 * order without occupying layout space or being announced as content.
 */
.lf-std-focus-sentinel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

.lf-std-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lf-border, #d1d5db);
}

.lf-std-popup-title {
    font-weight: 600;
    font-size: 14px;
}

.lf-std-popup-close {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--lf-text-muted, #6b7280);
    font-size: 22px;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
}

.lf-std-popup-close:hover {
    background: var(--lf-surface-2, #f3f4f6);
    color: var(--lf-text, #111827);
}

.lf-std-popup-feature {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--lf-text-muted, #6b7280);
    padding: 8px 18px 0;
}

.lf-std-popup-body {
    overflow-y: auto;
    padding: 12px 18px;
    flex: 1;
}

.lf-std-popup-link {
    padding: 12px 0;
    border-top: 1px solid var(--lf-border-subtle, #e5e7eb);
}

.lf-std-popup-link:first-child {
    border-top: none;
    padding-top: 4px;
}

.lf-std-popup-link-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.lf-std-popup-kind {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.lf-std-popup-kind-implements {
    color: #065f46;
    background: #d1fae5;
}

.lf-std-popup-kind-references {
    color: #1e40af;
    background: #dbeafe;
}

.lf-std-popup-kind-recommends {
    color: #92400e;
    background: #fef3c7;
}

.lf-std-popup-shortname {
    font-weight: 600;
    color: var(--lf-text, #111827);
}

.lf-std-popup-sectionref {
    color: var(--lf-text-muted, #6b7280);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.lf-std-popup-section-title {
    font-weight: 500;
    margin-top: 4px;
}

.lf-std-popup-section-summary {
    margin-top: 4px;
    color: var(--lf-text-muted, #6b7280);
    line-height: 1.45;
}

.lf-std-popup-link-note {
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--lf-surface-2, #f3f4f6);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.lf-std-popup-link-url {
    display: inline-block;
    margin-top: 8px;
    color: var(--lf-primary);
    text-decoration: none;
    font-size: 12px;
}

.lf-std-popup-link-url:hover {
    text-decoration: underline;
}

.lf-std-popup-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--lf-border, #d1d5db);
    font-size: 11px;
    color: var(--lf-text-muted, #6b7280);
    text-align: center;
}

/* Dark theme overrides for StandardsBadge popup content.
   Matches either legacy .lf-dark wrapper OR data-theme="dark" anywhere up the tree. */
.lf-dark .lf-std-badge,
[data-theme="dark"] .lf-std-badge {
    color: #94a3b8;
    background: #1e293b;
    border-color: #334155;
}

.lf-dark .lf-std-badge:hover,
[data-theme="dark"] .lf-std-badge:hover {
    background: #283548;
    border-color: #60a5fa;
    color: #93c5fd;
}

.lf-dark .lf-std-popup,
[data-theme="dark"] .lf-std-popup {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}

.lf-dark .lf-std-popup-header,
.lf-dark .lf-std-popup-footer,
[data-theme="dark"] .lf-std-popup-header,
[data-theme="dark"] .lf-std-popup-footer {
    border-color: #334155;
}

.lf-dark .lf-std-popup-link,
[data-theme="dark"] .lf-std-popup-link {
    border-top-color: #1e293b;
}

.lf-dark .lf-std-popup-link-note,
[data-theme="dark"] .lf-std-popup-link-note {
    background: #1e293b;
    color: #94a3b8;
}

.lf-dark .lf-std-popup-section-summary,
.lf-dark .lf-std-popup-feature,
.lf-dark .lf-std-popup-footer,
[data-theme="dark"] .lf-std-popup-section-summary,
[data-theme="dark"] .lf-std-popup-feature,
[data-theme="dark"] .lf-std-popup-footer {
    color: #94a3b8;
}

.lf-dark .lf-std-popup-shortname,
[data-theme="dark"] .lf-std-popup-shortname {
    color: #e2e8f0;
}

.lf-dark .lf-std-popup-close,
[data-theme="dark"] .lf-std-popup-close {
    color: #94a3b8;
}

.lf-dark .lf-std-popup-close:hover,
[data-theme="dark"] .lf-std-popup-close:hover {
    background: #1e293b;
    color: #e2e8f0;
}

.lf-dark .lf-std-popup-kind-implements,
[data-theme="dark"] .lf-std-popup-kind-implements {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.15);
}

.lf-dark .lf-std-popup-kind-references,
[data-theme="dark"] .lf-std-popup-kind-references {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.15);
}

.lf-dark .lf-std-popup-kind-recommends,
[data-theme="dark"] .lf-std-popup-kind-recommends {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.15);
}

/* ── FormDesignerPanel ── */
.lf-form-designer {
    padding: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.lf-form-header {
    margin-bottom: 1rem;
}

.lf-form-header h3 {
    margin: 0 0 0.25rem;
}

.lf-form-hint {
    color: var(--lf-muted, #888);
    font-size: 0.85rem;
    margin: 0 0 0.75rem;
}

.lf-form-actions {
    display: flex;
    gap: 0.5rem;
}

.lf-form-empty {
    padding: 2rem;
    text-align: center;
    color: var(--lf-muted, #888);
    border: 1px dashed var(--lf-border, #ddd);
    border-radius: 6px;
}

.lf-form-field-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lf-form-field-card {
    border: 1px solid var(--lf-border, #ddd);
    border-radius: 6px;
    background: var(--lf-surface, #fff);
    overflow: hidden;
}

.lf-form-field-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--lf-surface-alt, #f8f8f8);
    border-bottom: 1px solid var(--lf-border, #ddd);
}

.lf-form-field-order {
    font-size: 0.75rem;
    color: var(--lf-muted, #888);
    min-width: 1.25rem;
    text-align: center;
}

.lf-form-field-type {
    font-size: 0.75rem;
    color: var(--lf-muted, #888);
    background: var(--lf-surface, #fff);
    border: 1px solid var(--lf-border, #ddd);
    border-radius: 3px;
    padding: 0 0.3rem;
}

.lf-form-field-required {
    font-size: 0.7rem;
    color: var(--lf-danger);
    font-weight: 600;
}

.lf-form-field-actions {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
}

.lf-form-field-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.lf-form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lf-form-row > label {
    min-width: 140px;
    font-size: 0.8rem;
    color: var(--lf-muted, #888);
}

.lf-form-row > input,
.lf-form-row > select,
.lf-form-row > textarea {
    flex: 1;
}

/* ── LabelaryPreview ── */
.lf-labelary-preview {
    margin-top: 0.5rem;
    border-top: 1px solid var(--lf-border, #ddd);
    padding-top: 0.5rem;
}

.lf-labelary-setup,
.lf-labelary-settings {
    padding: 0.5rem 0;
}

.lf-labelary-hint {
    font-size: 0.75rem;
    color: var(--lf-muted, #888);
    margin: 0.25rem 0;
}

.lf-labelary-hint a {
    color: var(--lf-primary, #0066cc);
}

.lf-labelary-settings-actions {
    display: flex;
    gap: 0.25rem;
    margin: 0.5rem 0;
}

.lf-labelary-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
}

.lf-labelary-paneltitle {
    font-size: 0.82rem;
    font-weight: 600;
}

.lf-labelary-badge {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lf-muted, #888);
    border: 1px solid var(--lf-border, #ddd);
    border-radius: 3px;
    padding: 0 0.25rem;
    line-height: 1.5;
}

.lf-labelary-gear {
    margin-left: auto;
}

.lf-labelary-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.45rem;
}

.lf-labelary-error {
    color: var(--lf-danger);
    font-size: 0.8rem;
    padding: 0.25rem 0;
}

.lf-labelary-image-wrap {
    border: 1px solid var(--lf-border, #ddd);
    border-radius: 4px;
    background: #fff;
    padding: 4px;
    text-align: center;
}

.lf-labelary-image {
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
}

.lf-labelary-auto {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: var(--lf-muted, #888);
    cursor: pointer;
}

.lf-labelary-note {
    font-size: 0.72rem;
    color: var(--lf-muted, #888);
    margin: 0 0 0.4rem;
}

.lf-labelary-warn {
    color: var(--lf-warn, #b8860b);
    font-size: 0.78rem;
    padding: 0.2rem 0;
}

/* Stale: the shown preview no longer matches the live ZPL — gray it out + badge it. */
.lf-labelary-image-wrap {
    position: relative;
}

.lf-labelary-image-wrap.lf-stale .lf-labelary-image {
    opacity: 0.35;
    filter: grayscale(1);
}

.lf-labelary-stale-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

/* ── Surface comparison ── */
/* Fill the tab area so the cards scroll within view (scrollbar at the visible bottom), bar pinned above. */
.lf-compare-tabwrap {
    flex: 1;
    min-height: 0;
    display: flex;
    padding: 0.75rem;
}

.lf-compare {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.lf-compare-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.lf-compare-note {
    font-size: 0.72rem;
    color: var(--lf-muted, #888);
}

.lf-compare-zoom {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--lf-muted, #888);
    white-space: nowrap;
}

.lf-compare-zoom input[type="range"] {
    width: 120px;
}

.lf-compare-zoompct {
    min-width: 2.6em;
    text-align: right;
}

.lf-compare-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    align-items: flex-start;
    overflow: auto;
}

.lf-compare-cell {
    flex: 0 0 auto;
    border: 1px solid var(--lf-border, #ddd);
    border-radius: 4px;
    background: #fff;
    padding: 6px;
    text-align: center;
}

.lf-compare-title {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

/* Every surface is shown at the label's natural width (--lf-card-w = widthInches * 96): the high-res rasters
   downscale to it and the HTML iframe sits at its native size, so all three cards match and stay crisp. */
.lf-compare-img {
    max-width: var(--lf-card-w, 100%);
    height: auto;
    display: block;
    margin: 0 auto;
    image-rendering: auto;
    background: #fff;
}

.lf-compare-screen {
    width: var(--lf-card-w, 100%);
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
}

.lf-compare-empty {
    color: var(--lf-muted, #aaa);
    font-size: 0.8rem;
    padding: 1.5rem 0;
}

/* ── Context menu ── */
.lf-context-menu {
    background: var(--lf-surface-raised, #fff);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    padding: 4px 0;
    min-width: 160px;
}
.lf-ctx-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: none;
    color: var(--lf-text);
    font-size: var(--lf-font-size-sm);
    font-family: var(--lf-font);
    text-align: left;
    cursor: pointer;
}
.lf-ctx-item:hover {
    background: var(--lf-selection);
    color: var(--lf-primary);
}
.lf-ctx-danger:hover {
    background: rgba(239,68,68,0.1);
    color: var(--lf-danger);
}
.lf-ctx-divider {
    height: 1px;
    background: var(--lf-border);
    margin: 4px 0;
}

/* ── Multi-select ── */
.lf-multi-selected {
    box-shadow: 0 0 0 2px var(--lf-primary) !important;
    outline: 1px dashed var(--lf-primary);
    outline-offset: 2px;
}

/* ── Reference/non-printing elements on canvas ──
 * Customize via CSS custom properties:
 *   --lf-ref-opacity: 0.4 (0-1, how visible the reference element is)
 *   --lf-ref-border: 1px dashed #94a3b8 (border style for reference elements)
 *   --lf-ref-bg: repeating-linear-gradient(...) (hatching pattern, or "none")
 */
.lf-element[data-printmode="never"],
.lf-element[data-printmode="html-only"] {
    opacity: var(--lf-ref-opacity, 0.4);
    border: var(--lf-ref-border, 1px dashed #94a3b8) !important;
    background-image: var(--lf-ref-bg, none);
}

/* ─────────────────────────────────────────────────────────────────
   Print component (single-page layout). Replaces the legacy 3-step
   wizard styles above; the wizard rules are kept for now in case any
   embedder still uses them, but new work targets this section.
   ───────────────────────────────────────────────────────────────── */
.lf-print {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 24px;
    color: var(--lf-text, #1e293b);
    /* Reset the legacy wizard-era height: 100vh + overflow: hidden
       (line 1069) that would otherwise clip the field-edit section
       to the viewport. The page-level wrapper (labels-fullbleed-scroll
       in MediTracker, equivalents in other hosts) owns scrolling now. */
    height: auto;
    overflow: visible;
}

.lf-print-section {
    background: var(--lf-bg, #fff);
    border: 1px solid var(--lf-border, #e5e7eb);
    border-radius: 6px;
    padding: 12px 14px;
}

.lf-print-section-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.lf-print-template-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lf-print-template-search-row .lf-input {
    flex: 1;
}

.lf-print-template-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--lf-border, #e5e7eb);
    border-radius: 4px;
}

.lf-print-template-list-item {
    border-bottom: 1px solid var(--lf-border, #e5e7eb);
}

.lf-print-template-list-item:last-child {
    border-bottom: 0;
}

.lf-print-template-list-btn {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lf-print-template-list-btn:hover {
    background: var(--lf-bg-alt, #f1f5f9);
}

.lf-print-template-list-name {
    font-weight: 600;
    flex: 0 0 auto;
}

.lf-print-template-list-meta {
    color: var(--lf-text-muted, #475569);
    font-size: 0.8rem;
    flex: 1;
}

.lf-print-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    max-height: 480px;
    overflow-y: auto;
}

.lf-print-template-card {
    background: var(--lf-bg, #fff);
    border: 1px solid var(--lf-border, #e5e7eb);
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lf-print-template-card:hover {
    border-color: var(--lf-accent, #2563eb);
}

.lf-print-template-thumb {
    width: 100%;
    height: 110px;
    background: #fff;
    border: 1px solid var(--lf-border, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
}

.lf-print-template-card-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.lf-print-template-card-meta {
    font-size: 0.78rem;
    color: var(--lf-text-muted, #475569);
}

.lf-print-template-badge {
    display: inline-block;
    background: var(--lf-bg-alt, #eff6ff);
    color: var(--lf-accent, #2563eb);
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    align-self: flex-start;
}

.lf-print-template-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Runner: preview + options side by side; collapses on narrow screens. */
.lf-print-runner {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    background: var(--lf-bg, #fff);
    border: 1px solid var(--lf-border, #e5e7eb);
    border-radius: 6px;
    padding: 14px;
}

@media (max-width: 1100px) {
    .lf-print-runner {
        grid-template-columns: 1fr;
    }
}

.lf-print-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 260px;
}

.lf-print-preview-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lf-print-preview-toolbar-spacer {
    flex: 1;
}

.lf-print-batch-banner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--lf-batch-banner-bg, #eff6ff);
    border: 1px solid var(--lf-accent, #2563eb);
    border-radius: 4px;
    color: var(--lf-text, #111827);
    font-size: 0.9rem;
}

.lf-print-batch-row-nav {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lf-text-muted, #475569);
    font-size: 0.85rem;
}

.lf-print-preview-frame {
    flex: 1;
    min-height: 240px;
    border: 1px solid var(--lf-border, #e5e7eb);
    border-radius: 4px;
    background: #f8fafc;
    overflow: hidden;
    position: relative;
}

.lf-print-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--lf-text-muted, #475569);
    font-size: 0.85rem;
}

.lf-print-preview-raw {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 8px;
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    overflow: auto;
    background: #fff;
    color: #1e293b;
}

.lf-print-render-warning {
    background: #fef3c7;
    color: #78350f;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.8rem;
}

.lf-print-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lf-print-option-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lf-print-option-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lf-text-muted, #475569);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lf-print-option-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.lf-print-option-actions .lf-btn-primary {
    flex: 1;
}

.lf-print-toggle {
    align-self: flex-start;
    padding: 0;
    color: var(--lf-accent, #2563eb);
}

.lf-print-printer-note {
    font-size: 0.74rem;
    color: var(--lf-text-muted, #475569);
    line-height: 1.4;
}

.lf-print-printer-note a {
    color: var(--lf-accent, #2563eb);
}

.lf-print-advanced {
    border-top: 1px solid var(--lf-border, #e5e7eb);
    margin-top: 8px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lf-print-advanced-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lf-print-advanced-row label {
    font-weight: 600;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Split: per-child amount rows + quick-entry shortcut */
.lf-split-amounts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lf-split-quick {
    display: flex;
    gap: 6px;
    align-items: center;
}

.lf-split-quick .lf-input {
    flex: 1 1 auto;
    min-width: 0;
}

.lf-split-sync-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--lf-border, #e5e7eb);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.76rem;
    color: var(--lf-text-muted, #475569);
    white-space: nowrap;
}

.lf-split-sync-btn:hover {
    border-color: var(--lf-accent, #2563eb);
}

.lf-split-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}

.lf-split-row {
    display: grid;
    grid-template-columns: 22px 1fr 92px;
    gap: 6px;
    align-items: center;
}

.lf-split-row-idx {
    text-align: right;
    font-size: 0.76rem;
    color: var(--lf-text-muted, #475569);
}

.lf-split-total {
    font-size: 0.8rem;
    padding: 4px 0 2px;
    border-top: 1px dashed var(--lf-border, #e5e7eb);
}

/* Field overrides */
.lf-print-fields-toggle {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 6px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.lf-print-fields-count {
    color: var(--lf-text-muted, #475569);
    font-size: 0.78rem;
    margin-left: auto;
}

.lf-print-fields-toolbar {
    margin: 8px 0;
}

.lf-print-fields-divider {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lf-text-muted, #475569);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-top: 1px solid var(--lf-border, #e5e7eb);
    padding-top: 8px;
    margin-top: 4px;
}

.lf-print-fields-divider:first-child {
    border-top: 0;
    padding-top: 0;
}

/* Printer-fonts panel: the library catalog + this label's required fonts. */
.lf-print-font-list {
    list-style: none;
    margin: 4px 0;
    padding: 0;
}

.lf-print-font-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.lf-print-font-name {
    font-weight: 600;
    flex: 0 0 auto;
}

.lf-print-font-meta {
    color: var(--lf-text-muted, #475569);
    font-size: 0.8rem;
}

.lf-print-font-status {
    color: var(--lf-text-muted, #475569);
    font-size: 0.78rem;
    margin-left: auto;
    font-style: italic;
}

.lf-print-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 6px 12px;
    /* No max-height -- let the page-level scrollbar own vertical
       overflow. A nested scroll inside the field section traps the
       wheel and the page can't reach the bottom CTA. */
}

.lf-print-field-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.6fr) 1fr auto;
    gap: 6px;
    align-items: center;
    font-size: 0.85rem;
}

.lf-print-field-key {
    font-weight: 500;
    color: var(--lf-text, #1e293b);
    word-break: break-word;
}

.lf-print-field-marker {
    color: var(--lf-accent, #2563eb);
    margin-left: 4px;
}

.lf-print-fields-add {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 6px;
    align-items: center;
}

/* ===== Variable/formula builders + group rail + save-as-component (ported from styling branch) ===== */
.lf-var-draft-error {
    color: var(--lf-danger, #C5293E);
    font-size: var(--lf-font-size-xs);
}
/* ── Variable editor drawer ─────────────────────────────────── */
.lf-var-drawer {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 560px;
    background: var(--lf-bg, #fff);
    border-left: 1px solid var(--lf-border, #d0d4dc);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 1000;
}
.lf-var-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--lf-border-light, #eef0f4);
}
.lf-var-drawer-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--lf-primary, #2a6e3f);
}
.lf-var-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.lf-var-drawer-foot {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--lf-border-light, #eef0f4);
}
.lf-var-drawer-section { margin-bottom: 14px; }
.lf-var-drawer-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lf-text-muted, #777);
    margin-bottom: 3px;
}

/* ── Formula drawer body (restored + rebranded after Spec 1 prune) ── */

/* Reference picker — toggle dropdown (restored VariableInsertDropdown) */
.lf-var-insert-dd { position: relative; display: inline-block; }
.lf-var-insert-dd-btn {
    background: var(--lf-surface, #fff);
    border: 1px solid var(--lf-border, #D1D5DE);
    border-radius: var(--lf-radius-sm, 6px);
    padding: 7px 12px;
    font-size: 12px;
    color: var(--lf-secondary, #08642B);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lf-var-insert-dd-btn:hover { background: var(--lf-surface-alt, #F7F8FA); border-color: var(--lf-primary, #0DB14B); }
.lf-var-insert-dd-caret { font-size: 9px; color: var(--lf-text-muted, #767676); }
.lf-var-insert-dd-backdrop { position: fixed; inset: 0; z-index: 1100; }
.lf-var-insert-dd-popdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1101;
    width: 440px;
    max-width: 92vw;
    background: var(--lf-surface, #fff);
    border: 1px solid var(--lf-border, #D1D5DE);
    border-radius: var(--lf-radius, 8px);
    box-shadow: 0 12px 32px rgba(42,57,66,0.18);
    padding: 8px;
}
.lf-var-insert-dd-search {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--lf-border, #D1D5DE);
    border-radius: var(--lf-radius-sm, 6px);
    font-size: 12px;
    box-sizing: border-box;
    margin-bottom: 6px;
}
.lf-var-insert-dd-search:focus { outline: none; border-color: var(--lf-primary, #0DB14B); box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
.lf-var-insert-dd-list { max-height: 280px; overflow-y: auto; }
.lf-var-insert-dd-group {
    font-size: 9px; text-transform: uppercase; color: var(--lf-text-muted, #767676);
    letter-spacing: 0.05em; padding: 6px 5px 3px; font-weight: 700;
}
.lf-var-insert-dd-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; font-size: 12px;
    cursor: pointer; border-radius: 5px;
}
.lf-var-insert-dd-item:hover { background: #f0f7f2; }
/* Per-field "in this record" status — brand ScanGreen / Warning. Title text
   carries the meaning so it's not color-only (accessibility). */
.lf-var-insert-dd-status { font-size: 11px; line-height: 1; width: 12px; text-align: center; flex: none; }
.lf-var-insert-dd-status.in { color: #2e7d32; }
.lf-var-insert-dd-status.no { color: #bf360c; }
.lf-var-insert-dd-key { font-family: var(--lf-font-mono, ui-monospace, monospace); color: var(--lf-secondary, #08642B); }
.lf-var-insert-dd-val {
    margin-left: auto; font-family: var(--lf-font-mono, ui-monospace, monospace);
    font-size: 11px; color: var(--lf-text-secondary, #535964);
    background: var(--lf-surface-alt, #F7F8FA); padding: 1px 6px; border-radius: 4px;
    max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lf-var-insert-dd-empty { padding: 12px 8px; text-align: center; color: var(--lf-text-muted, #767676); font-size: 11px; font-style: italic; }

/* Token chips (Math bar + Date/Weight base chip) */
.lf-var-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: var(--lf-info-bg, #e3f2fd); color: var(--lf-info, #1565c0); border-radius: var(--lf-radius-sm, 6px); font: 600 12px var(--lf-font-mono, ui-monospace, monospace); }
.lf-var-chip.empty { background: var(--lf-surface, #fff); border: 1.5px dashed var(--lf-border, #D1D5DE); color: var(--lf-text-muted, #767676); cursor: pointer; font-family: var(--lf-font, inherit); font-weight: 600; }
.lf-var-chip.empty:hover { border-color: var(--lf-primary, #0DB14B); color: var(--lf-secondary, #08642B); }

/* Shared preview block ("Shows on label as") */
.lf-var-preview { margin-top: 16px; background: #f2f8f4; border: 1px solid #cfe9d8; border-radius: var(--lf-radius, 8px); padding: 11px 13px; }
.lf-var-preview.incomplete { background: var(--lf-surface-alt, #F7F8FA); border-color: var(--lf-border-light, #E8EAEF); }
.lf-var-preview-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lf-secondary, #08642B); margin-bottom: 5px; }
.lf-var-preview.incomplete .lf-var-preview-tag { color: var(--lf-text-muted, #767676); }
.lf-var-preview-stored { margin-top: 8px; font: 12px var(--lf-font-mono, ui-monospace, monospace); color: var(--lf-text, #374151); background: #fff; border: 1px solid var(--lf-border-light, #E8EAEF); border-radius: 5px; padding: 6px 8px; word-break: break-all; }

/* Date editor */
.lf-var-date-base { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.lf-var-date-op { font-size: 16px; font-weight: 700; color: var(--lf-text, #374151); }
.lf-var-date-amount { width: 64px; padding: 7px 8px; border: 1px solid var(--lf-border, #D1D5DE); border-radius: var(--lf-radius-sm, 6px); font-size: 13px; text-align: center; }
.lf-var-date-unit { padding: 7px 8px; border: 1px solid var(--lf-border, #D1D5DE); border-radius: var(--lf-radius-sm, 6px); font-size: 13px; color: var(--lf-text, #374151); background: #fff; }

/* Math editor */
.lf-var-math-toolbar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.lf-var-math-op-btn, .lf-var-math-paren-btn { width: 34px; height: 32px; border: 1px solid var(--lf-border, #D1D5DE); background: #fff; border-radius: var(--lf-radius-sm, 6px); font: 600 15px var(--lf-font, inherit); color: var(--lf-text, #374151); cursor: pointer; }
.lf-var-math-op-btn:hover:not(:disabled), .lf-var-math-paren-btn:hover:not(:disabled) { border-color: var(--lf-primary, #0DB14B); background: var(--lf-surface-alt, #F7F8FA); }
.lf-var-math-op-btn:disabled, .lf-var-math-paren-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lf-var-math-toolbar-sep { flex: 1; }
.lf-var-math-action-btn { height: 32px; padding: 0 10px; border: 1px solid var(--lf-border, #D1D5DE); background: #fff; border-radius: var(--lf-radius-sm, 6px); font: 600 12px var(--lf-font, inherit); color: var(--lf-text-secondary, #535964); cursor: pointer; }
.lf-var-math-action-btn:hover { border-color: var(--lf-warning, #bf360c); color: var(--lf-warning, #bf360c); }
.lf-var-math-bar { min-height: 48px; border: 1.5px solid var(--lf-border, #D1D5DE); border-radius: var(--lf-radius, 8px); background: var(--lf-surface-alt, #F7F8FA); padding: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lf-var-math-bar-placeholder { color: var(--lf-text-muted, #767676); font-size: 12px; font-style: italic; }
.lf-var-math-tk-chip, .lf-var-math-tk-num, .lf-var-math-tk-op, .lf-var-math-tk-paren { padding: 4px 9px; border-radius: var(--lf-radius-sm, 6px); font: 600 13px var(--lf-font-mono, ui-monospace, monospace); cursor: pointer; border: 1.5px solid transparent; }
.lf-var-math-tk-chip { background: var(--lf-info-bg, #e3f2fd); color: var(--lf-info, #1565c0); }
.lf-var-math-tk-num { background: #ede7f6; color: #6a1b9a; }
.lf-var-math-tk-op { background: #fff; color: var(--lf-text, #374151); border-color: var(--lf-border, #D1D5DE); font-weight: 700; }
.lf-var-math-tk-paren { background: #fff; color: var(--lf-text-muted, #767676); border-color: var(--lf-border-light, #E8EAEF); }
.lf-var-math-tk-chip.selected, .lf-var-math-tk-num.selected, .lf-var-math-tk-op.selected, .lf-var-math-tk-paren.selected { border-color: var(--lf-primary, #0DB14B); box-shadow: 0 0 0 2px rgba(13,177,75,0.2); }
.lf-var-math-numpad { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.lf-var-math-numpad label { font-size: 11px; color: var(--lf-text-secondary, #535964); white-space: nowrap; }
.lf-var-math-numpad-input { flex: 1; min-width: 100px; padding: 7px 9px; border: 1px solid var(--lf-border, #D1D5DE); border-radius: var(--lf-radius-sm, 6px); font: 13px var(--lf-font-mono, ui-monospace, monospace); }
.lf-var-math-numpad-hint { font-size: 11px; color: var(--lf-warning, #bf360c); }
.lf-var-dec-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.lf-var-dec-row label { font-size: 11px; color: var(--lf-text-secondary, #535964); }
.lf-var-dec-row select { padding: 6px 8px; border: 1px solid var(--lf-border, #D1D5DE); border-radius: var(--lf-radius-sm, 6px); font-size: 13px; color: var(--lf-text, #374151); background: #fff; }

/* Quantity editor */
.lf-var-quantity-picked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.lf-var-quantity-opt { font-size: 11px; color: var(--lf-text-muted, #767676); font-style: italic; font-weight: normal; }
.lf-var-radio-row { display: flex; flex-direction: column; gap: 6px; }
.lf-var-radio-row label { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1.5px solid var(--lf-border-light, #E8EAEF); border-radius: var(--lf-radius, 8px); cursor: pointer; }
.lf-var-radio-row label.selected { border-color: var(--lf-primary, #0DB14B); background: #f2f8f4; }
.lf-var-radio-row label > span:nth-of-type(1) { font-size: 12px; font-weight: 600; color: var(--lf-text, #374151); flex: 1; }
.lf-var-radio-row .ex { font: 12px var(--lf-font-mono, ui-monospace, monospace); color: var(--lf-secondary, #08642B); flex: none; }
.lf-var-quantity-unit, .lf-var-quantity-dec { width: 100%; padding: 8px 10px; border: 1px solid var(--lf-border, #D1D5DE); border-radius: var(--lf-radius-sm, 6px); font-size: 13px; color: var(--lf-text, #374151); background: #fff; }
.lf-var-quantity-total { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--lf-text, #374151); cursor: pointer; }

/* List editor grid */
.lf-var-grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.lf-var-grid th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lf-text-secondary, #535964); padding: 6px 8px; border-bottom: 1.5px solid var(--lf-border-light, #E8EAEF); background: var(--lf-surface-alt, #F7F8FA); }
.lf-var-grid-colbtn { margin-left: 6px; border: 0; background: transparent; color: var(--lf-text-muted, #767676); cursor: pointer; font-size: 13px; }
.lf-var-grid td { padding: 3px; border-bottom: 1px solid var(--lf-border-light, #E8EAEF); }
.lf-var-grid-cell { width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: 5px; font: 13px var(--lf-font, inherit); color: var(--lf-text, #374151); background: transparent; box-sizing: border-box; }
.lf-var-grid-cell:hover { background: var(--lf-surface-alt, #F7F8FA); }
.lf-var-grid-cell:focus { outline: none; border-color: var(--lf-primary, #0DB14B); background: #fff; box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
.lf-var-grid-action { width: 28px; text-align: center; }
.lf-var-icon-btn { border: 0; background: transparent; color: var(--lf-text-muted, #767676); cursor: pointer; font-size: 14px; }
.lf-var-icon-btn:hover { color: var(--lf-warning, #bf360c); }
.lf-var-list-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.lf-var-editor-toolbar { margin-bottom: 10px; }

/* ── Rail alignment polish (Table props) ───────────────────── */
.lf-table-prop {
    padding: 3px 0;
}
.lf-table-prop > label {
    display: inline-block;
    width: 64px;
    font-size: 10px;
    color: var(--lf-text-muted, #777);
}
.lf-table-section {
    padding: 8px 0;
    border-top: 1px solid var(--lf-border-light, #eef0f4);
}
.lf-table-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.lf-table-section-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
    margin-bottom: 5px;
}

/* ── Variables drawer info block (Spec 1) ──────────────── */
.lf-var-drawer-info {
    background: var(--ss-tile, #F7F8FA);
    border: 1px solid var(--lf-border-light, #eef0f4);
    border-left: 3px solid var(--lf-primary, #08642B);
    border-radius: 4px;
    padding: 10px;
    font-size: 11px;
    color: var(--lf-text, #374151);
    line-height: 1.5;
    margin-top: 14px;
}
.lf-var-drawer-info strong { color: var(--lf-primary, #08642B); display: block; margin-bottom: 3px; }
.lf-var-drawer-info em { font-style: normal; font-weight: 500; }

/* ── Component badges (Spec 1) ─────────────────────────── */
.lf-component-badge {
    display: inline-block;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-left: 5px;
    vertical-align: middle;
}
.lf-component-badge-formula {
    background: #fff3e0;
    color: #bf360c;
}
.lf-component-badge-list {
    background: #e3f2fd;
    color: #1565c0;
}

/* ── Formula drawer (Spec 2) — mirrors .lf-var-drawer exactly so it sits
   visually identical to the Variables drawer the operator already knows. */
.lf-formula-drawer-scrim {
    /* Intentionally invisible: the variable drawer never used a scrim; the
       operator can click the canvas/rails freely while the drawer is open. */
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 999;
}
.lf-formula-drawer {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 560px;
    max-width: 92vw;
    background: var(--lf-bg, #fff);
    border-left: 1px solid var(--lf-border, #d0d4dc);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    outline: none;
}
.lf-formula-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--lf-border-light, #eef0f4);
}
.lf-formula-drawer-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--lf-primary, #2a6e3f);
}
.lf-formula-drawer-close {
    background: transparent;
    border: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--lf-text-muted, #777);
    padding: 0 4px;
}
.lf-formula-drawer-close:hover { color: var(--lf-text, #374151); }
.lf-formula-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.lf-formula-drawer-context {
    font-size: 11px;
    color: var(--lf-text, #374151);
    margin-bottom: 14px;
    padding: 8px 10px;
    background: var(--ss-tile, #F7F8FA);
    border-left: 3px solid var(--lf-primary, #08642B);
    border-radius: 4px;
}
.lf-formula-drawer-context strong { color: var(--lf-primary, #08642B); }
.lf-formula-drawer-foot {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--lf-border-light, #eef0f4);
}
.lf-formula-drawer-foot-left { margin-right: auto; }
/* Quick-start presets row (common cannabis scenarios) */
.lf-formula-presets {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--lf-border-light, #E8EAEF);
}
.lf-formula-presets-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lf-text-muted, #767676);
    margin-right: 2px;
}
/* Advisory shown for computed/aggregated presets — lab data can be wrong upstream */
.lf-formula-caveat {
    margin: 6px 0 0;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--lf-text-muted, #5b6770);
    background: var(--lf-surface-subtle, #F7F8FA);
    border-left: 3px solid var(--lf-warning, #D9A400);
    border-radius: 4px;
}
.lf-formula-drawer-live {
    margin-top: 16px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 13px;
    background: #f2f8f4;
    border: 1px solid #cfe9d8;
    border-radius: var(--lf-radius, 8px);
}
.lf-formula-drawer-live-tag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lf-secondary, #08642B);
    white-space: nowrap;
}
.lf-formula-drawer-live-val {
    font: 600 14px var(--lf-font-mono, ui-monospace, monospace);
    color: var(--lf-text, #374151);
    word-break: break-word;
}
/* Missing-field warning — StashStock brand Warning #bf360c on #fff3e0.
   Shown when the built formula references fields the loaded record lacks. */
.lf-formula-missing {
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
    background: #fff3e0;
    border: 1px solid #eccfbf;
    border-left: 3px solid #bf360c;
    border-radius: var(--lf-radius, 8px);
    color: #5a2207;
}
.lf-formula-missing-hd {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    color: #bf360c;
    margin-bottom: 5px;
}
.lf-formula-missing-keys { margin-bottom: 4px; }
.lf-formula-missing-key {
    display: inline-flex;
    align-items: center;
    font: 600 11px var(--lf-font-mono, ui-monospace, monospace);
    background: #fff;
    border: 1px solid #eccfbf;
    color: #bf360c;
    padding: 2px 7px;
    border-radius: 6px;
    margin: 0 4px 3px 0;
}
.lf-formula-missing-tip { color: #7a4a33; font-weight: 400; }
/* ── Element formulas grid (Spec 2) ──────────────────── */
.lf-element-formulas {
    margin: 8px 0;
}
.lf-element-formulas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.lf-formula-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    background: #fff;
    border: 1px solid #d4dad6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s;
}
.lf-formula-btn:hover {
    background: #f6f9f7;
    border-color: #0DB14B;
}
.lf-formula-btn-icon { font-size: 18px; line-height: 1; }
.lf-formula-btn-label { font-size: 11px; font-weight: 600; color: #2A3942; }
.lf-formula-btn-hint { font-size: 9px; color: #5d6e64; }
.lf-element-formulas-help {
    margin-top: 6px;
    font-size: 10px;
    color: #5d6e64;
    text-align: center;
    font-style: italic;
}

/* ── Save-as-Component dialog (Spec 2) ───────────────── */
.lf-save-as-component .lf-formula-modal-body { min-width: 420px; max-width: 540px; }
.lf-sac-preview {
    background: #f6f9f7;
    border: 1px solid #e6ebe8;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 12px;
}
.lf-sac-preview-label {
    font-size: 10px;
    color: #5d6e64;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.lf-sac-preview-content {
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
    font-size: 12px;
    color: #2A3942;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 6px;
}
.lf-sac-preview-meta {
    display: flex;
    gap: 12px;
    font-size: 10px;
    color: #5d6e64;
}
.lf-sac-preview-meta strong { color: #2A3942; font-weight: 600; }
.lf-sac-desc { min-height: 60px; resize: vertical; }
/* ── Group rail panel (Spec 3) ───────────────────────── */
.lf-group-rail {
    background: #fafcfb;
    border: 1px solid #08642B;
    border-left: 4px solid #08642B;
    border-radius: 4px;
    padding: 10px 12px;
    margin: 8px 0 12px 0;
}
.lf-group-rail-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.lf-group-rail-icon {
    font-size: 18px;
    color: #08642B;
}
.lf-group-rail-titles { flex: 1; }
.lf-group-rail-title {
    font-size: 13px;
    font-weight: 600;
    color: #2A3942;
}
.lf-group-rail-meta {
    font-size: 10px;
    color: #5d6e64;
}
.lf-group-rail-lock {
    font-size: 16px;
}
.lf-group-rail-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.lf-group-rail-actions .lf-btn {
    justify-content: flex-start;
    text-align: left;
}
.lf-group-rail-help {
    font-size: 10px;
    color: #5d6e64;
    font-style: italic;
}

/* ── Rename / Delete group dialogs (Spec 3) ──────────── */
.lf-rename-group-dialog .lf-formula-modal-body { min-width: 360px; }
.lf-rename-group-hint {
    margin-top: 6px;
    font-size: 10px;
    color: #5d6e64;
    font-style: italic;
}
.lf-delete-group-dialog .lf-formula-modal-body { min-width: 360px; max-width: 440px; }
.lf-delete-group-warn {
    background: #fff3e0;
    border-left: 3px solid #bf360c;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 12px;
    color: #2A3942;
    line-height: 1.4;
}
.lf-delete-group-warn strong { color: #bf360c; }