/* 
   ==========================================================================
   VECDASH RESPONSIVE OVERRIDES (FINALIZED)
   Status: Permanent, Stable, Regression-Proof
   Devices: Mobile (iPhone), Tablet (iPad), Desktop
   Theme: Light & Dark Mode
   ==========================================================================
*/
.dash-dropdown-wrapper,
.dash-dropdown {
    transform: none !important;
    will-change: auto !important;
}

/* --- GLOBAL ARTIFACT CLEANUP (Required Fix) --- */
/* Removes strange vertical lines, connectors, and pseudo-elements on inputs/dropdowns */
.chart-slot ::before,
.chart-slot ::after,
.Select ::before,
.Select ::after,
.Select-control ::before,
.Select-control ::after,
.Select-placeholder ::before,
.Select-placeholder ::after,
#preprocessing-page ::before,
#preprocessing-page ::after,
.studio-buttons-wrapper ::before,
.studio-buttons-wrapper ::after {
    content: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
    background: transparent !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* Ensure body background matches theme to prevent white lines */
html,
body {
    background-color: #0f172a !important;
    margin: 0;
    padding: 0;
}

.light-theme,
.light-theme body {
    background-color: #f8fafc !important;
}

/* Ensure overlays and glass layers capture clicks (Safari click-through fix) */
.glass,
.glass-modal,
.modal,
.modal-content,
.modal-backdrop,
.dropdown-menu,
.Select-menu-outer,
._dash-loading,
.dash-loading {
    pointer-events: auto;
}

/* Ensure Select wrapper has proper positioning context for dropdowns */
.Select,
.Select-control {
    position: relative !important;
}

/* Safari dropdown positioning fix: ensure dropdowns use proper containing block */
.Select {
    /* Create a new positioning context */
    isolation: isolate;
}


/* --------------------------------------------------------------------------
   1. GLOBAL CHAT INTERFACE & BUBBLE STYLES (Light & Dark)
   -------------------------------------------------------------------------- */

/* Force "Red Chatbox" (User Bubble) to Violet (Dark Mode / Default) */
.chat-user {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.25) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Force User Bubble in LIGHT MODE to Blue (No Pink/Red) */
.light-theme .chat-user {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Force AI Bubble (Grey) to WHITE in Light Mode */
.light-theme .chat-ai {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Force Input Field to WHITE in Light Mode */
.light-theme .chat-input-field {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.light-theme .chat-input-field::placeholder {
    color: #94a3b8 !important;
}

.light-theme .chat-ai code {
    background: #f1f5f9 !important;
    color: #ef4444 !important;
    border: 1px solid #e2e8f0 !important;
}


/* --------------------------------------------------------------------------
   2. TOUCH & CONTACT SECTION FIXES (Tablet & Mobile)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Hide Rocket Button on Tablet & Mobile */
    .fab-scroll-btn {
        display: none !important;
    }
}

.contact-item-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

@media (max-width: 768px) {
    .contact-item-row {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
        margin-bottom: 12px;
    }

    .contact-item-row span {
        white-space: normal !important;
        display: block;
        margin-right: 0 !important;
    }
}


/* --------------------------------------------------------------------------
   3. DROPDOWN & MENU VISIBILITY FIXES (Global) - Updated for Safari 26.2
   -------------------------------------------------------------------------- */

/* CRITICAL: Ensure Select wrapper has proper positioning context */
.Select {
    position: relative !important;
    isolation: isolate;
}

.Select-control {
    position: relative !important;
}

/* Ensure the Dropdown Menu is always on top */
.Select-menu-outer {
    z-index: 9999 !important;
    position: absolute !important;
    max-height: 250px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Parent container overflows */
.glass {
    overflow: visible !important;
}

/* Specific fix for Studio Button Wrapper to prevent dropdown clipping */
.studio-buttons-wrapper,
.studio-control-group {
    overflow: visible !important;
    z-index: 50 !important;
    /* Ensure stacking context is above cards below */
    position: relative !important;
}

/* Ensure Dropdown Menu breaks out */
.studio-buttons-wrapper .Select-menu-outer {
    z-index: 99999 !important;
    position: absolute !important;
}

/* Ensure subsequent containers sit BELOW the button wrapper in stacking order */
/* This is crucial because standard DOM order puts later siblings on top */
.studio-box-stats,
.studio-box-preview {
    z-index: 10 !important;
    position: relative !important;
}

.chart-slot {
    overflow: visible !important;
    z-index: auto !important;
    position: relative !important;
    /* Safari containment fix - prevents transform propagation */
    contain: layout style;
}

/* Fix Data Studio Header clipping (Theme Toggle) */
#preprocessing-page .glass.header {
    overflow: visible !important;
    z-index: 100 !important;
    /* Ensure it floats above content below */
    position: relative !important;
    overflow: visible !important;
    /* FORCE VISIBLE OVERFLOW */
}

/* Remove this aggressive setting that breaks scrolling internals */
/* .Select div { overflow: visible !important; } */

/* Instead, explicitly handle the menu scrolling */
.Select-menu-outer {
    display: block !important;
    visibility: visible !important;
    overflow: auto !important;
    /* ALLOW SCROLLING */
    max-height: 250px !important;
    overflow-x: hidden !important;
    margin-bottom: 0 !important;
}

.Select-menu {
    overflow-y: auto !important;
}

#preprocessing-page .glass,
.app-header {
    overflow: visible !important;
}

.dropdown-menu {
    z-index: 10010 !important;
}

/* Fix Preprocessing Header Stacking Context (Dropdown hidden behind content) */
#preprocessing-page .glass.header {
    z-index: 50 !important;
    position: relative !important;
}

/* Truncate long values in single selects */
.Select--single>.Select-control .Select-value,
.Select-placeholder {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 95% !important;
}

/* ============================================================================
   SAFARI 26.2 RADIX UI DROPDOWN POSITIONING FIX
   Critical fix for transform calculation bug in Safari
   ============================================================================= */

/* Target Radix popper containers - Safari needs explicit positioning context */
[data-radix-popper-content-wrapper] {
    position: absolute !important;
    /* Don't override inset - let Radix calculate it */
    inset: unset !important;
    /* Respect Radix's transform origin */
    transform-origin: var(--radix-popper-transform-origin) !important;
}

/* Ensure the actual dropdown content respects parent positioning */
[data-radix-popper-content-wrapper]>div {
    position: relative !important;
    width: 100% !important;
}

/* Safari-specific: Fix for dropdown grid containers */
.dash-dropdown-grid-container {
    position: relative !important;
    isolation: isolate;
    z-index: 1 !important;
}

/* Ensure Radix dropdown trigger maintains proper context */
[data-radix-dropdown-trigger] {
    position: relative !important;
}

/* Safari GPU acceleration fix - forces proper layer composition */
@supports (-webkit-backdrop-filter: blur(1px)) {

    .Select-menu-outer,
    [data-radix-popper-content-wrapper] {
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        /* Force hardware acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ============================================================================
   GLOBAL DROPDOWN SCROLLING (Updated for Safari compatibility)
   Lines 1692-1776 replacement
   ============================================================================= */

/* Target generic AND specific chart slot dropdowns */
.Select-menu-outer,
.chart-slot .Select-menu-outer {
    /* STRICT HEIGHT: 5-6 items */
    max-height: 200px !important;

    /* FORCE SCROLL */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    /* Reset sizing so it can shrink/grow up to max */
    height: auto !important;
    min-height: 0 !important;

    /* Layout - Position relative to parent Select */
    position: absolute !important;
    z-index: 2000000 !important;
    display: block !important;

    /* Visuals */
    background-color: #fff !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;

    /* CRITICAL FIX: Remove transform override - let Radix/React-Select handle it */
    /* transform: none !important; */
    /* ← REMOVED - this was causing Safari bug */

    /* Safari positioning - align directly below trigger with small gap */
    top: calc(100% + 1px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    /* Match parent width exactly */
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* Free the simple inner menu */
.Select-menu {
    max-height: none !important;
    overflow: visible !important;
}

/* When dropdown is open, remove bottom border radius from control for seamless connection */
.Select.is-open .Select-control {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Ensure dropdown menu has top border radius of 0 to connect with control */
.Select.is-open .Select-menu-outer {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-radius: 0 0 6px 6px !important;
    margin-top: -1px !important;
    /* Overlap by 1px to hide double border */
}

/* Free the react-virtualized inner wrapper (if present) */
.Select-menu-outer>div {
    max-height: none !important;
}

/* Option Styling */
.Select-option {
    /* Don't force height, let text dictate, but pad nicely */
    padding: 8px 12px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

/* 13. VISIBLE SCROLLBAR FOR DROPDOWNS */
.Select-menu-outer::-webkit-scrollbar,
.Select-menu::-webkit-scrollbar {
    width: 6px !important;
    display: block !important;
}

.Select-menu-outer::-webkit-scrollbar-thumb,
.Select-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 3px !important;
}

.Select-menu-outer::-webkit-scrollbar-track,
.Select-menu::-webkit-scrollbar-track {
    background: transparent !important;
}

.light-theme .Select-menu-outer::-webkit-scrollbar-thumb,
.light-theme .Select-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* Fix for weird lines in buttons/dropdowns in preprocessing studio & sheet selector */
.studio-group-dropdown .Select-control,
.studio-group-dropdown .Select-arrow-zone,
#sheet-dropdown .Select-control,
#sheet-dropdown .Select-arrow-zone,
#sheet-dropdown-pp .Select-control,
#sheet-dropdown-pp .Select-arrow-zone {
    border-left: none !important;
    border-right: none !important;
    background-image: none !important;
}

.Select.is-open {
    z-index: 10000 !important;
    position: relative !important;
}


/* --------------------------------------------------------------------------
   4. TABLET SPECIFIC LAYOUT FIXES (768px - 1200px)
   Status: Handles Sidebar Transitions & Reflow
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. TABLET SPECIFIC LAYOUT FIXES (768px - 1200px)
   Status: Recreated to match Laptop UI exactly (Scaled Down)
   -------------------------------------------------------------------------- */

@media screen and (min-width: 769px) and (max-width: 1200px) {

    /* 1. Ensure Body & Wrapper can flow similarly to Desktop */
    body,
    html,
    #theme-wrapper {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* 2. Sidebar & Main Container Interaction */
    /* Ensure Sidebar stays visible and fixed like desktop */
    #app-sidebar {
        width: 260px !important;
        /* Slightly smaller than 280px */
        display: flex !important;
        flex-direction: column !important;
    }

    /* Main Content Container Reflow */
    #main-scroll-container {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
        padding: 32px !important;
        display: block !important;
    }

    /* Header Reflow */
    .app-header {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
        padding: 0 32px !important;
    }

    /* 3. Hero Section (Welcome Page) Scaling */
    .hero-heading-text {
        font-size: 56px !important;
        /* Scaled down from 72px */
    }

    /* Ensure Hero Graphic remains visible and properly sized */
    .hero-graphic {
        display: flex !important;
        min-width: 280px !important;
        height: 350px !important;
    }

    /* 4. Feature Cards - Force 3 Column Grid (Identical to Desktop) */
    .features-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        margin-top: 0 !important;
        padding-top: 40px !important;
    }

    .feature-card {
        padding: 24px !important;
        height: 100% !important;
        display: block !important;
    }

    .feature-card img {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 16px !important;
    }

    .feature-card h3 {
        font-size: 18px !important;
    }

    .feature-card p {
        font-size: 14px !important;
        display: block !important;
        /* Ensure description is visible */
    }

    /* 5. Get In Touch Section - Full Visibility */
    .get-in-touch-section {
        margin-top: 80px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        text-align: center !important;
    }

    .get-in-touch-section p {
        display: block !important;
        /* Restore description */
    }

    .contact-item-row {
        flex-direction: row !important;
        /* Keep horizontal like desktop */
        gap: 0 !important;
    }

    /* 6. Chat Button */
    .fab-chat-btn {
        right: 40px !important;
        bottom: 40px !important;
    }

    /* 6.5 Chart Spacing Fix - TABLET */
    #charts-container-inner .glass {
        margin-bottom: 40px !important;
        /* Increase space between charts */
    }

    /* 6.6 Data Preview Spacing Fix - TABLET */
    #data-preview-container {
        margin-bottom: 40px !important;
        /* Add space between preview and first chart/empty state */
    }

    /* 6.7 Summary Area Spacing Fix - TABLET */
    #summary-area {
        margin-bottom: 40px !important;
        /* Space between KPI cards and Data Preview */
    }

    /* 7. Data Studio Layout - TABLET SPECIFIC (One Row 4 Buttons, Dropdowns Below) */
    /* 7. Data Studio Layout - TABLET GRID (Robust 4-Col Row) */
    .studio-buttons-wrapper {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
        align-items: start !important;
    }

    /* Brute Force Separation for Promote Header Button */
    #btn-promote-header {
        margin-bottom: 24px !important;
        /* Force gap if stacking occurs */
        margin-right: 24px !important;
        /* Force gap if side-by-side relies on margin */
    }

    /* Row 1 Items (1 Col Each) */
    #btn-promote-header,
    #btn-dedup,
    .studio-control-group {
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 0 !important;
        /* Ensure consistent height for alignment */
    }

    #btn-promote-header,
    #btn-dedup {
        height: 48px !important;
    }

    /* Groups need to stack their button & dropdown vertically */
    .studio-control-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Buttons inside groups */
    .studio-group-btn {
        width: 100% !important;
        height: 48px !important;
    }

    /* Row 2 Items (Span 2 Cols Each) */
    #btn-download,
    #back-to-dash {
        grid-column: span 2 !important;
        width: 100% !important;
        margin-top: 12px !important;
        /* Extra breathing room from row 1 */
    }

    /* Ensure dropdowns inside groups are styled correctly */
    /* Ensure dropdowns inside groups are styled correctly */
    .studio-group-dropdown,
    .studio-group-dropdown .Select,
    /* Ensure dropdowns inside groups are styled correctly */
    .studio-group-dropdown,
    .studio-group-dropdown .Select,
    .studio-group-dropdown .Select-control {
        width: 100% !important;
        min-width: 100% !important;
        border-radius: 4px !important;
    }

    /* Z-INDEX FIX: Ensure the first group ("Apply Strategy") is above the second ("Drop Columns") */
    /* This prevents the first dropdown from hiding behind the second group when stacked */
    .studio-buttons-wrapper .studio-control-group:nth-of-type(1) {
        z-index: 60 !important;
        position: relative !important;
    }

    .studio-buttons-wrapper .studio-control-group:nth-of-type(2) {
        z-index: 50 !important;
        position: relative !important;
    }

    .studio-buttons-wrapper .studio-control-group:nth-of-type(3) {
        z-index: 40 !important;
        position: relative !important;
    }
}


