:root {
    /* WiseWare Professional Theme - Enhanced Visual Design */
    --primary-color: #2c3e50;
    --secondary-color: #34495e;
    --accent-teal: #2c3e50;
    --accent-teal-dark: #34495e;
    --accent-teal-light: #ecf0f1;
    --accent-gold: #f39c12;
    --accent-gold-dark: #e67e22;
    --header-color-1: #ffffff;
    --header-color-2: #f8f9fa;
    --border-color: #d0d0d0;
    --light-bg: #ffffff;
    --dark-text: #1a1a1a;
    --light-text: #4a4a4a;
    --professional-gray: #f8fafc;
    --professional-dark: #1a1a1a;
    
    /* Z-index scale for proper layering */
    --z-base: 1;
    --z-input: 2;
    --z-dropdown: 1000;
    --z-modal: 9999;
    --z-performance-elements: 10000;
    --z-performance-dropdowns: 10002;
    
    /* Enhanced gradient colors */
    --gradient-primary: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    --gradient-surface: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --gradient-card: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    --gradient-accent: linear-gradient(135deg, #ecf0f1 0%, #d5dbdb 100%);
    
    /* Modern shadow system */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-teal: 0 4px 14px 0 rgba(44, 62, 80, 0.15);
    
    /* Enhanced dark theme colors for better contrast */
    --bg-color-dark: #0a0a0a;
    --card-bg-dark: #1a1a1a;
    --input-bg-dark: #2a2a2a;
    --text-color-dark: #f0f0f0;
    --input-text-dark: #ffffff;
    --muted-text-dark: #b0b0b0;
    --border-color-dark: #404040;
    --focus-border-dark: #5dade2;
    
    /* Dark theme gradients */
    --gradient-dark-surface: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    --gradient-dark-card: linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 100%);
    
    /* Enhanced typography scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    
    /* Spacing scale */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    
    /* Border radius scale */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    
    /* Semantic Color System - replacing hardcoded values */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f1f3f4;
    --color-gray-200: #e8eaed;
    --color-gray-300: #dee2e6;
    --color-gray-400: #bdc1c6;
    --color-gray-500: #80868b;
    --color-gray-600: #5f6368;
    --color-gray-700: #3c4043;
    --color-gray-800: #2a2a2a;
    --color-gray-900: #1a1a1a;
    
    /* Button System Colors */
    --btn-primary: #2563eb;
    --btn-primary-hover: #1d4ed8;
    --btn-primary-active: #1e40af;
    --btn-secondary: #6b7280;
    --btn-secondary-hover: #4b5563;
    --btn-secondary-active: #374151;
    --btn-success: #059669;
    --btn-success-hover: #047857;
    --btn-success-active: #065f46;
    --btn-error: #dc2626;
    --btn-error-hover: #b91c1c;
    --btn-error-active: #991b1b;
    
    /* Status Colors */
    --status-error: #b91c1c;
    --status-warning: #d97706;
    --status-success: #059669;
    --status-info: #0284c7;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-muted: #f0f0f0;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #6b7280;
    --text-white: #ffffff;
    
    /* Border Colors */
    --border-light: #e8eaed;
    --border-medium: #dee2e6;
    --border-dark: #bdc1c6;
    
    /* Alpha/Overlay Colors */
    --overlay-light: rgba(255, 255, 255, 0.2);
    --overlay-dark: rgba(0, 0, 0, 0.1);
    --focus-ring: rgba(37, 99, 235, 0.2);
    
    /* Shadow and Focus Alpha Colors */
    --shadow-black-5: rgba(0, 0, 0, 0.05);
    --shadow-black-10: rgba(0, 0, 0, 0.1);
    --shadow-black-15: rgba(0, 0, 0, 0.15);
    --shadow-black-20: rgba(0, 0, 0, 0.2);
    --shadow-primary-12: rgba(37, 99, 235, 0.12);
    --shadow-primary-15: rgba(37, 99, 235, 0.15);
    --shadow-primary-20: rgba(37, 99, 235, 0.20);
    --shadow-primary-24: rgba(37, 99, 235, 0.24);
    --shadow-secondary-12: rgba(107, 114, 128, 0.12);
    --shadow-secondary-15: rgba(107, 114, 128, 0.15);
    --shadow-secondary-20: rgba(107, 114, 128, 0.20);
    --shadow-secondary-24: rgba(107, 114, 128, 0.24);
    --shadow-success-12: rgba(5, 150, 105, 0.12);
    --shadow-success-15: rgba(5, 150, 105, 0.15);
    --shadow-success-20: rgba(5, 150, 105, 0.20);
    --shadow-success-24: rgba(5, 150, 105, 0.24);
    --accent-teal-alpha: rgba(0, 164, 166, 0.1);
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: 'Source Sans Pro', arial, sans-serif;
    line-height: 1.6;
    color: var(--dark-text);
    background: var(--gradient-surface);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-size: var(--text-base);
    letter-spacing: -0.025em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-8) var(--spacing-6);
    margin-bottom: var(--spacing-6);
    border-bottom: 3px solid var(--accent-teal);
    position: relative;
    background: var(--gradient-card);
    color: var(--dark-text);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.header-text {
    flex-grow: 1;
    text-align: center;
}

.header h1 {
    margin: 0;
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--dark-text);
    font-family: 'Playfair Display', Georgia, serif;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px var(--accent-teal-alpha);
    letter-spacing: -0.025em;
}

.header p {
    margin: var(--spacing-2) 0 0;
    color: var(--color-gray-800);  /* Darker for better contrast */
    font-weight: 500;
}

.container {
    max-width: 1300px;
    margin: var(--spacing-6) auto;
    background: var(--gradient-card);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    overflow: visible !important;
    border: 1px solid var(--overlay-light);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* FIX (Nov 11, 2025): Ensure container never exceeds parent width */
    width: calc(100% - var(--spacing-12));
    box-sizing: border-box;
}

.main-content {
    display: block !important;
    width: 100% !important;
    min-height: 500px !important;
    padding: var(--spacing-8);
    background-color: var(--color-white) !important;
    color: var(--dark-text) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.section-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: var(--spacing-8); 
    flex-wrap: wrap; 
    gap: 10px; 
    border-bottom: 2px solid var(--border-light); 
    padding-bottom: 10px; 
}

.section-header h2 { 
    font-size: 1.4em; 
    color: var(--primary-color); 
    font-weight: 700;
    font-family: 'Playfair Display', Georgia, serif;
}

.header-buttons { display: flex; gap: 10px; }

/* Old button styles removed - using centralized button system */

.tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    /* FIX (Nov 12, 2025): Make tables section scrollable for easy navigation */
    /* Users need to scroll back to earlier tables to select forgotten columns */
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    /* Smooth scrolling for better UX */
    scroll-behavior: smooth;
}

/* Custom scrollbar styling for tables grid */
.tables-grid::-webkit-scrollbar {
    width: 10px;
}

.tables-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.tables-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #00a4a6 0%, #2563eb 100%);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.tables-grid::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #008b8d 0%, #1d4ed8 100%);
}

/* Firefox scrollbar styling */
.tables-grid {
    scrollbar-width: thin;
    scrollbar-color: #00a4a6 rgba(0, 0, 0, 0.05);
}

/* Dark theme scrollbar */
body.dark-theme .tables-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-theme .tables-grid {
    scrollbar-color: #3b82f6 rgba(255, 255, 255, 0.05);
}

.table-input-group { 
    background: var(--gradient-card); 
    border-radius: var(--radius-xl); 
    padding: var(--spacing-6); 
    box-shadow: var(--shadow-md); 
    border: 1px solid var(--overlay-light); 
    position: relative; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.table-input-group:hover { 
    border-color: var(--accent-teal); 
    box-shadow: var(--shadow-teal), var(--shadow-lg); 
    transform: translateY(-2px) scale(1.02);
}

.table-input-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 15px; 
}

.table-label { 
    font-weight: 700; 
    font-size: 1.1em; 
    color: var(--dark-text);
    font-family: 'Playfair Display', Georgia, serif;
}

.table-input, .table-alias { 
    width: 100%; 
    padding: var(--spacing-3) var(--spacing-4); 
    border: 2px solid transparent; 
    border-radius: var(--radius-lg); 
    font-size: var(--text-base); 
    background: var(--gradient-card) !important;
    color: var(--dark-text) !important;
    font-family: 'Source Sans Pro', arial, sans-serif;
    position: relative;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.table-input:focus, .table-alias:focus { 
    outline: none; 
    border-color: var(--accent-teal); 
    background: var(--gradient-card); 
    box-shadow: var(--shadow-teal), var(--shadow-lg); 
    transform: translateY(-2px) scale(1.02);
}

.table-alias { margin-top: var(--spacing-4); }

.table-validation { margin-top: var(--spacing-4); font-size: 0.9em; }

.validation-success { color: var(--accent-teal-dark); font-weight: 600; }

.validation-error { color: var(--status-error); font-weight: 600; }  /* Darker red for better contrast */

.column-selection { margin-top: 15px; display: none; }

.column-search { 
    width: 100%; 
    padding: var(--spacing-2) var(--spacing-4); 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-md); 
    font-size: var(--text-sm); 
    margin-bottom: 10px; 
    background: white;
    color: var(--dark-text);
}

