/* ===========================
   TABLE_IDE UI; 3-Panel Layout
   =========================== */

/* CSS Custom Properties; Light (default) */
:root {
    --t-primary: #1a73e8;
    --t-primary-dark: #1557b0;
    --t-bg-surface: #ffffff;
    --t-bg-workspace: #f8f9fa;
    --t-bg-input: #ffffff;
    --t-border: #e5e7eb;
    --t-text: #111827;
    --t-text-muted: #6b7280;
    --t-text-light: #9ca3af;
    --t-section-header: #1a73e8;
    --t-hover-bg: rgba(26, 115, 232, 0.07);
    --t-active-bg: rgba(26, 115, 232, 0.12);
    --t-toolbar-bg: #f0f4ff;
    --t-toolbar-border: rgba(79, 172, 254, 0.4);
    --t-header-height: 52px;
}

/* Dark Theme */
[data-theme="dark"] {
    --t-bg-surface: #252526;
    --t-bg-workspace: #1e1e1e;
    --t-bg-input: #2d2d30;
    --t-border: #3e3e42;
    --t-text: #d4d4d4;
    --t-text-muted: #9d9d9d;
    --t-text-light: #6a6a6a;
    --t-hover-bg: rgba(255, 255, 255, 0.06);
    --t-active-bg: rgba(255, 255, 255, 0.1);
    --t-toolbar-bg: rgba(79, 172, 254, 0.15);
    --t-toolbar-border: rgba(79, 172, 254, 0.3);
}

/* ===========================
   RESET (scoped to TABLE_IDE)
   =========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow-x: hidden;
}

body {
    background-color: var(--t-bg-workspace);
    color: var(--t-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

/* ===========================
   TABLE_IDE HEADER
   =========================== */
.table-ide-header {
    height: var(--t-header-height);
    background: var(--t-bg-surface);
    border-bottom: 1px solid var(--t-border);
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 16px;
}

.table-ide-header .logo {
    flex-shrink: 0;
}

.table-ide-header .logo h1 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.3px;
}

.table-ide-header .nav {
    flex: 1;
    display: flex;
    gap: 2px;
    align-items: center;
}

.table-ide-header .nav-link {
    font-size: 13px;
    color: var(--t-text-muted);
    padding: 5px 10px;
    border-radius: 6px;
    transition: all 150ms ease;
}

.table-ide-header .nav-link:hover {
    color: var(--t-text);
    background: var(--t-hover-bg);
}

/* Activity-bar utility actions */
#sidebar-nav-mount > .nav-link {
    order: 100;
    margin-top: 4px;
    margin-left: 0;
    flex-shrink: 0;
    width: 36px;
    min-height: 36px;
    padding: 8px 0;
    border: 1px solid var(--t-border);
    border-radius: 9px;
    color: var(--t-text-muted);
    background: var(--t-bg-surface);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

#sidebar-nav-mount > .nav-link:hover {
    color: var(--t-text);
    border-color: var(--t-accent);
    background: var(--t-hover-bg);
}

/* ── Mode tab pill group ── */
.table-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: #bebec7;
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.12),
        inset -1px -1px 3px rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

[data-theme="dark"] .table-mode {
    background: #d4d6d9;
    box-shadow:
        inset 2px 2px 6px rgba(0, 0, 0, 0.45),
        inset -1px -1px 3px rgba(255, 255, 255, 0.04);
}

.table-mode .theme-toggle-btn {
    border: none;
    border-radius: 7px;
    width: 32px;
    height: 32px;
    background: transparent;
    box-shadow: none;
    color: var(--t-text-muted);
    font-size: 13px;
    transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.table-mode .theme-toggle-btn:hover {
    background: var(--t-hover-bg);
    color: var(--t-text);
    box-shadow: none;
}

.table-mode .theme-toggle-btn.active {
    background: var(--t-bg-surface);
    color: var(--t-primary);
    box-shadow:
        2px 2px 6px rgba(0, 0, 0, 0.14),
        -1px -1px 4px rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .table-mode .theme-toggle-btn.active {
    background: var(--t-bg-surface);
    color: var(--t-primary);
    box-shadow:
        2px 2px 6px rgba(0, 0, 0, 0.5),
        -1px -1px 3px rgba(255, 255, 255, 0.06);
}

/* Theme toggle icons — moon hidden in light mode, sun hidden in dark mode */
.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: inline; }

/* Theme toggle button */
.theme-toggle-btn {
    background: none;
    border: 1px solid var(--t-border);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--t-text-muted);
    font-size: 14px;
    transition: all 150ms ease;
    flex-shrink: 0;
}

.theme-toggle-btn.active {
    background: var(--t-primary);
    border-color: var(--t-primary);
    color: #fff;
}

.theme-toggle-btn:hover {
    background: var(--t-hover-bg);
    color: var(--t-text);
}

#toggleRightPanel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    color: var(--t-text-muted);
}

/* ===========================
   3-PANEL APP LAYOUT
   =========================== */
.table-ide-app {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
}

/* --- Icon nav rail --- */
.sidebar-nav-rail {
    width: 48px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid var(--t-border);
    background: var(--t-bg-surface);
    padding: 8px 0;
    gap: 4px;
}

.sidebar-nav-rail a,
.sidebar-nav-rail button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--t-text-muted);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 150ms ease;
}

.sidebar-nav-rail a:hover,
.sidebar-nav-rail button:hover {
    background: var(--t-hover-bg);
    color: var(--t-primary);
}

.sidebar-nav-rail a.active {
    color: var(--t-primary);
    background: var(--t-active-bg);
}

/* --- Left panel --- */
.table-ide-left-panel {
    width: 180px;
    min-width: 200px;
    overflow-y: auto;
    border-right: 1px solid var(--t-border);
    background: var(--t-bg-surface);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100%;
    align-self: flex-start;
}