/* --------------------------------------------------------------------------
   5. IPHONE 17 PRO / MOBILE LAYOUT ENGINE (< 480px)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 480px) {

    /* --- A. Global Scroll & Height Reset --- */
    html,
    body {
        overflow-y: auto !important;
        height: 100% !important;
        /* Fix height to viewport */
        min-height: 100% !important;
        position: relative !important;
        -webkit-overflow-scrolling: touch !important;
        background-color: #1b1430 !important;
        /* Default Dark Mode Match */
        overscroll-behavior-y: none !important;
        /* Disable rubber-banding/bounce */
    }

    /* Light Mode Background Fix for Mobile Scrolling */
    body:has(.light-theme) {
        background-color: #e0f2fe !important;
        /* Light Blue as requested */
    }

    #theme-wrapper {
        min-height: 100% !important;
        height: auto !important;
        overflow-y: visible !important;
        /* Let body handle scroll */
        padding-bottom: 20px !important;
        /* Minimal padding */
    }

    /* --- B. Control Panel (Top Sidebar) --- */
    #app-sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
        background: rgba(16, 20, 30, 0.95) !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        z-index: 100 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Hide Desktop/Tablet Toggles */
    #desktop-sidebar-toggle,
    #mobile-menu-btn {
        display: none !important;
    }

    .sidebar-text {
        color: white !important;
    }

    /* --- C. Main Content Area --- */
    #main-scroll-container {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 16px !important;
        /* Bottom padding removed to eliminate white bar */
        overflow: visible !important;
        flex: none !important;
        display: block !important;
        min-height: 0 !important;
    }

    /* Remove massive bottom padding from glass_theme.css */
    #main-scroll-container {
        padding-bottom: 0 !important;
    }

    #dashboard-page {
        overflow-y: visible !important;
        height: auto !important;
    }

    /* --- D. Component Visibility --- */

    /* 1. Hide Desktop Empty State (Clean Load) */
    #empty-state-card {
        display: none !important;
    }

    /* 2. FORCE SHOW Data Preview (Mobile Optimization) */
    #data-preview-container {
        /* display: block !important; Removed to respect backend visibility toggle */
        margin-top: 20px !important;
        margin-bottom: 60px !important;
        /* INCREASED MARGIN FOR SEPARATION */
        width: 100% !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Horizontal Scrollable Table Wrapper */
    #preview-div {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        background: rgba(16, 20, 30, 0.4);
        padding: 0 !important;
    }

    /* 3. Charts Container & Horizontal Scrolling */
    #charts-container {
        display: block !important;
        padding-bottom: 40px !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        /* Prevent double scrollbars on container */
    }

    /* Target the immediate parent of the plot (the dcc.Graph div) */
    #charts-container>div,
    .chart-slot {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 20px !important;
    }



    /* 4. Chat Button (Floating) */
    .fab-chat-btn {
        bottom: 20px !important;
        right: 20px !important;
        z-index: 3000 !important;
    }

    /* Hide Rocket Button on Mobile */
    .fab-scroll-btn {
        display: none !important;
    }

    /* --- E. AXIS SELECTOR & ARTIFACT CLEANUP (Required Fix) --- */
    /* Removes strange vertical lines, connectors, and pseudo-elements on mobile inputs per request */

    .chart-slot ::before,
    .chart-slot ::after,
    .Select ::before,
    .Select ::after,
    .Select-control ::before,
    .Select-control ::after,
    .Select-placeholder ::before,
    .Select-placeholder ::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
        border: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Clean Axis Selector Boxes */
    .Select-control {
        border: 1px solid #cbd5e1 !important;
        background-color: transparent !important;
        /* Let theme handle background */
        box-shadow: none !important;
        background-image: none !important;
        border-radius: 6px !important;
    }

    /* Force White Text for Dropdowns in Dark Mode (Mobile) */
    .dark-theme .Select-value-label,
    .dark-theme .Select-value,
    .dark-theme .Select-input>input {
        color: #ffffff !important;
    }

    .dark-theme .Select-placeholder {
        color: #94a3b8 !important;
    }

    /* Remove internal dividers in React-Select */
    .Select-arrow-zone,
    .Select-clear-zone {
        border-left: none !important;
        border-right: none !important;
        background: transparent !important;
    }

    .Select-arrow {
        border-top-color: #94a3b8 !important;
        /* Neutral arrow color */
    }

    /* Ensure dropdowns don't have overlapping negative margins */
    .chart-slot .Select,
    .chart-slot .dcc-dropdown {
        margin: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

    /* FIX MOBILE DROPDOWN SCROLLING */
    /* FIX MOBILE DROPDOWN SCROLLING */
    .Select-menu-outer {
        display: block !important;
        visibility: visible !important;
        overflow: auto !important;
        /* Allow scrolling exactly like desktop */
        position: absolute !important;
        z-index: 10000 !important;
        max-height: 250px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .Select-menu {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }

    /* Remove any decorative borders on chart controls wrapper */
    .chart-slot>div {
        border-left: none !important;
        border-right: none !important;
    }


    /* --- F. LIGHT THEME MOBILE SPECIFICS --- */

    .light-theme body,
    .light-theme html {
        background: #f8fafc !important;
        color: #0f172a !important;
    }

    .light-theme #app-sidebar {
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .light-theme .sidebar-text,
    .light-theme h1,
    .light-theme h2,
    .light-theme h3,
    .light-theme h4,
    .light-theme h5,
    .light-theme div:not(.chat-user) {
        color: #1e293b !important;
    }

    /* Form Elements */
    .light-theme .Select-control,
    .light-theme .Select-menu-outer,
    .light-theme input,
    .light-theme textarea {
        background-color: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #0f172a !important;
    }

    .light-theme .Select-placeholder,
    .light-theme ::placeholder {
        color: #64748b !important;
    }

    .light-theme #upload-data {
        background: #f1f5f9 !important;
        border: 2px dashed #94a3b8 !important;
    }

    .light-theme #preview-div {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* Cards */
    .light-theme .glass,
    .light-theme .chart-slot {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        color: #0f172a !important;
    }

    /* Buttons */
    .light-theme .btn-primary,
    .light-theme .custom-btn {
        background: #7c3aed !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 2px 4px rgba(124, 58, 237, 0.3) !important;
    }

    .light-theme .btn-secondary {
        background: #f1f5f9 !important;
        color: #334155 !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
    }

    .light-theme .btn-danger {
        background: #fee2e2 !important;
        color: #ef4444 !important;
        border: 1px solid #fecaca !important;
        box-shadow: none !important;
    }

    /* Header */
    .app-header {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0 16px !important;
    }

    .light-theme .app-header div {
        color: #0f172a !important;
    }

    /* Shrink Feature Cards on Mobile - 2x2 GRID */
    .features-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding-top: 20px !important;
        margin-top: 5vh !important;
        border-top: none !important;
    }

    .feature-card {
        padding: 10px !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .feature-card img {
        width: 28px !important;
        height: 28px !important;
        margin-bottom: 6px !important;
    }

    .feature-card h3 {
        font-size: 10px !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
    }

    .feature-card p {
        display: block !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
        /* Show description */
    }

    /* Hide Hero Graphic (Bar Graph) on Mobile */
    .hero-graphic {
        display: none !important;
    }

    /* Get in Touch - Mobile CONCISE TEXT (No Box) */
    .get-in-touch-section {
        margin-top: 30px !important;
        padding: 16px 10px 10px 10px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        text-align: center !important;
    }

    .get-in-touch-section h3 {
        font-size: 13px !important;
        margin-bottom: 8px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        opacity: 0.8 !important;
    }

    /* Hide subtext paragraph to save space */
    .get-in-touch-section p {
        display: none !important;
    }

    /* Very Tight List Style */
    .contact-item-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 6px !important;
        width: 100% !important;
    }

    .contact-item-row:last-child {
        margin-bottom: 0 !important;
    }

    .contact-item-row span {
        display: inline !important;
        line-height: 1.4 !important;
    }

    /* Label Styling - Minimal */
    .contact-item-row span:first-child {
        font-size: 8px !important;
        text-transform: uppercase !important;
        color: #718096 !important;
        /* Neutral grey */
        font-weight: 700 !important;
        margin-bottom: 1px !important;
        display: block !important;
        letter-spacing: 0.5px !important;
    }

    /* Value Styling - Clean White */
    .contact-item-row span:last-child {
        font-size: 10px !important;
        color: #e2e8f0 !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
    }

    /* Remove Pseudo-element Icons */
    .contact-item-row:nth-child(1) span:first-child::before,
    .contact-item-row:nth-child(2) span:first-child::before,
    .contact-item-row:nth-child(3) span:first-child::before {
        content: none !important;
    }

    /* Hide Mobile CTA Button */
    .mobile-cta-btn {
        display: none !important;
    }

    /* --- G. COMPACT KPI GRID (Mobile 2x2) --- */
    /* --- G. COMPACT KPI GRID (Mobile 2x2) --- */
    #kpi-row,
    .kpis {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
    }

    #kpi-row .kpi,
    .kpis .kpi {
        flex: none !important;
        width: 100% !important;
        /* Fill grid cell */
        min-width: 0 !important;
        /* Allow shrinking below min-content if needed */
        padding: 12px 6px !important;
        /* Compact padding */
        min-height: 0 !important;
        margin: 0 !important;
        height: auto !important;
        /* Fit to content */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .kpi {
        flex: none !important;
        width: auto !important;
        padding: 10px !important;
        /* Reduce padding */
        min-height: 0 !important;
        margin: 0 !important;
    }

    /* KPI Label (First Child) */
    .kpi>div:first-child {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    /* KPI Value (Second Child) */
    .kpi>div:last-child {
        font-size: 18px !important;
        /* Smaller number */
    }

}

/* ================================
   UNIFIED STUDIO ACTION BUTTONS
   ================================ */
.btn-studio-action {
    background-color: #6366f1 !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.btn-studio-action:hover {
    background-color: #4f46e5 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-studio-action:active {
    transform: translateY(0);
}

/* Light Theme Variant */
.light-theme .btn-studio-action {
    background-color: #7c3aed !important;
}

.light-theme .btn-studio-action:hover {
    background-color: #6366f1 !important;
}

/* ---------------------------------------------------- */
/* LIGHT MODE WELCOME PAGE ADJUSTMENTS */
/* ---------------------------------------------------- */

/* 1. Branding / Logo */
.welcome-logo-text {
    background: linear-gradient(to right, #ffffff, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dynamic Brand Text (White in Dark, Dark in Light) */
.brand-logo-text {
    color: #ffffff;
}

.light-theme .brand-logo-text {
    color: #1e293b !important;
}

.light-theme .welcome-logo-text {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
}

/* 2. Hero Heading Gradient Override */
.light-theme .hero-heading-text {
    background: linear-gradient(to right, #1e293b 20%, #4f46e5 60%, #7c3aed 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 3. Text Visibility in Hero & Cards */
.light-theme p.load-reveal,
.light-theme .feature-card p {
    color: #475569 !important;
    /* Slate 600 - Readable on White */
}

/* 4. Feature Cards Background */
.feature-card {
    background-color: #1e293b;
    /* Default Dark Slate */
}

.light-theme .feature-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

.light-theme .feature-card h3 {
    color: #0f172a !important;
    /* Slate 900 */
}

/* 5. Get In Touch Visibility */
.light-theme .contact-item-row,
.light-theme .contact-item-row span {
    color: #334155 !important;
}

/* 6. Fix Header Icon Shadow in Light Mode */
.light-theme img[src*="vecdash_logo"] {
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.25)) !important;
}

/* 7. Fix Feature Icons in Light Mode (Disable Screen Blend) */
.light-theme .feature-card img {
    mix-blend-mode: normal !important;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)) !important;
    /* Slight shadow instead of brightness filter */
}

/* ---------------------------------------------------- */
/* LIGHT MODE SIDEBAR BUTTON ENHANCEMENTS (GLOBAL)      */
/* ---------------------------------------------------- */

/* 1. Add Chart (Primary) - Clean White with Dark Text */
.light-theme #add-chart {
    background: #ffffff !important;
    color: #0f172a !important;
    /* Slate 900 - Darkest */
    border: 1px solid #94a3b8 !important;
    /* Slate 400 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
    font-weight: 700 !important;
}

.light-theme #add-chart:hover {
    background: #f1f5f9 !important;
    /* Slate 100 */
    border-color: #64748b !important;
    /* Slate 500 */
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important;
}