.column-search:focus { 
    outline: none; 
    border-color: var(--accent-teal); 
    box-shadow: 0 0 0 2px var(--accent-teal-alpha); 
}

.column-controls { display: flex; gap: 10px; margin-bottom: 10px; }

.column-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 8px; 
    max-height: 150px; 
    overflow-y: auto; 
    background: var(--bg-muted);  /* Slightly darker for better contrast */ 
    padding: var(--spacing-4); 
    border-radius: var(--radius-md); 
    border: 1px solid var(--border-color); 
}

.column-grid label {
    display: flex;
    align-items: center;
    font-size: var(--text-xs);
    font-family: 'Source Sans Pro', arial, sans-serif;
    cursor: pointer;
    color: var(--text-primary);  /* Darker for better contrast */
    word-break: break-word;
    min-width: 0;
    padding: 2px 0;
}

.column-grid label.hidden { display: none; }

.column-with-aggregate.keyboard-selected { 
    background-color: var(--accent-teal-light); 
    border: 2px solid var(--accent-teal); 
    border-radius: var(--radius-md); 
}

.column-grid input { 
    margin-right: 8px; 
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Modern Checkboxes */
input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent-teal);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

input[type="checkbox"]:checked {
    background-color: var(--accent-teal);
    border-color: var(--accent-teal);
}

input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 1px;
    color: white;
    font-size: var(--text-xs);
    font-weight: bold;
}

input[type="checkbox"]:hover {
    border-color: var(--accent-teal-dark);
    background: var(--accent-teal-light);
}

.generate-section { 
    text-align: center; 
    margin: var(--spacing-8) 0; 
    background: var(--gradient-accent); 
    padding: var(--spacing-8); 
    border-radius: var(--radius-2xl); 
    border: 2px solid var(--accent-teal); 
    box-shadow: var(--shadow-teal), var(--shadow-lg); 
    position: relative;
    overflow: hidden;
}

.generate-section::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gradient-primary);
    border-radius: var(--radius-2xl);
    z-index: -1;
}

.generate-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-accent);
    border-radius: var(--radius-2xl);
    z-index: -1;
}

.sql-options { 
    display: flex; 
    gap: 30px; 
    justify-content: center; 
    margin-bottom: var(--spacing-8); 
    flex-wrap: wrap; 
}

.join-syntax-selector label, .use-indexes-toggle label { 
    font-weight: 700; 
    margin-right: 10px; 
    color: var(--text-primary);  /* Darker for better contrast */
}

#joinSyntax { 
    padding: var(--spacing-3) var(--spacing-5); 
    border-radius: var(--radius-md); 
    border: 1px solid var(--border-color); 
    font-size: var(--text-base); 
    background: white;
    color: var(--dark-text);
}

/* ========================================
   CENTRALIZED PROFESSIONAL BUTTON SYSTEM
   Modern, unified button design for all tabs
   ======================================== */

/* Base button styles - foundation for all buttons */
.btn, .action-button, .generate-button, .primary-btn, .secondary-btn, .admin-button,
button:not(.toggle-slider):not(.mode-toggle-slider):not(.aggregate-toggle-slider) {
    /* Reset default button styles */
    border: none;
    outline: none;
    text-decoration: none;

    /* Typography */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-size: var(--text-sm);
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.01em;

    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--spacing-4) var(--spacing-6);
    min-height: 36px;
    border-radius: var(--radius-lg);

    /* Interaction */
    cursor: pointer;
    user-select: none;

    /* Animation */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    /* PERFORMANCE: GPU acceleration for smooth hover/click */
    will-change: transform, box-shadow;
    transform: translateZ(0);
    backface-visibility: hidden;

    /* Default neutral button */
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-300) 100%);
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
    box-shadow: 0 1px 2px var(--shadow-black-5);
}

/* Primary Button - Main actions */
.btn-primary, .action-button, .generate-button, .primary-btn {
    background: linear-gradient(135deg, var(--btn-primary) 0%, var(--btn-primary-hover) 100%);
    color: var(--text-white);
    border: 1px solid var(--btn-primary-hover);
    box-shadow: 0 1px 3px var(--shadow-primary-12), 0 1px 2px var(--shadow-primary-24);
}

.btn-primary:hover, .action-button:hover, .generate-button:hover, .primary-btn:hover {
    background: linear-gradient(135deg, var(--btn-primary-hover) 0%, var(--btn-primary-active) 100%);
    border-color: var(--btn-primary-active);
    box-shadow: 0 4px 8px var(--shadow-primary-15), 0 2px 4px var(--shadow-primary-20);
    transform: translateY(-1px);
}

/* Secondary Button - Supporting actions */
.btn-secondary, .secondary-btn {
    background: linear-gradient(135deg, var(--btn-secondary) 0%, var(--btn-secondary-hover) 100%);
    color: var(--text-white);
    border: 1px solid var(--btn-secondary-hover);
    box-shadow: 0 1px 3px var(--shadow-secondary-12), 0 1px 2px var(--shadow-secondary-24);
}

.btn-secondary:hover, .secondary-btn:hover {
    background: linear-gradient(135deg, var(--btn-secondary-hover) 0%, var(--btn-secondary-active) 100%);
    border-color: var(--btn-secondary-active);
    box-shadow: 0 4px 8px var(--shadow-secondary-15), 0 2px 4px var(--shadow-secondary-20);
    transform: translateY(-1px);
}

/* Success Button - Positive actions */
.btn-success {
    background: linear-gradient(135deg, var(--btn-success) 0%, var(--btn-success-hover) 100%);
    color: var(--text-white);
    border: 1px solid var(--btn-success-hover);
    box-shadow: 0 1px 3px var(--shadow-success-12), 0 1px 2px var(--shadow-success-24);
}

.btn-success:hover {
    background: linear-gradient(135deg, var(--btn-success-hover) 0%, var(--btn-success-active) 100%);
    border-color: var(--btn-success-active);
    box-shadow: 0 4px 8px var(--shadow-success-15), 0 2px 4px var(--shadow-success-20);
    transform: translateY(-1px);
}

/* Warning Button - Caution actions */
.btn-warning {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #ffffff;
    border: 1px solid #b45309;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.12), 0 1px 2px rgba(217, 119, 6, 0.24);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    border-color: #92400e;
    box-shadow: 0 4px 8px rgba(217, 119, 6, 0.15), 0 2px 4px rgba(217, 119, 6, 0.20);
    transform: translateY(-1px);
}

/* Danger Button - Destructive actions */
.btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border: 1px solid #b91c1c;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.12), 0 1px 2px rgba(220, 38, 38, 0.24);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    border-color: #991b1b;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.15), 0 2px 4px rgba(220, 38, 38, 0.20);
    transform: translateY(-1px);
}

/* Info Button - Informational actions */
.btn-info {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: #ffffff;
    border: 1px solid #0e7490;
    box-shadow: 0 1px 3px rgba(8, 145, 178, 0.12), 0 1px 2px rgba(8, 145, 178, 0.24);
}

.btn-info:hover {
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
    border-color: #155e75;
    box-shadow: 0 4px 8px rgba(8, 145, 178, 0.15), 0 2px 4px rgba(8, 145, 178, 0.20);
    transform: translateY(-1px);
}

/* Outline Button Variants */
.btn-outline {
    background: transparent;
    border: 1px solid #dee2e6;
    color: #495057;
}

.btn-outline:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
    color: #495057;
}

.btn-outline-primary {
    background: transparent;
    border: 1px solid #2563eb;
    color: #2563eb;
}

.btn-outline-primary:hover {
    background: #2563eb;
    color: #ffffff;
}

/* Size Variants */
.btn-sm {
    padding: 6px 12px;
    font-size: var(--text-xs);
    min-height: 28px;
    border-radius: var(--radius-md);
}

.btn-lg {
    padding: 12px 24px;
    font-size: var(--text-base);
    min-height: 44px;
    border-radius: var(--radius-xl);
    font-weight: 600;
}

.btn-xl {
    padding: 16px 32px;
    font-size: 18px;
    min-height: 52px;
    border-radius: var(--radius-2xl);
    font-weight: 600;
}

/* Button States - Fixed specificity without !important */
.btn:disabled, 
.action-button:disabled, 
.generate-button:disabled, 
.primary-btn:disabled, 
.secondary-btn:disabled {
    background: #e9ecef;
    color: #6c757d;
    border-color: #dee2e6;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    opacity: 0.65;
}

/* Ensure disabled state overrides hover/focus */
.btn:disabled:hover,
.btn:disabled:focus,
.action-button:disabled:hover,
.action-button:disabled:focus,
.generate-button:disabled:hover,
.generate-button:disabled:focus,
.primary-btn:disabled:hover,
.primary-btn:disabled:focus,
.secondary-btn:disabled:hover,
.secondary-btn:disabled:focus {
    background: #e9ecef;
    color: #6c757d;
    border-color: #dee2e6;
    box-shadow: none;
    transform: none;
}

