/* Table and data display styles */

/* CSV Preview Tables */
.csv-preview {
    margin-top: 15px;
    border: 1px solid var(--vscode-panel-border);
    border-radius: 5px;
    padding: 10px;
    background-color: var(--vscode-editor-background);
    max-height: 300px;
    overflow: auto;
}

.csv-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--vscode-editor-font-family);
    font-size: 12px;
}

.csv-table th,
.csv-table td {
    border: 1px solid var(--vscode-panel-border);
    padding: 6px 8px;
    text-align: left;
}

.csv-table th {
    background-color: var(--vscode-list-hoverBackground);
    font-weight: bold;
    position: sticky;
    top: 0;
}

.csv-table td {
    background-color: var(--vscode-editor-background);
}

.csv-table tr:nth-child(even) td {
    background-color: var(--vscode-list-hoverBackground);
}

.preview-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--vscode-descriptionForeground);
    text-align: center;
    font-style: italic;
}

/* CSV Preview Table for Modal */
.csv-preview-container {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--vscode-panel-border);
    border-radius: 4px;
    margin-top: 10px;
    background-color: var(--vscode-editor-background);
}

.csv-preview-table {
    border-collapse: collapse;
    font-family: var(--vscode-editor-font-family);
    font-size: 12px;
    width: 100%;
    min-width: 600px;
    background-color: var(--vscode-editor-background);
}

.csv-preview-table th,
.csv-preview-table td {
    border: 1px solid var(--vscode-panel-border);
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
    min-width: 80px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csv-preview-table th {
    background-color: var(--vscode-list-headerBackground);
    font-weight: bold;
    color: var(--vscode-list-headerForeground);
    border-bottom: 2px solid var(--vscode-panel-border);
}

.csv-preview-table td {
    background-color: var(--vscode-editor-background);
    color: var(--vscode-editor-foreground);
}

.csv-preview-table tbody tr:nth-child(even) td {
    background-color: var(--vscode-list-hoverBackground);
}

.csv-preview-table th:first-child,
.csv-preview-table td:first-child {
    border-left: none;
}

.csv-preview-table th:last-child,
.csv-preview-table td:last-child {
    border-right: none;
}

.csv-preview-table thead tr:first-child th {
    border-top: none;
}

.csv-preview-table tbody tr:last-child td {
    border-bottom: none;
}

/* CSV Error Cell Highlighting */
.csv-error-cell {
    background-color: var(--vscode-inputValidation-errorBackground) !important;
    border: 1px solid var(--vscode-inputValidation-errorBorder) !important;
    color: var(--vscode-errorForeground) !important;
    font-weight: bold;
    position: relative;
}

.csv-error-cell::after {
    content: '⚠️';
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 10px;
    background-color: var(--vscode-errorForeground);
    color: var(--vscode-editor-background);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Template Variables Table */
#templateVariablesTable {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--vscode-editor-font-family);
    font-size: 12px;
    background-color: var(--vscode-editor-background);
}

#templateVariablesTable th,
#templateVariablesTable td {
    border: 1px solid var(--vscode-panel-border);
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
}

#templateVariablesTable th {
    background-color: var(--vscode-list-headerBackground);
    color: var(--vscode-list-headerForeground);
    font-weight: bold;
    z-index: 10;
    border-bottom: 2px solid var(--vscode-panel-border);
}

#templateVariablesTable tbody tr:nth-child(even) {
    background-color: var(--vscode-list-hoverBackground);
}

/* CSV Data Table */
.csv-data-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--vscode-panel-border);
    margin: 10px 0;
    background: var(--vscode-editor-background);
    table-layout: auto;
}

.csv-data-table th {
    background: var(--vscode-editor-background);
    color: var(--vscode-editor-foreground);
    font-weight: bold;
    padding: 12px 8px;
    text-align: left;
    border: 1px solid var(--vscode-panel-border);
    border-bottom: 2px solid var(--vscode-panel-border);
    white-space: nowrap;
    min-width: max-content;
}

.type-selector-row th {
    padding: 0;
    border: 1px solid var(--vscode-panel-border);
    background: var(--vscode-textCodeBlock-background);
    white-space: nowrap;
    min-width: max-content;
}

.type-selector {
    width: 100%;
    padding: 8px;
    margin: 0;
    border: 0;
    background: var(--vscode-dropdown-background);
    color: var(--vscode-dropdown-foreground);
    font-size: 12px;
}

.csv-data-table .data-row td {
    padding: 8px;
    border: 1px solid var(--vscode-panel-border);
    vertical-align: top;
}

.csv-data-table .data-row:nth-child(even) {
    background: var(--vscode-editor-background);
}

.csv-data-table .data-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02);
}

.csv-data-table .data-row:hover {
    background: var(--vscode-list-hoverBackground);
}

.csv-data-table .numeric-cell {
    text-align: right;
    font-family: var(--vscode-editor-font-family, monospace);
}

.csv-data-table .text-cell {
    text-align: left;
}

/* Type selector validation states */
.type-selector-valid {
    border: 2px solid var(--vscode-button-background);
}

.type-selector-error {
    border: 2px solid var(--vscode-inputValidation-errorBorder);
}

.type-selector-warning {
    border: 2px solid var(--vscode-inputValidation-warningBorder);
}

.inline-error-message {
    color: var(--vscode-inputValidation-errorForeground);
    font-size: 10px;
    margin-top: 2px;
}