/* 2. Data Studio (Secondary) - Solid Slate for Contrast */
.light-theme #go-preprocess {
    background: #e2e8f0 !important;
    /* Slate 200 - Clearly defined button */
    color: #0f172a !important;
    /* Slate 900 - Very Readable */
    border: 1px solid #cbd5e1 !important;
    /* Slate 300 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    font-weight: 600 !important;
}

.light-theme #go-preprocess:hover {
    background: #cbd5e1 !important;
    /* Darker Slate on Hover */
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 3. Reset All (Danger) - Bolder Red */
.light-theme #reset-charts {
    background: #ffe4e6 !important;
    /* Rose 700 */
    color: #be123c !important;
    /* White text for better contrast */
    border: 1px solid #fda4af !important;
    font-weight: 600 !important;
}

.light-theme #reset-charts:hover {
    background: #fecaca !important;
    /* Rose 600 */
    border-color: #fb7185 !important;
    color: #be123c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(190, 18, 60, 0.2) !important;
}

/* --- H. DATA STUDIO RESPONSIVE LAYOUT (Mobile vs Desktop) --- */

/* 1. Desktop Default (Column Layout for Groups) */
#preprocessing-page .studio-control-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 8px;
    width: auto;
}

#preprocessing-page .studio-group-btn {
    width: 100%;
}