.btn:focus, .action-button:focus, .generate-button:focus, .primary-btn:focus, .secondary-btn:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.btn:active, .action-button:active, .generate-button:active, .primary-btn:active, .secondary-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Special Buttons */
.add-table-btn, .bulk-add-btn {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    border: 1px solid #047857;
    box-shadow: 0 1px 3px var(--shadow-success-12), 0 1px 2px var(--shadow-success-24);
}

.add-table-btn:hover, .bulk-add-btn:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    border-color: #065f46;
    box-shadow: 0 4px 8px var(--shadow-success-15), 0 2px 4px var(--shadow-success-20);
    transform: translateY(-1px);
}

/* Admin Buttons */
.admin-button {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    border: 1px solid #1d4ed8;
    box-shadow: 0 1px 3px var(--shadow-primary-12), 0 1px 2px var(--shadow-primary-24);
    padding: 12px 20px;
    font-weight: 500;
}

.admin-button:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    border-color: #1e40af;
    box-shadow: 0 4px 8px var(--shadow-primary-15), 0 2px 4px var(--shadow-primary-20);
    transform: translateY(-1px);
}

.admin-button.danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-color: #b91c1c;
}

.admin-button.danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    border-color: #991b1b;
}

/* Dark Theme Support */
body.dark-theme .btn,
body.dark-theme .action-button,
body.dark-theme .generate-button,
body.dark-theme .primary-btn,
body.dark-theme .secondary-btn,
body.dark-theme .admin-button,
body.dark-theme button:not(.toggle-slider):not(.mode-toggle-slider):not(.aggregate-toggle-slider) {
    /* Dark theme base styles */
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    color: #f9fafb;
    border-color: #4b5563;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

body.dark-theme .btn-primary,
body.dark-theme .action-button,
body.dark-theme .generate-button,
body.dark-theme .primary-btn,
body.dark-theme .admin-button {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.25), 0 1px 2px rgba(59, 130, 246, 0.35);
}

body.dark-theme .btn-primary:hover,
body.dark-theme .action-button:hover,
body.dark-theme .generate-button:hover,
body.dark-theme .primary-btn:hover,
body.dark-theme .admin-button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25), 0 2px 4px rgba(59, 130, 246, 0.35);
}

/* Remove old button effects and overrides */
.action-button::before,
.generate-button::before,
.action-button:hover::before,
.generate-button:hover::before {
    display: none;
}

/* ========================================
   CENTRALIZED PROFESSIONAL TOGGLE SYSTEM
   Modern, unified toggle design for all tabs
   ======================================== */

.use-indexes-toggle { display: flex; align-items: center; gap: 12px; }

/* Base toggle container - works for all toggle types */
.toggle-switch, .aggregate-toggle-switch, .mode-toggle-label {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 26px;
    vertical-align: middle;
    margin: 0;
    overflow: hidden;
    isolation: isolate;
    contain: layout style;
}

/* Specific aggregate toggle positioning */
.aggregate-toggle-switch {
    margin: 0 var(--spacing-4);
}

/* Hide the default checkbox */
.toggle-switch input[type="checkbox"],
.aggregate-toggle-switch input[type="checkbox"],
.mode-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Professional toggle slider design - unified for all toggle types */
.toggle-slider, .aggregate-toggle-slider, .mode-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 52px;
    height: 26px;
    background: linear-gradient(135deg, #e8eaed 0%, #f8f9fa 100%);
    border: 1px solid #dadce0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 13px;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.04),
        0 1px 3px rgba(0,0,0,0.08);
    z-index: 1;
    will-change: background, border-color, box-shadow;
    transform: translateZ(0);
}

/* Toggle handle - unified design */
.toggle-slider:before, .aggregate-toggle-slider:before, .mode-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    top: 2px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.12),
        0 1px 2px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.08);
}

/* Active/checked state - modern green accent */
input:checked + .toggle-slider,
input:checked + .aggregate-toggle-slider,
.mode-toggle-input:checked + .mode-toggle-slider {
    background: linear-gradient(135deg, #34a853 0%, #1e7e34 100%);
    border-color: #1e7e34;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.08),
        0 0 8px rgba(52, 168, 83, 0.25);
}

/* Focus state for accessibility */
input:focus + .toggle-slider,
input:focus + .aggregate-toggle-slider,
.mode-toggle-input:focus + .mode-toggle-slider {
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.04),
        0 1px 3px rgba(0,0,0,0.08),
        0 0 0 3px rgba(52, 168, 83, 0.2);
}

/* Handle position when checked - unified */
input:checked + .toggle-slider:before,
input:checked + .aggregate-toggle-slider:before,
.mode-toggle-input:checked + .mode-toggle-slider:before {
    transform: translateX(26px);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.18),
        0 1px 3px rgba(0,0,0,0.12);
}

/* Hover effects for better interaction feedback */
.toggle-slider:hover, .aggregate-toggle-slider:hover, .mode-toggle-slider:hover {
    border-color: #c4c7c5;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.06),
        0 2px 4px rgba(0,0,0,0.12);
}

input:checked + .toggle-slider:hover,
input:checked + .aggregate-toggle-slider:hover,
.mode-toggle-input:checked + .mode-toggle-slider:hover {
    background: linear-gradient(135deg, #3fb556 0%, #34a853 100%);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.1),
        0 0 12px rgba(52, 168, 83, 0.3);
}

/* SQL Comparison Toggle Container */
.sql-comparison-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    padding: 12px 0;
}

/* Toggle text label - positioned after the slider */
.toggle-text {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.95em;
    color: #333;
    font-weight: 500;
    user-select: none;
    cursor: pointer;
    vertical-align: middle;
}

/* Info tooltip icon */
.info-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 16px;
    cursor: help;
    color: #666;
    border-radius: 50%;
    transition: all 0.2s ease;
    position: relative;
}

.info-tooltip:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
    transform: scale(1.1);
}

/* Tooltip content on hover */
.info-tooltip:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #1f2937;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    white-space: normal;
    width: 280px;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    pointer-events: none;
}

/* Tooltip arrow */
.info-tooltip:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0px);
    border: 6px solid transparent;
    border-top-color: #1f2937;
    z-index: 1001;
}

/* Dark theme support - unified professional dark theme */
body.dark-theme .toggle-slider,
body.dark-theme .aggregate-toggle-slider,
body.dark-theme .mode-toggle-slider {
    background: linear-gradient(135deg, #3c4043 0%, #303134 100%);
    border-color: #5f6368;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.25),
        0 1px 3px rgba(0,0,0,0.15);
}

body.dark-theme input:checked + .toggle-slider,
body.dark-theme input:checked + .aggregate-toggle-slider,
body.dark-theme .mode-toggle-input:checked + .mode-toggle-slider {
    background: linear-gradient(135deg, #1a7431 0%, #137333 100%);
    border-color: #137333;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.15),
        0 0 8px rgba(26, 116, 49, 0.35);
}

body.dark-theme .toggle-slider:before,
body.dark-theme .aggregate-toggle-slider:before,
body.dark-theme .mode-toggle-slider:before {
    background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
    border-color: rgba(0,0,0,0.15);
}

body.dark-theme .toggle-slider:hover,
body.dark-theme .aggregate-toggle-slider:hover,
body.dark-theme .mode-toggle-slider:hover {
    border-color: #80868b;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.2);
}

/* Dark theme - toggle text */
body.dark-theme .toggle-text {
    color: #e8eaed;
}

/* Dark theme - info tooltip */
body.dark-theme .info-tooltip {
    color: #9aa0a6;
}

body.dark-theme .info-tooltip:hover {
    color: #8ab4f8;
    background: rgba(138, 180, 248, 0.1);
}

body.dark-theme .info-tooltip:hover::after {
    background: #f1f3f4;
    color: #202124;
}

body.dark-theme .info-tooltip:hover::before {
    border-top-color: #f1f3f4;
}

/* Small toggle variant for compact spaces */
.toggle-switch.small, .aggregate-toggle-switch.small {
    width: 42px;
    height: 22px;
}

.toggle-switch.small .toggle-slider,
.toggle-switch.small .aggregate-toggle-slider,
.aggregate-toggle-switch.small .toggle-slider,
.aggregate-toggle-switch.small .aggregate-toggle-slider {
    border-radius: 11px;
}

.toggle-switch.small .toggle-slider:before,
.toggle-switch.small .aggregate-toggle-slider:before,
.aggregate-toggle-switch.small .toggle-slider:before,
.aggregate-toggle-switch.small .aggregate-toggle-slider:before {
    height: 16px;
    width: 16px;
    top: 2px;
}

.toggle-switch.small input:checked + .toggle-slider:before,
.toggle-switch.small input:checked + .aggregate-toggle-slider:before,
.aggregate-toggle-switch.small input:checked + .toggle-slider:before,
.aggregate-toggle-switch.small input:checked + .aggregate-toggle-slider:before {
    transform: translateX(20px);
}

.results-section { 
    background: var(--light-bg); 
    border-radius: var(--radius-xl); 
    padding: 25px; 
    margin-top: 20px; 
    display: none; 
    border: 2px solid var(--accent-teal); 
    box-shadow: 0 2px 8px rgba(0, 164, 166, 0.1); 
}

.results-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 25px; 
    flex-wrap: wrap; 
    gap: 15px; 
}

.sql-output { 
    background: #1a1a1a;  /* Darker background for better contrast */ 
    color: #f0f0f0;  /* Lighter text for better contrast */ 
    padding: var(--spacing-8); 
    border-radius: var(--radius-md); 
    font-family: 'Courier New', monospace; 
    font-size: 0.95em; 
    line-height: 1.6; 
    overflow-x: auto; 
    white-space: pre-wrap; 
}

/* Intent display styling */
.intent-display {
    background: var(--accent-teal-light);
    border-left: 4px solid var(--accent-teal);
    padding: 15px;
    margin-bottom: 15px;
    font-weight: 600;
    border-radius: var(--radius-md);
    font-size: 1.1em;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 164, 166, 0.15);
    color: var(--text-primary);  /* Darker for better contrast */
}