/* --- Panel collapse (desktop) ---------------------------------------------
   `display: none` made a toggle a jump cut: the panel vanished and the centre
   panel snapped across the gap it left. Collapsing the panel's width instead
   gives the centre something to animate against, so the two move together.

   The content inside must not reflow while the panel narrows, or the collapse
   reads as the panel garbling itself rather than sliding away. It is held at
   its pre-collapse width via --gx-panel-w (stamped by the toggle handler in
   tableIde.js, since the right panel is user-resizable and has no fixed width)
   and clipped by the panel's own overflow.

   Mobile keeps the bottom-sheet transform in the max-width:767px block below;
   these rules are desktop-only so the two never fight. */
@media (min-width: 768px) {
    .table-ide-left-panel,
    .table-ide-right-panel {
        transition:
            width 260ms cubic-bezier(0.32, 0.72, 0, 1),
            min-width 260ms cubic-bezier(0.32, 0.72, 0, 1),
            max-width 260ms cubic-bezier(0.32, 0.72, 0, 1),
            opacity 160ms ease;
    }

    .table-ide-left-panel.panel-hidden,
    .table-ide-right-panel.panel-hidden {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        /* Zero the border too, or the collapse stops at a 1px seam. */
        border-left-width: 0;
        border-right-width: 0;
    }

    /* Hold the contents at the width the panel had, so they are clipped
       rather than re-laid-out on every animation frame. */
    .table-ide-left-panel.panel-hidden > *,
    .table-ide-right-panel.panel-hidden > * {
        min-width: var(--gx-panel-w, 200px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .table-ide-left-panel,
    .table-ide-right-panel {
        transition: none;
    }
}

/* --- Center panel --- */
.table-ide-center-panel {
    flex: 1;
    min-width: 0;
    overflow: auto;
    background: var(--t-bg-workspace);
    display: flex;
    flex-direction: column;
}

/* --- Right panel --- */
.table-ide-right-panel {
    width: 220px;
    min-width: 150px;
    max-width: 600px;
    overflow-y: auto;
    border-left: 1px solid var(--t-border);
    background: var(--t-bg-surface);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.right-panel-resize-handle {
    position: absolute;
    top: 0;
    left: -3px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
}

.right-panel-resize-handle:hover,
.right-panel-resize-handle.dragging {
    background: var(--t-accent, #4a90d9);
    opacity: 0.5;
}

/* ===========================
   LEFT PANEL SECTIONS
   =========================== */
.left-section-header {
    /* color: var(--t-section-header);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 10px 12px 6px;
    border-bottom: 1px solid var(--t-border);
    user-select: none; */

    display: block;
    position: sticky;
    z-index: 100;
    top: 0;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--t-border);
    width: 100%;
    cursor: pointer;
    padding: 10px 12px 6px;
    color: var(--t-section-header);
    background: var(--t-bg-input);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.left-section-body {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--t-border);
}

/* Collapsible left sections: button headers toggle .collapsed on their body */
button.left-section-header::after {
    content: '▾';
    float: right;
    font-size: 9px;
    color: var(--t-text-muted);
}

button.left-section-header.collapsed::after {
    content: '▸';
}

.left-section-body.collapsed {
    display: none;
}

/* Compact sub-groups inside the Styles & ID section */
.tf-subgroup {
    border: 1px solid var(--t-border);
    border-radius: 6px;
    margin-bottom: 8px;
    background: var(--t-bg-input);
    overflow: hidden;
}

.tf-subgroup summary {
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--t-section-header);
    padding: 6px 8px;
    list-style: none;
}

.tf-subgroup summary::-webkit-details-marker {
    display: none;
}

.tf-subgroup summary::after {
    content: '▸';
    float: right;
    font-size: 9px;
    color: var(--t-text-muted);
}

.tf-subgroup[open] summary::after {
    content: '▾';
}

.tf-subgroup[open] summary {
    border-bottom: 1px solid var(--t-border);
}

.tf-subgroup-body {
    padding: 8px;
}

/* One-line control rows (style select + color swatch, attribute + value) */
.tf-inline-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tf-inline-row select {
    flex: 1;
    min-width: 0;
}

.tf-inline-row input[type='color'] {
    width: 34px;
    height: 28px;
    padding: 1px;
    flex-shrink: 0;
    border: 1px solid var(--t-border);
    border-radius: 4px;
    background: var(--t-bg-input);
    cursor: pointer;
}

.tf-inline-row .tf-attr-value {
    width: 58px;
    flex: 0 0 58px;
}

/* ===========================
   RIGHT PANEL SECTIONS (collapsible)
   =========================== */
.right-section {
    border-bottom: 1px solid var(--t-border);
}

.right-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    color: var(--t-section-header);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    background: var(--t-bg-surface);
    transition: background 150ms ease;
}

.right-section-header:hover {
    background: var(--t-hover-bg);
}

.right-section-chevron {
    font-size: 10px;
    color: var(--t-text-muted);
    transition: transform 150ms ease;
}

.right-section-body {
    padding: 10px 14px 12px;
    background: var(--t-bg-surface);
}

.right-section-body.collapsed {
    display: none;
}

/* Monaco editor container */
#monaco-editor-container {
    height: 480px;
    min-height: 180px;
    border: 1px solid var(--t-border);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

/* Generate actions row */
.generate-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    overflow: auto;
}

/* ===========================
   CENTER; TABLE WRAPPER
   =========================== */
.center-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--t-text-muted);
    padding: 8px 14px;
    border-bottom: 1px solid var(--t-border);
    background: var(--t-bg-surface);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.center-pos {
    font-size: 11px;
    color: var(--t-text-light);
}