#preprocessing-page .studio-group-dropdown {
    width: 240px !important;
    font-size: 14px;
}

/* Keep preprocessing placeholders explicitly styled by theme (Active Sheet + strategy/column dropdowns) */
.light-theme #sheet-dropdown-pp .Select-placeholder,
.light-theme #preprocessing-page .studio-group-dropdown .Select-placeholder {
    color: #000000 !important;
}

.dark-theme #sheet-dropdown-pp .Select-placeholder,
.dark-theme #preprocessing-page .studio-group-dropdown .Select-placeholder {
    color: #94a3b8 !important;
}



/* 2. Mobile View Overrides (< 768px) */
@media screen and (max-width: 768px) {

    /* THEME TOGGLE: Force Top Right Corner (FIXED TO VIEWPORT) */
    /* Using position:fixed guarantees it stays in the corner regardless of scroll or parent layout */
    #theme-menu-toggle {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        margin: 0 !important;
        z-index: 9999 !important;
    }

    /* MAIN LAYOUT: CSS GRID (2 Equal Columns) */
    #preprocessing-page .glass.studio-buttons-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    /* STANDALONE BUTTONS */
    #btn-promote-header,
    #btn-dedup,
    #btn-download,
    #back-to-dash {
        width: 100% !important;
        margin: 0 !important;
        font-size: 10px !important;
        padding: 0 4px !important;
        height: 38px !important;
        white-space: normal !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #back-to-dash {
        font-size: 10px !important;
    }

    /* CONTROL GROUPS (2 Columns) */
    #preprocessing-page .studio-control-group {
        grid-column: span 2 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        position: relative !important;
    }

    /* Z-INDEX STACKING FIX (Mobile) - Ensure first dropdown overlaps second group */
    #preprocessing-page .studio-control-group:nth-of-type(1) {
        z-index: 60 !important;
    }

    #preprocessing-page .studio-control-group:nth-of-type(2) {
        z-index: 50 !important;
    }

    #preprocessing-page .studio-control-group:nth-of-type(3) {
        z-index: 40 !important;
    }

    /* ELEMENTS INSIDE GROUP */
    #preprocessing-page .studio-group-btn {
        width: 100% !important;
        margin: 0 !important;
        font-size: 10px !important;
        padding: 0 4px !important;
        height: 38px !important;
        white-space: normal !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #preprocessing-page .studio-group-dropdown {
        width: 100% !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    /* DROPDOWN STYLING - BASE (DARK MODE DEFAULT) */
    #preprocessing-page .studio-group-dropdown .Select-control {
        height: 38px !important;
        line-height: normal !important;
        font-size: 10px !important;
        background-color: #2a2a2a !important;
        color: white !important;
        border: 1px solid #444 !important;
        border-radius: 4px !important;
    }

    #preprocessing-page .studio-group-dropdown .Select-value-label,
    #preprocessing-page .studio-group-dropdown .Select-value {
        font-size: 10px !important;
        /* Restored to readable size */
        color: white !important;
        line-height: 36px !important;
        font-weight: 500 !important;
    }

    #preprocessing-page .studio-group-dropdown .Select-placeholder {
        line-height: 36px !important;
        padding-left: 5px !important;
        color: #ccc !important;
    }

    /* Remove the tiny input rectangle/cursor container - ULTRA AGGRESSIVE FIX */
    #preprocessing-page .studio-group-dropdown .Select-input,
    #preprocessing-page .studio-group-dropdown .Select-input input,
    .chart-slot .Select-input,
    .chart-slot .Select-input input {
        opacity: 0 !important;
        width: 1px !important;
        height: 1px !important;
        max-width: 0px !important;
        /* Force constraint */
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        clip: rect(0, 0, 0, 0) !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        caret-color: transparent !important;
        color: transparent !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        z-index: -1 !important;
        /* Move behind text */
    }

    /* NUCLEAR OPTION: Target Hidden Spacers/Icons that act as rectangles */
    .chart-slot .Select-value-icon,
    .chart-slot .Select-aria-only,
    .chart-slot .Select-input-container {
        border: none !important;
        background: transparent !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        display: none !important;
    }

    /* REMOVE ANY POTENTIAL OSCURE BORDERS ON VALUE RENDERERS */
    .chart-slot .Select-value {
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
        /* Let container handle bg */
    }

    /* Aggressively Target Dropdown Menu Items on Mobile */
    #preprocessing-page .studio-group-dropdown .Select-menu-outer *,
    #preprocessing-page .studio-group-dropdown .Select-option,
    #preprocessing-page .studio-group-dropdown .Select-option div,
    #preprocessing-page .studio-group-dropdown .Select-option span,
    #preprocessing-page .studio-group-dropdown .VirtualScrollOption {
        font-size: 8px !important;
        line-height: 12px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        white-space: normal !important;
        font-weight: 400 !important;
        color: #333 !important;
    }

    .dark-theme #preprocessing-page .studio-group-dropdown .Select-menu-outer *,
    .dark-theme #preprocessing-page .studio-group-dropdown .Select-option,
    .dark-theme #preprocessing-page .studio-group-dropdown .Select-option div,
    .dark-theme #preprocessing-page .studio-group-dropdown .Select-option span,
    .dark-theme #preprocessing-page .studio-group-dropdown .VirtualScrollOption {
        color: #e2e8f0 !important;
    }

    /* LIGHT MODE OVERRIDES FOR DROPDOWNS */
    .light-theme #preprocessing-page .studio-group-dropdown .Select-control {
        background-color: #ffffff !important;
        color: #333333 !important;
        border: 1px solid #cbd5e1 !important;
    }

    .light-theme #preprocessing-page .studio-group-dropdown .Select-value-label,
    .light-theme #preprocessing-page .studio-group-dropdown .Select-value,
    .light-theme #preprocessing-page .studio-group-dropdown .Select-placeholder {
        color: #333333 !important;
    }

    /* Fix No Data Boxes Padding */
    #preprocessing-page .glass.studio-box-stats,
    #preprocessing-page .glass.studio-box-preview {
        padding: 10px !important;
        min-height: auto !important;
        margin-top: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        /* Force vertical stacking of Title and Content */
        align-items: flex-start !important;
    }

    #preprocessing-page .studio-box-stats h4,
    #preprocessing-page .studio-box-preview h4 {
        font-size: 13px !important;
        margin: 0 0 5px 0 !important;
    }

    #pp-stats-row {
        margin: 0 !important;
    }
}