.sql-keyword { color: #569cd6; font-weight: bold; }
.sql-table { color: #4ec9b0; }
.sql-string { color: #ce9178; }

/* Modern Labels */
label {
    color: var(--dark-text);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Button Container Styling */
.button-container {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    align-items: center;
}

/* Modern Section Headers */
.add-join-section h3, .add-join-section h4 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--accent-teal);
    font-weight: 600;
    margin-bottom: 16px;
    font-size: 24px;
}

.add-join-section h4 {
    font-size: 20px;
    margin-bottom: 12px;
}

.add-join-section p {
    color: var(--dark-text);
    line-height: 1.6;
    margin-bottom: 16px;
    font-size: var(--text-base);
}

/* Modern Textarea */
#etrmPasteArea {
    width: 100%;
    min-height: 120px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    color: var(--dark-text);
    font-family: 'Source Sans Pro', arial, sans-serif;
    font-size: var(--text-sm);
    resize: vertical;
    transition: all 0.3s ease;
}

#etrmPasteArea:focus {
    outline: none;
    border-color: var(--accent-teal);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(0, 164, 166, 0.1);
}

#etrmPasteArea::placeholder {
    color: var(--light-text);
}

.modern-panel {
    background: var(--color-white);
    border-radius: 12px;
    padding: 24px;
    margin: var(--spacing-10) 0;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Form Controls */
select, input[type="text"] {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--dark-text);
    padding: var(--spacing-3) var(--spacing-5);
    font-family: 'Source Sans Pro', arial, sans-serif;
    transition: all 0.2s ease;
}

select:focus, input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-teal);
    background: var(--light-bg);
    box-shadow: 0 0 0 2px var(--accent-teal-alpha);
}

/* Old duplicate button variants removed - using centralized system */

