/*@import url("https://fonts.googleapis.com/css2?family=Sen:wght@400;500;600;700;800&display=swap");
*/

@font-face {
    font-family: 'Sen';
    src: url('/fonts/sen/Sen-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 400 800; /* full supported range */
    font-style: normal;
    font-display: swap;
}

:root {
    --text-muted: #444;
    --text-ultra-muted: #bbb;
    --popup-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    /* Font families */
    --font-ui: "Sen", 'Segoe UI', sans-serif;
    --font-code: "Consolas", monospace;
    /* Font scale */
    --font-xs: 0.75rem; /* 12px  - dense trees, tiny labels */
    --font-sm: 0.8rem; /* 12.8px - tree nodes, property rows */
    --font-md: 0.875rem; /* 14px - general UI text */
    --font-lg: 0.9rem; /* 14.4px - panel headers */
    --font-xl: 1rem; /* 16px - large titles */
    --font-xxl: 1.25rem; /* 20px - extra large titles */
    /* Radius scale*/
    --radius-xs: 2px; /* inputs, small chips, tiny UI */
    --radius-sm: 3px; /* buttons, tabs, toolbar items */
    --radius-md: 4px; /* panels, popovers, dropdowns */
    --radius-lg: 6px; /* modals, large surfaces */
    /* Canvas - Default Black and White Theme */
    --cnv-bg-color: #ffffff;
    --cnv-vertex-stroke: #474747;
    --cnv-vertex-fill: #ffffff;
    --cnv-filled-vertex-fill: #474747;
    --cnv-fork-join-label-color: #ffffff;
    --cnv-vertex-stroke-width: 1.2px;
    --cnv-transition-stroke-width: 1.2px;
    --cnv-transition-selection-stroke-width: 3px;
    --cnv-transition-defer-color: #333333;
    --cnv-name-color: #333333;
    --cnv-event-color: #333333;
    --cnv-guard-color: #333333;
    --cnv-action-color: #333333;
    --cnv-terminate-stroke: red;
    --cnv-separator-stroke-width: 1px;
    --cnv-el-selection-color: darkblue;
    --cnv-el-selection-stroke-width: 2px;
    --cnv-el-outline-color: darkblue;
    --cnv-el-outline-stroke-width: 2px;
    --cnv-transition-label-connector-color: gray;
    --cnv-transition-label-connector-stroke-width: .8px;
    /* Main Layout - Default Black and White Theme */
    --main-layout-bg: #f2f4ff;
    --main-font-color: #333;
    --main-bar-bg: #eaebef;
    --main-toolbar-bg: #ffffff;
    --main-toolbar-btn-bg: transparent;
    --main-toolbar-btn-bg-hover: #dce2f5;
    --main-toolbar-btn-bg-active: #c7d4f0;
    --main-toolbar-icon-color: #4a4d57;
    --main-toolbar-icon-color-hover: #1f6feb; /* subtle blue tint */
    --main-toolbar-icon-color-active: #0f4fbf;
    --main-toolbar-icon-color-disabled: #b8bcc7;
    --main-panel-header-bg: #eaebef;
    --main-panel-content-bg: #FAFBFD;
    --main-panel-border-color: lightgrey;
    /* Buttons */
    --button-bg: #f7f9fc;
    --button-border: #cfd6e2;
    --button-fg: #1a1a1a;
    --button-accent: #007acc; /* VS Code blue */
    --button-bg-hover: #eef2f7;
    --button-border-hover: #b8c0ce;
    /* Tabs Common */
    --tab-btn-border-color: #A7E7F2;
    /* Canvas Tabs */
    --cnv-tab-btn-bg: #f3f7fc;
    --cnv-tab-btn-color: #333;
    --cnv-tab-btn-active-bg: #0078D4;
    --cnv-tab-btn-active-color: white;
    --cnv-tab-btn-not-active-hover-color: #d8e9f9;
    --cnv-tab-close-btn-color: grey;
    --cnv-tab-close-btn-hover-color: #222;
    --cnv-tab-active-close-btn-color: lightgrey;
    --cnv-tab-active-close-btn-hover-color: white;
    --sec-tab-btn-active-bg: #dce9f9; /* soft, cool, elevated */
    --sec-tab-btn-active-color: #111; /* slightly stronger text */
    --drag-indicator-color: #ff8c00; /* vivid orange for light theme */
    /* Borders and separators */
    --main-separator-color: #d5d7df; /* soft cool grey */
    --main-section-border: #cfd2dc; /* slightly stronger for structure */
    /* Scrollbar */
    --scrollbar-track-bg: #f2f4ff;
    --scrollbar-thumb-bg: #c7ccd8;
    --scrollbar-thumb-bg-hover: #aeb4c2;
    /* Explorer Tab */
    --explorer-tab-bg-hover: #e2e6f3; /* slightly stronger than toolbar hover */
    --explorer-tab-bg-active: #d4d9e8; /* persistent, visible */
    /* Panel Close Button */
    --panel-close-icon-color: #6a6d78;
    --panel-close-icon-color-hover: #1f6feb; /* same hover blue as toolbar */
    --panel-close-bg-hover: #e2e6f3; /* subtle cool tint */
    /* Tree Node */
    --tree-node-bg-hover: #eaf2f6;
    --tree-node-bg-selected: #dfeafb;
    --tree-node-icon-color: #4a4d57;
    --tree-node-icon-color-hover: #1f6feb;
    --tree-node-icon-color-selected: #0f4fbf;
    --tree-node-text-color: #2a2d34;
    --tree-line-color: #d5d7df;
    /* Edit Icon */
    --edit-icon-fg: #C75A00;
    --edit-icon-bg: #eaebef;
    /* Text Boxes */
    --lgp-textbox-bg: #fff;
    --lgp-textbox-fg: #222;
    --lgp-textbox-border: #ccc;
    --lgp-textbox-border-focus: #666;
    --lgp-error-color: #e53935;
    --lgp-clear-icon: #999;
    /* List Boxes */
    --lgp-listbox-bg: #ffffff;
    --lgp-listbox-border: #cccccc;
    --lgp-listitem-fg: #222;
    --lgp-listitem-hover-bg: #f2f2f2;
    --lgp-listitem-selected-bg: #e0e0e0;
    --lgp-edit-confirm: #28a745;
    --lgp-edit-cancel: #dc3545;
    /* Check Boxes */
    --chk-bg: #fff;
    --chk-border: #aaa;
    --chk-check: #111;
    /* Popups */
    --popup-bg: #ffffff; /* brighter than modal */
    --popup-border-color: #d0d3d9; /* cooler, crisper */
    --popup-shadow: 0 2px 6px rgba(0,0,0,0.08);
    --popup-header-bg: #f5f6f9; /* slightly brighter, more neutral */
    --popup-header-border: #d4d7dd; /* cooler than modal border */
    /* Cntext Menu */
    --ctx-menu-bg: #ffffff; /* crisp, neutral */
    --ctx-menu-border: #cfd2d8; /* sharper than modal */
    --ctx-menu-hover-bg: #e8f0fb; /* soft blue tint */
    --ctx-menu-separator: #d7d9df;
    /* Property Grid */
    --prop-label-width: 140px;
    --prop-bg: transparent;
    --prop-label-color: #444;
    --prop-input-bg: #ffffff;
    --prop-input-border: #c5c9d1;
    --prop-input-color: #222;
    --prop-readonly-bg: #f3f4f6;
    --prop-readonly-border: #d5d7dc;
    --prop-readonly-color: #666;
    --prop-row-separator: #e5e7eb;
    --prop-link-color: #0066cc;
    --prop-link-hover-color: #004999;
    /* Explorer Panel */
    --right-panel-width: 350px;
    --properties-panel-height: 300px;
    /* Bottom Tabs */
    --accent-color: #4da3ff;
    --bottom-tabs-border: rgba(0, 0, 0, 0.06);
    --find-results-panel-height: 300px;
    --validation-results-panel-height: 300px;
    --findrefs-results-panel-height: 300px;
    /* Common Icon Strokes */
    --error-stroke: #d32f2f; /* vivid red */
    --warning-stroke: #FF9800; /* vivid orange for light backgrounds */
    --question-stroke: #1976D2;
    --success-stroke: #2E7D32;
    /* Progress Bar */
    --progress-green-bg: #4caf50;
    /* Find Popup */
    --find-popup-width: 350px;
    /* Toast */
    --toast-bg: #333;
    --toast-fg: white;
    /* Generic orange fg color and hover */
    --orange-fg-color: #d35400; /* base orange, readable on light bg */
    --orange-fg-hover-color: #e67e22; /* brighter hover orange */
    /* Notes */
    --lgp-notes-bg: #fdfdfb;
    --lgp-notes-fg: #64748b;
    /* File Attachments*/
    --attach-primary: #0078d4; /* Your main action color */
    --attach-primary-hover: #005a9e;
    --attach-text-main: #323130;
    --attach-text-muted: #605e5d;
    --attach-bg-badge: #ffffff;
    --attach-border: #edebe9;
    --attach-error: #a4262c; /* Standard error red */
    --attach-error-hover: #e81123;
    --attach-bg-item: #e1e1e1; /* Solid light-gray for Light Mode */
    --attach-item-text: #323130; /* Dark text for light gray bg */
    --lgp-progress-fill: rgba(0, 120, 212, 0.25); /* Professional Azure */
    --lgp-progress-border: #0078d4; /* Solid line at the leading edge */
}

/* Dark Theme */
.lgp-dark {
    --text-muted: #ccc;
    --text-ultra-muted: #555;
    --popup-box-shadow: 0 2px 6px rgba(255,255,255,0.1);
    --cnv-bg-color: #1E1E1E;
    --cnv-vertex-stroke: #E0E0E0;
    --cnv-vertex-fill: #1E1E1E;
    --cnv-filled-vertex-fill: #E0E0E0;
    --cnv-fork-join-label-color: #1E1E1E;
    --cnv-vertex-stroke-width: 1.2px;
    --cnv-transition-stroke-width: 1.2px;
    --cnv-transition-selection-stroke-width: 3px;
    --cnv-transition-defer-color: #D4D4D4;
    --cnv-name-color: #D4D4D4;
    --cnv-event-color: #D4D4D4;
    --cnv-guard-color: #D4D4D4;
    --cnv-action-color: #D4D4D4;
    --cnv-terminate-stroke: red;
    --cnv-separator-stroke-width: 1px;
    --cnv-el-selection-color: #007ACC;
    --cnv-el-selection-stroke-width: 2px;
    --cnv-el-outline-color: #007ACC;
    --cnv-el-outline-stroke-width: 2px;
    --cnv-transition-label-connector-color: #f6f6f6;
    --cnv-transition-label-connector-stroke-width: .8px;
    /* Main Layout - Dark Theme */
    --main-layout-bg: #1e1f24; /* cool, neutral, VS‑like chrome */
    --main-font-color: #e6e6e6; /* soft white, not harsh */
    --main-bar-bg: #2a2c31; /* slightly lighter than layout bg */
    --main-toolbar-bg: #2f3136; /* distinct but cohesive */
    --main-toolbar-btn-bg: transparent;
    --main-toolbar-btn-bg-hover: #3a3d44;
    --main-toolbar-btn-bg-active: #4a4d55;
    --main-toolbar-icon-color: #c7c9d1;
    --main-toolbar-icon-color-hover: #8ab4f8; /* soft blue highlight */
    --main-toolbar-icon-color-active: #5f8ddc;
    --main-toolbar-icon-color-disabled: #5a5d66;
    --main-panel-header-bg: #2a2c31; /* matches bar for continuity */
    --main-panel-content-bg: #25262b; /* slightly lighter for depth */
    --main-panel-border-color: #3a3d44; /* soft, modern border */
    /* Buttons */
    --button-bg: #2a2d2e;
    --button-border: #3c3f41;
    --button-fg: #f0f0f0;
    --button-accent: #007acc;
    --button-bg-hover: #353738;
    --button-border-hover: #4a4d4f;
    /* Tabs Common */
    --tab-btn-border-color: #3a3f44;
    /* Canvas Tabs */
    --cnv-tab-btn-bg: #2b2d30; /* inactive tab */
    --cnv-tab-btn-color: #b5b5b5;
    --cnv-tab-btn-active-bg: #0e639c; /* active tab (VS-like blue) */
    --cnv-tab-btn-active-color: #ffffff; /* active text */
    --cnv-tab-btn-not-active-hover-color: #3a3d40; /* hover on inactive */
    --cnv-tab-close-btn-color: #9a9a9a; /* close icon default */
    --cnv-tab-close-btn-hover-color: #cccccc; /* close icon hover */
    --cnv-tab-active-close-btn-color: #e0e0e0; /* close icon on active tab */
    --cnv-tab-active-close-btn-hover-color: #ffffff;
    --sec-tab-btn-active-bg: #3a3d45; /* lighter than inactive, darker than hover */
    --sec-tab-btn-active-color: #e6e6e6; /* readable but not “primary” bright */
    --drag-indicator-color: #ffa500; /* brighter orange for dark theme */
    /* Borders and separators */
    --main-separator-color: #3a3d44; /* soft cool grey */
    --main-section-border: #4a4d55; /* slightly stronger for structure */
    /* Scrollbar */
    --scrollbar-track-bg: #1e1f24;
    --scrollbar-thumb-bg: #4a4d55;
    --scrollbar-thumb-bg-hover: #5a5e68;
    /* Explorer Tab */
    --explorer-tab-bg-hover: #34363d; /* slightly stronger than toolbar hover */
    --explorer-tab-bg-active: #3f424a; /* persistent, visible */
    /* Panel Close Button */
    --panel-close-icon-color: #c7c9d1;
    --panel-close-icon-color-hover: #8ab4f8;
    --panel-close-bg-hover: #34363d;
    /* Tree Node */
    --tree-node-bg-hover: #3a3d44;
    --tree-node-bg-selected: #3a3d44;
    --tree-node-icon-color: #c7c9d1;
    --tree-node-icon-color-hover: #8ab4f8;
    --tree-node-icon-color-selected: #5f8ddc;
    --tree-node-text-color: #e6e7eb;
    --tree-line-color: #3a3d44;
    /* Edit Icon */
    --edit-icon-fg: #FFB86C;
    --edit-icon-bg: #2a2c31;
    /* Text Boxes */
    --lgp-textbox-bg: #1e1e1e;
    --lgp-textbox-fg: #e0e0e0;
    --lgp-textbox-border: #444;
    --lgp-textbox-border-focus: #888;
    --lgp-error-color: #ff6b6b;
    --lgp-clear-icon: #bbb;
    /* List Boxes */
    --lgp-listbox-bg: #1e1e1e;
    --lgp-listbox-border: #444;
    --lgp-listitem-fg: #e0e0e0;
    --lgp-listitem-hover-bg: #2a2a2a;
    --lgp-listitem-selected-bg: #333;
    --lgp-edit-confirm: #5cd97a; /* softer green for dark mode */
    --lgp-edit-cancel: #ff6b6b; /* warm red for dark mode */
    /* Check Boxes */
    --chk-bg: #1e1e1e;
    --chk-border: #555;
    --chk-check: #f5f5f5;
    /* Popups */
    --popup-bg: #2f3136; /* slightly lighter than modal */
    --popup-border-color: #4a4d55; /* cooler, more defined */
    --popup-shadow: 0 2px 8px rgba(0,0,0,0.4);
    --popup-header-bg: #303237; /* slightly lighter than modal header */
    --popup-header-border: #4a4d55; /* crisp, cool border */
    /* Cntext Menu */
    --ctx-menu-bg: #2f3136; /* slightly lighter than modal */
    --ctx-menu-border: #4a4d55; /* crisp, cool */
    --ctx-menu-hover-bg: #3a3d45; /* subtle lift */
    --ctx-menu-separator: #4a4d55;
    /* Property Grid */
    --prop-bg: transparent;
    --prop-label-color: #b5b5b5;
    --prop-input-bg: #1f2023;
    --prop-input-border: #4a4d55;
    --prop-input-color: #e6e6e6;
    --prop-readonly-bg: #2f3136;
    --prop-readonly-border: #4a4d55;
    --prop-readonly-color: #9a9a9a;
    --prop-row-separator: #3a3d44;
    --prop-link-color: #4ea3ff;
    --prop-link-hover-color: #82c4ff;
    /* Bottom Tabs */
    --accent-color: #4da3ff;
    --bottom-tabs-border: rgba(255, 255, 255, 0.06);
    /* Common Icon Strokes */
    --error-stroke: #ff6b6b; /* lighter/brighter red for contrast */
    --warning-stroke: #FFC107; /* brighter amber for dark backgrounds */
    --question-stroke: #64B5F6;
    --success-stroke: #81C784;
    /* Progress Bar */
    --progress-green-bg: #2e7d32;
    /* Toast */
    --toast-bg: #eee;
    --toast-fg: #111;
    /* Generic orange fg color and hover */
    --orange-fg-color: #ffa726; /* base orange, readable on light bg */
    --orange-fg-hover-color: #ffb74d; /* brighter hover orange */
    /* Notes */
    --lgp-notes-bg: #252526;
    --lgp-notes-fg: #94a3b8;
    /* File Attachments*/
    --attach-primary: #2b88d8; /* Slightly brighter for contrast */
    --attach-primary-hover: #479ef5;
    --attach-text-main: #ffffff;
    --attach-text-muted: #a19f9d;
    --attach-bg-badge: #252423;
    --attach-border: #484644;
    --attach-error: #f1707b; /* Soft red for dark mode */
    --attach-error-hover: #ff8c9a;
    --attach-bg-item: #3c3c3c; /* Solid medium-gray for Dark Mode */
    --attach-item-text: #ffffff; /* White text for dark gray bg */
    --lgp-progress-fill: rgba(0, 174, 255, 0.35); /* Brighter Cyan for contrast */
    --lgp-progress-border: #00aeff;
}

/* Colored Canvas Text - Light Theme */
.lgp-cnv-colored-text-light {
    --cnv-name-color: #1b3553; /* Headers (Deep Navy) - Perfect, keeps structure heavy */
    --cnv-event-color: #A31515; /* Events (Roslyn Red/String) - Great IDE standard */
    --cnv-guard-color: #098658; /* Guards (Chroma Green) - Replaces muddy 'green' */
    --cnv-action-color: #001080; /* Actions (Studio Variable Blue) - Replaces harsh pure blue */
    --cnv-transition-defer-color: #AF00DB; /* Async/Defer (VS Magenta) - Standard keyword purple */
}

/* Colored Canvas Text - Dark Theme */
.lgp-cnv-colored-text-dark {
    --cnv-name-color: #9CDCFE; /* headers, cyan — bright & crisp on dark */
    --cnv-event-color: #CE9178; /* events, orange-brown like strings */
    --cnv-guard-color: #4EC9B0; /* guards, teal-green like functions */
    --cnv-action-color: #569CD6; /* actions, keyword blue */
    --cnv-transition-defer-color: #C586C0; /* async/await, soft violet */
}

/* Teal Color Palette - Light Theme */
.lgp-cnv-teal-palette-light {
    --cnv-vertex-stroke: #38c2cc;
    --cnv-vertex-fill: #ebf8f9;
    --cnv-filled-vertex-fill: #38c2cc;
    --cnv-fork-join-label-color: #ebf8f9;
}

/* Teal Color Palette - Dark Theme */
.lgp-cnv-teal-palette-dark {
    --cnv-vertex-stroke: #38c2cc; /* bright teal stroke, same as light theme */
    --cnv-vertex-fill: #0d2b2d; /* deep teal-gray fill, subtle but visible on dark bg */
    --cnv-filled-vertex-fill: #38c2cc;
    --cnv-fork-join-label-color: #0d2b2d;
}

/* Blue Color Palette - Light Theme */
.lgp-cnv-blue-palette-light {
    --cnv-vertex-stroke: #007ACC; /* VS Code accent blue */
    --cnv-vertex-fill: #E6F2FB; /* very light blue fill */
    --cnv-filled-vertex-fill: #007ACC;
    --cnv-fork-join-label-color: #E6F2FB;
}

/* Blue Color Palette - Dark Theme */
.lgp-cnv-blue-palette-dark {
    --cnv-vertex-stroke: #007ACC; /* same accent blue */
    --cnv-vertex-fill: #0D1B2A; /* deep navy fill for contrast */
    --cnv-filled-vertex-fill: #007ACC;
    --cnv-fork-join-label-color: #0D1B2A;
}

/* Orange Color Palette - Light Theme */
.lgp-cnv-orange-palette-light {
    --cnv-vertex-stroke: #e0490b; /* your orange */
    --cnv-vertex-fill: #fde9e2; /* soft warm tint */
    --cnv-filled-vertex-fill: #e0490b;
    --cnv-fork-join-label-color: #fde9e2;
}

/* Orange Color Palette - Dark Theme */
.lgp-cnv-orange-palette-dark {
    --cnv-vertex-stroke: #e0490b; /* same orange */
    --cnv-vertex-fill: #3a1505; /* deep orange shadow */
    --cnv-filled-vertex-fill: #e0490b;
    --cnv-fork-join-label-color: #3a1505;
}

/* Indigo Color Palette - Light Theme */
.lgp-cnv-indigo-palette-light {
    --cnv-vertex-stroke: #4B0082; /* indigo stroke */
    --cnv-vertex-fill: #F3E6FA; /* soft lavender fill */
    --cnv-filled-vertex-fill: #4B0082;
    --cnv-fork-join-label-color: #F3E6FA;
}

/* Indigo Color Palette - Dark Theme */
.lgp-cnv-indigo-palette-dark {
    --cnv-vertex-stroke: #8A4FFF; /* vivid indigo-violet, high contrast */
    --cnv-vertex-fill: #1A0F33; /* deep indigo base, not washed out */
    --cnv-filled-vertex-fill: #8A4FFF;
    --cnv-fork-join-label-color: #1A0F33;
}

/* Slate Color Palette - Light Theme */
.lgp-cnv-gray-palette-light {
    --cnv-vertex-stroke: #2d2d2d; /* Slate 600 - solid and professional */
    --cnv-vertex-fill: #eaeaea; /* Slate 50 - clean, almost-white background */
    --cnv-filled-vertex-fill: #2d2d2d;
    --cnv-fork-join-label-color: #eaeaea;
}

/* Slate Color Palette - Dark Theme */
.lgp-cnv-gray-palette-dark {
    --cnv-vertex-stroke: #94A3B8; /* Slate 400 - high visibility against dark */
    --cnv-vertex-fill: #2d2d2d; /* Slate 900 - deep "Midnight" canvas */
    --cnv-filled-vertex-fill: #94A3B8; /* Slate 800 - for nested/composite states */
    --cnv-fork-join-label-color: #2d2d2d;
}

/* Wireframes for the color palettes */
/* ==========================================
   0. DEFAULT BLACK & WHITE - WIREFRAME MODIFIERS
   ========================================== */

/* LIGHT WIREFRAME (.wf-light) */
.wf-light {
    /* Retain your sharp #474747 stroke, but make the filled node body white */
    --cnv-filled-vertex-fill: #ffffff;
    --cnv-fork-join-label-color: #474747; /* Text flips to match stroke */
}

/* DARK WIREFRAME (.wf-dark) */
.wf-dark {
    /* Retain your crisp #E0E0E0 stroke, but drop the filled node body to canvas dark */
    --cnv-filled-vertex-fill: #1E1E1E;
    --cnv-fork-join-label-color: #E0E0E0; /* Text flips to match stroke */
}

/* ==========================================
   1. TEAL PALETTE - WIREFRAME MODIFIERS
   ========================================== */
.lgp-cnv-teal-palette-light.wf,
.lgp-cnv-teal-palette-light .wf {
    /* Subtle shift: Makes filled nodes transparent/stroke-matched with dark text */
    --cnv-filled-vertex-fill: #ebf8f9;
    --cnv-fork-join-label-color: #38c2cc;
}

.lgp-cnv-teal-palette-dark.wf,
.lgp-cnv-teal-palette-dark .wf {
    /* Wireframe effect: Gives filled nodes a deep background with the bright teal accent */
    --cnv-filled-vertex-fill: #0d2b2d;
    --cnv-fork-join-label-color: #38c2cc;
}


/* ==========================================
   2. BLUE PALETTE - WIREFRAME MODIFIERS
   ========================================== */
.lgp-cnv-blue-palette-light.wf,
.lgp-cnv-blue-palette-light .wf {
    --cnv-filled-vertex-fill: #E6F2FB;
    --cnv-fork-join-label-color: #007ACC;
}

.lgp-cnv-blue-palette-dark.wf,
.lgp-cnv-blue-palette-dark .wf {
    --cnv-filled-vertex-fill: #0D1B2A;
    --cnv-fork-join-label-color: #007ACC;
}


/* ==========================================
   3. ORANGE PALETTE - WIREFRAME MODIFIERS
   ========================================== */
.lgp-cnv-orange-palette-light.wf,
.lgp-cnv-orange-palette-light .wf {
    --cnv-filled-vertex-fill: #fde9e2;
    --cnv-fork-join-label-color: #e0490b;
}

.lgp-cnv-orange-palette-dark.wf,
.lgp-cnv-orange-palette-dark .wf {
    --cnv-filled-vertex-fill: #3a1505;
    --cnv-fork-join-label-color: #e0490b;
}


/* ==========================================
   4. INDIGO PALETTE - WIREFRAME MODIFIERS
   ========================================== */
.lgp-cnv-indigo-palette-light.wf,
.lgp-cnv-indigo-palette-light .wf {
    --cnv-filled-vertex-fill: #F3E6FA;
    --cnv-fork-join-label-color: #4B0082;
}

.lgp-cnv-indigo-palette-dark.wf,
.lgp-cnv-indigo-palette-dark .wf {
    --cnv-filled-vertex-fill: #1A0F33;
    --cnv-fork-join-label-color: #8A4FFF;
}


/* ==========================================
   5. SLATE PALETTE - WIREFRAME MODIFIERS (True Grey)
   ========================================== */
.lgp-cnv-gray-palette-light.wf,
.lgp-cnv-gray-palette-light .wf {
    /* Uses a clean, medium layout contrast gray */
    --cnv-filled-vertex-fill: #eaeaea;
    --cnv-fork-join-label-color: #2d2d2d;
}

.lgp-cnv-gray-palette-dark.wf,
.lgp-cnv-gray-palette-dark .wf {
    /* Pulls directly from your balanced mockup depth */
    --cnv-filled-vertex-fill: #2d2d2d;
    --cnv-fork-join-label-color: #94A3B8;
}
/***********************/

/* Button */
.lgp-button {
    font-family: var(--font-ui);
    font-size: var(--font-sm);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    color: var(--button-fg);
    cursor: pointer;
    user-select: none;
}

    .lgp-button.small {
        padding: 3px 8px;
    }

    .lgp-button.large {
        padding: 8px 24px;
        font-size: var(--font-xl);
    }

    .lgp-button:hover {
        background: var(--button-bg-hover);
        border-color: var(--button-border-hover);
    }

    .lgp-button:active:not(:disabled) {
        transform: scale(0.96); /* shrink slightly */
        box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* tighter shadow */
    }

    .lgp-button:disabled {
        cursor: default; /* No pointer cursor */
        pointer-events: none; /* Disable all mouse interaction */
        opacity: 0.6; /* Visual indication of disabled state */
        transform: none; /* Prevent active scale effect */
    }

    .lgp-button.primary {
        font-size: var(--font-md);
        background: var(--button-accent);
        color: white;
        border-color: var(--button-accent);
    }

        .lgp-button.primary:hover {
            filter: brightness(1.1);
        }

    .lgp-button i {
        margin-right: 0.4rem;
    }

    .lgp-button svg {
        margin-right: 0.4rem;
        fill: currentColor;
        stroke: none;
        width: 20px;
        height: 20px;
    }

.brand-name {
    font-size: 1.2rem;
    font-weight: 600;
    padding-left: 0.3rem; /* ~5px */
    padding-top: 2px;
}

html, body {
    font-family: var(--font-ui);
    color: var(--main-font-color);
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

/*.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }*/

code {
    color: #c02d76;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.lgp-cnv {
    flex-grow: 1;
    display: flex;
    width: 100%;
    height: 100%;
    font-family: var(--font-code);
}

.lgp-cnv-vertex-group,
.lgp-cnv-region-group,
.lgp-cnv-note-group,
.lgp-cnv-transition-group,
.lgp-cnv-transition-label-group,
.lgp-cnv-internal-transition-group,
.lgp-cnv-ctrl-outline-group {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.lgp-cnv-ctrl-outline-div {
    border: var(--cnv-el-outline-stroke-width) dashed var(--cnv-el-outline-color);
    transition: none; /* Crucial: ensures no lag during dragging */
    will-change: transform; /* Tells the browser to use the GPU */

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.lgp-cnv-state {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-vertex-stroke-width);
    fill: var(--cnv-vertex-fill);
}

.lgp-cnv-state-header {
    fill: var(--cnv-name-color);
    font-size: var(--font-sm);
}

.lgp-cnv-cpoint-header {
    fill: var(--cnv-name-color);
    font-size: var(--font-sm);
}

.lgp-cnv-state-header-centered {
    text-anchor: middle;
    dominant-baseline: middle;
}

.lgp-cnv-region-header {
    fill: var(--cnv-name-color);
    font-size: var(--font-xs);
}

.lgp-cnv-state-header-separator {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-separator-stroke-width);
}

.lgp-cnv-state-action-label {
    fill: var(--cnv-event-color);
    font-size: var(--font-sm);
}

.lgp-cnv-state-action {
    fill: var(--cnv-action-color);
    font-size: var(--font-sm);
}

.lgp-cnv-transition-event {
    fill: var(--cnv-event-color);
    font-size: var(--font-sm);
}

.lgp-cnv-transition-guard {
    fill: var(--cnv-guard-color);
    font-size: var(--font-sm);
}

.lgp-cnv-transition-action {
    fill: var(--cnv-action-color);
    font-size: var(--font-sm);
}

.lgp-cnv-transition-defer {
    fill: var(--cnv-transition-defer-color);
    font-size: var(--font-sm);
}

.lgp-cnv-fork {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-vertex-stroke-width);
    fill: var(--cnv-filled-vertex-fill);
}

.lgp-cnv-fork-join-label {
    text-anchor: middle;
    dominant-baseline: middle;
    font-size: var(--font-md);
    fill: var(--cnv-fork-join-label-color);
}

.lgp-cnv-join {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-vertex-stroke-width);
    fill: var(--cnv-filled-vertex-fill);
}