/* ==========================================================================
   AI CHAT TYPING INDICATOR (WHATSAPP STYLE BUBBLE)
   ========================================================================== */
.typing-indicator-bubble {
    display: none;
    /* Hidden by default */
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.08);
    /* Generic glass */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border-bottom-left-radius: 2px;
    margin-bottom: 12px;
    width: fit-content;
    max-width: 80%;
    align-items: center;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 500;
    margin-left: 0;
    /* Align left */
    animation: fadeIn 0.3s ease;
}

/* Light Theme Override */
.light-theme .typing-indicator-bubble {
    background: white;
    border: 1px solid #e2e8f0;
    color: #475569;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* VISIBILITY LOGIC: Show ONLY when dcc.Loading is active */
/* When active, Dash inserts the spinner. Detecting spinner presence enables the bubble. */
.typing-indicator-bubble:has(.dash-spinner),
.typing-indicator-bubble:has(svg) {
    display: flex !important;
}

/* Customize the Loading Spinner (The "Moving Bars") to fit inline */
.typing-indicator-bubble .chat-loading-inline {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Force spinner specific sizing to look like part of the text line */
.typing-indicator-bubble .dash-spinner,
.typing-indicator-bubble .dash-default-spinner,
.typing-indicator-bubble svg {
    margin: 0 !important;
    width: 0px !important;
    height: 0px !important;
    visibility: hidden !important;
    vertical-align: middle;
}


/* ==========================================================================
   AI CHAT VISUAL REFINEMENT (SPACING & COLORS)
   ========================================================================== */

/* 1. Spacing: Ensure strictly consistent vertical spacing (WhatsApp style) */
/* Target all bubbles inside the message container */
.chat-float-messages .chat-bubble {
    margin-bottom: 12px !important;
    margin-top: 4px !important;
}

/* Ensure the typing indicator follows the same spacing rules */
.typing-indicator-bubble {
    margin-bottom: 12px !important;
    margin-top: 4px !important;
    /* Reset margins set previously */
    margin-left: 0 !important;
}

/* 2. Color: Force Purple AI Theme (Match generic AI bubble) */
.typing-indicator-bubble {
    /* Gradient Purple Glass */
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    color: #f1f5f9 !important;
    /* Light text */

    /* Shape */
    border-radius: 16px !important;
    border-bottom-left-radius: 4px !important;

    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Light Theme Purple Variant */
.light-theme .typing-indicator-bubble {
    background: #f5f3ff !important;
    /* Violet-50 */
    border: 1px solid #ddd6fe !important;
    /* Violet-200 */
    color: #5b21b6 !important;
    /* Violet-800 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* 3. Spinner Color: Make bars Purple */
.typing-indicator-bubble svg rect {
    fill: #a855f7 !important;
    /* Purple-500 */
}

.light-theme .typing-indicator-bubble svg rect {
    fill: #7c3aed !important;
    /* Violet-600 */
}

/* Ensure Loading Bars align perfectly with text */
.chat-loading-inline {
    display: inline-flex !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

/* TYPING ANIMATION KEYFRAMES */
@keyframes typingWave {

    0%,
    100% {
        transform: scaleY(0.5);
        opacity: 0.4;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 16px;
    margin-left: 4px;
}

.typing-bar {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background-color: #a855f7;
    /* Default Purple */
    animation: typingWave 1s ease-in-out infinite;
}

.light-theme .typing-bar {
    background-color: #7c3aed;
    /* Darker Purple for Light Mode */
}

.typing-bar:nth-child(1) {
    animation-delay: 0s;
}

.typing-bar:nth-child(2) {
    animation-delay: 0.15s;
}

.typing-bar:nth-child(3) {
    animation-delay: 0.3s;
}

/* --------------------------------------------------------------------------
   6. CRITICAL FIX: DROPDOWN & MENU CLIPPING (Theme Toggle)
   -------------------------------------------------------------------------- */

/* 1. Force the Header Containers to allow overflow (Don't clip the menu) */
.app-header,
#preprocessing-page .glass.header {
    overflow: visible !important;
    z-index: 5000 !important;
    /* Ensure headers are above other content layers */
}

/* 2. Target the specific Dropdown Menus for Theme */
#theme-menu-toggle .dropdown-menu,
#theme-menu-toggle-pp .dropdown-menu {
    position: absolute !important;
    z-index: 100000 !important;
    /* Maximum z-index to sit on top of everything */
    max-height: 500px !important;
    /* Allow enough height */
    overflow-y: auto !important;
    min-width: 150px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 3. Ensure the dropdown items are visible */
#theme-menu-toggle .dropdown-item,
#theme-menu-toggle-pp .dropdown-item {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* 4. Fix for Mobile/Tablet Fixed Position Toggle Button */
/* Specifically target the TOGGLE BUTTON CONTAINER to move it out of the center */
@media screen and (max-width: 1024px) {

    #theme-menu-toggle,
    #theme-menu-toggle-pp {
        position: absolute !important;
        top: 10px !important;
        right: 15px !important;
        margin: 0 !important;
        z-index: 10001 !important;
        /* Ensure button itself is on top */
    }

    /* Ensure the parent header allows this absolute positioning relative to itself */
    .app-header,
    #preprocessing-page .glass.header {
        position: relative !important;
        overflow: visible !important;
    }

    /* Adjust the dropdown menu to pop strictly below this new position */
    #theme-menu-toggle .dropdown-menu,
    #theme-menu-toggle-pp .dropdown-menu {
        position: absolute !important;
        /* Keep relative to the button */
        top: 100% !important;
        /* Directly below button */
        right: 0 !important;
        /* Align right edge */
        left: auto !important;
        margin-top: 5px !important;
        width: 150px !important;
        min-width: 150px !important;
    }
}

/* --------------------------------------------------------------------------
   10. SCROLL PADDING for CHAT BAR
   -------------------------------------------------------------------------- */
#main-scroll-container {
    padding-bottom: 250px !important;
    /* Ensure content is visible above Chat Bar on Desktop */
}

@media (max-width: 768px) {
    #main-scroll-container {
        padding-bottom: 80px !important;
        /* Reduced space for mobile to fix "empty space" issue */
    }
}