/* Additional contrast fixes - Fixed specificity */
.table-input-group .table-label {
    color: var(--text-dark, #1a1a1a);
}

.table-input-group .table-alias::placeholder,
.search-container .column-search::placeholder {
    color: var(--text-muted, #666666);
}

/* Removed conflicting toggle styles - now handled above */

/* Autocomplete Dropdown Styles - MISSING STYLES ADDED */
.table-input-container {
    position: relative;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-surface, white);
    background-image: none;
    border: 2px solid #e1e5e9;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1002;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* PERFORMANCE: GPU acceleration for smooth dropdown appearance */
    will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Dropdown visibility states - Fixed specificity */
.autocomplete-dropdown.show {
    display: block;
}

.autocomplete-dropdown.hidden,
.autocomplete-dropdown:not(.show) {
    display: none;
}

/* Ensure performance mode respects the show class */
.performance-mode .autocomplete-dropdown.show {
    display: block;
}

/* Ensure performance mode respects the hidden class too */
.performance-mode .autocomplete-dropdown.hidden {
    display: none !important;
}

body.dark-theme .autocomplete-dropdown {
    background: var(--bg-dark, #1a1a1a);
    background-image: none;
    border-color: var(--border-dark, #404040);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
}

.autocomplete-item:hover {
    background: #f8f9fa !important;
    color: #333 !important;
}

.autocomplete-item.selected {
    background: #007bff !important;
    color: white !important;
}

body.dark-theme .autocomplete-item {
    border-bottom-color: #333;
    color: #e0e0e0;
}

body.dark-theme .autocomplete-item:hover {
    background: #333 !important;
    color: #e0e0e0 !important;
}

body.dark-theme .autocomplete-item.selected {
    background: #0056b3 !important;
    color: white !important;
}

.autocomplete-item .table-name {
    font-weight: 600;
    font-size: var(--text-base);
    color: inherit;
}

.autocomplete-item .table-match {
    font-size: var(--text-xs);
    font-style: italic;
    opacity: 0.7;
    color: inherit;
}

.table-input-ghost {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    color: #999;
    z-index: 0;  /* Changed from 1 to 0 - ghost goes BEHIND */
    pointer-events: none;
    border: none;
    padding: 12px;
    font-family: inherit;
    font-size: inherit;
}

body.dark-theme .table-input-ghost {
    color: #666;
}

/* Search dropdown fixes for unified search */
.search-dropdown .dropdown-item {
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    display: block;
}

.search-dropdown .dropdown-item:hover {
    background: var(--accent-teal-light) !important;
    color: var(--dark-text) !important;
}

body.dark-theme .search-dropdown .dropdown-item:hover {
    background: #1a365d !important;
    color: var(--text-color-dark) !important;
}

.search-dropdown .dropdown-item .table-name,
.search-dropdown .dropdown-item .column-name {
    font-weight: 600;
    color: var(--dark-text) !important;
    margin-bottom: 2px;
}

body.dark-theme .search-dropdown .dropdown-item .table-name,
body.dark-theme .search-dropdown .dropdown-item .column-name {
    color: var(--text-color-dark) !important;
}

.search-dropdown .dropdown-item .table-info,
.search-dropdown .dropdown-item .column-info {
    font-size: var(--text-xs);
    color: var(--light-text) !important;
}

body.dark-theme .search-dropdown .dropdown-item .table-info,
body.dark-theme .search-dropdown .dropdown-item .column-info {
    color: var(--muted-text-dark) !important;
}

/* ========================================
   ENHANCED SIDEBAR STYLING
   ======================================== */

.sidebar {
    background: var(--gradient-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-xl);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-tab {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--radius-lg);
    margin: var(--spacing-1);
    position: relative;
    overflow: hidden;
    gap: 12px;
    color: #333;
    font-size: 14px;
}

.sidebar-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0.1;
    transition: left 0.3s ease;
}

.sidebar-tab:hover::before {
    left: 0;
}

.sidebar-tab:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}

.sidebar-tab.active {
    background: var(--gradient-accent);
    box-shadow: var(--shadow-teal);
    transform: translateX(4px);
}

/* Sidebar tab icon and text styling */
.sidebar-tab .tab-icon {
    font-size: 16px;
    width: 20px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Dark theme for sidebar tabs */
body.dark-theme .sidebar-tab {
    color: #e5e7eb;
}

/* Sidebar Link (for navigation items like Upgrade that don't open tabs) */
.sidebar-link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
    color: #333;
    font-size: 14px;
    gap: 12px;
    border-radius: var(--radius-lg);
    margin: var(--spacing-1);
    position: relative;
    overflow: hidden;
}

.sidebar-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0.1;
    transition: left 0.3s ease;
}

.sidebar-link:hover {
    background-color: #f0f4ff;
    border-left-color: #2563eb;
    box-shadow: var(--shadow-md);
}

.sidebar-link:hover::before {
    left: 0;
}

.sidebar-link .tab-icon {
    font-size: 16px;
    width: 20px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-link .tab-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark-theme .sidebar-link {
    color: #e5e7eb;
}

body.dark-theme .sidebar-link:hover {
    background-color: rgba(59, 130, 246, 0.1);
    border-left-color: #3b82f6;
}

body.dark-theme .sidebar {
    background: var(--gradient-dark-card);
    border-right-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .sidebar-tab.active {
    background: rgba(0, 164, 166, 0.2);
}

/* Sidebar Performance Mode Toggle */
.sidebar-performance-toggle {
    margin: 15px 8px !important;
    padding: 10px 12px !important;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    border: 2px solid #00a4a6 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 100 !important;
    min-height: 44px !important;
}

.sidebar-performance-toggle:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 164, 166, 0.3);
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

.sidebar-performance-toggle .perf-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.sidebar-performance-toggle .perf-text {
    color: white;
    font-size: var(--text-sm);
    font-weight: 600;
    flex: 1;
}

.sidebar-performance-toggle .perf-status {
    color: #aaa;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.sidebar-performance-toggle.active {
    background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
    border-color: #e55a2b;
}

.sidebar-performance-toggle.active:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #ff6b35 100%);
}

.sidebar-performance-toggle.active .perf-status {
    color: white;
    background: rgba(0, 0, 0, 0.3);
}

body.dark-theme .sidebar-performance-toggle {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-color: #00a4a6;
}

body.dark-theme .sidebar-performance-toggle:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

body.dark-theme .sidebar-performance-toggle.active {
    background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
}

/* Performance mode disables animations on the toggle */
.performance-mode .sidebar-performance-toggle {
    transition: none !important;
    transform: none !important;
}

.performance-mode .sidebar-performance-toggle:hover {
    transform: none !important;
}

/* Enhanced dark theme contrast fixes */
body.dark-theme {
    background: var(--gradient-dark-surface) !important;
    color: var(--text-color-dark) !important;
}

body.dark-theme .container {
    background: var(--gradient-dark-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-theme .header {
    background: var(--gradient-dark-card) !important;
}

body.dark-theme .header h1 {
    /* Use solid gradient color instead of transparent text for visibility */
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #5dade2 !important;
    background-clip: unset !important;
    color: #5dade2 !important;
}

body.dark-theme .generate-section {
    background: rgba(44, 62, 80, 0.1) !important;
    border-color: var(--accent-teal) !important;
}

body.dark-theme .generate-section::after {
    background: rgba(44, 62, 80, 0.1) !important;
}

body.dark-theme .table-input-group {
    background: var(--gradient-dark-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-theme .table-input, 
body.dark-theme .table-alias {
    background: var(--gradient-dark-card) !important;
    color: var(--input-text-dark) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-theme .loading-spinner {
    border-color: rgba(44, 62, 80, 0.3) !important;
    border-top-color: var(--accent-teal) !important;
}

body.dark-theme .table-label {
    color: var(--text-color-dark) !important;
}

body.dark-theme .column-grid {
    background: #1f1f1f !important;  /* Darker background for better contrast */
    color: var(--text-color-dark) !important;
    border: 1px solid var(--border-color-dark) !important;
}

body.dark-theme .column-grid label {
    color: var(--text-color-dark) !important;
}

body.dark-theme .table-input, 
body.dark-theme .table-alias,
body.dark-theme .column-search {
    background-color: var(--input-bg-dark) !important;
    color: var(--input-text-dark) !important;
    border: 1px solid var(--border-color-dark) !important;
    padding: 10px 12px !important;
}

body.dark-theme .table-input::placeholder,
body.dark-theme .table-alias::placeholder,
body.dark-theme .column-search::placeholder {
    color: #888888 !important;
    opacity: 0.8 !important;
}

body.dark-theme .table-input:focus,
body.dark-theme .table-alias:focus,
body.dark-theme .column-search:focus {
    background-color: #333333 !important;
    border-color: var(--focus-border-dark) !important;
    box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2) !important;
    outline: none !important;
}

body.dark-theme .validation-success {
    color: #4ade80 !important;  /* Brighter green for dark theme */
}

body.dark-theme .validation-error {
    color: #f87171 !important;  /* Brighter red for dark theme */
}

body.dark-theme .intent-display {
    color: var(--text-color-dark) !important;
    background: rgba(0, 164, 166, 0.2) !important;
}

body.dark-theme .sql-output {
    background: #0f0f0f !important;  /* Very dark background for code */
    color: #f0f0f0 !important;  /* Light text for code */
    border: 1px solid var(--border-color-dark) !important;
}

/* Additional dark mode enhancements for better visibility */
body.dark-theme .table-input-group {
    background: var(--card-bg-dark) !important;
    border: 1px solid var(--border-color-dark) !important;
}

body.dark-theme .table-input-group:hover {
    border-color: var(--focus-border-dark) !important;
    box-shadow: 0 2px 8px rgba(93, 173, 226, 0.15) !important;
}

body.dark-theme select,
body.dark-theme input[type="text"],
body.dark-theme input[type="number"],
body.dark-theme textarea {
    background-color: var(--input-bg-dark) !important;
    color: var(--input-text-dark) !important;
    border: 1px solid var(--border-color-dark) !important;
}

body.dark-theme select:focus,
body.dark-theme input[type="text"]:focus,
body.dark-theme input[type="number"]:focus,
body.dark-theme textarea:focus {
    background-color: #333333 !important;
    border-color: var(--focus-border-dark) !important;
    box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.2) !important;
    outline: none !important;
}

body.dark-theme .btn,
body.dark-theme button {
    background: var(--accent-teal) !important;
    color: #ffffff !important;
    border: 1px solid var(--accent-teal) !important;
}

body.dark-theme .btn:hover,
body.dark-theme button:hover {
    background: var(--accent-teal-dark) !important;
    border-color: var(--accent-teal-dark) !important;
}

body.dark-theme .header {
    background: var(--card-bg-dark) !important;
    border-bottom: 3px solid var(--accent-teal) !important;
}

body.dark-theme .header h1 {
    color: var(--text-color-dark) !important;
}

body.dark-theme .header p {
    color: var(--muted-text-dark) !important;
}

body.dark-theme .container {
    background: var(--card-bg-dark) !important;
    border: 1px solid var(--border-color-dark) !important;
}

body.dark-theme .main-content {
    background-color: var(--card-bg-dark) !important;
    color: var(--text-color-dark) !important;
}

body.dark-theme .section-header {
    border-bottom: 2px solid var(--border-color-dark) !important;
}

body.dark-theme .section-header h2 {
    /* Override transparent text fill for visibility in dark mode */
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--text-color-dark) !important;
    background-clip: unset !important;
    color: var(--text-color-dark) !important;
}

body.dark-theme .column-item {
    background: #2a2a2a !important;
    border: 1px solid var(--border-color-dark) !important;
    color: var(--text-color-dark) !important;
}

body.dark-theme .column-item:hover {
    background: #333333 !important;
    border-color: var(--focus-border-dark) !important;
}

body.dark-theme input[type="checkbox"] {
    background: var(--input-bg-dark) !important;
    border: 2px solid var(--border-color-dark) !important;
}

body.dark-theme input[type="checkbox"]:checked {
    background-color: var(--accent-teal) !important;
    border-color: var(--accent-teal) !important;
}

body.dark-theme input[type="checkbox"]:hover {
    border-color: var(--focus-border-dark) !important;
    background: #333333 !important;
}

body.dark-theme .autocomplete-dropdown {
    background: var(--card-bg-dark) !important;
    border: 1px solid var(--border-color-dark) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

body.dark-theme .autocomplete-dropdown .dropdown-item {
    color: var(--text-color-dark) !important;
    background: var(--card-bg-dark) !important;
}

body.dark-theme .autocomplete-dropdown .dropdown-item:hover,
body.dark-theme .autocomplete-dropdown .dropdown-item.selected {
    background: #333333 !important;
}

body.dark-theme .autocomplete-dropdown .dropdown-item .highlight {
    background: rgba(0, 212, 214, 0.3) !important;
    color: #ffffff !important;
    font-weight: bold;
}

body.dark-theme .table-input-ghost {
    color: #666666 !important;
}

/* ========================================
   MODERN LOADING ANIMATIONS (OPTIMIZED FOR NORMAL MODE)
   ======================================== */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

@keyframes shimmer {
    0% { background-position: -1200px 0; }
    100% { background-position: 1200px 0; }
}

/* PERFORMANCE OPTIMIZATION: Use GPU acceleration for smooth animations */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--accent-teal-light);
    border-top: 4px solid var(--accent-teal);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: var(--spacing-4) auto;
    will-change: transform; /* Hint browser to optimize animation */
    transform: translateZ(0); /* Force GPU acceleration */
    backface-visibility: hidden; /* Improve animation smoothness */
}

.loading-dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2);
    margin: var(--spacing-4) 0;
}

.loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-teal);
    animation: pulse 1.4s ease-in-out infinite;
    will-change: transform, opacity; /* Optimize dot animations */
    transform: translateZ(0); /* GPU acceleration */
}

.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

.shimmer-effect {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 1200px 100%;
    animation: shimmer 2s infinite;
    will-change: background-position; /* Optimize shimmer */
}

.loading-text {
    text-align: center;
    color: var(--light-text);
    font-size: var(--text-sm);
    margin-top: var(--spacing-2);
    animation: pulse 2s infinite;
}

/* ========================================
   ANIMATED INFINITY SYMBOL FOR AI ASSISTANT
   ======================================== */

.ai-infinity-icon {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    margin: 0 auto;
}

.infinity-symbol {
    position: relative;
    width: 28px;
    height: 16px;
}

.infinity-svg {
    width: 100%;
    height: 100%;
}

.infinity-path {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Light mode colors */
.infinity-symbol.light-mode .infinity-path {
    stroke: #2563eb;
    filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.4));
}

/* Dark mode colors */
body.dark-theme .infinity-symbol .infinity-path {
    stroke: #60a5fa !important;
    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.6)) !important;
}

/* Coursing animation dots */
.infinity-course-dot {
    r: 2;
    fill: #ffffff;
    opacity: 0.9;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}

body.dark-theme .infinity-course-dot {
    fill: #ffffff !important;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1)) !important;
}

.infinity-course-dot.blue {
    fill: #3b82f6;
    filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.8));
}

body.dark-theme .infinity-course-dot.blue {
    fill: #93c5fd !important;
    filter: drop-shadow(0 0 4px rgba(147, 197, 253, 1)) !important;
}

/* Coursing animation along the infinity path */
.infinity-course-dot {
    animation: infinity-course 4s linear infinite;
}

.infinity-course-dot:nth-child(2) {
    animation-delay: -1s;
}

.infinity-course-dot:nth-child(3) {
    animation-delay: -2s;
}

.infinity-course-dot:nth-child(4) {
    animation-delay: -3s;
}

@keyframes infinity-course {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

/* Pulsing glow effect for the container */
.ai-infinity-icon {
    animation: infinity-glow 4s ease-in-out infinite;
}

@keyframes infinity-glow {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.7));
    }
}