.lgp-cnv-el-container-rect {
    stroke: transparent;
    fill: transparent;
}

.lgp-cnv-el-container-rect-highlighted {
    fill: transparent;
    stroke: var(--cnv-el-selection-color);
    stroke-width: var(--cnv-el-selection-stroke-width); /* Thickness of the stroke */
    stroke-dasharray: 4,2; /* Creates a dashed line (4px dash, 2px gap) */
}

.lgp-cnv-el-highlighter-rect {
    stroke: var(--cnv-el-selection-color);
    fill: none;
    stroke-width: var(--cnv-el-selection-stroke-width); /* Thickness of the stroke */
    stroke-dasharray: 4,2; /* Creates a dashed line (4px dash, 2px gap) */
}

.lgp-cnv-ctrl-outline-rect {
    stroke: var(--cnv-el-outline-color);
    fill: none;
    stroke-width: var(--cnv-el-outline-stroke-width);
    stroke-dasharray: 4,2; /* Creates a dashed line (4px dash, 2px gap) */
}

.lgp-cnv-initial {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-vertex-stroke-width);
    fill: var(--cnv-filled-vertex-fill);
}

.lgp-cnv-junction {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-vertex-stroke-width);
    fill: var(--cnv-filled-vertex-fill);
}

.lgp-cnv-final-state-outer {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-vertex-stroke-width);
    fill: var(--cnv-vertex-fill);
}