/* --------------------------------------------------------------------------
   11. HIDE DATASET STATUS ON MOBILE/TABLET
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    #file-meta {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   12. GLOBAL DROPDOWN SCROLLING (Strict 5 items)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   12. GLOBAL DROPDOWN SCROLLING (Forced CSS Override)
   -------------------------------------------------------------------------- */
/* Target generic AND specific chart slot dropdowns */
.Select-menu-outer,
.chart-slot .Select-menu-outer {
    /* STRICT HEIGHT: 5-6 items */
    max-height: 200px !important;

    /* FORCE SCROLL */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    /* Reset sizing so it can shrink/grow up to max */
    height: auto !important;
    min-height: 0 !important;

    /* Layout */
    position: absolute !important;
    z-index: 2000000 !important;
    display: block !important;

    /* Visuals */
    background-color: #fff !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;

    /* Safari 16.2+ positioning fix */
    /* Ensure dropdown appears directly below the control */
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
    transform: none !important;

    /* Match parent width */
    width: 100% !important;
    min-width: 100% !important;
}

/* Free the simple inner menu */
.Select-menu {
    max-height: none !important;
    overflow: visible !important;
}

/* Free the react-virtualized inner wrapper (if present) */
.Select-menu-outer>div {
    max-height: none !important;
}