.table-wrapper {
    background-color: var(--t-bg-workspace);
    flex: 1;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: auto;
    padding: 16px;
    min-height: 200px;
}

/* ===========================
   MOBILE TOOLBAR (shown only on mobile)
   =========================== */
#tableViewer-mb {
    display: none;
}

.toolbar-container {
    display: flex;
    background-color: var(--t-bg-surface);
    border-bottom: 1px solid var(--t-border);
    padding: 6px 8px;
    overflow-x: auto;
    white-space: nowrap;
    gap: 4px;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
    margin-right: 4px;
    border-right: 1px solid var(--t-border);
}

.toolbar-group:last-child {
    border-right: none;
}

.toolbar-btn {
    background: var(--t-toolbar-bg);
    border: 1px solid var(--t-toolbar-border);
    color: var(--t-text);
    padding: 5px 10px;
    border-radius: 16px;
    font-size: 11px;
    cursor: pointer;
    transition: all 200ms ease;
    white-space: nowrap;
    font-family: inherit;
}

.toolbar-btn:hover {
    background: var(--t-hover-bg);
    border-color: var(--t-primary);
    color: var(--t-primary);
}

.toolbar-btn.active {
    background: var(--t-active-bg);
    color: var(--t-primary);
    border-color: var(--t-primary);
}

/* ===========================
   LEGACY / COMPAT (Bootstrap accordion panels still used inside left sidebar)
   =========================== */
.panel {
    display: none;
    border-radius: 10px;
    overflow: auto;
    
}

/* ── Sheet card (proto-b "Segment Card") ─────────────────────────────────────
   One card per table: the .accordion button is its title bar and the .panel is
   its body, so the two carry a single continuous border and one shadow rather
   than reading as a grey bar sitting on a separate box. */
#tableContainer button.accordion {
    /* A <button> is inline-block, so an inherited text-align centred the title
       bar over its own card. It is the card's top edge — it has to start where
       the card starts. */
    display: block;
    text-align: left;
    background: var(--t-bg-workspace);
    color: var(--t-text);
    border: 1px solid var(--t-border);
    border-radius: 12px 12px 0 0;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 16px;
    max-width: 960px;
    transition: background 150ms, color 150ms;
}

#tableContainer button.accordion:hover {
    background: var(--t-hover-bg);
    color: var(--t-primary);
}

#tableContainer button.accordion.active {
    background: var(--t-bg-workspace);
    color: var(--t-text);
    border-bottom-color: transparent;
    border-radius: 12px 12px 0 0;
}

#tableContainer button.accordion::after,
#tableContainer button.accordion.active::after {
    content: '▾';
    float: right;
    font-size: 10px;
    color: var(--t-text-muted);
    transition: transform 150ms;
    display: inline-block;
    transform: rotate(-90deg);
}

#tableContainer button.accordion.active::after {
    transform: rotate(0deg);
}

#tableContainer .panel {
    border: 1px solid var(--t-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    background: var(--t-bg-surface);
    padding: 0;
    margin-bottom: 16px;
    max-width: 960px;
}

/* Left panel sections start expanded and stay persistent (not reset on table reload) */
.table-ide-left-panel .panel {
    display: block;
}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 10px 14px;
    width: 100%;
    border: 1px solid var(--t-border);
    text-align: left;
    outline: none;
    font-size: 12px;
    transition: 0.3s;
    border-radius: 5px;
    font-family: inherit;
}

.accordion.active {
    background-color: #ddd;
}

.accordion::after {
    content: " \25BD";
    float: right;
}

.accordion.active::after {
    content: " \25B3";
}

.side-accordion {
    writing-mode: sideways-rl;
    align-content: space-around;
}

.ha-100.active {
    height: 100%;
}

.input-container {
    display: block;
    padding: 8px 0;
}

.sidebar-container {
    display: none;
    /* hidden on desktop; replaced by .table-ide-left-panel */
}

.sidebar {
    width: 100%;
    padding: 5px;
    background: var(--t-bg-surface);
    overflow-y: auto;
}

.instructions {
    background: var(--t-bg-surface);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--t-text-muted);
}

.control-group {
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 8px;
}

.control-group h3 {
    margin-bottom: 8px;
    color: var(--t-text);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-style {
    border: 1px solid var(--t-border);
    border-radius: 8px;
    margin-top: 5px;
    padding: 12px;
}

.style-controls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 8px 0;
}

.button-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: space-between;
    min-width: 100%;
}

.sp-class:hover {
    transition: all 200ms ease;
    transform: scale(1.05);
}

.sp-class.sp-active {
    background-color: #337ab7;
    color: #fff;
    border-color: #2e6da4;
}

/* ===========================
   DARK MODE; Bootstrap 4 overrides
   =========================== */
[data-theme="dark"] body {
    background-color: var(--t-bg-workspace);
    color: var(--t-text);
}

[data-theme="dark"] .table-ide-header {
    background: var(--t-bg-surface);
    border-color: var(--t-border);
}

[data-theme="dark"] .table-ide-left-panel,
[data-theme="dark"] .table-ide-right-panel {
    background: var(--t-bg-surface);
    border-color: var(--t-border);
}

[data-theme="dark"] .left-section-header,
[data-theme="dark"] .right-section-header {
    border-color: var(--t-border);
}

[data-theme="dark"] .left-section-body,
[data-theme="dark"] .right-section-body {
    background: var(--t-bg-surface);
    border-color: var(--t-border);
}

[data-theme="dark"] .right-section {
    border-color: var(--t-border);
}

[data-theme="dark"] .accordion {
    background: #333;
    color: #ccc;
    border-color: var(--t-border);
}

[data-theme="dark"] .accordion.active {
    background: #3a3a3a;
}