/* Type Mismatch Highlighting */
.sample-cell.type-mismatch {
    background-color: var(--vscode-inputValidation-warningBackground, rgba(255, 193, 7, 0.2)) !important;
    border: 2px solid var(--vscode-inputValidation-warningBorder, #ffc107) !important;
    color: var(--vscode-inputValidation-warningForeground, #856404) !important;
    font-weight: bold;
    position: relative;
    animation: mismatch-pulse 2s infinite;
}

.sample-cell.type-mismatch::before {
    content: '⚠️';
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--vscode-editorWarning-foreground, #ffc107);
    color: var(--vscode-editor-background);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 10;
}

.sample-cell.type-match {
    background-color: var(--vscode-merge-incomingHeaderBackground, rgba(0, 255, 0, 0.1)) !important;
    border: 1px solid var(--vscode-charts-green, #28a745) !important;
    color: var(--vscode-foreground) !important;
}

.sample-cell.type-match::before {
    content: '✓';
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: var(--vscode-charts-green, #28a745);
    color: white;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    z-index: 10;
}

@keyframes mismatch-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.2);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

/* Cell highlighting */
.transformed-cell {
    background-color: var(--vscode-textCodeBlock-background);
}

.highlight-cell {
    background-color: var(--vscode-editor-selectionHighlightBackground);
}

/* Table stats */
.table-stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--vscode-panel-border);
    border-radius: 5px;
    background-color: var(--vscode-input-background);
    min-width: 0;
    flex: 1 1 auto;
}

.stat-label {
    font-size: 12px;
    color: var(--vscode-descriptionForeground);
    margin-bottom: 8px;
    text-align: center;
}

/* A stat card's value can be a control (Run Batch Step 4's Configure): sized to the value
   line, so a card with an input is the same height as one with a number. */
.stat-item > input,
.stat-item > select,
.stat-item > button,
.stat-item > .stat-control {
    height: 22px;
    min-height: 22px;
    margin: 0;
    box-sizing: border-box;
}

.stat-item > input,
.stat-item > select,
.stat-item > button {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
}

.stat-item > .stat-control select,
.stat-item > .stat-control input {
    height: 22px;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
    box-sizing: border-box;
}

.stat-item span:last-child {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    word-break: break-word;
}

/* Status pills carry their own foreground (the editor background, on a filled
   pill). Applying the stat value colour here would out-specify that and leave
   the label almost invisible against the fill. */
.stat-item span:last-child:not(.status-pill-generic) {
    color: var(--vscode-foreground);
}

/* Progress monitoring */
.progress-summary {
    margin-bottom: 20px;
}

.progress-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.progress-details {
    margin-bottom: 20px;
}

.progress-log {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--vscode-panel-border);
    border-radius: 5px;
    background-color: var(--vscode-editor-background);
    padding: 10px;
}

.log-entry {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    padding: 5px 8px;
    border-radius: 3px;
    font-family: var(--vscode-editor-font-family);
    font-size: 12px;
    line-height: 1.4;
}

.log-entry.log-info {
    background-color: rgba(0, 122, 204, 0.1);
    border-left: 3px solid var(--vscode-textLink-foreground);
}

.log-entry.log-success {
    background-color: rgba(0, 255, 0, 0.1);
    border-left: 3px solid var(--vscode-terminal-ansiGreen);
}

.log-entry.log-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-left: 3px solid var(--vscode-editorWarning-foreground);
}

.log-entry.log-error {
    background-color: rgba(255, 0, 0, 0.1);
    border-left: 3px solid var(--vscode-errorForeground);
}

.log-timestamp {
    color: var(--vscode-descriptionForeground);
    font-size: 11px;
    white-space: nowrap;
    min-width: 80px;
}

.log-message {
    color: var(--vscode-foreground);
    flex: 1;
    word-break: break-word;
}

.progress-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.progress-controls button {
    min-width: 80px;
}

#progressMonitoringSection.active {
    display: block;
}

/* Data Loading sections */
.execution-section {
    margin-bottom: 25px;
}

.execution-section h4 {
    margin: 0 0 15px 0;
    color: var(--vscode-textLink-foreground);
    font-size: 16px;
    font-weight: 600;
}

/* Variable Display */
.variable-display {
    min-height: 100px;
    border: 1px solid var(--vscode-panel-border);
    border-radius: 5px;
    padding: 10px;
    background-color: var(--vscode-editor-background);
}

.variable-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    margin: 5px 0;
    border: 1px solid var(--vscode-input-border);
    border-radius: 3px;
    background-color: var(--vscode-input-background);
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.variable-name {
    font-family: var(--vscode-editor-font-family);
    font-weight: bold;
    color: var(--vscode-textLink-foreground);
    font-family: var(--vscode-editor-font-family, 'Consolas', 'Monaco', 'Courier New', monospace);
    color: var(--vscode-foreground);
}

.variable-type {
    font-family: var(--vscode-editor-font-family);
    font-size: 12px;
    color: var(--vscode-descriptionForeground);
    background-color: var(--vscode-badge-background);
    color: var(--vscode-badge-foreground);
    padding: 2px 6px;
    border-radius: 10px;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.2s ease;
}

/* Variable type color pills */
.data-type-string {
    background-color: #007acc;
    color: white;
}

.data-type-number {
    background-color: #28a745;
    color: white;
}

.data-type-boolean {
    background-color: #fd7e14;
    color: white;
}

.data-type-date {
    background-color: #6f42c1;
    color: white;
}

/* GitHub Issue #229: Array type badge for full response tree */
.data-type-array {
    background-color: #e83e8c;
    color: white;
}

.data-type-string:hover,
.data-type-number:hover,
.data-type-boolean:hover,
.data-type-date:hover,
.data-type-array:hover {
    opacity: 0.8;
    cursor: default;
}

/* Arrays Container */
.arrays-container {
    min-height: 80px;
    border: 1px solid var(--vscode-panel-border);
    border-radius: 5px;
    padding: 10px;
    background-color: var(--vscode-editor-background);
}

.array-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid var(--vscode-input-border);
    border-radius: 3px;
    background-color: var(--vscode-input-background);
}

.array-path {
    font-family: var(--vscode-editor-font-family);
    font-weight: bold;
    color: var(--vscode-textLink-foreground);
}

.array-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.array-controls label {
    margin-bottom: 0;
    font-weight: normal;
    white-space: nowrap;
}

.array-controls input[type="number"] {
    width: 60px;
    margin: 0;
}

/* Test Script Styles */
.test-script-row {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid var(--vscode-panel-border);
    border-radius: 5px;
    background-color: var(--vscode-editor-background);
}

.test-header {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 10px;
}

.test-name {
    flex: 1;
    min-width: 200px;
}

.test-script {
    width: 100%;
    font-family: var(--vscode-editor-font-family);
    font-size: var(--vscode-editor-font-size);
    background-color: var(--vscode-editor-background);
    color: var(--vscode-editor-foreground);
    border: 1px solid var(--vscode-input-border);
    border-radius: 3px;
    padding: 10px;
    resize: vertical;
    min-height: 120px;
}