/* Option Styling */
.Select-option {
    /* Don't force height, let text dictate, but pad nicely */
    padding: 8px 12px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

/* 13. VISIBLE SCROLLBAR FOR DROPDOWNS */
.Select-menu-outer::-webkit-scrollbar,
.Select-menu::-webkit-scrollbar {
    width: 6px !important;
    display: block !important;
}

.Select-menu-outer::-webkit-scrollbar-thumb,
.Select-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 3px !important;
}

.Select-menu-outer::-webkit-scrollbar-track,
.Select-menu::-webkit-scrollbar-track {
    background: transparent !important;
}

.light-theme .Select-menu-outer::-webkit-scrollbar-thumb,
.light-theme .Select-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* --------------------------------------------------------------------------
   7. WELCOME PAGE OVERRIDES (Force Dark Theme)
   -------------------------------------------------------------------------- */
/* Ensure Welcome Page is always dark, overriding global light theme properties */
#welcome-page {
    background-color: #0f172a !important;
    background: #0f172a !important;
}

#welcome-page h1,
#welcome-page h2,
#welcome-page h3,
#welcome-page h4,
#welcome-page p,
#welcome-page li,
#welcome-page span:not([style*="transparent"]) {
    color: #ffffff !important;
}

/* Specifically protect the "graph" gradient text from being turned white */
#welcome-page .welcome-logo-text span:last-child {
    color: #bef264 !important;
    /* Fallback */
    -webkit-text-fill-color: transparent !important;
}

/* Ensure buttons and cards on welcome page don't pick up light theme white backgrounds if they shouldn't */
#welcome-page .feature-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#welcome-page .get-in-touch-section h3 {
    /* Keep the gradient text for Get In Touch */
    background: linear-gradient(to right, #ffffff 10%, #c084fc 50%, #818cf8 90%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

#welcome-page .contact-item-row span {
    color: #e2e8f0 !important;
}

/* FIX: Ensure Hero Heading is readable (bright gradient) on Welcome Page regardless of global theme */
#welcome-page .hero-heading-text {
    background: linear-gradient(to right, #ffffff 30%, #818cf8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: white !important;
    /* Fallback */
}

/* ==========================================================================
   WELCOME PAGE LIGHT THEME RESTORATION
   Ensures the welcome page (which is designed for dark mode) stays dark/correct
   even when the global app theme is set to Light.
   ========================================================================== */

/* 1. Force white color for the main container */
.light-theme #welcome-page {
    color: white !important;
}

/* 2. Reset all text elements inside welcome page to inherit white (or their specific inline styles) */
/* We must override the aggressive .light-theme div/span/etc selectors */
.light-theme #welcome-page div,
.light-theme #welcome-page span,
.light-theme #welcome-page p,
.light-theme #welcome-page h1,
.light-theme #welcome-page h2,
.light-theme #welcome-page h3,
.light-theme #welcome-page h4,
.light-theme #welcome-page h5,
.light-theme #welcome-page h6,
.light-theme #welcome-page a,
.light-theme #welcome-page li,
.light-theme #welcome-page button {
    color: inherit !important;
}

/* 3. Specific fix for footer text which needs to be grey */
.light-theme #welcome-page .footer-copyright-text {
    color: #64748b !important;
}

/* 4. Ensure inputs in contact form are readable (White text on dark glass) */
.light-theme #welcome-page .contact-input {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.light-theme #welcome-page .contact-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 5. SUPER SPECIFIC FIX for Footer Copyright Text */
/* Targeting the new unique class name to beat any other selector */
html body .light-theme #welcome-page .footer-copyright-text-final {
    color: #64748b !important;
    background-color: transparent !important;
    font-weight: 400 !important;
    /* Ensure it's not bolded by app-footer rules */
}

/* FORCE placeholder text color (React-Select actual node) */
/* =========================================
   FINAL PLACEHOLDER AUTHORITY (AWS SAFE)
   ========================================= */

/* Native inputs */
input::placeholder,
textarea::placeholder {
    color: #64748b !important;
    /* slate-500 */
    opacity: 1 !important;
}

/* Dash / React-Select */
.Select-placeholder,
.Select--single>.Select-control .Select-placeholder,
.dash-dropdown .Select-placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

/* Light theme override */
.light-theme input::placeholder,
.light-theme textarea::placeholder,
.light-theme .Select-placeholder {
    color: #94a3b8 !important;
    /* slate-400 */
}

/* ==========================================================================
   SAFARI 26.2 DROPDOWN POSITIONING FIX
   Status: Production-Ready, Minimal CSS-Only Patch
   Issue: Radix Popper dropdowns appear detached from select inputs in Safari
   Root Cause: backdrop-filter creates new containing block for position:fixed
   ========================================================================== */