[data-theme="dark"] .panel {
    background: var(--t-bg-surface);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea {
    background-color: var(--t-bg-input) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
}

[data-theme="dark"] .btn-outline-primary {
    color: #6ab0f5;
    border-color: #6ab0f5;
}

[data-theme="dark"] .btn-outline-secondary {
    color: #ccc;
    border-color: #555;
}

[data-theme="dark"] .btn-outline-danger {
    color: #f87171;
    border-color: #f87171;
}

[data-theme="dark"] .modal-content {
    background-color: var(--t-bg-surface);
    color: var(--t-text);
    border-color: var(--t-border);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--t-border);
}

[data-theme="dark"] .close {
    color: var(--t-text);
}

[data-theme="dark"] label {
    color: var(--t-text-muted);
}

[data-theme="dark"] .cell-controls {
    background: var(--t-bg-surface);
    border-color: var(--t-border);
    color: var(--t-text);
}

[data-theme="dark"] .toolbar-container {
    background: var(--t-bg-surface);
    border-color: var(--t-border);
}

[data-theme="dark"] .center-header {
    background: var(--t-bg-surface);
    border-color: var(--t-border);
}

[data-theme="dark"] .sidebar-nav-rail {
    background: var(--t-bg-surface);
    border-color: var(--t-border);
}

/* ===========================
   INPUT TOOLBAR
   =========================== */
.input-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--t-bg-surface);
    border-bottom: 1px solid var(--t-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.input-toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--t-border);
    flex-shrink: 0;
}

/* Drag & Drop toggle switch */
.toolbar-switch-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    color: var(--t-text-muted);
}

.toolbar-switch-label input[type="checkbox"] {
    display: none;
}

.toolbar-switch-track {
    display: inline-block;
    width: 28px;
    height: 15px;
    background: var(--t-border);
    border-radius: 8px;
    position: relative;
    transition: background 200ms ease;
    flex-shrink: 0;
}

.toolbar-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 11px;
    height: 11px;
    background: #fff;
    border-radius: 50%;
    transition: transform 200ms ease;
}

.toolbar-switch-label input:checked+.toolbar-switch-track {
    background: var(--t-primary);
}

.toolbar-switch-label input:checked+.toolbar-switch-track::after {
    transform: translateX(13px);
}

/* Tab count mini-input */
.toolbar-tab-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--t-text-muted);
}

.toolbar-tab-input {
    border: 1px solid var(--t-border);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
    background: var(--t-bg-input);
    color: var(--t-text);
    text-align: center;
}

.toolbar-tab-input:focus {
    outline: none;
    border-color: var(--t-primary);
}

/* ===========================
   SHEET TAB BAR
   =========================== */
.sheet-tab-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 12px;
    background: var(--t-bg-surface);
    border-top: 1px solid var(--t-border);
    flex-shrink: 0;
    overflow-x: auto;
    white-space: nowrap;
}

.sheet-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 12px;
    border: 1px solid var(--t-border);
    border-radius: 4px 4px 0 0;
    background: var(--t-bg-workspace);
    font-size: 12px;
    color: var(--t-text-muted);
    cursor: pointer;
    user-select: none;
    transition: all 150ms ease;
    flex-shrink: 0;
}

.sheet-tab:hover {
    background: var(--t-hover-bg);
    color: var(--t-text);
}

.sheet-tab.active {
    background: var(--t-bg-surface);
    border-bottom-color: var(--t-bg-surface);
    color: var(--t-primary);
    font-weight: 600;
}

.sheet-tab-label {
    min-width: 40px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
}

.sheet-tab-close {
    background: none;
    border: none;
    color: var(--t-text-light);
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms ease;
}

.sheet-tab:hover .sheet-tab-close,
.sheet-tab.active .sheet-tab-close {
    opacity: 1;
}

.sheet-tab-close:hover {
    color: var(--t-text);
}

.sheet-tab-add {
    background: none;
    border: 1px solid var(--t-border);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: var(--t-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 150ms ease;
}

.sheet-tab-add:hover {
    background: var(--t-hover-bg);
    color: var(--t-primary);
    border-color: var(--t-primary);
}

/* ===========================
   BOOTSTRAP MODAL; z-index safety
   Ensures modals always render above sticky header (z-200) and all panels.
   =========================== */
.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

/* Ensure the modal dialog is properly centered even with our CSS reset */
.modal-dialog {
    margin: 1.75rem auto !important;
}

/* ===========================
   DRAW CANVAS
   =========================== */
/* When active, Draw Mode hides .table-wrapper and fills the center panel */
body.draw-mode-active .table-ide-center-panel {
    display: flex;
    flex-direction: column;
}

.draw-canvas {
    display: none;
    flex-direction: column;
    background: var(--t-bg-surface);
    flex: 1;
    /* fill the center panel */
    min-height: 0;
    /* allow flex child to shrink */
    overflow: hidden;
}

.draw-canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--t-active-bg);
    border-bottom: 1px solid var(--t-border);
    font-size: 12px;
    font-weight: 500;
    color: var(--t-primary);
    flex-shrink: 0;
}

.draw-canvas-header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.draw-canvas-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Monaco container inside draw canvas */
.draw-monaco-container {
    flex: 1;
    min-height: 0;
    border-bottom: none;
    /* border replaced by the resize handle */
}

/* ── Vertical drag-resize handle ── */
.draw-resize-handle {
    flex-shrink: 0;
    height: 6px;
    background: var(--t-border);
    cursor: ns-resize;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease;
    z-index: 2;
    touch-action: none;
}

/* Three-dot grip indicator */
.draw-resize-handle::after {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--t-text-muted);
    opacity: 0.35;
    transition: opacity 120ms ease, background 120ms ease;
    /* Dotted grip pattern via box-shadow */
    box-shadow:
        -8px 0 0 var(--t-text-muted),
        8px 0 0 var(--t-text-muted);
}