.lgp-cnv-final-state-inner {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-vertex-stroke-width);
    fill: var(--cnv-filled-vertex-fill);
}

.lgp-cnv-history {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-vertex-stroke-width);
    fill: var(--cnv-vertex-fill);
}

.lgp-cnv-history-text {
    text-anchor: middle;
    font-size: var(--font-md);
    fill: var(--cnv-vertex-stroke);
}

.lgp-cnv-entrypoint {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-vertex-stroke-width);
    fill: var(--cnv-vertex-fill);
}

.lgp-cnv-exitpoint {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-vertex-stroke-width);
    fill: var(--cnv-vertex-fill);
}

.lgp-cnv-choice {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-vertex-stroke-width);
    fill: var(--cnv-vertex-fill);
}

.lgp-cnv-terminate {
    stroke: var(--cnv-terminate-stroke);
    stroke-width: 2;
}

.lgp-cnv-transition {
    stroke: var(--cnv-vertex-stroke);
    stroke-width: var(--cnv-transition-stroke-width);
    fill: none;
    pointer-events: none;
}

.lgp-cnv-transition-highlight {
    stroke: var(--cnv-el-selection-color);
    stroke-width: var(--cnv-transition-selection-stroke-width);
    stroke-dasharray: 2,2; /* Creates a dashed line (2px dash, 2px gap) */
    fill: none;
    pointer-events: none;
}

.lgp-cnv-transition-overlay {
    stroke: transparent;
    stroke-width: 10;
    fill: none;
    pointer-events: stroke;
}

.lgp-cnv-transition-preview {
    stroke: var(--cnv-vertex-stroke);
    fill: none;
    stroke-width: var(--cnv-transition-stroke-width);
    stroke-dasharray: 2,2; /* Creates a dashed line (2px dash, 2px gap) */
}

.fsm-transition-label-connector {
    stroke: var(--cnv-transition-label-connector-color);
    fill: none;
    stroke-width: var(--cnv-transition-label-connector-stroke-width);
    stroke-dasharray: 2,4; /* Creates a dashed line (2px dash, 2px gap) */
}

/*#endregion */


.fsm-layout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 500;
}

.fsm-editor-context {
    width: 100%;
    height: 86%;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}

.fsm-editor-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0px 8px 8px 8px;
    padding: 4px;
    border: 1px solid var(--main-panel-border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    position: relative;
}

.fsm-tab-layout {
    display: none;
}

    .fsm-tab-layout.active {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        overflow: hidden;
    }

.fsm-filter-add {
    display: flex;
    gap: 0.5rem;
}

.fsm-textbox-wrapper {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
}

    .fsm-textbox-wrapper.editing {
        z-index: 2500;
    }

.fsm-textbox {
    flex: 1;
    box-sizing: border-box;
    background: var(--lgp-textbox-bg);
    color: var(--lgp-textbox-fg);
    border: 1px solid var(--lgp-textbox-border);
    border-radius: 4px;
    padding: 0.4rem 4.5rem 0.4rem 0.4rem;
    transition: border-color 0.2s ease;
    font-family: var(--font-code);
    font-size: var(--font-sm);
    height: 1.5rem;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .fsm-textbox.error {
        border-color: var(--lgp-error-color);
    }

    .fsm-textbox:focus {
        outline: none;
        border-color: var(--lgp-textbox-border-focus);
    }

    .fsm-textbox.error:focus {
        border-color: var(--lgp-error-color); /* keep error border on focus */
    }

    .fsm-textbox.element-name {
        padding: 4px 6px;
        transition: border-color 0.1s ease;
        height: auto;
    }

.fsm-error-icon {
    position: absolute;
    right: 1.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lgp-error-color);
    font-size: 1rem;
    pointer-events: auto;
    cursor: help;
}