.test-script::placeholder {
    color: var(--vscode-input-placeholderForeground);
}

.test-actions {
    display: flex;
    gap: 10px;
}

/* Single Test Container */
.single-test-container {
    width: 100%;
}

#singleTestScript {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid var(--vscode-input-border);
    background-color: var(--vscode-editor-background);
    color: var(--vscode-editor-foreground);
    font-family: var(--vscode-editor-font-family, 'Consolas', 'Monaco', 'Courier New', monospace);
    font-size: var(--vscode-editor-font-size, 14px);
    line-height: 1.5;
    border-radius: 4px;
    resize: vertical;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

#singleTestScript:focus {
    outline: 1px solid var(--vscode-focusBorder);
    border-color: var(--vscode-focusBorder);
}

#singleTestScript::placeholder {
    color: var(--vscode-input-placeholderForeground);
    font-style: italic;
}

.test-preview-results {
    margin-top: 15px;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid var(--vscode-panel-border);
}

.test-preview-results.success {
    background-color: var(--vscode-testing-iconPassed, #28a745);
    background-color: rgba(40, 167, 69, 0.1);
    border-color: var(--vscode-testing-iconPassed, #28a745);
    color: var(--vscode-testing-iconPassed, #28a745);
}

.test-preview-results.error {
    background-color: var(--vscode-testing-iconFailed, #dc3545);
    background-color: rgba(220, 53, 69, 0.1);
    border-color: var(--vscode-testing-iconFailed, #dc3545);
    color: var(--vscode-testing-iconFailed, #dc3545);
}

.test-preview-results h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: bold;
}

.test-result-icon {
    font-size: 16px;
    margin-right: 8px;
}

.sample-data {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--vscode-editor-background);
    border: 1px solid var(--vscode-panel-border);
    border-radius: 3px;
    font-family: var(--vscode-editor-font-family, monospace);
    font-size: 12px;
    white-space: pre-wrap;
    color: var(--vscode-descriptionForeground);
}

.sample-data-label {
    font-weight: bold;
    color: var(--vscode-foreground);
    margin-bottom: 5px;
    display: block;
}

/* Code Editor Styles */
.code-editor {
    font-family: var(--vscode-editor-font-family, 'Consolas', 'Monaco', 'Courier New', monospace) !important;
    font-size: var(--vscode-editor-font-size, 14px) !important;
    line-height: 1.5 !important;
    background-color: var(--vscode-editor-background) !important;
    color: var(--vscode-editor-foreground) !important;
    border: 1px solid var(--vscode-input-border) !important;
    border-radius: 4px;
    padding: 12px !important;
    white-space: pre !important;
    overflow-wrap: normal !important;
    overflow-x: auto;
    tab-size: 4;
    -moz-tab-size: 4;
    position: relative;
}

.code-editor:focus {
    outline: 1px solid var(--vscode-focusBorder) !important;
    border-color: var(--vscode-focusBorder) !important;
}

.code-editor::placeholder {
    color: var(--vscode-input-placeholderForeground) !important;
    font-style: italic;
}

.code-editor.json-error {
    border-color: var(--vscode-errorForeground) !important;
    box-shadow: 0 0 0 1px var(--vscode-errorForeground) !important;
}

.code-editor.json-valid {
    border-color: var(--vscode-terminal-ansiGreen) !important;
}

.json-error-message {
    display: none;
}

.json-error-message.show {
    display: block;
}

/* =============================================================================
   Monaco Editor Template Variable Decorations
   GitHub Issue #128: Comprehensive template syntax highlighting
   ============================================================================= */

/* Brackets {{ }} - Dim, subtle */
.monaco-editor .tmpl-bracket {
    color: var(--vscode-editorLineNumber-foreground, #858585) !important;
    opacity: 0.6 !important;
}

/* Separator : - Dim */
.monaco-editor .tmpl-separator {
    color: var(--vscode-editorLineNumber-foreground, #858585) !important;
    opacity: 0.7 !important;
}

/* User Variable Name - Cyan (prominent) */
.monaco-editor .tmpl-var-user {
    color: #4fc1ff !important;
    font-weight: bold !important;
}

/* A8 Prefix - Green, Bold (same as ENV) */
.monaco-editor .tmpl-var-a8 {
    color: var(--vscode-terminal-ansiGreen, #4ec9b0) !important;
    font-weight: bold !important;
}

/* ENV Prefix - Green, Bold */
.monaco-editor .tmpl-var-env {
    color: var(--vscode-terminal-ansiGreen, #4ec9b0) !important;
    font-weight: bold !important;
}

/* A8 Variable Value (sequence, date, datetime) - Blue like types */
.monaco-editor .tmpl-var-a8-value {
    color: var(--vscode-textLink-foreground, #3794ff) !important;
    font-weight: normal !important;
}

/* ENV Variable Value (host, prefix, etc.) - Green, not bold */
.monaco-editor .tmpl-var-env-value {
    color: var(--vscode-terminal-ansiGreen, #4ec9b0) !important;
    font-weight: normal !important;
}

/* Type Modifiers (string, number, boolean, date, datetime) - Blue */
.monaco-editor .tmpl-type {
    color: var(--vscode-textLink-foreground, #3794ff) !important;
}

/* Legacy alias for tmpl-type */
.monaco-editor .tmpl-modifier {
    color: var(--vscode-textLink-foreground, #3794ff) !important;
}

/* Date Format Specifiers (iso, YYYY-MM-DD, etc.) - Orange */
.monaco-editor .tmpl-format {
    color: var(--vscode-charts-orange, #d18616) !important;
}

/* GitHub Issue #175: Pipe separator | - Dim like colon */
.monaco-editor .tmpl-pipe {
    color: var(--vscode-editorLineNumber-foreground, #858585) !important;
    opacity: 0.7 !important;
}

/* GitHub Issue #175: Validation Modifiers (>0, >=0, 3-50, int, etc.) - Yellow/Gold */
.monaco-editor .tmpl-modifier-validation {
    color: #dcdcaa !important;
}

/* GitHub Issue #175: Transform Modifiers (upper, lower, rnd(2), floor, ceil, +2d, etc.) - Light Purple/Pink */
.monaco-editor .tmpl-modifier-transform {
    color: #c586c0 !important;
}

/* GitHub Issue #175: Empty Value Modifiers (opt, null) - Light Blue, Italic */
.monaco-editor .tmpl-modifier-empty {
    color: #9cdcfe !important;
    font-style: italic;
}

/* Light theme overrides for template variable decorations - match VS Code Light+ token colours */
body[data-vscode-theme-kind="vscode-light"] .monaco-editor .tmpl-var-user {
    color: #0070c1 !important;
}
body[data-vscode-theme-kind="vscode-light"] .monaco-editor .tmpl-modifier-validation {
    color: #795e26 !important;
}
body[data-vscode-theme-kind="vscode-light"] .monaco-editor .tmpl-modifier-transform {
    color: #af00db !important;
}
body[data-vscode-theme-kind="vscode-light"] .monaco-editor .tmpl-modifier-empty {
    color: #0070c1 !important;
}

/* BASE64 Marker - Inverted colors for just "BASE64" text */
.monaco-editor .tmpl-base64-marker {
    background-color: var(--vscode-editor-foreground, #d4d4d4) !important;
    color: var(--vscode-editor-background, #1e1e1e) !important;
    border-radius: 2px !important;
    padding: 0 2px !important;
    font-weight: bold !important;
}

/* BASE64 Value - Italic styling for content to be encoded */
.monaco-editor .tmpl-base64-value {
    font-style: italic !important;
}

/* =============================================================================
   Template Error Styling
   ============================================================================= */

/* Error - Bright red text with wavy underline */
.monaco-editor .tmpl-error {
    color: #ff6b6b !important;
    text-decoration: wavy underline #ff6b6b !important;
    text-underline-offset: 3px !important;
    font-weight: bold !important;
}

/* Warning - Yellow/Orange with wavy underline */
.monaco-editor .tmpl-warning {
    color: var(--vscode-editorWarning-foreground, #cca700) !important;
    text-decoration: wavy underline var(--vscode-editorWarning-foreground, #cca700) !important;
    text-underline-offset: 3px !important;
}

/* Error bracket highlight - Bright red */
.monaco-editor .tmpl-error-bracket {
    color: #ff6b6b !important;
    font-weight: bold !important;
}

/* Empty variable {{}} - grey placeholder (not an error, just unfilled) */
.monaco-editor .tmpl-error-empty {
    color: var(--vscode-editorLineNumber-foreground, #858585) !important;
    opacity: 0.7 !important;
}

/* =============================================================================
   Legacy Classes (for backwards compatibility during transition)
   ============================================================================= */
.monaco-editor .template-variable-bracket {
    color: var(--vscode-editorLineNumber-foreground, #858585) !important;
    opacity: 0.6 !important;
}

.monaco-editor .template-variable-name {
    color: var(--vscode-debugTokenExpression-name, #9cdcfe) !important;
    font-weight: bold !important;
}

.monaco-editor .template-variable-separator {
    color: var(--vscode-editorLineNumber-foreground, #858585) !important;
    opacity: 0.7 !important;
}

.monaco-editor .template-variable-type-string,
.monaco-editor .template-variable-type-number,
.monaco-editor .template-variable-type-boolean,
.monaco-editor .template-variable-type-date {
    color: var(--vscode-textLink-foreground, #3794ff) !important;
}

.monaco-editor .template-variable-a8-bracket,
.monaco-editor .template-variable-a8-name,
.monaco-editor .template-variable-a8-separator {
    color: var(--vscode-terminal-ansiGreen, #4ec9b0) !important;
    font-weight: bold !important;
}

.monaco-editor .template-variable-a8-type {
    color: var(--vscode-terminal-ansiGreen, #4ec9b0) !important;
    font-weight: normal !important;
}

.monaco-editor .json-comment-single-line {
    color: var(--vscode-descriptionForeground) !important;
    opacity: 0.6 !important;
    font-style: italic !important;
}

.monaco-editor .json-comment-multi-line {
    color: var(--vscode-descriptionForeground) !important;
    opacity: 0.6 !important;
    font-style: italic !important;
}

/* Error Tolerance and Configuration */
.form-description {
    font-size: 12px;
    color: var(--vscode-descriptionForeground);
    margin-top: 2px;
}

.error-handling-config {
    padding: 15px;
    border: 1px solid var(--vscode-panel-border);
    border-radius: 5px;
    background-color: var(--vscode-editor-background);
}

.continue-options {
    padding: 15px;
    border: 1px solid var(--vscode-input-border);
    border-radius: 3px;
    background-color: var(--vscode-input-background);
    margin-top: 10px;
}

.option-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.option-row:last-child {
    margin-bottom: 0;
}

.option-row label {
    margin-bottom: 0;
    font-weight: normal;
    flex: 1;
}

.option-row input[type="number"] {
    width: 80px;
    margin: 0;
}

.error-tolerance-container {
    margin-left: 20px;
    margin-top: 10px;
    padding: 15px;
    background-color: var(--vscode-input-background);
    border: 1px solid var(--vscode-input-border);
    border-radius: 4px;
}

.tolerance-mode-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tolerance-mode-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tolerance-input-container {
    margin-left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tolerance-input-container label {
    font-weight: normal;
    color: var(--vscode-descriptionForeground);
}

.tolerance-input-container input[type="number"] {
    width: 80px;
    padding: 4px 8px;
    border: 1px solid var(--vscode-input-border);
    background-color: var(--vscode-input-background);
    color: var(--vscode-input-foreground);
    border-radius: 3px;
}

.tolerance-input-container span {
    color: var(--vscode-descriptionForeground);
    font-size: 14px;
}

#percentageModeContainer.hidden {
    display: none !important;
}

#absoluteModeContainer.hidden {
    display: none !important;
}

/* Data Validation */
.data-validation-config {
    padding: 15px;
    border: 1px solid var(--vscode-panel-border);
    border-radius: 5px;
    background-color: var(--vscode-editor-background);
}

.validation-help {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--vscode-textCodeBlock-background);
    border-radius: 3px;
    border-left: 3px solid var(--vscode-textLink-foreground);
}

.validation-help p {
    margin: 0;
    font-size: 12px;
    color: var(--vscode-descriptionForeground);
}

.test-validation-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.test-preview-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.test-validation-results {
    margin-top: 15px;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid var(--vscode-panel-border);
}

.test-validation-results.success {
    background-color: var(--vscode-testing-iconPassed, #28a745);
    background-color: rgba(40, 167, 69, 0.1);
    border-color: var(--vscode-testing-iconPassed, #28a745);
    color: var(--vscode-testing-iconPassed, #28a745);
}

.test-validation-results.error {
    background-color: var(--vscode-testing-iconFailed, #dc3545);
    background-color: rgba(220, 53, 69, 0.1);
    border-color: var(--vscode-testing-iconFailed, #dc3545);
    color: var(--vscode-testing-iconFailed, #dc3545);
}

.test-validation-results h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: bold;
}

.test-validation-results .test-result-icon {
    font-size: 16px;
    margin-right: 8px;
}

/* Sample Data Configuration */
.sample-data-config {
    border: 1px solid var(--vscode-panel-border);
    border-radius: 5px;
    padding: 15px;
    background-color: var(--vscode-editor-background);
}

.sample-data-tabs {
    display: flex;
    border-bottom: 1px solid var(--vscode-panel-border);
    margin-bottom: 15px;
}

.sample-tab {
    padding: 8px 16px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    color: var(--vscode-foreground);
    border-bottom: 2px solid transparent;
    font-family: var(--vscode-font-family);
    font-size: 14px;
}

.sample-tab:hover {
    background-color: var(--vscode-list-hoverBackground);
}

.sample-tab.active {
    color: var(--vscode-textLink-foreground);
    border-bottom-color: var(--vscode-textLink-foreground);
    background-color: var(--vscode-tab-activeBackground);
}

.sample-tab-content {
    display: block;
}

.sample-tab-content.hidden {
    display: none;
}

.api-test-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.api-call-results {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--vscode-textCodeBlock-background);
    border: 1px solid var(--vscode-panel-border);
    border-radius: 4px;
}

.api-call-results h5 {
    margin: 0 0 10px 0;
    color: var(--vscode-foreground);
}

.api-call-results pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--vscode-editor-font-family, monospace);
    font-size: 12px;
    color: var(--vscode-editor-foreground);
}

/* Batch Naming */
.batch-naming-section {
    margin-bottom: 25px;
    padding: 20px;
    border: 1px solid var(--vscode-panel-border);
    border-radius: 8px;
    background-color: var(--vscode-editor-background);
}

.batch-naming-section h4 {
    margin: 0 0 15px 0;
    color: var(--vscode-textLink-foreground);
    font-size: 16px;
    font-weight: 600;
}

.column-list {
    max-height: 300px;
    overflow-y: auto;
}

/* View Runs Link */
.view-runs-section {
    border-top: 1px solid var(--vscode-panel-border);
    padding-top: 10px;
    margin-top: 10px;
}

.view-runs-link {
    display: inline-flex;
    align-items: center;
    color: var(--vscode-textLink-foreground);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 0;
    transition: color 0.2s ease;
}

.view-runs-link:hover {
    color: var(--vscode-textLink-activeForeground);
    text-decoration: underline;
}

.view-runs-link:focus {
    outline: 1px solid var(--vscode-focusBorder);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================
   Editable Tables (Issue #126)
   Used for environment headers/variables tables
   ========================================== */

.editable-table-container {
    border: 1px solid var(--vscode-panel-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.editable-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.editable-table thead th {
    background-color: var(--vscode-list-headerBackground);
    color: var(--vscode-list-headerForeground);
    font-weight: 600;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--vscode-panel-border);
    font-size: 12px;
}

.editable-table tbody td {
    padding: 6px 8px;
    vertical-align: middle;
    border-bottom: 1px solid var(--vscode-panel-border);
}

.editable-table tbody tr:last-child td {
    border-bottom: none;
}

.editable-table tbody tr:hover {
    background-color: var(--vscode-list-hoverBackground);
}

/* Column width definitions */
.editable-table .col-checkbox {
    width: 60px;
    text-align: center;
}

.editable-table .col-name {
    width: 35%;
}

.editable-table .col-value {
    width: auto;
}

.editable-table .col-actions {
    width: 32px;
    text-align: center;
    padding: 0 4px;
}

.editable-table .btn-delete-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: var(--vscode-descriptionForeground);
    cursor: pointer;
    border-radius: 3px;
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s;
}

.editable-table .btn-delete-row:hover {
    opacity: 1;
    color: var(--vscode-errorForeground);
    background: var(--vscode-list-hoverBackground);
}

/* Input styling within editable tables */
.editable-table td input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--vscode-input-border);
    background: var(--vscode-input-background);
    color: var(--vscode-input-foreground);
    border-radius: 3px;
    font-size: 13px;
}

.editable-table td input[type="text"]:focus {
    outline: 1px solid var(--vscode-focusBorder);
    border-color: var(--vscode-focusBorder);
}

.editable-table td input[type="text"]::placeholder {
    color: var(--vscode-input-placeholderForeground);
}

/* Checkbox styling */
.editable-table td input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Action button styling */
.editable-table td .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
}

/* Note: Inherited header badges removed - now using unified header-row table (Issue #126) */

/* ========================================
   GitHub Issue #135: Validation Progress Modal
   ======================================== */

.validation-progress-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--vscode-editor-background);
    border: 1px solid var(--vscode-panel-border);
    border-radius: 8px;
    padding: 24px 32px;
    z-index: 1000;
    min-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.validation-progress-modal.hidden {
    display: none;
}

.validation-progress-content h3 {
    margin: 0 0 16px 0;
    color: var(--vscode-foreground);
    font-size: 16px;
}

.progress-bar-container {
    height: 8px;
    background: var(--vscode-input-background);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-bar {
    height: 100%;
    background: var(--vscode-button-background);
    transition: width 0.2s ease-out;
    border-radius: 4px;
}

.validation-progress-content #coercionProgressText {
    color: var(--vscode-descriptionForeground);
    font-size: 13px;
    margin-bottom: 12px;
}

.validation-progress-content .error-count {
    color: var(--vscode-errorForeground);
    font-weight: 600;
    margin-bottom: 16px;
}

.validation-progress-content .error-count.hidden {
    display: none;
}

/* ========================================
   GitHub Issue #135: Enhanced Mapping Table
   ======================================== */

.enhanced-mapping {
    width: 100%;
}

.enhanced-mapping table {
    width: 100%;
    border-collapse: collapse;
}

.enhanced-mapping th,
.enhanced-mapping td {
    padding: 10px 12px;
    border: 1px solid var(--vscode-panel-border);
    text-align: left;
    vertical-align: middle;
}

.enhanced-mapping th {
    background: var(--vscode-editor-inactiveSelectionBackground);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--vscode-descriptionForeground);
}

/* Type Badge - shows target type from template */
.type-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: lowercase;
}

.type-badge.type-string {
    background: var(--vscode-charts-yellow);
    color: #1a1a1a;
}

.type-badge.type-number,
.type-badge.type-integer {
    background: var(--vscode-charts-blue);
    color: #fff;
}

.type-badge.type-boolean {
    background: var(--vscode-charts-purple);
    color: #fff;
}

.type-badge.type-date,
.type-badge.type-datetime {
    background: var(--vscode-charts-green);
    color: #fff;
}

/* Status Indicators */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.status-ok {
    background: rgba(34, 197, 94, 0.15);
    color: var(--vscode-testing-iconPassed);
}

.status-warning {
    background: rgba(250, 204, 21, 0.15);
    color: var(--vscode-editorWarning-foreground);
}

.status-error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--vscode-errorForeground);
}

.status-pending {
    background: var(--vscode-input-background);
    color: var(--vscode-descriptionForeground);
}

/* Row with coercion error */
.enhanced-mapping tr.has-coercion-error {
    background: rgba(239, 68, 68, 0.05);
}

.enhanced-mapping tr.has-coercion-error td {
    border-color: var(--vscode-inputValidation-errorBorder);
}

/* Source format dropdown */
.source-format-select {
    padding: 6px 10px;
    background: var(--vscode-input-background);
    color: var(--vscode-input-foreground);
    border: 1px solid var(--vscode-input-border);
    border-radius: 4px;
    font-size: 13px;
    min-width: 120px;
}

.source-format-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sample value preview */
.sample-value {
    font-family: var(--vscode-editor-font-family);
    font-size: 12px;
    color: var(--vscode-textPreformat-foreground);
    background: var(--vscode-textCodeBlock-background);
    padding: 2px 6px;
    border-radius: 3px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Coerced value preview */
.coerced-value {
    font-family: var(--vscode-editor-font-family);
    font-size: 12px;
}

.coerced-value.success {
    color: var(--vscode-testing-iconPassed);
}

.coerced-value.error {
    color: var(--vscode-errorForeground);
    font-style: italic;
}

/* Source format dropdown focus/hover */
.source-format-select:focus {
    outline: 1px solid var(--vscode-focusBorder);
    border-color: var(--vscode-focusBorder);
}

.source-format-select:hover:not(:disabled) {
    border-color: var(--vscode-button-hoverBackground);
}

/* Sample cell issue text - displayed below sample value */
.sample-cell .issue-text {
    color: var(--vscode-errorForeground);
    font-size: 11px;
    margin-top: 4px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

/* GitHub Issue #135: Coerced value preview - shows conversion result */
.sample-cell .coerced-value {
    color: var(--vscode-charts-green, #89d185);
    font-size: 11px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.sample-cell .coerced-value strong {
    font-weight: 600;
}

/* Sample cell with warning */
.sample-cell.has-warning {
    background: rgba(250, 204, 21, 0.1);
}

/* GitHub Issue #175: Sample cell indicators for opt/null modifiers */
.sample-excluded,
.sample-null {
    font-style: italic;
    color: var(--vscode-descriptionForeground);
}

.sample-excluded {
    color: var(--vscode-textLink-foreground);
}

.sample-null {
    color: var(--vscode-debugTokenExpression-name);
}

/* Row warning state */
.enhanced-mapping tr.has-warning td {
    border-color: var(--vscode-editorWarning-foreground);
}

/* Row error state */
.enhanced-mapping tr.has-error td {
    border-color: var(--vscode-errorForeground);
}

/* GitHub Issue #135: Dropdown-level highlighting for actionable fields */

/* Unmapped: highlight the CSV Column dropdown */
/* Tint, don't fill: some themes ship an opaque amber warningBackground, which left the
   light dropdown text unreadable. Mix the border colour into the input background instead. */
.enhanced-mapping select.unmapped-highlight {
    border: 2px solid var(--vscode-inputValidation-warningBorder) !important;
    background: color-mix(in srgb, var(--vscode-inputValidation-warningBorder) 14%, var(--vscode-dropdown-background)) !important;
    color: var(--vscode-dropdown-foreground) !important;
    animation: pulse-warning 2s ease-in-out infinite;
}

/* Warning: highlight Source Format dropdown */
.enhanced-mapping select.warning-highlight {
    border: 2px solid var(--vscode-inputValidation-warningBorder) !important;
    background: color-mix(in srgb, var(--vscode-inputValidation-warningBorder) 14%, var(--vscode-dropdown-background)) !important;
    color: var(--vscode-dropdown-foreground) !important;
}

/* Error: highlight Source Format dropdown */
.enhanced-mapping select.error-highlight {
    border: 2px solid var(--vscode-inputValidation-errorBorder) !important;
    background: color-mix(in srgb, var(--vscode-inputValidation-errorBorder) 14%, var(--vscode-dropdown-background)) !important;
    color: var(--vscode-dropdown-foreground) !important;
}

/* ========================================
   Map & Transform: variable-first layout
   One type scale: 13px controls and names, 12px mono samples, 11px caps headers.
   ======================================== */

.csv-row-count {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--vscode-descriptionForeground);
}

.map-layout {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.map-layout .map-col-variable { width: 36%; }
.map-layout .map-col-source   { width: 34%; }
.map-layout .map-col-sample   { width: auto; }
.map-layout .map-col-status   { width: 32px; }

.map-layout th,
.map-layout td {
    padding: 6px 10px;
    font-size: 13px;
    vertical-align: top;
}

.map-layout th {
    font-size: 11px;
    padding-top: 8px;
    padding-bottom: 8px;
    vertical-align: middle;
}

/* Variable cell */
.map-layout .map-variable-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

/* Long names push the type chip to the next line; only a name wider than the cell breaks */
.map-layout .variable-name {
    max-width: 100%;
    font-family: var(--vscode-editor-font-family, monospace);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Quiet tinted chip (same recipe as .bx-var role chips) instead of a solid pill */
.map-layout .variable-type {
    flex: none;
    padding: 0 6px;
    border-radius: 3px;
    border: 1px solid currentColor;
    font-family: var(--vscode-editor-font-family, monospace);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: lowercase;
    line-height: 16px;
}

.map-layout .variable-type.data-type-string  { color: var(--vscode-charts-blue);   background: color-mix(in srgb, var(--vscode-charts-blue) 14%, transparent); }
.map-layout .variable-type.data-type-number  { color: var(--vscode-charts-green);  background: color-mix(in srgb, var(--vscode-charts-green) 14%, transparent); }
.map-layout .variable-type.data-type-boolean { color: var(--vscode-charts-orange); background: color-mix(in srgb, var(--vscode-charts-orange) 14%, transparent); }
.map-layout .variable-type.data-type-date    { color: var(--vscode-charts-purple); background: color-mix(in srgb, var(--vscode-charts-purple) 14%, transparent); }

.map-layout .variable-sources,
.map-layout .variable-modifiers {
    margin-top: 2px;
    font-size: 12px;
    color: var(--vscode-descriptionForeground);
}

/* Location sections: BODY / URL PATH / QUERY · key / HEADER · key, with each body
   object or array as an indented sub-section (its JSON path, in mono) */
.map-layout .map-section-row td {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--vscode-descriptionForeground);
    background: var(--vscode-editor-inactiveSelectionBackground);
}

.map-layout .map-subsection-row td {
    padding-left: 24px;
    font-family: var(--vscode-editor-font-family, monospace);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vscode-foreground);
    background: color-mix(in srgb, var(--vscode-editor-inactiveSelectionBackground) 50%, transparent);
}

.map-layout .map-section-key {
    font-family: var(--vscode-editor-font-family, monospace);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vscode-foreground);
}

.map-layout tr.map-row-nested .map-variable-cell {
    padding-left: 24px;
}

/* Source cell: column picker, then format underneath */
.map-layout .map-source-cell select {
    display: block;
    width: 100%;
    min-width: 0;
    height: 26px;
    padding: 0 6px;
    font-size: 13px;
    border-radius: 3px;
    box-sizing: border-box;
}

.map-layout .map-source-cell .source-format-select {
    margin-top: 4px;
    height: 22px;
    font-size: 12px;
    color: var(--vscode-foreground);
    background: transparent;
    border-color: transparent;
}

.map-layout .map-source-cell .source-format-select.format-none {
    color: var(--vscode-descriptionForeground);
}

.map-layout .map-source-cell .source-format-select:hover,
.map-layout .map-source-cell .source-format-select:focus {
    border-color: var(--vscode-input-border, var(--vscode-panel-border));
}

/* Sample cell: "raw → result", or just the result when they match */
.map-layout .map-sample-cell {
    font-family: var(--vscode-editor-font-family, monospace);
    font-size: 12px;
    line-height: 26px;
}

.map-layout .source-sample-cell,
.map-layout .target-sample-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-layout .source-sample-cell {
    color: var(--vscode-descriptionForeground);
}

.map-layout .source-sample-cell::after {
    content: ' →';
}

.map-layout .target-sample-cell {
    color: var(--vscode-foreground);
    line-height: 18px;
}

.map-layout .map-sample-cell.sample-same .source-sample-cell {
    display: none;
}

.map-layout .map-sample-cell.sample-same .target-sample-cell {
    line-height: 26px;
}

.map-layout .issue-text {
    font-family: var(--vscode-font-family);
    font-size: 11px;
    line-height: 16px;
    white-space: normal;
}

/* Status: a single glyph, details in the tooltip */
.map-layout .status-cell {
    padding: 6px 0;
    text-align: center;
    line-height: 26px;
}

.map-layout .status-indicator {
    padding: 0;
    background: none;
    font-size: 13px;
    font-weight: 700;
    cursor: help;
}

/* Timezone row */
.map-layout .timezone-subheader td {
    font-size: 12px;
    vertical-align: middle;
    background: var(--vscode-editor-inactiveSelectionBackground);
}

.map-layout .timezone-label {
    color: var(--vscode-descriptionForeground);
    margin-right: 6px;
}

.map-layout .timezone-select {
    height: 22px;
    padding: 0 6px;
    margin-right: 16px;
    border-radius: 3px;
    border: 1px solid var(--vscode-input-border);
    background: var(--vscode-input-background);
    color: var(--vscode-input-foreground);
    font-size: 12px;
    max-width: 100%;
}

.map-layout .timezone-value {
    font-family: var(--vscode-editor-font-family, monospace);
}

@keyframes pulse-warning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.2); }
}

/* GitHub Issue #135: Grid paste warning/error notification */
.grid-paste-error,
.grid-paste-warning {
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.grid-paste-error {
    background: var(--vscode-inputValidation-errorBackground);
    border: 1px solid var(--vscode-inputValidation-errorBorder);
}

.grid-paste-warning {
    background: var(--vscode-inputValidation-warningBackground);
    border: 1px solid var(--vscode-inputValidation-warningBorder);
}

.paste-error-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.paste-error-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.paste-error-message {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
    color: var(--vscode-errorForeground);
}

.paste-error-message code {
    background: var(--vscode-textCodeBlock-background);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--vscode-editor-font-family);
}

.paste-error-dismiss {
    background: transparent;
    border: none;
    color: var(--vscode-foreground);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.7;
}

.paste-error-dismiss:hover {
    opacity: 1;
}

/* GitHub Issue #135: Paste area highlight animation */
.paste-area-highlight {
    animation: paste-area-flash 0.5s ease-in-out 3;
    border-color: var(--vscode-focusBorder) !important;
}

@keyframes paste-area-flash {
    0%, 100% {
        background-color: var(--vscode-input-background);
    }
    50% {
        background-color: var(--vscode-inputValidation-warningBackground);
    }
}

/* GitHub Issue #151: Reprocess link styles for stat items */
.reprocess-link {
    color: var(--vscode-textLink-foreground);
    text-decoration: underline;
    cursor: pointer;
}

.reprocess-link:hover {
    color: var(--vscode-textLink-activeForeground);
}

/* ========================================
   Generic Footer Notification System
   Reusable across all webviews (endpoint, data-transformer, etc.)
   ======================================== */

.footer-notification {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    margin-left: auto; /* Push to right side */
    max-width: 50%; /* Don't take up too much space */
}

.footer-notification.hidden {
    display: none;
}

.footer-notification .notification-icon {
    flex-shrink: 0;
    font-size: 16px;
}

.footer-notification .notification-message {
    flex: 1;
}

.footer-notification .notification-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    opacity: 0.7;
    color: inherit;
    padding: 0 4px;
    line-height: 1;
}

.footer-notification .notification-dismiss:hover {
    opacity: 1;
}

/* Error notification style */
.footer-notification.notification-error {
    background: var(--vscode-inputValidation-errorBackground);
    border: 1px solid var(--vscode-inputValidation-errorBorder);
    color: var(--vscode-inputValidation-errorForeground, var(--vscode-foreground));
}

/* Warning notification style */
.footer-notification.notification-warning {
    background: var(--vscode-inputValidation-warningBackground);
    border: 1px solid var(--vscode-inputValidation-warningBorder);
    color: var(--vscode-inputValidation-warningForeground, var(--vscode-foreground));
}

/* Info notification style */
.footer-notification.notification-info {
    background: var(--vscode-inputValidation-infoBackground, rgba(0, 122, 204, 0.1));
    border: 1px solid var(--vscode-inputValidation-infoBorder, #007acc);
    color: var(--vscode-inputValidation-infoForeground, var(--vscode-foreground));
}

/* Notification links removed - hint system replaced by toolbar */

/* Shake animation for blocked actions */
.footer-notification.notification-shake {
    animation: footer-notification-shake 0.5s ease-in-out;
}

@keyframes footer-notification-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* #268: the .csv-notification-area banner styles that lived here are gone —
   the data-transformer's notifications render through DbmnToast (toast.css). */

/* ========================================
   Editor Toolbar (Body Template Editor)
   ======================================== */

/* Toolbar container - sits flush above Monaco editor.
 * Issue #249: single row, no wrap. JS pushes overflow buttons into a "More"
 * dropdown (.toolbar-overflow) when they don't fit. Wrapping is disabled. */
.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 6px 8px;
    background: var(--vscode-editorWidget-background);
    border: 1px solid var(--vscode-panel-border);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-top: 10px;
    min-width: 0;
}

/* Toolbar buttons - tighter than footer buttons */
.editor-toolbar .btn {
    padding: 6px 12px !important;
    font-size: 13px !important;
    min-width: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Document-level action button - small gap from line actions */
.editor-toolbar .editor-toolbar-doc-action {
    margin-left: 6px;
}

/* Push the fullscreen button to the far right of the toolbar */
.editor-toolbar .toolbar-spacer-left {
    margin-left: auto;
}

/* Overflow "More" menu — items are real buttons moved in by JS, restyled to
 * look like menu rows. Inherits position/border/shadow from .toolbar-dropdown-menu. */
.toolbar-overflow-menu {
    right: 0;
    left: auto;
    min-width: 180px;
}

.toolbar-overflow-menu .btn {
    display: block !important;
    width: 100%;
    text-align: left;
    padding: 8px 12px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--vscode-dropdown-foreground) !important;
}

.toolbar-overflow-menu .btn:hover:not(:disabled) {
    background: var(--vscode-list-hoverBackground) !important;
    transform: none !important;
}

.toolbar-overflow-menu .btn:disabled {
    opacity: 0.5;
}

/* Monaco container adjustment - toolbar has top border-radius */
.editor-toolbar + #monacoEditorContainer {
    border-radius: 0 0 4px 4px;
}

/* Toolbar Dropdown */
.toolbar-dropdown {
    position: relative;
    display: inline-block;
}

.toolbar-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropdown-arrow {
    font-size: 10px;
    opacity: 0.7;
}

.toolbar-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 140px;
    background: var(--vscode-dropdown-background);
    border: 1px solid var(--vscode-dropdown-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    margin-top: 2px;
}

.toolbar-dropdown.open .toolbar-dropdown-menu {
    display: block;
}

.toolbar-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--vscode-font-family);
    background: transparent;
    color: var(--vscode-dropdown-foreground);
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s ease;
}

.toolbar-dropdown-item:hover {
    background: var(--vscode-list-hoverBackground);
}

.toolbar-dropdown-item:first-child {
    border-radius: 3px 3px 0 0;
}

.toolbar-dropdown-item:last-child {
    border-radius: 0 0 3px 3px;
}

/* GitHub Issue #180: Modifier dropdown needs wider menu for descriptions */
#modifierDropdown .toolbar-dropdown-menu {
    min-width: 220px;
}

#modifierDropdown .toolbar-dropdown-item {
    white-space: nowrap;
    font-size: 12px;
}

/* Issue #229 Phase 1B.4/1B.5: inline expand-cells get their own scroll
 * context so dragging the scrollbar doesn't bubble up to the outer
 * virtual-scroll table (which would collapse the expansion). Both axes
 * scroll inside the cell so all sub-table rows are reachable. */
.expandable-array .array-content {
    overflow-x: auto;
    overflow-y: auto;
    max-width: 100%;
    max-height: 480px;
}

/* GitHub Issue #229 / #238: Ancestor columns (view source: 'ancestor') —
 * values are denormalised from a path above the row basis and repeat for
 * every row. Muted/italic styling only — the `└ ` indent marker was
 * dropped (it added no value and split onto two lines on narrow cells). */
.col-ancestor,
.col-ancestor .column-name,
.column-ancestor-muted {
    opacity: 0.78;
    font-style: italic;
}
.col-ancestor td,
td.col-ancestor {
    opacity: 0.85;
    font-style: italic;
}