.draw-resize-handle:hover,
.draw-resize-handle.dragging {
    background: color-mix(in srgb, var(--t-primary) 20%, transparent);
}

.draw-resize-handle:hover::after,
.draw-resize-handle.dragging::after {
    background: var(--t-primary);
    opacity: 0.8;
    box-shadow:
        -8px 0 0 var(--t-primary),
        8px 0 0 var(--t-primary);
}


.draw-input {
    flex: 1;
    width: 100%;
    min-height: 100px;
    max-height: 160px;
    resize: vertical;
    border: none;
    border-bottom: 1px solid var(--t-border);
    padding: 10px 14px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    background: var(--t-bg-input);
    color: var(--t-text);
    outline: none;
}

.draw-input:focus {
    border-bottom-color: var(--t-primary);
}

.draw-canvas-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--t-bg-surface);
    border-bottom: 1px solid var(--t-border);
    flex-shrink: 0;
}

.draw-toolbar-hint {
    font-size: 11px;
    color: var(--t-text-muted);
    margin-right: 4px;
}

.draw-preview {
    flex: 1;
    overflow-y: auto;
    padding: 8px 14px;
    background: var(--t-bg-workspace);
    min-height: 60px;
}

.draw-preview-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--t-text-muted);
    margin-bottom: 6px;
    display: block;
}

.draw-preview-grid {
    border-collapse: collapse;
    margin-top: 5px;
}

.draw-preview-grid td {
    border: 1px solid var(--t-border);
    padding: 2px 6px;
    min-width: 60px;
    height: 28px;
    font-size: 11px;
    color: var(--t-text);
    background: var(--t-bg-surface);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    transition: all 150ms ease;
    user-select: none;
}

.draw-preview-grid td:hover {
    background: var(--t-hover-bg);
}

.draw-preview-grid td.active-cell {
    border: 2px solid var(--t-primary);
    background: var(--t-active-bg);
    padding: 1px 5px;
    /* Offset for 2px border */
}

/* Header cells show with a distinct tint */
.draw-preview-grid td.header-cell {
    background: rgba(var(--t-primary-rgb, 99, 102, 241), 0.12);
    color: var(--t-primary);
    font-weight: 600;
}

/* Draw mode indicator on toolbar button */
body.draw-mode-active #drawModeToggle {
    background: var(--t-active-bg);
    color: var(--t-primary);
    border-color: var(--t-primary);
}

/* Inline cell editor (double-click to edit) */
.draw-cell-input {
    width: 100%;
    min-width: 56px;
    box-sizing: border-box;
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 11px;
    color: var(--t-text);
    padding: 0;
    margin: 0;
    /* Remove default input chrome */
    -webkit-appearance: none;
    appearance: none;
}

.draw-cell-input:focus {
    outline: 2px solid var(--t-primary);
    outline-offset: -2px;
    border-radius: 2px;
}

/* Allow text selection inside editing cells */
.draw-preview-grid td:has(.draw-cell-input) {
    user-select: text;
    overflow: visible;
}

/* Empty cell placeholder */
.draw-cell-empty {
    color: var(--t-text-muted);
    font-style: italic;
    opacity: 0.55;
    font-size: 10px;
    pointer-events: none;
}

/* ===========================
   DRAW MODE (legacy cursor only)
   =========================== */
body.draw-mode-active .table-wrapper {
    cursor: default;
}

/* ===========================
   LAB MODE
   =========================== */

/* Show center panel as flex column when Lab is active */
body.lab-mode-active .table-ide-center-panel {
    display: flex;
    flex-direction: column;
}

/* Toolbar button active state */
body.lab-mode-active #labModeToggle {
    background: var(--t-bg-surface);
    color: var(--t-primary);
    border-color: var(--t-primary);
}

/* ── Top pane: step builder ─────────────────────────────────────────────── */

.lab-step-pane {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--t-bg-surface);
}

/* Tab bar row */
.lab-tab-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--t-border);
    background: var(--t-bg-surface);
    flex-shrink: 0;
}

.lab-tab {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--t-border);
    border-radius: 4px;
    background: transparent;
    color: var(--t-text-muted);
    cursor: pointer;
    transition: all 140ms ease;
    text-transform: capitalize;
}

.lab-tab:hover {
    background: var(--t-hover-bg);
    color: var(--t-text);
}

.lab-tab.active {
    background: var(--t-active-bg);
    color: var(--t-primary);
    border-color: var(--t-primary);
}

.lab-tab-spacer { flex: 1; }

.lab-recipe-btn {
    font-size: 11px;
    padding: 2px 8px;
    height: 24px;
    line-height: 1;
}

.lab-run-btn {
    font-size: 11px;
    padding: 2px 10px;
    height: 24px;
    line-height: 1;
}

/* ── Function picker ────────────────────────────────────────────────────── */

.lab-fn-picker {
    background: var(--t-bg-surface);
    border-bottom: 1px solid var(--t-border);
    padding: 8px 10px;
    max-height: 220px;
    overflow-y: auto;
    flex-shrink: 0;
}

.lab-picker-inner {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lab-picker-group {
    min-width: 140px;
}

.lab-picker-group-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--t-text-muted);
    margin-bottom: 4px;
    padding: 0 2px;
}

.lab-picker-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 4px 8px;
    font-size: 11px;
    background: transparent;
    border: 1px solid var(--t-border);
    border-radius: 4px;
    color: var(--t-text);
    cursor: pointer;
    margin-bottom: 2px;
    transition: background 120ms ease;
}

.lab-picker-item:hover:not([disabled]) {
    background: var(--t-active-bg);
    color: var(--t-primary);
    border-color: var(--t-primary);
}