.fsm-clear-icon {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--lgp-clear-icon);
    font-size: .7rem;
    user-select: none;
}

.fsm-textarea {
    outline: none;
    box-sizing: border-box;
    background: var(--lgp-textbox-bg);
    color: var(--lgp-textbox-fg);
    border: 1px solid var(--lgp-textbox-border);
    border-radius: 4px;
    padding: 0.4rem;
    transition: border-color 0.2s ease;
    font-family: var(--font-code);
    font-size: var(--font-sm);
    width: 100%;
}

    .fsm-textarea.element-notes {
        color: var(--lgp-notes-fg);
        background: var(--lgp-notes-bg);
        field-sizing: content; /* Changed from normal */
        resize: none;
        overflow: hidden;
        min-height: 3rem;
        width: 100%;
        max-width: 100%;
        display: block;
        overflow-wrap: break-word;
        white-space: pre-wrap; /* Ensure newlines are honored */
    }

    .fsm-textarea.behavior-notes {
        color: var(--lgp-notes-fg);
        background: var(--lgp-notes-bg);
        field-sizing: normal;
        resize: none;
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 4rem;
        max-height: 4rem;
        width: 100%;
        max-width: 100%;
        display: block;
        overflow-wrap: break-word;
        white-space: pre-wrap; /* Ensure newlines are honored */
    }

.fsm-toolbar-left-buttons {
    display: flex;
    gap: 0.1rem;
}

.fsm-toolbar-right-buttons {
    display: flex;
}

.fsm-toggle-button {
    background-color: var(--main-toolbar-btn-bg);
    border: none;
    width: 33px; /* Ensure consistent button size */
    height: 33px;
    border-radius: 4px; /* Slightly rounded corners for a polished look */
    cursor: pointer;
    display: flex; /* Use Flexbox for centering */
    align-items: center; /* Vertically center the SVG */
    justify-content: center; /* Horizontally center the SVG */
    transition: background-color 0.2s ease;
}

    .fsm-toggle-button.active {
        background-color: var(--main-toolbar-btn-bg-active);
    }

    .fsm-toggle-button:hover {
        background-color: var(--main-toolbar-btn-bg-hover);
    }

    /* Default icon */
    .fsm-toggle-button .icon {
        stroke-width: 1.5px;
        stroke: var(--main-toolbar-icon-color);
        fill: none;
    }

        /* Hover icon */
        .fsm-toggle-button .icon:hover {
            stroke: var(--main-toolbar-icon-color-hover);
        }

    /* Active icon */
    .fsm-toggle-button.active .icon {
        stroke: var(--main-toolbar-icon-color-active);
    }

.fsm-listbox {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--lgp-listbox-border);
    background: var(--lgp-listbox-bg);
}

.fsm-list-item {
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    font-family: var(--font-code);
    font-size: var(--font-sm);
    color: var(--lgp-listitem-fg);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .fsm-list-item:hover {
        background-color: var(--lgp-listitem-hover-bg);
    }

    .fsm-list-item.selected {
        background-color: var(--lgp-listitem-selected-bg);
    }

.fsm-headered-listbox-3cols {
    display: grid;
    grid-template-columns: minmax(180px, max-content) minmax(180px, max-content) 1fr;
    grid-auto-rows: min-content;
    background: var(--lgp-listbox-bg);
    overflow-y: auto; /* scroll only the body */
    height: 100%; /* or whatever fits your layout */
    user-select: none;
}

.fsm-headered-listbox-4cols {
    display: grid;
    grid-template-columns: minmax(180px, max-content) minmax(180px, max-content) minmax(180px, max-content) 1fr;
    grid-auto-rows: min-content;
    background: var(--lgp-listbox-bg);
    overflow-y: auto; /* scroll only the body */
    height: 100%; /* or whatever fits your layout */
    user-select: none;
}

/* Header cells */
.fsm-headered-list-header-label {
    position: sticky;
    top: 0; /* stick to top of scroll container */
    background-color: var(--lgp-listbox-bg);
    font-size: var(--font-md);
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid var(--lgp-listbox-border);
    border-right: 1px solid var(--lgp-listbox-border);
    z-index: 2; /* keep above rows */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    user-select: none;
    cursor: pointer;
}

/* Row cells */
.fsm-headered-list-item {
    display: contents; /* children flow into parent grid tracks */
    font-size: var(--font-sm);
    color: var(--lgp-listitem-fg);
    cursor: pointer;
    user-select: none;
}

    .fsm-headered-list-item span {
        padding: 0.2rem 0.5rem;
        border-right: 1px solid var(--lgp-listbox-border);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .fsm-headered-list-item span:last-child {
            border-right: none;
        }

    .fsm-headered-list-item:hover span {
        background-color: var(--lgp-listitem-hover-bg);
    }

    .fsm-headered-list-item.selected span {
        background-color: var(--lgp-listitem-selected-bg);
    }

.sort-icon {
    color: var(--accent-color);
    font-size: var(--font-sm);
    margin-left: 0.25rem;
}



.fsm-edit-confirm {
    position: absolute;
    right: 2.1rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
    color: var(--lgp-edit-confirm);
}

.fsm-edit-cancel {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
    color: var(--lgp-edit-cancel);
}


.name-edit-confirm {
    position: absolute;
    right: 2.1rem;
    cursor: pointer;
    font-size: 1.2rem;
    user-select: none;
    color: #28a745;
}

.name-edit-cancel {
    position: absolute;
    right: 0.5rem;
    cursor: pointer;
    font-size: 1.2rem;
    user-select: none;
    color: #dc3545;
}

.name-error-icon {
    position: absolute;
    right: 3.5rem;
    color: #e53935;
    font-size: 1.2rem;
    pointer-events: auto;
    cursor: help;
}

.name-editing {
    z-index: 2500;
}

.lgp-cnv-section {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: scroll;
    transform: translateZ(0);
    will-change: scroll-position;
    background-color: var(--cnv-bg-color); /* Base color */
    display: none;
    pointer-events: none;
    outline: none;
}

    .lgp-cnv-section.active {
        display: block;
        pointer-events: all;
    }

    .lgp-cnv-section.show-grid {
        background-image: linear-gradient(to right, rgba(150, 150, 150, 0.2) 1px, transparent 1px), linear-gradient(to bottom, rgba(150, 150, 150, 0.2) 1px, transparent 1px);
        background-size: 30px 30px; /* Adjust size of squares */
    }

.lgp-cnv-section-placeholder {
    flex: 1; /* fills available space */
    display: flex; /* centers content */
    align-items: center;
    justify-content: center;
    background-color: var(--main-layout-bg);
    background-image: none;
    pointer-events: none;
}

    .lgp-cnv-section-placeholder h3 {
        color: var(--text-muted);
        font-weight: 500;
        letter-spacing: 0.5px;
    }


.fsm-explorer-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: var(--main-panel-content-bg);
    border: 1px solid var(--main-panel-border-color);
    border-radius: var(--radius-md);
    margin: 5px 5px 0 0;
}

.fsm-properties-panel {
    display: flex;
    flex-direction: column;
    height: var(--properties-panel-height);
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: var(--main-panel-content-bg);
    border: 1px solid var(--main-panel-border-color);
    border-radius: var(--radius-md);
    margin: 0px 5px 5px 0;
}

.fsm-projectselector-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px 12px;
    align-items: center;
    padding: 20px;
}

.fsm-button {
    background-color: #dcdcdc;
    border: 1px solid gray;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    font-size: 0.9rem;
    padding: 5px 10px;
}

    .fsm-button:hover {
        background-color: var(--main-toolbar-btn-bg-hover);
    }

    .fsm-button:active {
        transform: scale(0.98); /* Slight shrink effect */
    }

    .fsm-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none; /* ensures no click or hover */
    }

.fsm-link {
    color: #666;
    text-decoration: underline;
    font-size: 0.9rem;
    cursor: pointer;
}

    .fsm-link:hover {
        color: #333;
        text-decoration: none;
    }


.fsm-layout-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* Hide browser scrollbar */
    background: var(--main-layout-bg);
}

.fsm-top-section {
    background-color: var(--main-bar-bg);
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fsm-middle-section {
    display: flex;
    flex-direction: row;
    border-top: 1px solid var(--main-section-border);
    height: calc(100vh - 35px - 25px); /*Viewport height - top-section height - status-bar height*/
}

.fsm-left-panel {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally align toolbar items */
    justify-content: start; /* Vertically center toolbar items */
    padding-top: 50px;
    width: 35px;
    background-color: var(--main-bar-bg);
}

.fsm-diagram-toolbar {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
}

.fsm-center-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.fsm-right-panel {
    display: flex;
    flex-direction: column;
    width: var(--right-panel-width);
    position: relative;
    height: 100%;
}

    .fsm-right-panel.closed {
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        width: 0;
    }

    .fsm-right-panel.open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        width: var(--right-panel-width);
    }

.fsm-right-tab-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35px;
    border-left: 1px solid var(--main-section-border);
    background: var(--main-bar-bg);
}

.fsm-vertical-tab {
    writing-mode: vertical-rl;
    display: flex;
    flex-direction: row;
    align-items: center; /* centers icon + text */
    justify-content: center;
    gap: 6px; /* spacing between icon + text */
    padding: 10px 1px 15px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    border: 1px solid var(--button-border);
    border-radius: 4px;
    font-size: 0.9rem;
}

    .fsm-vertical-tab .tab-icon {
        width: 18px;
        height: 18px;
        /*margin-bottom: 8px;*/ /* spacing between icon + text */
        writing-mode: horizontal-tb; /* ensure icon stays normal */
        fill: var(--main-toolbar-icon-color);
        stroke: var(--main-toolbar-icon-color);
    }

        .fsm-vertical-tab .tab-icon.rotate {
            transform: rotate(180deg);
            transform-origin: center;
        }

    .fsm-vertical-tab:hover {
        background-color: var(--explorer-tab-bg-hover);
    }

    .fsm-vertical-tab.active {
        background-color: var(--explorer-tab-bg-active);
    }


.fsm-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--main-bar-bg);
    padding: 0px 10px;
    border-top: 1px solid var(--main-section-border);
    font-size: var(--font-xs);
}

.fsm-status-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fsm-status-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 150px; /* optional: ensures space for status */
}

.lgp-storage-status-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fsm-toast {
    display: flex;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--toast-bg);
    color: var(--toast-fg);
    padding: 10px 15px;
    border-radius: 6px;
    opacity: 0.9;
    z-index: 9999;
    font-size: var(--font-md);
    max-height: 300px;
    max-width: 800px;
    overflow: hidden;
}

    .fsm-toast.fsm-toast-red {
        background: #B22222;
        color: white;
    }

        .fsm-toast.fsm-toast-red .fsm-toast-close-btn {
            color: white;
        }

.fsm-toast-close-btn {
    background: transparent;
    border: none;
    margin-left: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-xl);
    line-height: 1;
    color: var(--toast-fg);
    transition: background 0.15s ease, color 0.15s ease;
    opacity: 0.6;
}

    .fsm-toast-close-btn:hover {
        opacity: 0.9;
    }

.logiop-progress-wrapper {
    display: grid;
    grid-template-columns: 1fr 150px; /* Use 1fr to let the label breathe */
    align-items: center;
    column-gap: 12px;
    padding: 4px 0;
}

.logiop-progress-label {
    font-family: 'Consolas', monospace; /* Consistent with your IDE vibe */
    font-size: 12px;
    color: var(--main-font-color);
    opacity: 0.8;
}