body.dark-theme .ai-infinity-icon {
    animation: infinity-glow-dark 4s ease-in-out infinite;
}

@keyframes infinity-glow-dark {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.8));
    }
}

/* FIX: Ensure table input text is always visible */
.table-input, 
.table-alias,
input.table-input,
/* Input styling with proper specificity */
.table-input-group input.table-alias,
input.table-alias {
    color: var(--text-dark, #1a1a1a);
    background-color: var(--bg-surface, #ffffff);
    -webkit-text-fill-color: var(--text-dark, #1a1a1a);
    position: relative;
    z-index: var(--z-input);
}

/* Dark theme specific fix */
body.dark-theme .table-input,
body.dark-theme .table-alias,
body.dark-theme input.table-input,
body.dark-theme input.table-alias {
    color: #ffffff !important;  /* White text for dark backgrounds */
    background-color: #2a2a2a !important;  /* Dark background */
    -webkit-text-fill-color: #ffffff !important;
}

/* Ensure placeholders are visible */
.table-input::placeholder,
.table-alias::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

body.dark-theme .table-input::placeholder,
body.dark-theme .table-alias::placeholder {
    color: #888888 !important;
    opacity: 1 !important;
}

/* Enhanced version for tab hover effect */
.sidebar-tab[data-tab="ai-assistant"]:hover .ai-infinity-icon {
    animation: infinity-glow-intense 2s ease-in-out infinite;
}

@keyframes infinity-glow-intense {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(59, 130, 246, 1));
        transform: scale(1.1);
    }
}

body.dark-theme .sidebar-tab[data-tab="ai-assistant"]:hover .ai-infinity-icon {
    animation: infinity-glow-intense-dark 2s ease-in-out infinite;
}

@keyframes infinity-glow-intense-dark {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.7));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(96, 165, 250, 1));
        transform: scale(1.1);
    }
}

/* Old duplicate optimizer button styles removed - using centralized system */

/* ========================================
   FINAL VISUAL ENHANCEMENTS
   ======================================== */

/* Smooth scrolling for the entire app */
html {
    scroll-behavior: smooth;
}

/* Enhanced section headers */
.section-header h2 {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
}

/* Enhanced intent radio buttons */
.intent-option label {
    background: var(--gradient-card);
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.intent-option label:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-teal);
}

.intent-option input:checked + label {
    background: var(--gradient-accent);
    border-color: var(--accent-teal);
    box-shadow: var(--shadow-teal);
    transform: translateY(-2px) scale(1.02);
}

/* Enhanced results section */
.results-section {
    background: var(--gradient-card);
    border: 2px solid var(--accent-teal);
    box-shadow: var(--shadow-teal), var(--shadow-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Enhanced SQL output */
.sql-output {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Enhanced notification styles */
.notification {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* TARGETED CONTRAST FIXES - Specific Issues Only */
/* Based on detailed analysis of each tab and section */

/* BALANCED INPUT FIELD CONTRAST - Works in both modes */
input, textarea, select {
    /* Use CSS variables for proper theme switching */
    color: var(--dark-text); /* Dark text for light mode */
    background-color: var(--light-bg); /* White background */
    border: 1px solid var(--border-color); /* Theme-appropriate border */
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    font-weight: 500; /* Slightly bolder for better visibility */
}

/* Dark theme input styling - Proper CSS variable usage */
body.dark-theme input, 
body.dark-theme textarea, 
body.dark-theme select {
    color: var(--input-text-dark); /* White text defined in variables */
    background-color: var(--input-bg-dark); /* Dark background from variables */
    border-color: var(--border-color-dark); /* Dark theme border */
}

/* Focus states with good contrast */
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--accent-teal);
    outline-offset: 1px;
    border-color: var(--accent-teal);
}

body.dark-theme input:focus,
body.dark-theme textarea:focus,
body.dark-theme select:focus {
    background-color: #2a2a2a;
    box-shadow: 0 0 8px rgba(0, 164, 166, 0.3);
}

/* BALANCED PLACEHOLDERS - Theme-aware */
input::placeholder, textarea::placeholder {
    color: var(--light-text); /* Medium gray for light mode */
    opacity: 0.8;
    font-weight: 500;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
    color: var(--muted-text-dark); /* Light gray for dark mode */
    opacity: 0.9;
    font-weight: 500;
}

/* SQL Output and Syntax Highlighting */
.sql-output {
    background: #f8f9fa;
    color: #212529;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
}

body.dark-theme .sql-output {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #404040;
}

/* SQL Syntax Highlighting */
.sql-keyword {
    color: #0066cc;
    font-weight: 600;
}

body.dark-theme .sql-keyword {
    color: #66b3ff;
}

.sql-table {
    color: #cc6600;
    font-weight: 500;
}

body.dark-theme .sql-table {
    color: #ffaa66;
}

.sql-string {
    color: #009900;
}

body.dark-theme .sql-string {
    color: #66ff66;
}

.sql-number {
    color: #990099;
}

body.dark-theme .sql-number {
    color: #ff66ff;
}

/* Fix hardcoded inline styles with CSS overrides */
/* Intent and Aggregate sections */
.intent-section,
.aggregate-section {
    background: var(--gradient-card) !important;
    border: 2px solid var(--accent-teal) !important;
    box-shadow: 0 8px 32px rgba(0, 164, 166, 0.1) !important;
}

body.dark-theme .intent-section,
body.dark-theme .aggregate-section {
    background: var(--gradient-dark-card) !important;
    border-color: var(--accent-teal) !important;
    box-shadow: 0 8px 32px rgba(0, 164, 166, 0.2) !important;
}

/* BALANCED RADIO BUTTON LABELS - Theme-aware */
.intent-option label,
.intent-section label {
    background: var(--gradient-card) !important;
    color: var(--dark-text) !important; /* Use theme variable for text */
    border-color: var(--border-color) !important;
    font-weight: 600 !important; /* Bold for visibility */
}

body.dark-theme .intent-option label,
body.dark-theme .intent-section label {
    background: var(--gradient-dark-card) !important;
    color: var(--text-color-dark) !important; /* Light text for dark mode */
    border-color: var(--border-color-dark) !important;
    font-weight: 600 !important;
}

/* Ensure text inside labels is also properly colored */
.intent-option label *,
.intent-section label * {
    color: inherit !important;
}

/* Override problematic hardcoded colors */
[style*="background: #e74c3c"] {
    background: #dc3545 !important;
    color: #ffffff !important;
}

body.dark-theme [style*="background: #e74c3c"] {
    background: #c82333 !important;
    color: #ffffff !important;
}

[style*="background: #28a745"] {
    background: #28a745 !important;
    color: #ffffff !important;
}

body.dark-theme [style*="background: #28a745"] {
    background: #34ce57 !important;
    color: #ffffff !important;
}

[style*="background: #17a2b8"] {
    background: #17a2b8 !important;
    color: #ffffff !important;
}

body.dark-theme [style*="background: #17a2b8"] {
    background: #20c0db !important;
    color: #ffffff !important;
}

/* Badge components dark theme support */
body.dark-theme .badge-red { 
    background-color: #7f1d1d; 
    color: #fecaca; 
}

body.dark-theme .badge-orange { 
    background-color: #7c2d12; 
    color: #fed7aa; 
}

body.dark-theme .badge-yellow { 
    background-color: #78350f; 
    color: #fef3c7; 
}

body.dark-theme .badge-blue { 
    background-color: #1e3a8a; 
    color: #dbeafe; 
}

/* Primary button styling for SQL copy button and similar */
.action-button.primary {
    background-color: #007bff;
    color: #ffffff;
}

body.dark-theme .action-button.primary {
    background-color: #0d6efd;
    color: #ffffff;
}

.action-button.primary:hover {
    background-color: #0056b3;
}

body.dark-theme .action-button.primary:hover {
    background-color: #0b5ed7;
}

/* ULTIMATE OVERRIDE - Maximum specificity to regain color control */
/* These rules have the highest possible CSS specificity to override everything */

html body.dark-theme input,
html body.dark-theme textarea, 
html body.dark-theme select,
html body input[style],
html body textarea[style],
html body select[style] {
    color: #ffffff !important;
    background-color: #1a1a1a !important;
    border: 1px solid #666666 !important;
    -webkit-text-fill-color: #ffffff !important; /* Override webkit autofill */
}

html body:not(.dark-theme) input,
html body:not(.dark-theme) textarea,
html body:not(.dark-theme) select,
html body:not(.dark-theme) input[style],
html body:not(.dark-theme) textarea[style], 
html body:not(.dark-theme) select[style] {
    color: #000000 !important;
    background-color: #ffffff !important;
    border: 1px solid #333333 !important;
    -webkit-text-fill-color: #000000 !important; /* Override webkit autofill */
}

/* Ultra-high specificity placeholder overrides */
html body.dark-theme input::placeholder,
html body.dark-theme textarea::placeholder,
html body input[style]::placeholder,
html body textarea[style]::placeholder {
    color: #cccccc !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #cccccc !important;
}

html body:not(.dark-theme) input::placeholder,
html body:not(.dark-theme) textarea::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #666666 !important;
}

/* Override any inline styles on labels and text */
html body.dark-theme label,
html body.dark-theme label *,
html body.dark-theme .intent-section *,
html body.dark-theme .aggregate-section *,
html body.dark-theme h1,
html body.dark-theme h2,
html body.dark-theme h3,
html body.dark-theme h4 {
    color: #ffffff !important;
}

html body:not(.dark-theme) label,
html body:not(.dark-theme) label *,
html body:not(.dark-theme) .intent-section *,
html body:not(.dark-theme) .aggregate-section *,
html body:not(.dark-theme) h1,
html body:not(.dark-theme) h2,
html body:not(.dark-theme) h3,
html body:not(.dark-theme) h4 {
    color: #000000 !important;
}

/* Override debug panel and any inline styled elements */
html body [style*="color"],
html body [style*="background"] {
    /* Let our rules take precedence */
}

html body.dark-theme [style*="color: #333"],
html body.dark-theme [style*="color: #666"],
html body.dark-theme [style*="color: #888"],
html body.dark-theme [style*="background: white"],
html body.dark-theme [style*="background: #fff"] {
    color: #ffffff !important;
    background-color: #1a1a1a !important;
}

/* SMART TEXT CONTRAST FIXES - Theme-aware but not overly aggressive */

/* Base text colors using CSS variables */
body {
    color: var(--dark-text); /* Dark text for light mode */
}

body.dark-theme {
    color: var(--text-color-dark); /* Light text for dark mode */
}

/* Headers should be clearly visible in both modes */
h1, h2, h3, h4, h5, h6 {
    color: var(--dark-text);
    font-weight: 700; /* Make headers bolder */
}

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
    color: var(--text-color-dark);
}