.lab-picker-validate .lab-picker-item { border-left: 3px solid #dc3545; }
.lab-picker-transform .lab-picker-item { border-left: 3px solid #0d6efd; }
.lab-picker-analyze   .lab-picker-item { border-left: 3px solid #198754; }

.lab-picker-cloud .lab-picker-item,
.lab-picker-item[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    font-style: italic;
}

/* ── Step list ──────────────────────────────────────────────────────────── */

.lab-step-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 10px;
}

.lab-step-empty {
    font-size: 11px;
    color: var(--t-text-muted);
    font-style: italic;
    padding: 10px 0;
}

.lab-step-card {
    border: 1px solid var(--t-border);
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--t-bg-workspace);
    overflow: hidden;
}

.lab-step-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--t-bg-surface);
    border-bottom: 1px solid var(--t-border);
}

.lab-step-num {
    font-size: 10px;
    font-weight: 700;
    color: var(--t-text-muted);
    min-width: 14px;
}

.lab-step-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}

.lab-badge-validate { background: rgba(220,53,69,0.12); color: #dc3545; }
.lab-badge-transform { background: rgba(13,110,253,0.12); color: #0d6efd; }
.lab-badge-analyze  { background: rgba(25,135,84,0.12);  color: #198754; }

.lab-step-label {
    font-size: 11px;
    color: var(--t-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lab-step-actions {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.lab-step-btn {
    background: transparent;
    border: 1px solid var(--t-border);
    border-radius: 3px;
    font-size: 11px;
    padding: 1px 5px;
    color: var(--t-text-muted);
    cursor: pointer;
    line-height: 1.4;
    transition: all 120ms ease;
}

.lab-step-btn:hover:not([disabled]) {
    background: var(--t-hover-bg);
    color: var(--t-text);
}

.lab-step-btn[disabled] { opacity: 0.3; cursor: default; }

.lab-step-remove:hover:not([disabled]) {
    background: rgba(220,53,69,0.1);
    border-color: #dc3545;
    color: #dc3545;
}

/* ── Param forms ────────────────────────────────────────────────────────── */

.lab-step-params {
    padding: 8px 10px;
}

.lab-param-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px 8px;
    align-items: center;
}

.lab-param-label {
    font-size: 10px;
    color: var(--t-text-muted);
    font-weight: 500;
    text-align: right;
    padding-right: 4px;
    white-space: nowrap;
}

.lab-sublabel {
    font-size: 9px;
    color: var(--t-text-muted);
    margin-top: 4px;
}

.lab-param-input {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lab-input {
    font-size: 11px;
    padding: 3px 6px;
    border: 1px solid var(--t-border);
    border-radius: 4px;
    background: var(--t-bg-input);
    color: var(--t-text);
    width: 100%;
    box-sizing: border-box;
    height: 26px;
}

.lab-input:focus {
    outline: none;
    border-color: var(--t-primary);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}

.lab-input-num { width: 90px; }
.lab-input-xs  { height: 22px; font-size: 10px; padding: 1px 4px; }

.lab-custom-term { margin-top: 4px; }

.lab-expr-sub {
    display: contents; /* slots sub-labels/inputs into the parent grid */
}

.lab-hint {
    font-size: 10px;
    color: var(--t-text-muted);
    font-style: italic;
}

/* expr sub-fields: compact vertical rows below the type select */
.lab-expr-sub {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lab-expr-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lab-expr-label {
    font-size: 10px;
    color: var(--t-text-muted);
    white-space: nowrap;
    width: 50px;
    flex-shrink: 0;
    text-align: right;
}

/* mergeBy rules */
.lab-rule-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.lab-rule-col {
    font-size: 10px;
    color: var(--t-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* multiAggregate measures */
.lab-measures-rows { margin-bottom: 4px; }
.lab-measure-row { display: flex; gap: 4px; margin-bottom: 3px; }
.lab-add-measure { font-size: 10px; padding: 2px 6px; }

/* ── Add Step bar ───────────────────────────────────────────────────────── */

/* ── Recipe section ─────────────────────────────────────────────────────── */

.lab-recipe-section {
    flex-shrink: 0;
    border-top: 1px solid var(--t-border);
}

.lab-recipe-monaco {
    height: 110px !important;
    flex: none !important;
}

/* ── Result pane ────────────────────────────────────────────────────────── */

.lab-result-badge {
    font-size: 10px;
    font-weight: 600;
    margin-left: 8px;
    display: inline;
}

/* Result table */
.lab-result-table {
    border-collapse: collapse;
    font-size: 11px;
    width: 100%;
    table-layout: auto;
}

.lab-result-table th {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    padding: 3px 8px;
    font-weight: 600;
    color: var(--t-text);
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.lab-result-table td {
    border: 1px solid var(--t-border);
    padding: 2px 8px;
    color: var(--t-text);
    background: var(--t-bg-workspace);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flagged row styles */
.lab-row-error > td:first-child { border-left: 3px solid #dc3545; }
.lab-row-warn  > td:first-child { border-left: 3px solid #ffc107; }
.lab-row-error { background: rgba(220,53,69,0.04) !important; }
.lab-row-warn  { background: rgba(255,193,7,0.06) !important; }

.lab-flag-col { min-width: 120px; max-width: 300px; }
.lab-flag-badge {
    display: inline-block;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    margin: 1px;
    white-space: normal;
    word-break: break-word;
}
.lab-flag-error { background: rgba(220,53,69,0.12); color: #dc3545; }
.lab-flag-warn  { background: rgba(255,193,7,0.15);  color: #856404; }

/* Stat cards */
.lab-stat-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
}

.lab-stat-card {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: 8px;
    padding: 16px 24px;
    text-align: center;
    min-width: 120px;
}

.lab-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--t-primary);
    line-height: 1.2;
}

.lab-stat-label {
    font-size: 11px;
    color: var(--t-text-muted);
    margin-top: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Submit row ─────────────────────────────────────────────────────────── */

.lab-submit-row {
    padding: 8px 10px;
    border-top: 1px solid var(--t-border);
    background: var(--t-bg-surface);
    flex-shrink: 0;
}

/* ===========================
   NODE EDITOR MODE
   =========================== */

/* Toolbar button active state */
body.node-editor-active #nodeEditorToggle {
    background: var(--t-bg-surface);
    color: var(--t-primary);
    border-color: var(--t-primary);
}

/* Hide table view and sheet tabs while node editor is active */
body.node-editor-active .table-wrapper,
body.node-editor-active #sheetTabBar {
    display: none !important;
}

/* Center panel needs relative positioning for the absolute overlay */
.table-ide-center-panel {
    position: relative;
}

/* Dark mode overrides for new components */
[data-theme="dark"] .input-toolbar {
    background: var(--t-bg-surface);
    border-color: var(--t-border);
}

[data-theme="dark"] .sheet-tab-bar {
    background: var(--t-bg-surface);
    border-color: var(--t-border);
}

[data-theme="dark"] .sheet-tab {
    background: var(--t-bg-workspace);
    border-color: var(--t-border);
    color: var(--t-text-muted);
}

[data-theme="dark"] .sheet-tab.active {
    background: var(--t-bg-surface);
    border-bottom-color: var(--t-bg-surface);
}

[data-theme="dark"] .toolbar-tab-input {
    background-color: var(--t-bg-input) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
}

/* ===========================
   MOBILE BOTTOM NAV (hidden on desktop)
   =========================== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: var(--t-bg-surface);
    border-top: 1px solid var(--t-border);
    z-index: 600;
    align-items: stretch;
    justify-content: space-around;
}

.mobile-nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--t-text-muted);
    font-size: 10px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 0;
    transition: color 150ms ease, background 150ms ease;
    letter-spacing: 0.3px;
}

.mobile-nav-tab i {
    font-size: 17px;
    line-height: 1;
}

.mobile-nav-tab.active {
    color: var(--t-primary);
    background: var(--t-active-bg);
}

.mobile-nav-tab:not(.active):hover {
    color: var(--t-text);
    background: var(--t-hover-bg);
}

/* Sheet backdrop (hidden on desktop) */
.mobile-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 490;
    opacity: 0;
    transition: opacity 250ms ease;
}

.mobile-sheet-backdrop.visible {
    display: block;
    opacity: 1;
}

/* ===========================
   MOBILE LAYOUT (≤767px)
   =========================== */
@media (max-width: 767px) {

    /* Mode pills stack vertically on mobile */
    .table-mode {
        flex-direction: row;
        border-radius: 10px;
        padding: 3px;
    }

    .table-mode .theme-toggle-btn {
        width: 32px;
        height: 32px;
    }

    /* turn off sidebar */
    #toggleLeftPanel,
    #toggleRightPanel {
        display: none;
    }

    /* Icon rail: vertical → horizontal strip at top of app */
    #sidebar-nav-mount {
        flex-direction: row !important;
        width: 100%;
        height: auto;
        min-height: 44px;
        border-right: none !important;
        border-bottom: 1px solid var(--t-border);
        background: var(--t-bg-surface);
        padding: 4px 8px !important;
        overflow-x: auto;
        gap: 4px !important;
        flex-shrink: 0;
    }

    /* App becomes a column; bottom 56px reserved for nav */
    .table-ide-app {
        flex-direction: column;
        height: calc(100dvh - 56px);
        overflow: hidden;
    }

    /* Center fills all remaining height */
    .table-ide-center-panel {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .table-wrapper {
        padding: 8px 8px 56px;
        /* visible scrollbar so users know the table continues below the nav */
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--t-border) transparent;
        -webkit-overflow-scrolling: touch;
    }

    .table-wrapper::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    .table-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }
    .table-wrapper::-webkit-scrollbar-thumb {
        background: var(--t-border);
        border-radius: 2px;
    }

    /* Show the existing horizontal mobile toolbar */
    #tableViewer-mb {
        display: block;
        flex-shrink: 0;
    }

    /* Left panel: always in DOM but translated off-screen; slides up on .mobile-open */
    .table-ide-left-panel,
    .table-ide-left-panel.panel-hidden {
        display: block !important;
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto !important;
        height: auto;
        max-height: 100vh;
        min-width: 0;
        width: 65% !important;
        border-right: none;
        border-top: 1px solid var(--t-border);
        /* border-radius: 16px 16px 0 0; */
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
        z-index: 500;
        overflow-y: auto;
        transform: translateY(102%);
        transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Drag handle via pseudo on panel top */
    .table-ide-left-panel::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--t-border);
        margin: 10px auto 6px;
    }

    .table-ide-left-panel.mobile-open {
        transform: translateY(0);
    }

    /* Tighter bottom-sheet layout: less vertical travel between controls */
    .table-ide-left-panel .left-section-body {
        padding: 6px 12px 8px;
    }

    .table-ide-left-panel .form-group.mb-2 {
        margin-bottom: 4px !important;
    }

    .table-ide-left-panel .form-group label {
        margin-bottom: 1px;
    }

    /* Spacing T/R/B/L inputs share one row instead of wrapping */
    .table-ide-left-panel .style-controls {
        display: flex;
        gap: 6px;
    }

    .table-ide-left-panel .style-controls .form-group {
        flex: 1;
        min-width: 0;
    }

    /* Bigger touch targets on section headers */
    .left-section-header {
        padding: 12px 14px 8px;
        font-size: 11px;
    }

    /* Right panel: same treatment */
    .table-ide-right-panel {
        display: flex !important;
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto !important;
        height: auto;
        max-height: 72vh;
        min-width: 0;
        max-width: 100%;
        width: 100% !important;
        border-left: none;
        border-top: 1px solid var(--t-border);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
        z-index: 500;
        overflow-y: auto;
        transform: translateY(102%);
        transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
        flex-direction: column;
    }

    .table-ide-right-panel::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--t-border);
        margin: 10px auto 6px;
        flex-shrink: 0;
    }

    .table-ide-right-panel.mobile-open {
        transform: translateY(0);
    }

    /* Monaco editor: compact height on mobile */
    #monaco-editor-container {
        height: 260px;
        min-height: 160px;
    }

    /* Show mobile bottom nav in table mode only */
    .mobile-bottom-nav {
        display: flex;
    }

    /* The full-canvas modes don't use the bottom nav -- hide it. Leaving it up
       parks the table-mode tab bar on top of whatever the mode put at the
       bottom of its own panel: the Equation Editor's symbol palette, in that
       mode's case. */
    body.node-editor-active .mobile-bottom-nav,
    body.lab-mode-active .mobile-bottom-nav,
    body.equation-editor-active .mobile-bottom-nav {
        display: none;
    }

    /* ...and take the 56px back, since nothing is standing in it any more.
       Without this the palette keeps a strip of dead panel under it that looks
       like the layout stopped short. */
    body.equation-editor-active .table-ide-app {
        height: 100dvh;
    }

    /* Lab Mode: also hide the center-header (step builder owns the full panel) */
    body.lab-mode-active .center-header {
        display: none;
    }

    /* Right panel resize handle: disable on mobile */
    .right-panel-resize-handle {
        display: none;
    }

    /* Sheet tab bar: move just below center-header so it's not hidden under mobileBottomNav */
    .center-header   { order: 1; }
    .sheet-tab-bar   { order: 2; border-top: none; border-bottom: 1px solid var(--t-border); }
    .table-wrapper   { order: 3; }

    /* Context menu: better spacing and touch targets on mobile */
    .cell-controls {
        width: 260px !important;
        border-radius: 12px !important;
        padding: 14px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    }

    .cell-controls h6 {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 12px 0 6px !important;
        color: var(--t-text-muted);
    }

    .cell-controls h6:first-child {
        margin-top: 0 !important;
    }

    /* .cell-op {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px !important;
    } */

    /* .cell-op button {
        padding: 8px 6px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
        text-align: center;
        width: 100% !important;
    }

    .cell-op button#deleteCell,
    .cell-op button#deleteRow,
    .cell-op button#deleteColumn {
        flex: none;
    } */
}


[data-theme="dark"] .mobile-bottom-nav {
    background: var(--t-bg-surface);
    border-color: var(--t-border);
}

[data-theme="dark"] .mobile-sheet-backdrop {
    background: rgba(0, 0, 0, 0.65);
}
/* ── MCP Pill ──────────────────────────────────────────────────────────── */
.gx-mcp-pill-wrap {
    position: relative;
    display: none;
    align-items: center;
    order: 90;
    margin-top: auto;
}
body.gx-embedded .gx-mcp-pill-wrap { display: flex; }

.gx-mcp-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 36px;
    min-height: 42px;
    padding: 5px 2px;
    border-radius: 9px;
    border: 1px solid var(--t-border, rgba(255,255,255,0.12));
    background: transparent;
    color: var(--t-text-muted, #888);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
    user-select: none;
}
.gx-mcp-pill:hover {
    border-color: var(--t-accent, #4fa8f5);
    color: var(--t-accent, #4fa8f5);
}
.gx-mcp-pill svg { flex-shrink: 0; }

@media (max-width: 767px) {
    #sidebar-nav-mount > .nav-link {
        order: 0;
        margin-top: 0;
        width: 32px;
        min-height: 32px;
        padding: 6px 0;
    }

    .gx-mcp-pill-wrap {
        order: 0;
        margin-top: 0;
    }

    .gx-mcp-pill {
        width: 32px;
        min-height: 32px;
        padding: 3px 2px;
    }
}

.gx-mcp-popover {
    display: none;
    position: fixed;
    z-index: 99999;
    min-width: 280px;
    max-width: 340px;
    background: var(--t-bg-surface, #1e1e2e);
    border: 1px solid var(--t-border, rgba(255,255,255,0.12));
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
    padding: 14px 16px;
    color: var(--t-text, #e0e0e0);
    font-size: 12px;
    line-height: 1.6;
}
.gx-mcp-popover.open { display: block; }
.gx-mcp-popover-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--t-text-muted, #888);
    margin-bottom: 10px;
}
.gx-mcp-popover-ref {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--t-bg-input, rgba(0,0,0,0.2));
    border: 1px solid var(--t-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: monospace;
    font-size: 12px;
    margin-bottom: 10px;
}
.gx-mcp-popover-ref button {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: var(--t-text-muted, #888);
    border-radius: 4px;
}
.gx-mcp-popover-ref button:hover { color: var(--t-accent, #4fa8f5); }
.gx-mcp-popover-sample {
    font-size: 11px;
    color: var(--t-text-muted, #888);
    margin-bottom: 4px;
}
.gx-mcp-popover-sample code {
    display: block;
    margin-top: 4px;
    padding: 6px 8px;
    background: var(--t-bg-input, rgba(0,0,0,0.2));
    border-radius: 5px;
    font-family: monospace;
    font-size: 11px;
    color: var(--t-text, #e0e0e0);
    word-break: break-word;
}
.gx-mcp-popover-docs {
    margin-top: 10px;
    font-size: 11px;
    text-align: right;
}
.gx-mcp-popover-docs a {
    color: var(--t-accent, #4fa8f5);
    text-decoration: none;
}