.logiop-progress-bar-container {
    position: relative;
    background-color: rgba(0, 0, 0, 0.05); /* Subtle "track" look */
    border-radius: 100px; /* Fully rounded pill looks more modern */
    height: 8px; /* Thinner is sleeker for IDEs */
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.logiop-progress-bar {
    height: 100%;
    border-radius: 100px;
    /* Use your Indigo Pulse gradient here */
    background: linear-gradient(90deg, #6366F1 0%, #4338CA 100%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4); /* Subtle glow */
}

    /* Indeterminate (Loading) State */
    .logiop-progress-bar.indeterminate {
        position: absolute;
        width: 40%;
        background: linear-gradient(90deg, transparent, #6366F1, transparent);
        animation: indeterminate-slide 1.5s infinite ease-in-out;
    }

@keyframes indeterminate-slide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(250%);
    }
}

.logiop-settings-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 0.9rem;
    position: relative;
}

.logiop-settings-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.logiop-label {
    white-space: nowrap;
    font-weight: 500;
    color: #333;
}

.logiop-pathbox {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f0f0;
    font-size: 0.9rem;
    color: #444;
}

/* TREE VIEW */
.tree-view-container {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
}

/* -------------------------------------------------------
   TREE NODE BASE
------------------------------------------------------- */
.tree-node {
    display: block;
    width: 100%;
    padding: 3px 12px;
    padding-left: calc(12px + var(--depth, 0) * 20px);
    box-sizing: border-box;
    user-select: none;
    position: relative;
    border-radius: 4px;
    font-size: var(--font-sm);
    color: var(--tree-node-text-color);
    transition: background-color 0.15s ease, color 0.15s ease;
}

    /* Extra padding variant */
    .tree-node.extra-padding {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Hover */
    .tree-node.hover-enabled {
        cursor: pointer;
    }

        .tree-node.hover-enabled:hover {
            background-color: var(--tree-node-bg-hover);
        }

    /* Selected */
    .tree-node.selected {
        background-color: var(--tree-node-bg-selected);
    }

    /* -------------------------------------------------------
   CONNECTOR LINES
------------------------------------------------------- */

    /* Vertical line */
    .tree-node::after {
        content: "";
        position: absolute;
        left: calc(var(--depth) * 20px);
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: var(--tree-line-color);
        opacity: 0.85;
        pointer-events: none;
    }

    /* Horizontal connector (only for nodes with children) */
    .tree-node::before {
        content: "";
        position: absolute;
        left: calc(var(--depth) * 20px);
        top: 50%;
        width: 12px;
        height: 1px;
        background-color: var(--tree-line-color);
        opacity: 0.85;
        pointer-events: none;
    }

    /* Hide connectors for root nodes */
    .tree-node[style*="--depth:0"]::before,
    .tree-node[style*="--depth:0"]::after {
        display: none;
    }

    /* Trim vertical line for last child */
    .tree-node.last-child::after {
        height: 50%;
    }

/* -------------------------------------------------------
   CONTENT LAYOUT
------------------------------------------------------- */
.tree-node-content {
    display: flex;
    align-items: center;
    overflow: hidden; /* Keep this */
    width: 100%; /* Ensure it knows how wide it can be */
}

/* Arrow */
.tree-node-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 20px;
    margin-right: 6px;
}

.arrow-icon {
    display: block;
    stroke: var(--tree-node-icon-color);
    stroke-width: 1.5px;
    transform-origin: 50% 50%;
    transition: stroke 0.15s ease, transform 0.15s ease;
}

    .arrow-icon.rotated {
        transform: rotate(90deg);
    }

/* Hover + selected arrow color */
.tree-node.hover-enabled:hover .arrow-icon {
    stroke: var(--tree-node-icon-color-hover);
}

.tree-node.selected .arrow-icon {
    stroke: var(--tree-node-icon-color-selected);
}

/* Toggle Plus/Minus */
.tree-node-toggle {
    width: 16px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    position: relative;
    cursor: pointer;
}

.toggle-icon {
    position: relative;
    width: 8px;
    height: 8px;
}

    /* Horizontal line (always visible) */
    .toggle-icon::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 0.2px;
        background-color: var(--tree-node-icon-color);
        transform: translateY(-50%);
        transition: background-color 0.15s ease;
    }

    /* Vertical line (only when collapsed) */
    .toggle-icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 0.2px;
        background-color: var(--tree-node-icon-color);
        transform: translateX(-50%);
        transition: opacity 0.15s ease, background-color 0.15s ease;
    }

    /* Expanded = minus only */
    .toggle-icon.expanded::after {
        opacity: 0;
    }


/* Label */
.tree-node-label {
    line-height: 1;
    white-space: nowrap; /* Required for ellipsis */
    overflow: hidden; /* Required for ellipsis */
    text-overflow: ellipsis; /* The magic dots */
    min-width: 0; /* The Flexbox "Secret Sauce" */
    flex: 1; /* Tell it to take up remaining space */
}

/* -------------------------------------------------------
   CHECKBOX
------------------------------------------------------- */
.tree-node-checkbox {
    margin-right: 6px;
    vertical-align: middle;
    accent-color: var(--tree-node-icon-color-selected);
    cursor: pointer;
    transform: scale(1.1);
}

/* -------------------------------------------------------
   FILE/FOLDER ICON
------------------------------------------------------- */
.tree-node-icon {
    margin-right: 6px;
    width: 14px;
    height: 14px;
    transition: stroke 0.15s ease;
}

    .tree-node-icon.stroked {
        stroke-width: 1.5px;
        stroke: var(--tree-node-icon-color);
        fill: none;
    }

    .tree-node-icon.filled {
        stroke: none;
        fill: var(--tree-node-icon-color);
    }

    .tree-node-icon.lg {
        width: 18px;
        height: 18px;
        stroke-width: 1px;
    }

.tree-node.hover-enabled:hover .tree-node-icon.stroked {
    stroke: var(--tree-node-icon-color-hover);
}

.tree-node.selected .tree-node-icon.stroked {
    stroke: var(--tree-node-icon-color-selected);
}

.tree-node.hover-enabled:hover .tree-node-icon.filled {
    fill: var(--tree-node-icon-color-hover);
}

.tree-node.selected .tree-node-icon.filled {
    fill: var(--tree-node-icon-color-selected);
}

/* -------------------------------------------------------
   CHILDREN WRAPPER
------------------------------------------------------- */
.tree-children {
    /* indentation handled by ::before and padding-left */
}


/* CANVAS TABS */
.canvas-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 2px 0px;
}

    .canvas-tabs.lgp-border-bottom {
        border-bottom: 0.05px solid var(--main-section-border);
    }

    .canvas-tabs.disabled {
        pointer-events: none;
    }

.canvas-tab-btn {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--tab-btn-border-color);
    border-radius: var(--radius-md);
    background: var(--cnv-tab-btn-bg);
    color: var(--cnv-tab-btn-color);
    cursor: pointer;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 2px 4px;
    font-size: var(--font-sm);
}

    .canvas-tab-btn.secondary {
        padding: 0.25rem 0.7rem;
    }

        .canvas-tab-btn.secondary.active {
            background-color: var(--sec-tab-btn-active-bg);
            color: var(--sec-tab-btn-active-color);
        }

    .canvas-tab-btn .tab-label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .canvas-tab-btn .tab-close {
        margin-left: 8px;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        cursor: pointer;
        visibility: hidden;
        transition: color 0.2s ease;
        color: var(--cnv-tab-close-btn-color);
    }

    .canvas-tab-btn:hover .tab-close {
        visibility: visible;
    }

    .canvas-tab-btn.active .tab-close {
        visibility: visible;
        color: var(--cnv-tab-active-close-btn-color);
    }

        .canvas-tab-btn.active .tab-close:hover {
            color: var(--cnv-tab-active-close-btn-hover-color);
        }

    .canvas-tab-btn .tab-close:hover {
        color: var(--cnv-tab-close-btn-hover-color);
    }

    .canvas-tab-btn.active {
        background: var(--cnv-tab-btn-active-bg);
        color: var(--cnv-tab-btn-active-color);
    }

    .canvas-tab-btn:hover:not(.active) {
        background-color: var(--cnv-tab-btn-not-active-hover-color);
    }

.canvas-tab-drop-indicator {
    position: relative;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-color);
    margin-left: 1px;
}

    .canvas-tab-drop-indicator.left {
        margin-left: 1px;
    }

    .canvas-tab-drop-indicator.right {
        /*right: 0;
        left: auto;*/
    }

/* Top Bar */
.fsm-top-bar {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    position: relative; /* Needed for the dropdown positioning */
    width: 100%;
}

/* Main Menu */
.fsm-main-menu {
    cursor: pointer;
    display: flex;
    align-items: center;
    outline: none;
}

/* Dropdown Container */
.fsm-dropdown {
    display: none !important;
    font-size: 0.9rem;
    position: absolute;
    top: 50px; /* Aligns the dropdown below the top bar */
    left: 10px; /* Adjust according to the burger menu's position */
    width: 150px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1000;
    opacity: 1; /* Initial state for animation */
    transition: opacity 0.2s ease; /* Smooth animation */
}

    .fsm-dropdown.show {
        display: block !important;
    }

/* Dropdown Menu */
.fsm-dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Dropdown Menu Items */
.fsm-dropdown-item {
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    outline: none;
}

    .fsm-dropdown-item:hover, .fsm-dropdown-item:focus {
        background-color: rgba(0, 0, 0, 0.05); /* Hover and focus feedback */
    }

        .fsm-dropdown-item:hover .fsm-submenu {
            display: block !important;
        }

/* Submenu */
.fsm-submenu {
    display: none !important;
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: -2px;
    list-style: none;
    padding: 0px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1001;
    opacity: 1; /* Initial state for animation */
    transition: opacity 0.2s ease; /* Smooth animation */
}

/* Submenu Items */
.fsm-submenu-item {
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    outline: none;
}

    .fsm-submenu-item:hover, .submenu-item:focus {
        background-color: rgba(0, 0, 0, 0.1); /* Hover and focus feedback */
    }


/* Toolbar */
.fsm-toolbar {
    display: flex;
    padding-left: 20px;
    width: 100%;
}

    /* Buttons */
    .fsm-toolbar button {
        background-color: transparent;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        border-radius: 4px; /* Slightly rounded corners */
        cursor: pointer;
        transition: background-color 0.2s, transform 0.2s;
        font-size: 0.9rem;
        color: var(--main-toolbar-icon-color);
    }

        .fsm-toolbar button:hover {
            background-color: var(--main-toolbar-btn-bg-hover);
            color: var(--main-toolbar-icon-color-hover);
        }

        .fsm-toolbar button:active {
            transform: scale(0.95); /* Slight shrink effect */
            color: var(--main-toolbar-icon-color-active);
        }

        .fsm-toolbar button:disabled {
            cursor: default; /* No pointer cursor */
            pointer-events: none; /* Disable all mouse interaction */
            color: var(--main-toolbar-icon-color-disabled);
            transform: none; /* Prevent active scale effect */
        }

    /* SVG Icons */
    .fsm-toolbar .icon {
        width: 18px;
        height: 18px;
        stroke-width: 1.5px;
        stroke: currentColor;
        fill: none;
        transition: stroke 0.2s ease;
        display: inline-block;
        vertical-align: middle;
    }

    .fsm-toolbar .left-group {
        display: flex;
    }

    .fsm-toolbar .right-group {
        display: flex;
        margin-left: auto; /* ✅ Pushes this group to the right */
        /* The Secret Sauce: This adds exactly enough space to clear the system buttons. */
        padding-right: env(titlebar-area-width, 0px);
    }

@media (max-width: 768px) {
    .fsm-toolbar {
        gap: 5px;
    }

        .fsm-toolbar button {
            font-size: 0.8rem; /* Further reduce size for smaller devices */
            padding: 4px;
        }

    .fsm-top-bar {
        height: 45px; /* Slimmer bar for smaller screens */
    }
}

/* MACHINE BEHAVIORS SELECTION POPUP */
.fsm-popup-wrapper {
    position: absolute;
    top: 40px;
    left: 12px;
    width: calc(100% - 60px);
    background-color: var(--popup-bg);
    border: 1px solid var(--popup-border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--popup-shadow);
    z-index: 2000; /* above modal */
    background-clip: padding-box;
}