/* Specific section overrides for better contrast */
.intent-section,
.aggregate-section {
    color: var(--dark-text);
}

body.dark-theme .intent-section,
body.dark-theme .aggregate-section {
    color: var(--text-color-dark);
}

/* Override problematic muted text only where needed */
.text-muted,
.muted {
    color: var(--light-text) !important; /* Use theme variable */
}

body.dark-theme .text-muted,
body.dark-theme .muted {
    color: var(--muted-text-dark) !important;
}

/* PERFORMANCE MODE - Optimized for minimal browser overhead */
/* Consolidated universal selectors to reduce style recalculation */
/* FIX Nov 10, 2025: Removed transform: none to prevent layout breakage */
.performance-mode *,
.performance-mode *::before,
.performance-mode *::after {
    /* Disable animations and transitions */
    animation-duration: 0.01ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;

    /* Remove expensive visual effects */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important; /* Safari support */
    background-attachment: initial !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;

    /* Optimize scrolling */
    scroll-behavior: auto !important;

    /* Laptop-specific: Reduce GPU overhead */
    will-change: auto !important;
    /* REMOVED: transform: none !important; - This was breaking layout positioning */
    /* REMOVED: -webkit-transform: none !important; - This was breaking layout positioning */
}

/* Laptop optimization: Disable expensive gradients */
.performance-mode .sidebar,
.performance-mode .container,
.performance-mode .header {
    background-color: #ffffff !important;
    background-image: none !important;
}

.performance-mode.dark-theme .sidebar,
.performance-mode.dark-theme .container,
.performance-mode.dark-theme .header {
    background-color: #1a1a1a !important;
    background-image: none !important;
}

/* Laptop optimization: Simplify borders and shadows */
.performance-mode .card,
.performance-mode .section,
.performance-mode .button,
.performance-mode button {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
}

.performance-mode.dark-theme .card,
.performance-mode.dark-theme .section,
.performance-mode.dark-theme .button,
.performance-mode.dark-theme button {
    border-color: #404040 !important;
}

/* Laptop optimization: Disable SVG animations */
.performance-mode svg {
    animation: none !important;
}

/* Performance mode: hide animated dots but keep icon visible */
.performance-mode .infinity-course-dot {
    display: none !important;
}

.performance-mode .ai-infinity-icon {
    animation: none !important;
}

/* Dropdowns and critical UI positioning - consolidated rules */
.performance-mode .table-input-container .autocomplete-dropdown,
.performance-mode .autocomplete-dropdown {
    transform: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--z-performance-elements);
    margin: 0 !important;
}

.performance-mode .table-input-container {
    position: relative !important;
}

.performance-mode .dropdown,
.performance-mode [class*="dropdown"]:not(.autocomplete-dropdown),
.performance-mode [id*="dropdown"] {
    transform: none !important;
    position: absolute !important;
    z-index: var(--z-modal);
}

/* Fix text visibility issues in performance mode - reduced specificity */
.performance-mode .header h1,
.performance-mode .section-header h2 {
    -webkit-text-fill-color: var(--dark-text) !important;
    color: var(--dark-text) !important;
    background: transparent !important;
}

.performance-mode.dark-theme .header h1,
.performance-mode.dark-theme .section-header h2 {
    -webkit-text-fill-color: var(--text-color-dark) !important;
    color: var(--text-color-dark) !important;
}

/* Theme-aware background handling in performance mode */
/* CRITICAL FIX Nov 10, 2025: Use background-color instead of background shorthand */
/* The universal background-image: none rule was making containers transparent */
.performance-mode .container {
    background-color: #ffffff !important;
    background-image: none !important;
}

.performance-mode.dark-theme .container {
    background-color: #1f1f1f !important;
    background-image: none !important;
}

.performance-mode .header {
    background-color: var(--accent-teal) !important;
    background-image: none !important;
}

/* Ensure main content areas have solid backgrounds in performance mode */
.performance-mode .main-content,
.performance-mode .tab-content,
.performance-mode .tab-pane {
    background-color: #ffffff !important;
    background-image: none !important;
}

.performance-mode.dark-theme .main-content,
.performance-mode.dark-theme .tab-content,
.performance-mode.dark-theme .tab-pane {
    background-color: #1a1a1a !important;
    background-image: none !important;
}

/* Ensure sections and cards are visible */
.performance-mode .tables-section,
.performance-mode .intent-section,
.performance-mode .tool-card,
.performance-mode .section {
    background-color: #f8f9fa !important;
    background-image: none !important;
}

.performance-mode.dark-theme .tables-section,
.performance-mode.dark-theme .intent-section,
.performance-mode.dark-theme .tool-card,
.performance-mode.dark-theme .section {
    background-color: #2a2a2a !important;
    background-image: none !important;
}

.performance-mode .generate-button {
    background-color: var(--accent-teal) !important;
    background-image: none !important;
}

/* Performance mode table input text visibility fixes - optimized specificity */
.performance-mode .table-input,
.performance-mode .table-alias,
.performance-mode input.table-input,
.performance-mode input.table-alias {
    color: #ffffff !important;
    background-color: #2a2a2a !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #404040 !important;
    caret-color: #ffffff !important;
}

.performance-mode:not(.dark-theme) .table-input,
.performance-mode:not(.dark-theme) .table-alias,
.performance-mode:not(.dark-theme) input.table-input,
.performance-mode:not(.dark-theme) input.table-alias {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #1a1a1a !important;
    border: 1px solid #e1e5e9 !important;
    caret-color: #1a1a1a !important;
}

.performance-mode .table-input::placeholder,
.performance-mode .table-alias::placeholder {
    color: #888888 !important;
    opacity: 1 !important;
}

/* NUCLEAR OPTION: Comprehensive browser autofill and default overrides */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input.table-input:-webkit-autofill,
input.table-alias:-webkit-autofill {
    -webkit-text-fill-color: #1a1a1a !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    background-color: #ffffff !important;
    background-clip: content-box !important;
}

body.dark-theme input:-webkit-autofill,
body.dark-theme input:-webkit-autofill:hover,
body.dark-theme input:-webkit-autofill:focus,
body.dark-theme input:-webkit-autofill:active,
body.dark-theme input.table-input:-webkit-autofill,
body.dark-theme input.table-alias:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #2a2a2a inset !important;
    box-shadow: 0 0 0 1000px #2a2a2a inset !important;
    background-color: #2a2a2a !important;
}

/* Performance mode autofill - consolidated */
.performance-mode input:-webkit-autofill,
.performance-mode input:-webkit-autofill:hover,
.performance-mode input:-webkit-autofill:focus,
.performance-mode input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #2a2a2a inset !important;
    box-shadow: 0 0 0 1000px #2a2a2a inset !important;
    background-color: #2a2a2a !important;
}

.performance-mode:not(.dark-theme) input:-webkit-autofill,
.performance-mode:not(.dark-theme) input:-webkit-autofill:hover,
.performance-mode:not(.dark-theme) input:-webkit-autofill:focus,
.performance-mode:not(.dark-theme) input:-webkit-autofill:active {
    -webkit-text-fill-color: #1a1a1a !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    background-color: #ffffff !important;
}