/* -------------------------------------------------------------------------
   SAFARI-SPECIFIC: Prevent transformed/filtered containers from affecting
   position:fixed children (Radix Popper dropdowns)
   ------------------------------------------------------------------------- */

/* Safari-only media query - this specific syntax only matches Safari, not Chrome/Firefox */
/* The min-resolution:.001dpcm hack is Safari-specific */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (stroke-color:transparent) {

        /* CRITICAL FIX 1: Remove backdrop-filter from .glass when it contains dropdowns
           This prevents Safari from creating a new containing block for position:fixed */
        .glass:has(.Select),
        .glass:has(.dash-dropdown),
        .glass:has([data-radix-popper-content-wrapper]) {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            /* Fallback: Add subtle background to maintain visual consistency */
            background: rgba(16, 20, 30, 0.85) !important;
        }

        /* Light theme variant */
        .light-theme .glass:has(.Select),
        .light-theme .glass:has(.dash-dropdown),
        .light-theme .glass:has([data-radix-popper-content-wrapper]) {
            background: rgba(248, 250, 252, 0.95) !important;
        }

        /* CRITICAL FIX 2: Remove transform-related properties from dropdown wrappers
       Safari treats transform as creating a new containing block for position:fixed */
        .dash-dropdown-wrapper,
        .dash-dropdown,
        .chart-slot {
            transform: none !important;
            will-change: auto !important;
            /* Prevent any transform-based animations from affecting positioning */
            -webkit-transform: none !important;
        }

        /* CRITICAL FIX 3: Ensure Radix Popper content uses proper positioning context
       Force dropdowns to use viewport as containing block, not transformed parent */
        [data-radix-popper-content-wrapper],
        .Select-menu-outer,
        [role="listbox"] {
            position: fixed !important;
            /* Stabilize transform origin for Safari */
            transform-origin: top left !important;
            -webkit-transform-origin: top left !important;
            /* Ensure proper stacking */
            z-index: 9999 !important;
            /* Force GPU acceleration for smoother rendering */
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
        }

        /* CRITICAL FIX 4: Ensure dropdown trigger maintains proper positioning context */
        .Select,
        .Select-control,
        .dash-dropdown-trigger,
        [data-radix-select-trigger] {
            position: relative !important;
            /* Create isolated stacking context without transform */
            isolation: isolate !important;
            /* Remove any inherited transforms */
            transform: none !important;
            -webkit-transform: none !important;
        }

        /* CRITICAL FIX 5: Fix click/hover hit-testing alignment
       Ensure dropdown menu pointer-events align with visual position */
        .Select-menu-outer,
        [data-radix-popper-content-wrapper] {
            pointer-events: auto !important;
            /* Prevent Safari from miscalculating hit areas */
            -webkit-user-select: none !important;
            user-select: none !important;
        }

        .Select-menu,
        .VirtualizedSelectOption,
        [role="option"] {
            pointer-events: auto !important;
            -webkit-user-select: none !important;
            user-select: none !important;
        }

        /* CRITICAL FIX 6: Stabilize dropdown positioning during scroll
       Safari can lose track of fixed elements during scroll with transforms */
        .Select.is-open,
        .dash-dropdown.is-open {
            /* Create new stacking context */
            z-index: 10000 !important;
            position: relative !important;
            /* Prevent layout shift */
            contain: layout !important;
        }

        /* CRITICAL FIX 7: Remove will-change from parent containers
       will-change can also create containing blocks in Safari */
        .glass,
        .chart-slot,
        .studio-buttons-wrapper,
        .studio-control-group {
            will-change: auto !important;
        }

        /* CRITICAL FIX 8: Ensure dropdown appears directly under select box
       Override any inherited positioning that might offset the dropdown */
        .Select-menu-outer {
            /* Reset any margin/padding that might offset position */
            margin-top: 0 !important;
            margin-left: 0 !important;
            /* Ensure dropdown width matches trigger */
            min-width: 100% !important;
        }

        /* CRITICAL FIX 9: Safari-specific scroll container fix
       Prevent scroll containers from affecting fixed positioning */
        .chart-slot,
        .studio-buttons-wrapper,
        #preprocessing-page .glass {
            /* Remove scroll containment that affects fixed children */
            overflow: visible !important;
            /* Only apply scroll to specific inner containers if needed */
        }

        /* Allow scrolling only within the dropdown menu itself */
        .Select-menu-outer {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch !important;
        }
    }
}

/* -------------------------------------------------------------------------
   FALLBACK: Non-Safari browsers (Chrome, Firefox) - No changes needed
   These browsers correctly handle position:fixed with backdrop-filter
   ------------------------------------------------------------------------- */

/* Chrome and Firefox work correctly, so we only apply fixes in Safari's
   @supports context above. This ensures zero impact on other browsers. */

/* =============================================================================
   IMMEDIATE FIX FOR RADIX DROPDOWN VERTICAL ALIGNMENT
   Paste this at the END of your overrides.css file
   This will override the conflicting rules
   ============================================================================= */

/* Override the conflicting transform rules */
[data-radix-popper-content-wrapper] {
    /* Use fixed positioning as Radix intended */
    position: fixed !important;

    /* Let Radix calculate transform - DON'T override */
    transform: none !important;
    /* This removes any JS-calculated offset issues */

    /* Instead, use Radix's CSS variables for positioning */
    top: calc(var(--radix-popper-anchor-height, 0px) + var(--radix-popper-available-height, 0px) - var(--radix-popper-available-height, 0px)) !important;
    left: var(--radix-popper-transform-origin, 0%) !important;

    /* High z-index to appear above everything */
    z-index: 9999999 !important;
}

/* Alternative simpler fix - let's try forcing the position */
.dash-dropdown-wrapper[data-radix-dropdown-root] {
    position: relative !important;
}

[data-radix-popper-content-wrapper] {
    /* Override any transforms */
    transform: translateY(0px) !important;
    -webkit-transform: translateY(0px) !important;

    /* Position using CSS variables from Radix */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 2px !important;
}

/* Ensure the dropdown grid container provides correct positioning context */
.dash-dropdown-grid-container {
    position: relative !important;
}

/* Make sure chart-slot doesn't create a new stacking context */
.chart-slot {
    position: relative !important;
    contain: none !important;
    /* Remove containment */
}

/* =============================================================================
   NUCLEAR OPTION - If nothing else works, use this
   This forces the dropdown to position relative to viewport
   ============================================================================= */

/*
[data-radix-popper-content-wrapper] {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
}

[data-radix-popper-content-wrapper][data-side="bottom"] {
    margin-top: 2px !important;
}
*/
.dark-theme .dash-dropdown{
    color: #000000 !important;
}