.fsm-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.4rem;
    background-color: var(--popup-header-bg);
    border-bottom: 1px solid var(--popup-header-border);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

    .fsm-popup-header h5 {
        font-size: var(--font-lg);
        margin: 5px;
    }

.fsm-behaviors-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 200px;
    overflow-y: auto;
    font-family: var(--font-code);
}

    .fsm-behaviors-list li {
        padding: 0.2rem 0.5rem;
        cursor: pointer;
        font-family: var(--font-code);
        font-size: var(--font-sm);
        color: var(--lgp-listitem-fg);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

        .fsm-behaviors-list li:hover {
            background-color: var(--lgp-listitem-hover-bg);
        }

        .fsm-behaviors-list li.selected {
            background-color: var(--lgp-listitem-selected-bg);
        }

/* VERTICAL SEPARATOR */
.vertical-separator {
    width: 1px;
    height: 24px;
    background-color: var(--main-separator-color);
    margin: auto 4px; /* Automatically center vertically */
    position: relative; /* Allows for further custom positioning if needed */
}

/* HORIZONTAL SEPARATOR */
.horizontal-separator {
    width: 80%; /* Adjust the width as needed */
    height: 1px; /* Thickness of the separator */
    background-color: var(--main-separator-color);
    margin: 4px auto; /* Automatically center horizontally */
    position: relative; /* Allows for further custom positioning if needed */
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-bg);
    border-radius: 4px;
    background-clip: padding-box;
    transition: background-color 0.2s ease;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-thumb-bg-hover);
    }

::-webkit-scrollbar-corner {
    background: var(--scrollbar-track-bg);
}

/* PANEL CLOSE BUTTON */
.panel-close-btn {
    background: transparent;
    border: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-lg);
    line-height: 1;
    color: var(--panel-close-icon-color);
    transition: background 0.15s ease, color 0.15s ease;
}

    .panel-close-btn:hover {
        background: var(--panel-close-bg-hover);
        color: var(--panel-close-icon-color-hover);
    }

/* BEHAVIOR TOOLBAR */
.lgp-behavior-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0rem;
}

    .lgp-behavior-toolbar.lgp-border-bottom {
        border-bottom: 0.05px solid var(--popup-border-color);
    }

/* Buttons */
.lgp-behavior-toolbar-button {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: var(--radius-md); /* Slightly rounded corners */
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    color: var(--main-toolbar-icon-color);
}

    .lgp-behavior-toolbar-button:hover {
        background-color: var(--main-toolbar-btn-bg-hover);
        color: var(--main-toolbar-icon-color-hover);
    }

    .lgp-behavior-toolbar-button.active {
        transform: scale(0.95); /* Slight shrink effect */
        background-color: var(--main-toolbar-btn-bg-hover);
        color: var(--main-toolbar-icon-color-active);
    }

    .lgp-behavior-toolbar-button:disabled {
        cursor: default; /* No pointer cursor */
        pointer-events: none; /* Disable all mouse interaction */
        color: var(--main-toolbar-icon-color-disabled);
        transform: none; /* Prevent active scale effect */
    }

    /* SVG Icons */
    .lgp-behavior-toolbar-button .icon {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: currentColor;
        transition: stroke 0.2s ease;
        display: inline-block;
        vertical-align: middle;
    }

/* Right Panel/Modal Header */
.lgp-right-panel-header,
.lgp-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--main-panel-border-color);
    background: var(--main-panel-header-bg);
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 40px;
    padding: 0.8rem;
}

    .lgp-right-panel-header h5,
    .lgp-modal-header h5 {
        font-size: var(--font-lg);
        margin: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Check Box */
.fsm-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

    .fsm-checkbox input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid var(--chk-border);
        border-radius: 3px;
        background: var(--chk-bg);
        display: inline-block;
        position: relative;
        cursor: pointer;
    }

        .fsm-checkbox input[type="checkbox"]::after {
            content: "";
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(0.6);
            transition: opacity 0.15s ease, transform 0.15s ease;
            background: var(--chk-check);
            mask: url('/icons/check.svg') center/12px no-repeat;
        }

        .fsm-checkbox input[type="checkbox"]:checked::after {
            opacity: 1;
            transform: scale(1);
        }

        .fsm-checkbox input[type="checkbox"]:hover {
            border-color: var(--chk-check);
        }

        .fsm-checkbox input[type="checkbox"]:focus-visible {
            outline: 2px solid var(--chk-check);
            outline-offset: 2px;
        }

/* Context Menu */
.fsm-context-menu-separator {
    height: 1px;
    background: var(--ctx-menu-separator);
    margin: 4px 1px;
}