/* Reset browser input defaults completely */
input.table-input,
input.table-alias {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    outline: none !important;
    border: none !important;
    background: none !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* CRITICAL: Ensure solid dropdown backgrounds in performance mode */
.performance-mode .autocomplete-dropdown {
    background: var(--bg-surface, white);
    background-image: none;
    z-index: var(--z-performance-dropdowns);
}

.performance-mode.dark-theme .autocomplete-dropdown {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    background-image: none !important;
    z-index: var(--z-performance-dropdowns);
}

.performance-mode .search-dropdown {
    background: var(--bg-surface, white);
    background-image: none;
    z-index: var(--z-performance-dropdowns);
}

.performance-mode.dark-theme .search-dropdown {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    background-image: none !important;
    z-index: var(--z-performance-dropdowns);
}

/* Ensure dropdown items have solid hover backgrounds */
.performance-mode .autocomplete-dropdown .dropdown-item:hover,
.performance-mode .search-dropdown .dropdown-item:hover {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
}

.performance-mode.dark-theme .autocomplete-dropdown .dropdown-item:hover,
.performance-mode.dark-theme .search-dropdown .dropdown-item:hover {
    background: #333333 !important;
    background-color: #333333 !important;
}

/* Z-INDEX HIERARCHY FIX: Prevent text overlap with intent section */
.intent-section {
    position: relative !important;
    z-index: var(--z-base);
    overflow: visible !important;
}

.intent-grid {
    overflow: visible !important;
    z-index: var(--z-base);
}

/* Performance mode intent section positioning */
.performance-mode .intent-section {
    transform: none !important;
    position: relative !important;
    z-index: var(--z-base);
}

/* Performance mode indicator in top-right corner */
.performance-indicator {
    position: fixed;
    top: 10px;
    right: 10px;
    background: #ff6b35;
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 600;
    z-index: 10000;
    display: none;
}

.performance-mode .performance-indicator {
    display: block;
}

/* Performance mode toggle button */
.performance-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: 2px solid #00a4a6;
    color: white;
    padding: 12px 16px;
    border-radius: var(--radius-xl);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.performance-toggle:hover {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 164, 166, 0.4);
}

.performance-toggle.active {
    background: #ff6b35;
    border-color: #e55a2b;
}

.performance-toggle.active:hover {
    background: #e55a2b;
    transform: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Performance mode disables hover effects on the toggle itself */
.performance-mode .performance-toggle {
    transition: none !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.performance-mode .performance-toggle:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Auto-hide toggle on very small screens */
@media (max-width: 480px) {
    .performance-toggle {
        bottom: 10px;
        right: 10px;
        padding: var(--spacing-3) var(--spacing-5);
        font-size: var(--text-xs);
    }
}

/* Print styles */
@media print {
    .sidebar,
    .theme-toggle,
    .action-button {
        display: none !important;
    }
    
    .container {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .main-wrapper {
        margin-left: 0 !important;
    }
}

/* ========================================
   UTILITY CLASSES FOR INLINE STYLE REPLACEMENT
   ======================================== */

/* Debug Panel Utilities */
.debug-panel-header {
    padding: 15px;
    background: var(--bg-dark, #2a2a2a);
    border-bottom: 1px solid var(--border-dark, #444);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.debug-panel-header h3 {
    margin: 0;
    color: var(--color-primary, #2c3e50);
}

.debug-close-btn {
    background: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 20px;
}

/* Tab Navigation Utilities */
.tab-navigation {
    display: flex;
    background: var(--bg-dark, #2a2a2a);
    border-bottom: 1px solid var(--border-dark, #444);
    overflow-x: auto;
}

.tab-button {
    padding: 10px 15px;
    background: transparent;
    color: #888;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.tab-button.active {
    color: #fff;
    border-bottom-color: var(--accent-teal, #00a4a6);
}

.tab-button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Form Input Utilities */
.form-input-full {
    width: 100%;
    padding: 8px;
    border: 2px solid #ddd;
    border-radius: var(--radius-md);
}

.form-input-standard {
    width: 100%;
    padding: var(--spacing-md, 12px);
    border: 2px solid var(--border-light, #ddd);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-surface, white);
    color: var(--text-dark, #1a1a1a);
}

/* Layout Utilities */
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* Spacing Utilities */
.m-0 { margin: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: var(--spacing-8); }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }

.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }

/* Background Utilities */
.bg-dark { background: var(--bg-dark, #2a2a2a); }
.bg-surface { background: var(--bg-surface, white); }
.bg-transparent { background: transparent; }

/* Border Utilities */
.border-bottom-dark { border-bottom: 1px solid var(--border-dark, #444); }
.border-standard { border: 2px solid var(--border-light, #ddd); }

/* Color Utilities */
.text-white { color: #fff; }
.text-muted { color: var(--text-muted, #888); }
.text-primary { color: var(--color-primary, #2c3e50); }

/* Position Utilities */
.position-relative { position: relative; }
.position-fixed { position: fixed; }
.position-absolute { position: absolute; }

/* JavaScript Replacement Classes */
.js-input-positioned {
    position: relative;
    z-index: var(--z-input);
}

.js-dropdown-positioned {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-performance-elements);
    transform: none;
    margin-top: 0;
}

.js-dropdown-visible {
    display: block;
}

.js-dropdown-hidden {
    display: none;
}

/* Performance Mode Specific */
.performance-mode .js-dropdown-positioned {
    z-index: var(--z-performance-dropdowns);
}
/* ============================================
   MODAL STYLES
   ============================================ */

/* Modal Overlay */
.modal {
    display: none;
    position: fixed;
    z-index: 10001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-in;
}

/* Modal Content Box */
.modal .modal-content {
    background-color: #ffffff;
    margin: 5% auto;
    padding: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: slideDown 0.3s ease-out;
}

/* Modal Close Button */
.modal .close-btn {
    color: #999;
    float: right;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
    position: absolute;
    right: 20px;
    top: 20px;
}

.modal .close-btn:hover,
.modal .close-btn:focus {
    color: #333;
}

/* Modal Title */
.modal h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
    font-weight: 600;
}

/* Modal Paragraph */
.modal p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Bulk Add Examples Section */
.bulk-add-examples {
    background: #f8f9fa;
    border-left: 4px solid #00a4a6;
    padding: 15px;
    margin: 20px 0;
    border-radius: 6px;
}

.bulk-add-examples h4 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #00a4a6;
    font-size: 16px;
    font-weight: 600;
}

.example-code {
    background: #fff;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.example-code code {
    background: transparent;
    padding: 4px 0;
    color: #d63384;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    display: block;
    line-height: 1.8;
}

/* Modal Textarea */
.modal textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    resize: vertical;
    margin-bottom: 20px;
    background: #fafafa;
    transition: border-color 0.2s, background-color 0.2s;
}

.modal textarea:focus {
    outline: none;
    border-color: #00a4a6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 164, 166, 0.1);
}

/* Modal Actions */
.bulk-add-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Modal Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Modal */
@media (max-width: 768px) {
    .modal .modal-content {
        width: 95%;
        margin: 10% auto;
        padding: 20px;
    }
    
    .modal .close-btn {
        right: 15px;
        top: 15px;
        font-size: 28px;
    }
    
    .modal h3 {
        font-size: 20px;
        padding-right: 30px;
    }
    
    .modal textarea {
        min-height: 150px;
    }
}

/* ========================================
   Utility Classes for Inline Style Cleanup
   (Performance optimization - reduces HTML payload)
   ======================================== */

/* Margin utilities */
.ml-10 { margin-left: 10px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mb-5 { margin-bottom: 5px; }
.mb-15 { margin-bottom: 15px; }

/* Padding utilities */
.p-8 { padding: 8px; }
.p-15 { padding: 15px; }

/* Display utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline-flex { display: inline-flex; }

/* Input/Form utilities */
.input-standard {
    padding: 8px;
    border: 2px solid #ddd;
    border-radius: 4px;
}

.input-wide {
    width: 300px;
}

/* Config panel utilities */
.config-section {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.config-result {
    margin-top: 15px;
}

.config-details {
    margin-top: 10px;
    font-size: 0.9em;
    color: #666;
}

/* CRITICAL FIX: Force visibility of main join tool sections */
.tables-section,
.intent-section,
.tool-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS (2024-2025)
   Modern CSS techniques for low-end devices
   ============================================ */

/* CSS Containment - Isolates layout calculations */
/* Using 'layout style' instead of 'layout style paint' to preserve event handling */
/* NOTE: .sidebar removed from containment to allow collapse/expand animation */
.card,
.section,
.tool-card,
.modal,
.autocomplete-dropdown {
    contain: layout style;
}

/* Containment for performance toggle buttons - using layout+style only to preserve interactivity */
/* NOTE: Do NOT use contain: strict on interactive elements as it breaks event handling */
.performance-toggle,
.sidebar-performance-toggle {
    contain: layout style;
}

/* Content Visibility - Defer rendering of off-screen content */
/* Only applied to sections that are typically below the fold */
.tables-section,
.intent-section,
.results-section,
.config-section,
.accordion-content {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* For long lists and repeated items */
.table-row,
.list-item,
.card-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 100px;
}

/* Performance Mode: Enhanced containment for even better isolation */
/* Changed from 'strict' to 'layout style' to preserve event handling on interactive elements */
/* NOTE: .sidebar removed to allow collapse/expand animation */
.performance-mode .card,
.performance-mode .section,
.performance-mode .tool-card {
    contain: layout style;
}

/* Performance Mode: More aggressive content-visibility */
.performance-mode .tables-section,
.performance-mode .intent-section,
.performance-mode .results-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}