.fsm-context-menu {
    background-color: var(--ctx-menu-bg);
    border: 1px solid var(--ctx-menu-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    min-width: 150px;
    z-index: 1000;
    width: auto;
    white-space: nowrap; /* prevent label wrapping */
    user-select: none;
}

.fsm-context-menu-item {
    position: relative;
    display: flex;
    align-items: center; /* vertical centering */
    padding: 4px 8px;
    cursor: pointer;
    font-size: var(--font-sm);
}

    .fsm-context-menu-item:hover {
        background-color: var(--ctx-menu-hover-bg);
    }

    .fsm-context-menu-item svg {
        fill: currentColor;
        margin-left: 5px;
        width: 16px;
        height: 16px;
    }

    .fsm-context-menu-item.disabled {
        opacity: 0.5;
        pointer-events: none;
    }

.fsm-context-submenu {
    position: absolute;
    top: 0;
    left: 100%; /* flyout to the right */
    display: none;
    background-color: var(--ctx-menu-bg);
    border: 1px solid var(--ctx-menu-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    min-width: 150px;
    z-index: 2000;
    width: auto;
    white-space: nowrap; /* prevent label wrapping */
}

    .fsm-context-submenu.flip-left {
        left: auto;
        right: 100%;
    }

.fsm-context-submenu-item {
    position: relative;
    display: flex;
    align-items: center; /* vertical centering */
    padding: 4px 8px;
    cursor: pointer;
    font-size: var(--font-sm);
}

    .fsm-context-submenu-item:hover {
        background-color: var(--ctx-menu-hover-bg);
    }

    .fsm-context-submenu-item.disabled {
        opacity: 0.5;
        pointer-events: none;
    }

/* Property Grid */

/* Container ensures mouse events work even outside the grid */
.prop-grid-container {
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

    .prop-grid-container.bordered {
        border: 1px solid var(--main-panel-border-color);
        border-radius: var(--radius-md);
    }

/* 3-column layout: label | resizer | editor */
.prop-grid {
    display: grid;
    /* The '0' in minmax ensures the column can shrink and won't push outward */
    grid-template-columns: var(--prop-label-width) 6px minmax(80px, 1fr);
    row-gap: 6px;
    column-gap: 0;
    padding: 10px;
    background: var(--prop-bg);
    width: 100%; /* Ensure the grid itself stays locked */
    box-sizing: border-box;
}

/* Label cell */
.prop-label {
    text-align: left;
    font-size: var(--font-sm);
    color: var(--prop-label-color);
    padding: 4px 6px;
    user-select: none;
}

/* Resizer strip */
.prop-resizer {
    cursor: col-resize;
    width: 6px;
    background: transparent;
}

/*    .prop-resizer:hover {
        background: var(--prop-row-separator);
    }*/

/* Editor cell */
.prop-editor {
    white-space: nowrap;
}

    .prop-editor input,
    .prop-editor select,
    .prop-editor textarea {
        width: 100%;
        font-family: var(--font-code);
        font-size: var(--font-sm);
        padding: 4px 6px;
        border: 1px solid var(--prop-input-border);
        background: var(--prop-input-bg);
        color: var(--prop-input-color);
        border-radius: var(--radius-sm);
    }

    /* Readonly editor */
    .prop-editor.readonly {
        /*background: var(--prop-readonly-bg);*/
        border: 1px solid var(--prop-readonly-border);
        color: var(--prop-readonly-color);
        padding: 4px 6px;
        border-radius: var(--radius-sm);
        font-family: var(--font-code);
        font-size: var(--font-sm);
    }

/* Property Link */
.prop-link {
    color: var(--prop-link-color);
    cursor: pointer;
    text-decoration: none;
}

    .prop-link:hover {
        text-decoration: underline;
        color: var(--prop-link-hover-color);
    }

.prop-link-stack {
    display: flex;
    flex-direction: column;
    gap: 2px; /* subtle, tool-grade spacing */
}

.prop-link-row {
    display: flex;
    flex-direction: row;
    gap: 1rem; /* subtle, tool-grade spacing */
    font-size: var(--font-md);
}

/* Main Layout Vertical Resizer */
.fsm-right-panel-resizer {
    width: 8px;
    cursor: col-resize;
    background: transparent;
    height: 100%;
    position: relative;
    z-index: 10;
}

/* Main Layout Horizontal Resizer */
.fsm-panel-horizontal-resizer {
    min-height: 8px;
    cursor: row-resize;
    background: transparent;
    width: 100%;
    position: relative;
    z-index: 10;
}

/* Bottom Tabs */
.fsm-bottom-tabs {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    height: 25px;
    min-height: 25px;
    padding: 0 8px;
    background: var(--main-layout-bg);
    border-top: 1px solid var(--bottom-tabs-border);
    user-select: none;
}

.fsm-bottom-tabs-left,
.fsm-bottom-tabs-right {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.fsm-bottom-tab {
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: var(--font-sm);
    cursor: pointer;
    position: relative;
    color: var(--text-muted);
}

    .fsm-bottom-tab::after {
        content: "";
        position: absolute;
        bottom: -3px;
        left: 6px;
        right: 6px;
        height: 5px;
        background: var(--main-bar-bg);
    }

    /* Hover and Active underline */
    .fsm-bottom-tab:hover::after,
    .fsm-bottom-tab.active::after {
        content: "";
        position: absolute;
        bottom: -3px;
        left: 6px;
        right: 6px;
        height: 5px;
        background: var(--accent-color);
    }

.fsm-bottom-tab-panzoom-group {
    display: flex;
    align-items: center;
    gap: 3px; /* or whatever matches your spacing tokens */
}

.fsm-bottom-tab-zoom {
    font-size: var(--font-xs);
    opacity: 0.9;
    width: 2rem;
    text-align: right;
    pointer-events: none;
}

/* Pan and Zoom */
.panzoom-popup {
    position: absolute;
    bottom: 35px;
    right: 15px;
    width: 278px;
    height: 250px;
    background: var(--main-panel-content-bg);
    border: 1px solid var(--main-section-border);
    border-radius: var(--radius-md);
    box-shadow: var(--popup-box-shadow);
    padding: 8px;
    z-index: 1999;
    display: flex;
    flex-direction: column;
    user-select: none;
}

.panzoom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}

    .panzoom-header > button {
        margin-left: auto;
    }

/* Layout for minus | input | plus */
.zoom-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Zoom buttons */
.zoom-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
}

/* Zoom input */
.zoom-input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.zoom-input {
    width: 48px;
    height: 24px;
    padding: 0 14px 0 4px; /* space for % */
    text-align: center;
    font-family: var(--font-ui);
    font-size: var(--font-sm);
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    color: var(--button-fg);
    border-radius: var(--radius-sm);
}

    .zoom-input:focus {
        border-color: var(--button-border-hover);
        background: var(--button-bg-hover);
    }

.zoom-suffix {
    position: absolute;
    right: 4px;
    pointer-events: none;
    color: var(--button-fg);
    font-size: var(--font-sm);
}

.panzoom-minimap {
    position: relative;
    width: 260px;
    height: 200px;
    border: 1px solid var(--main-panel-border-color);
    background: var(--main-panel-content-bg);
    border-radius: var(--radius-sm);
    overflow: hidden;
    pointer-events: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.minimap-svg {
    width: 255px;
    height: 195px;
    display: block;
    pointer-events: none;
    background-color: var(--cnv-bg-color);
}

.minimap-viewport {
    position: absolute;
    border: 1px solid var(--accent-color);
    background-color: transparent;
    pointer-events: auto;
}

/* Main Layout Overlay */
.main-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-layout-bg);
}

/* Dashboard */
.fsm-dashboard {
    width: 800px;
    height: 650px;
    max-width: 800px;
    max-height: 650px;
    overflow: hidden;
    background-color: var(--main-panel-content-bg);
    border: 1px solid var(--main-panel-border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.fsm-dashboard-body {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 5px;
    flex: 1; /* Grow to fill the 650px */
    min-height: 0; /* CRITICAL: Allows this child to be smaller than its content */
    overflow-y: hidden;
}

.fsm-workspace-body {
    display: flex;
    width: 100%;
    height: 100%;
    border: 1px solid var(--main-panel-border-color);
    border-radius: var(--radius-md);
}

.fsm-workspace-body-left {
    flex: 6;
    /*padding: 20px 0px 40px 30px;*/
    overflow-y: auto;
    padding: 1rem;
}

    .fsm-workspace-body-left div {
        margin-bottom: 20px;
    }

.fsm-recent-project-item {
    margin-bottom: 5px;
    cursor: pointer;
    padding: 10px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
    font-size: var(--font-md);
    display: flex;
    flex-direction: column; /* Stack name row over date */
    padding: 10px;
    padding: 8px 10px; /* Slightly reduced vertical padding */
    gap: 1px; /* This is the "Magic Lever" for the space between rows */
}

    .fsm-recent-project-item:hover {
        background-color: var(--lgp-listitem-hover-bg);
    }

    .fsm-recent-project-item .path {
        font-size: var(--font-sm);
        color: var(--text-muted);
        line-height: 1; /* Minimize the date line height */
    }

    .fsm-recent-project-item .name-row {
        display: flex;
        align-items: center;
        width: 100%;
        line-height: 1; /* Tighten the name line */
    }

    .fsm-recent-project-item .solution-name {
        color: var(--text-muted); /* Make it subtle */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* Control the squeeze */
        flex-shrink: 1;
        max-width: 40%; /* Adjust this: it will never take more than 40% of the row */
    }

    .fsm-recent-project-item .separator {
        padding: 0 4px;
        flex-shrink: 0; /* Never hide the slash */
    }

    .fsm-recent-project-item .project-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 2; /* It can also shrink if the solution is already at its max */
        min-width: 0;
    }


.fsm-workspace-body-right {
    flex: 4;
    /*padding: 30px 30px 40px 40px;*/
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 1rem;
}

.fsm-workspace-action {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--main-panel-border-color);
    border-radius: var(--radius-md);
    background-color: var(--main-panel-content-bg);
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

    .fsm-workspace-action:hover {
        background-color: var(--main-toolbar-btn-bg-hover);
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .fsm-workspace-action.default-cursor {
        cursor: default;
    }

.fsm-workspace-action-icon {
    flex-shrink: 0;
    color: var(--accent-color);
}

    .fsm-workspace-action-icon svg {
        width: 32px;
        height: 32px;
        fill: currentColor;
    }

.fsm-workspace-action-content {
    display: flex;
    flex-direction: column;
}

.fsm-workspace-action-title {
    font-size: var(--font-xl);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.fsm-workspace-action-subtext {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.fsm-groupbox {
    position: relative;
    border: 1px solid var(--popup-border-color);
    border-radius: var(--radius-sm);
    padding: 1rem 1rem 0.5rem 1rem;
    margin: 1rem 0;
    font-size: var(--font-sm);
}

.fsm-groupbox-row {
    margin-bottom: 0.75rem;
}

.fsm-full-width {
    width: 100%;
}

.fsm-spaced-buttons {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.fsm-groupbox-header {
    position: absolute;
    top: -0.75rem;
    left: 1rem;
    padding: 0 0.5rem;
}

.fsm-groupbox-content {
    margin-top: 0.5rem;
}


.fsm-centered-div {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 500px;
    height: 400px;
    background-color: var(--popup-bg);
    border: 1px solid var(--popup-border-color);
    border-radius: var(--radius-md);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fsm-autovisible-scroll {
    overflow-y: hidden;
    transition: overflow 0.2s ease;
}

    .fsm-autovisible-scroll:hover {
        overflow-y: auto;
    }

/* Dashboard - Settings */
.lgp-settings-container {
    display: flex;
    flex: 1;
    border: 1px solid var(--main-panel-border-color);
    border-radius: var(--radius-md);
    background-color: var(--main-panel-content-bg);
}

.lgp-settings-nav {
    width: 200px;
    border-right: 1px solid var(--main-panel-border-color);
    display: flex;
    flex-direction: column;
    background-color: var(--main-layout-bg);
}

.lgp-settings-nav-item {
    padding: 12px 16px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: var(--font-md);
    color: var(--main-font-color);
}

    .lgp-settings-nav-item:hover {
        background-color: var(--cnv-tab-btn-not-active-hover-color);
    }

    .lgp-settings-nav-item.active {
        background-color: var(--cnv-tab-btn-active-bg);
        color: var(--cnv-tab-btn-active-color);
    }

.lgp-settings-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.lgp-presentation-settings,
.lgp-storage-settings {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lgp-radio-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

    .lgp-radio-option input[type="radio"] {
        appearance: none;
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid var(--main-panel-border-color);
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        background-color: var(--main-panel-content-bg);
    }

        .lgp-radio-option input[type="radio"]:checked {
            border-color: var(--accent-color);
        }

            .lgp-radio-option input[type="radio"]:checked::after {
                content: "";
                position: absolute;
                top: 3px;
                left: 3px;
                width: 10px;
                height: 10px;
                background: var(--accent-color);
                border-radius: 50%;
            }

        .lgp-radio-option input[type="radio"]:hover {
            border-color: var(--accent-color);
        }

    .lgp-radio-option label {
        cursor: pointer;
        flex: 1;
        transform: translateY(-4px);
    }

.lgp-radio-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.lgp-radio-title {
    font-weight: 500;
    font-size: var(--font-md);
}

.lgp-radio-subtext {
    margin: 4px 0 0;
    font-size: var(--font-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

    .lgp-radio-subtext.warning {
        color: var(--orange-fg-color);
    }

.lgp-storage-settings-input-row,
.lgp-new-solution-input-row,
.lgp-new-solution-select-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 30px;
    width: 100%;
}

    .lgp-storage-settings-input-row .fsm-textbox,
    .lgp-new-solution-input-row .fsm-textbox,
    .lgp-new-solution-select-row select {
        flex: 1;
    }

    .lgp-storage-settings-input-row .lgp-button {
        flex-shrink: 0;
    }

/* Solution selector for new project */
.lgp-workspace-new-project-container,
.lgp-submachine-selector-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 1rem 1rem;
}

.lgp-new-project-input-row {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding-left: 30px;
    padding-top: 1rem;
}

    .lgp-new-project-input-row .fsm-textbox {
        flex: 0 0 auto; /* don’t grow/shrink vertically */
        height: 1.5rem; /* respect your set height */
        width: 100%;
    }

    .lgp-new-project-input-row label {
        flex-shrink: 0;
        font-size: var(--font-md);
    }

.lgp-presentation-settings-row {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

    .lgp-presentation-settings-row label {
        flex: 0 0 160px; /* fixed width */
        font-size: var(--font-md);
    }

/* Common Icons */
.error-icon {
    stroke: var(--error-stroke);
    fill: var(--error-stroke);
}

.warning-icon {
    stroke: var(--warning-stroke);
    fill: var(--warning-stroke);
}

.question-icon {
    stroke: var(--question-stroke);
    fill: var(--question-stroke);
}

.success-icon {
    stroke: var(--success-stroke);
    fill: var(--success-stroke);
}

/* Message Box */
.fsm-message-box {
    flex: 1; /* let it grow to fill modal */
    min-height: 0; /* allow flex child to shrink */
    overflow: hidden; /* scroll if content exceeds */
    display: flex;
    flex-direction: column;
}

.fsm-message-box-message {
    display: -webkit-box;
    -webkit-line-clamp: 5; /* number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.fsm-message-box svg {
    width: 48px;
    height: 48px;
}

/* Select boxes */
select {
    width: 100%;
    font-family: var(--font-code);
    font-size: var(--font-sm);
    padding: 4px 6px;
    border: 1px solid var(--prop-input-border);
    background: var(--prop-input-bg);
    color: var(--prop-input-color);
    border-radius: var(--radius-sm);
}

    select.error {
        border-color: var(--lgp-error-color);
    }

/* Labels */
label {
    font-size: var(--font-md);
}

/* Modals */
.fsm-modal-editor {
    border-radius: var(--radius-lg);
    background-color: var(--main-panel-content-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.05);
    overflow-x: hidden;
    text-overflow: ellipsis;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    position: absolute;
    visibility: collapse;
    pointer-events: auto;
    z-index: 2000;
}

    .fsm-modal-editor.ready {
        visibility: visible;
    }

.fsm-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* Submachine Selector */
.lgp-submachine-selector-select-row,
.lgp-submachine-selector-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 30px;
    width: 100%;
}

    .lgp-submachine-selector-select-row select {
        flex: 1;
    }

    .lgp-submachine-selector-input-row input {
        flex: 1;
    }

/* Bottom Panels */
.lgp-bottom-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--main-panel-border-color);
    padding: 0.1rem 0.4rem; /* tighter vertical spacing */
    background: var(--main-panel-header-bg);
    user-select: none;
    white-space: nowrap;
}

    .lgp-bottom-panel-header h5 {
        font-size: var(--font-md);
        margin: 5px;
    }

    .lgp-bottom-panel-header .tab-icon {
        width: 18px;
        height: 18px;
        background: transparent;
        border-radius: 4px;
        transform: rotate(-90deg);
        stroke-width: 1.5px;
        fill: var(--panel-close-icon-color);
        stroke: var(--panel-close-icon-color);
        transition: background 0.15s ease, color 0.15s ease;
        cursor: pointer;
    }

        .lgp-bottom-panel-header .tab-icon:hover {
            background: var(--panel-close-bg-hover);
            fill: var(--panel-close-icon-color-hover);
            stroke: var(--panel-close-icon-color-hover);
        }

.lgp-find-results-panel {
    display: flex;
    flex-direction: column;
    height: var(--find-results-panel-height);
    min-height: var(--find-results-panel-height);
    max-height: var(--find-results-panel-height);
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: var(--main-panel-content-bg);
    border: 1px solid var(--main-panel-border-color);
}

    .lgp-find-results-panel:focus {
        outline: none;
    }


.lgp-find-references-panel {
    display: flex;
    flex-direction: column;
    height: var(--findrefs-results-panel-height);
    min-height: var(--findrefs-results-panel-height);
    max-height: var(--findrefs-results-panel-height);
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--main-panel-content-bg);
    border: 1px solid var(--main-panel-border-color);
}

    .lgp-find-references-panel:focus {
        outline: none;
    }


.lgp-validation-results-panel {
    display: flex;
    flex-direction: column;
    height: var(--validation-results-panel-height);
    min-height: var(--validation-results-panel-height);
    max-height: var(--validation-results-panel-height);
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--main-panel-content-bg);
    border: 1px solid var(--main-panel-border-color);
}

    .lgp-validation-results-panel:focus {
        outline: none;
    }


/* Muted text */
.lgp-text-muted {
    color: var(--text-muted);
}

/* Disabled toolbars */
.lgp-toolbar-disabled {
    pointer-events: none;
    opacity: 0.4;
}

/* Search Box */
.vs-find-popup {
    position: absolute;
    top: 38px;
    right: 12px;
    background: var(--lgp-listbox-bg);
    border: 0 1px 1px 1px solid var(--lgp-listbox-border);
    border-radius: 4px;
    padding: 0.25rem;
    box-shadow: var(--popup-box-shadow);
    width: var(--find-popup-width);
    font-size: var(--font-sm);
    user-select: none;
}

.vs-find-row {
    display: grid;
    grid-template-columns: 30px 1fr 80px 30px;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

    .vs-find-row .dropdown {
        width: 20px;
        padding: 0;
    }

    .vs-find-row .lgp-resize-grip {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 12px;
        height: 12px;
        fill: var(--text-ultra-muted);
        cursor: ew-resize;
    }

.vs-find-input {
    display: flex;
    align-items: center;
}

    .vs-find-input input {
        flex: 1;
        padding: 0.25rem;
    }



.vs-find-actions,
.vs-replace-actions,
.vs-find-options {
    display: flex;
    align-items: center;
}

.lgp-search-box-button {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: var(--radius-md); /* Slightly rounded corners */
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    color: var(--main-toolbar-icon-color);
}

    .lgp-search-box-button:hover {
        background-color: var(--main-toolbar-btn-bg-hover);
        color: var(--main-toolbar-icon-color-hover);
    }

    .lgp-search-box-button.active {
        transform: scale(0.95); /* Slight shrink effect */
        background-color: var(--main-toolbar-btn-bg-hover);
        color: var(--main-toolbar-icon-color-active);
    }

    .lgp-search-box-button:disabled {
        cursor: default; /* No pointer cursor */
        pointer-events: none; /* Disable all mouse interaction */
        color: var(--main-toolbar-icon-color-disabled);
        transform: none; /* Prevent active scale effect */
    }

    .lgp-search-box-button svg {
        fill: currentColor;
        width: 16px;
        height: 16px;
    }

    .lgp-search-box-button.search-option svg,
    .lgp-search-box-button.replace-action svg {
        fill: currentColor;
        transform: scale(1.3);
    }

/* Behavior Editor Warning Link */
.behavior-editor-warn-link {
    color: var(--orange-fg-color);
    cursor: pointer;
    text-decoration: none;
    font-size: var(--font-sm);
}

    .behavior-editor-warn-link:hover {
        text-decoration: underline;
        color: var(--orange-fg-hover-color);
    }

/* Export menu */
.export-container {
    position: relative;
    display: inline-block;
}

.export-menu {
    position: absolute;
    top: 100%; /* Directly below the button */
    left: 0;
    z-index: 1000;
    min-width: 120px;
    background-color: var(--main-bar-bg);
    border: 1px solid var(--lgp-listbox-border);
    box-shadow: var(--popup-box-shadow);
    border-radius: var(--radius-sm);
    margin-top: 1px;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    cursor: pointer;
    font-size: var(--font-sm);
    outline: none;
}

    .export-menu div {
        padding: 2px 10px;
    }

        .export-menu div:hover {
            background-color: var(--main-toolbar-btn-bg-hover);
            color: var(--main-toolbar-icon-color-hover);
        }

/* Google SignIn Button */
.fsm-toolbar .google-btn {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: box-shadow 0.2s;
    width: 100px;
}

    .fsm-toolbar .google-btn:hover {
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .fsm-toolbar .google-btn img {
        width: 18px;
        margin-right: 8px;
    }


/* Dashboard */
.lgp-authentication-modal {
    height: 200px;
    overflow: hidden;
    background-color: var(--main-panel-content-bg);
    border: 1px solid var(--main-panel-border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    z-index: 1000;
}

.lgp-authentication-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 15px;
    height: 100%;
    align-items: center;
}

    .lgp-authentication-panel .sign-in-row {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: 20px;
    }

        .lgp-authentication-panel .sign-in-row.disabled {
            pointer-events: none;
            opacity: 0.5;
        }

.lgp-signin-btn {
    padding: 0;
    border: 1px solid transparent;
    background: none;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

    /* HOVER EFFECT */
    .lgp-signin-btn:hover {
        /* Subtle lift and glow */
        border: 1px solid #4285f4;
    }


    /* CLICK (ACTIVE) EFFECT */
    .lgp-signin-btn:active {
        /* "Pressing" the button down */
        transform: scale(0.98);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        transition: transform 0.05s;
    }

/* Setup/Onboarding */
.lgp-setup-container {
    width: 800px;
    height: 620px;
    overflow: hidden;
    background-color: var(--main-panel-content-bg);
    border: 1px solid var(--main-panel-border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
}

.lgp-setup-body {
    display: flex;
    flex-direction: column;
    margin: 24px;
    overflow: hidden;
    height: 100%;
}

.lgp-setup-step-header {
    font-size: 1rem;
    margin-bottom: 20px;
}

.lgp-setup-terms-content {
    overflow-y: scroll;
    padding: 15px;
    border: 1px solid var(--main-panel-border-color);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 30px 0 50px;
}

.lgp-setup-terms-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px;
}

.lgp-setup-signin-info {
    background-color: rgba(66, 153, 225, 0.05);
    border: 1px solid rgba(66, 153, 225, 0.2);
    border-left: 4px solid #4299e1;
    padding: 20px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

    .lgp-setup-signin-info p {
        margin-bottom: 12px;
    }

.lgp-setup-alert-box {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 10px;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--text-muted); /* Dimmer text for the note */
}

/* STRIPE SUBSCRIBE */
.stripe-subscribe-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.stripe-subscribe-container {
    width: 100%;
    height: 100%;
}

.btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--main-font-color); /* Spinner "hand" color */
    animation: btn-spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

.fsm-toolbar .lgp-app-update-btn {
    align-self: center;
    width: 150px;
    height: 25px;
    border-radius: 8px;
    background-color: #28a745;
    color: white;
    margin-right: 20px;
    font-size: var(--font-sm);
    border: none; /* Ensure no default button border */
    cursor: pointer;
    /* The Magic: Run once, 0.5s duration, smooth easing */
    animation: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

    .fsm-toolbar .lgp-app-update-btn:hover {
        background-color: #218838;
        color: white;
        transform: scale(1.05);
    }

/* Keyframes for the one-time entry pop */
@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.lgp-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.lgp-readonly-badge {
    background-color: orangered;
    color: white;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 500;
    display: inline-block;
    align-self: center;
    text-align: center;
    height: 24px;
    width: 80px;
    margin-right: 20px;
}

.lgp-error-container {
    background-color: var(--main-panel-content-bg);
    border: 1px solid var(--main-panel-border-color);
    border-left: 4px solid #ff4444;
    padding: 24px;
    border-radius: 8px;
    margin: 20px auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    /* 1. Lock the width so expansion doesn't change it */
    width: 800px;
    max-width: 800px;
    min-width: 300px; /* Prevents it from getting too skinny on mobile */
    /* 2. Ensure the container doesn't grow horizontally */
    box-sizing: border-box;
    /* Prevent the UI text from being part of a "Select All" sweep */
    user-select: none;
    -webkit-user-select: none;
    margin-left: 1rem; /* Give it a little breathing room from the edge */
    margin-right: auto;
}

.lgp-error-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: #ff4444;
}

.lgp-diagnostic-bundle {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lgp-log-attachment {
    background: var(--popup-bg);
    border-radius: 4px;
    overflow: hidden;
}

    .lgp-log-attachment summary {
        padding: 10px 14px;
        cursor: pointer;
        font-weight: 500;
        user-select: none;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .lgp-log-attachment summary:hover {
            background: var(--cnv-tab-btn-not-active-hover-color);
        }

.lgp-log-view {
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
    font-family: 'Consolas', 'Cascadia Code', monospace;
    font-size: 12px;
    border-top: 1px solid var(--main-panel-border-color);
    /* 3. This is the magic part: Force horizontal scrolling for long lines */
    overflow-x: auto;
    white-space: pre; /* Keeps the log formatting intact */
    word-wrap: normal; /* Prevents wrapping which can look messy in logs */
    /* 4. Ensure it respects the parent's width */
    max-width: 100%;
}

    .lgp-log-view pre {
        user-select: all !important;
        -webkit-user-select: all !important;
    }

.lgp-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    margin-left: auto;
}

.lgp-error-container-actions {
    margin-top: 24px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lgp-submit-ticket-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    padding: 10px;
    background-color: var(--main-panel-content-bg);
    border: 1px solid var(--main-panel-border-color);
    /* ADD THIS */
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't push it past 100% */
}

.lgp-submit-ticket-progress-step {
    display: flex;
    align-items: center;
    font-size: var(--font-sm);
    gap: 10px;
}

/* FILE ATTACHMENTS */
.lgp-attach-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--attach-text-main);
    margin-top: 20px;
}

.lgp-attach-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

    .lgp-attach-header .prop-link {
        font-size: var(--font-sm);
        margin-right: 10px;
    }

    .lgp-attach-header .error {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: var(--font-sm);
        margin-left: auto;
        margin-right: 10px;
    }

.lgp-attach-badge-limit {
    font-size: 0.75rem;
    color: var(--orange-fg-color);
    margin-left: 10px;
    margin-right: 10px;
}

.lgp-attach-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 8px; /* Room for the scrollbar so it doesn't overlap text */
}

.lgp-attach-file-item {
    background-color: var(--attach-bg-item);
    color: var(--attach-item-text);
    border: 1px solid var(--attach-border);
    padding: 4px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    /* Maintain vertical alignment for the icon and text */
    line-height: 1.2;
    position: relative;
    overflow: hidden; /* Important: clips the progress fill to the pill shape */
    z-index: 1;
}

.lgp-attach-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--lgp-progress-fill);
    border-right: 2px solid var(--lgp-progress-border); /* Adds a "leading edge" line */
    z-index: -1;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lgp-attach-file-name {
    z-index: 2; /* Ensures text is always readable above the fill */
}

/* Ensure the 'X' button contrast matches the new gray bg */
.lgp-attach-btn-remove {
    background-color: transparent;
    border: none;
    color: var(--attach-error);
    opacity: 0.8;
}

    .lgp-attach-btn-remove:hover {
        opacity: 1;
        color: var(--attach-error-hover);
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*****************/

/* Support */
.support-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    width: 100%;
    border: 1px solid var(--main-panel-border-color);
    border-radius: var(--radius-md);
}

.support-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: visible;
}

.support-footer {
    display: flex;
    min-height: 0;
    overflow: hidden;
    height: 90px;
    max-height: 90px;
    align-items: center;
    padding: 0 15px;
    border-top: 1px solid var(--main-panel-border-color);
    gap: 10px;
}

    .support-footer .status {
        display: flex;
        flex: 1;
        text-wrap: auto;
    }

    .support-footer .action-buttons {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

.success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-top: 80px;
    padding: 40px;
    gap: 24px; /* Perfectly spaces icon, text, and button */
}

.success-message h3 {
    color: var(--lgp-text);
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.success-message p {
    color: var(--lgp-text-muted);
    font-size: 0.9rem;
    max-width: 400px;
}

/* The Transition */
.fade-in-up {
    animation: fadeInUp 0.4s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle Pulse for the Icon */
.pulse-animation {
    animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
    }
}
/*******************/

/* App Loading Graphic */

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #ffffff; /* Matches your manifest theme_color */
}

.logo-pulse-container {
    animation: logo-pulse 2s ease-in-out infinite;
}

@keyframes logo-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

.loading-text {
    color: #6366F1;
    font-family: 'Consolas', monospace;
    font-weight: bold;
    margin-top: 24px;
    margin-bottom: 8px;
}

/* Blazor Magic: Updates the percentage text automatically */
.loading-progress-text {
    font-family: 'Consolas', monospace;
    color: #94A3B8;
    font-size: 0.9rem;
    margin-top: 5px;
    text-align: center;
}

    .loading-progress-text:after {
        /* This uses the string '12%' directly from the framework */
        content: var(--blazor-load-percentage-text, "Loading...");
    }
/*******************/

/* Dashboard Icon */
.toolbar-dashboard-icon rect {
    transition: stroke 0.2s ease, fill 0.2s ease;
}

.toolbar-dashboard-icon:hover rect {
    stroke: #6366F1; /* Just a hint of your brand indigo on hover */
}
/*******************/