/* Custom CSS for EnterpriseFlow AI Dashboard */

/* Day Mode (Light Theme) default variables */
:root {
    --color-primary: #008f7a;
    --color-primary-dim: #005143;
    --color-secondary: #0056b3;
    --color-secondary-dim: #002e69;
    --color-background: #F4F6F9;
    --color-surface: #FFFFFF;
    --color-surface-container: #E9ECEF;
    --color-surface-container-high: #DEE2E6;
    --color-on-background: #1E293B;
    --color-error: #DC3545;
    --color-glass-bg: rgba(255, 255, 255, 0.75);
    --color-glass-border: rgba(0, 0, 0, 0.08);
    --color-glass-heavy-bg: rgba(255, 255, 255, 0.92);
    --color-glass-heavy-border: rgba(0, 0, 0, 0.12);
    --color-grid-dot: rgba(0, 143, 122, 0.12);
}

/* Dark Theme overrides when .dark is active */
html.dark, body.dark {
    --color-primary: #70ffe0;
    --color-primary-dim: #00dfbe;
    --color-secondary: #adc6ff;
    --color-secondary-dim: #026de7;
    --color-background: #08111F;
    --color-surface: #101415;
    --color-surface-container: #1d2022;
    --color-surface-container-high: #272a2c;
    --color-on-background: #e0e3e5;
    --color-error: #ffb4ab;
    --color-glass-bg: rgba(16, 20, 21, 0.6);
    --color-glass-border: rgba(255, 255, 255, 0.08);
    --color-glass-heavy-bg: rgba(10, 14, 15, 0.85);
    --color-glass-heavy-border: rgba(255, 255, 255, 0.1);
    --color-grid-dot: rgba(112, 255, 224, 0.08);
}

/* Base resets & custom typography scrollbars */
html, body {
    background-color: var(--color-background);
    color: var(--color-on-background);
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
    opacity: 0.5;
}

/* Glassmorphism panels using dynamic theme variables */
.glass-panel {
    background: var(--color-glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-glass-border);
    transition: background 0.3s ease, border 0.3s ease;
}
.glass-panel-heavy {
    background: var(--color-glass-heavy-bg);
    backdrop-filter: blur(30px);
    border: 1px solid var(--color-glass-heavy-border);
    transition: background 0.3s ease, border 0.3s ease;
}

/* Canvas Grid Pattern */
.canvas-grid {
    background-image: radial-gradient(var(--color-grid-dot) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Connection Lines animation */
.workflow-line {
    stroke-dasharray: 6;
    animation: dash 15s linear infinite;
}
@keyframes dash {
    to {
        stroke-dashoffset: -120;
    }
}

/* Glow effects & animations */
.glow-pulse {
    animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
    from {
        box-shadow: 0 0 5px rgba(0, 229, 195, 0.15);
        border-color: rgba(0, 229, 195, 0.3);
    }
    to {
        box-shadow: 0 0 15px rgba(0, 229, 195, 0.45);
        border-color: rgba(0, 229, 195, 0.8);
    }
}

.glow-hover:hover {
    box-shadow: 0 0 15px rgba(0, 229, 195, 0.15);
    border-color: rgba(0, 229, 195, 0.4);
}

.orb-glow {
    filter: blur(60px);
    background: linear-gradient(135deg, #7C4DFF 0%, #00E5C3 100%);
    animation: pulse 6s infinite alternate;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.2); opacity: 0.7; }
}

@keyframes fadeIn {
    from { opacity: 0; filter: blur(8px); }
    to { opacity: 1; filter: blur(0px); }
}
.fade-in-sequence {
    animation: fadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.progress-shimmer {
    background: linear-gradient(90deg, transparent, rgba(112, 255, 224, 0.3), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Sidebar connection points on the node editor */
.connection-handle {
    width: 10px;
    height: 10px;
    background-color: var(--color-background);
    border: 2px solid var(--color-primary);
    border-radius: 9999px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    transition: all 0.2s;
}
.connection-handle:hover {
    background-color: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
}
.connection-handle-left {
    left: -5px;
}
.connection-handle-right {
    right: -5px;
}

/* Draggable helper states */
.canvas-node {
    cursor: move;
    user-select: none;
    position: absolute !important;
}
.canvas-node-active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 15px rgba(0, 229, 195, 0.2) !important;
}

/* Voice AI wave animation styles */
.voice-wave-bar {
    width: 3px;
    background-color: var(--color-primary);
    border-radius: 99px;
    height: 4px;
    transition: height 0.05s ease;
}

/* Utility to hide elements */
.hidden-view {
    display: none !important;
}

/* Transitions for tabs */
.view-container {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Custom simulation active states */
.node-active-flash {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 25px var(--color-primary) !important;
    transform: scale(1.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.workflow-line-active {
    stroke: var(--color-primary) !important;
    stroke-width: 3.5px !important;
    filter: drop-shadow(0 0 8px var(--color-primary));
    stroke-dasharray: 6;
    animation: dash 4s linear infinite !important;
    transition: all 0.3s;
}

.slack-toast {
    animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInRight {
    from { transform: translateX(110%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Collapsible Sidebar Styles */
aside {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
main, footer {
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Cyberpunk Dark Mode Visual Overrides & Glow Enhancements */
html.dark, body.dark {
    background-color: #060911 !important;
    color: #e0e3e5 !important;
}

html.dark .glass-panel, body.dark .glass-panel {
    background: rgba(10, 14, 23, 0.75) !important;
    border-color: rgba(0, 229, 195, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

html.dark .glass-panel-heavy, body.dark .glass-panel-heavy {
    background: rgba(6, 9, 17, 0.92) !important;
    border-color: rgba(0, 229, 195, 0.25) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 229, 195, 0.08);
}

html.dark .glass-card-interactive:hover, body.dark .glass-card-interactive:hover {
    border-color: rgba(0, 229, 195, 0.5) !important;
    box-shadow: 0 10px 30px rgba(0, 229, 195, 0.2), inset 0 0 15px rgba(0, 229, 195, 0.1) !important;
    transform: translateY(-3px);
}

/* Collapsible Short Sidebar Enhancements */
.sidebar-collapsed {
    width: 72px !important;
}
.sidebar-collapsed .logo-text,
.sidebar-collapsed .logo-subtitle,
.sidebar-collapsed .nav-text,
.sidebar-collapsed .doc-footer,
.sidebar-collapsed .new-workflow-btn-text,
.sidebar-collapsed #navSearchInput,
.sidebar-collapsed .logo-text-container {
    display: none !important;
}
.sidebar-collapsed nav a {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.sidebar-collapsed .px-4.mb-4.mt-2 {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.sidebar-collapsed .nav-group-container button {
    justify-content: center;
    padding: 10px 0 !important;
}
.sidebar-collapsed .nav-group-container button .material-symbols-outlined {
    font-size: 20px !important;
}

.content-collapsed-margin {
    margin-left: 72px !important;
}
.footer-collapsed-left {
    left: 72px !important;
}

/* Accordion side navigation group collapse/expand transitions */
.group-collapsed {
    max-height: 0px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.group-arrow-collapsed {
    transform: rotate(-90deg) !important;
}

/* Collapsible sidebar overrides for group headers */
.sidebar-collapsed .group-arrow,
.sidebar-collapsed .nav-group-container button {
    display: none !important;
}
.sidebar-collapsed .nav-group-container div {
    padding-left: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.sidebar-collapsed .nav-group-container div a {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Command Palette Overlay */
#commandPaletteModal {
    background-color: rgba(10, 14, 15, 0.7);
    backdrop-filter: blur(12px);
    transition: opacity 0.3s ease;
}

/* Onboarding Wizard loader states */
.progress-bar-shimmer {
    background: linear-gradient(90deg, #70ffe0 0%, #00dfbe 50%, #70ffe0 100%);
    background-size: 200% 100%;
    animation: barShimmer 1.5s infinite linear;
}
@keyframes barShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Node flow flashes and statuses */
.node-active-flash-error {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 25px var(--color-error) !important;
    transform: scale(1.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Custom telemetry indicator glow */
.kpi-metric-glow {
    box-shadow: 0 0 15px rgba(112, 255, 224, 0.05);
    border: 1px solid rgba(112, 255, 224, 0.1);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kpi-metric-glow:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 25px rgba(112, 255, 224, 0.2);
    transform: translateY(-2px);
}

/* ==========================================
   END-TO-END ADVANCED ANIMATIONS & STYLING
   ========================================== */

/* 1. View Entrance Animation */
@keyframes pageEnter {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.99);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}
.page-enter-anim {
    animation: pageEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. Floating Ambient Glow Orbs */
@keyframes floatOrbSlow {
    0% { transform: translate(0px, 0px) scale(1); opacity: 0.25; }
    50% { transform: translate(30px, -20px) scale(1.15); opacity: 0.4; }
    100% { transform: translate(-20px, 20px) scale(0.95); opacity: 0.25; }
}
@keyframes floatOrbFast {
    0% { transform: translate(0px, 0px) scale(1); opacity: 0.2; }
    50% { transform: translate(-40px, 30px) scale(1.2); opacity: 0.35; }
    100% { transform: translate(25px, -15px) scale(0.9); opacity: 0.2; }
}
.ambient-orb-1 {
    animation: floatOrbSlow 14s ease-in-out infinite alternate;
}
.ambient-orb-2 {
    animation: floatOrbFast 18s ease-in-out infinite alternate;
}

/* 3. Interactive Glass Card Hover Effects */
.glass-card-interactive {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.glass-card-interactive::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.6s ease;
}
.glass-card-interactive:hover::after {
    left: 100%;
}
.glass-card-interactive:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 12px 30px -10px rgba(0, 229, 195, 0.15), 0 0 1px 1px rgba(112, 255, 224, 0.3);
    border-color: rgba(112, 255, 224, 0.4) !important;
}

/* 4. Button Micro-Interactions & Shimmer */
@keyframes shineSweep {
    0% { left: -100%; }
    100% { left: 200%; }
}
.btn-shine {
    position: relative;
    overflow: hidden;
}
.btn-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
}
.btn-shine:hover::before {
    animation: shineSweep 0.8s ease-in-out;
}

/* 5. Terminal Cursor & Stream Pulse */
@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.typing-cursor::after {
    content: '▋';
    display: inline-block;
    color: var(--color-primary);
    animation: blinkCursor 0.8s infinite;
    margin-left: 2px;
}

/* 6. Spring Physics Toast Notification */
@keyframes toastSpring {
    0% { transform: translateX(120%) scale(0.9); opacity: 0; }
    70% { transform: translateX(-8px) scale(1.02); opacity: 1; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}
.toast-spring-anim {
    animation: toastSpring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 7. Pulsing Neon Badge */
@keyframes neonPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(112, 255, 224, 0.4), inset 0 0 5px rgba(112, 255, 224, 0.2); }
    50% { box-shadow: 0 0 15px rgba(112, 255, 224, 0.8), inset 0 0 10px rgba(112, 255, 224, 0.4); }
}
.neon-badge {
    animation: neonPulse 2.5s infinite;
}

/* ==========================================
   END-TO-END ATMOSPHERIC MESH & MODAL ANIMATIONS
   ========================================== */

/* Animated Multi-Layered Radial Gradient Mesh Background */
@keyframes meshShift {
    0% { background-position: 0% 0%, 100% 100%, 50% 50%; }
    50% { background-position: 100% 50%, 0% 50%, 100% 0%; }
    100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
}
.bg-gradient-mesh-dark {
    background-color: #060911 !important;
    background-image: 
        radial-gradient(at 0% 0%, rgba(0, 229, 195, 0.18) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(124, 77, 255, 0.18) 0px, transparent 50%),
        radial-gradient(at 50% 0%, rgba(2, 109, 231, 0.12) 0px, transparent 60%),
        radial-gradient(at 100% 0%, rgba(0, 143, 122, 0.15) 0px, transparent 40%);
    background-size: 180% 180%;
    animation: meshShift 18s ease infinite;
}

/* Modal 3D Spring Bounce Entrance */
@keyframes modalPopSpring {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.01) translateY(-3px);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
}
.modal-pop-anim {
    animation: modalPopSpring 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Onboarding Step Card Slide & Cross-Fade Transition */
@keyframes stepSlideIn {
    0% {
        opacity: 0;
        transform: translateX(25px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
.step-slide-anim {
    animation: stepSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Section Ambient Color Glow Overlays */
.section-bg-glow-dashboard {
    background: radial-gradient(circle at 80% 20%, rgba(0, 229, 195, 0.08) 0%, transparent 60%);
}
.section-bg-glow-cli {
    background: radial-gradient(circle at 20% 30%, rgba(0, 86, 179, 0.12) 0%, transparent 60%);
}
.section-bg-glow-workflows {
    background: radial-gradient(circle at 70% 70%, rgba(124, 77, 255, 0.1) 0%, transparent 60%);
}
.section-bg-glow-anomalies {
    background: radial-gradient(circle at 30% 20%, rgba(220, 53, 69, 0.1) 0%, transparent 60%);
}
.section-bg-glow-analytics {
    background: radial-gradient(circle at 50% 50%, rgba(112, 255, 224, 0.08) 0%, transparent 60%);
}

/* Form Input Glow on Focus */
.input-glow-focus:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 12px rgba(0, 229, 195, 0.25) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ==========================================
   VISUAL BUILDER, DATA QUALITY & QUERY STUDIO SIMULATOR STYLES
   ========================================== */

/* 1. Canvas Flow Particles */
@keyframes particlePulse {
    0% { r: 3; opacity: 0.3; }
    50% { r: 6; opacity: 1; filter: drop-shadow(0 0 6px #70ffe0); }
    100% { r: 3; opacity: 0.3; }
}
.flow-particle {
    fill: #70ffe0;
    animation: particlePulse 1.2s infinite ease-in-out;
}

/* 2. Active Node Execution Glow States */
.node-executing {
    border-color: #00e5c3 !important;
    box-shadow: 0 0 25px rgba(0, 229, 195, 0.5), inset 0 0 15px rgba(0, 229, 195, 0.2) !important;
    transform: scale(1.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.node-passed {
    border-color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}
.node-gate {
    border-color: #f59e0b !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.5) !important;
    animation: gatePulse 1.5s infinite alternate;
}
@keyframes gatePulse {
    0% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.3); }
    100% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.8); }
}

/* 3. Visual Execution Plan DAG Nodes in Query Studio */
.dag-node {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    transition: all 0.25s ease;
}
.dag-node:hover {
    border-color: #00e5c3;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -5px rgba(0, 229, 195, 0.3);
}

/* 4. Data Quality Score Ring Animation */
@keyframes dqRingProgress {
    from { stroke-dashoffset: 283; }
    to { stroke-dashoffset: 14; }
}
.dq-score-ring {
    stroke-dasharray: 283;
    stroke-dashoffset: 14;
    animation: dqRingProgress 2s ease-out forwards;
}

/* 5. Master Simulator Header Floating Bar */
.simulator-top-bar {
    background: rgba(11, 15, 16, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 229, 195, 0.25);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 229, 195, 0.15);
}

/* Brand Logo Image Cropping & Focusing */
.brand-logo-icon {
    object-fit: cover !important;
    object-position: 50% 28% !important;
    border-radius: 12px;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.brand-logo-icon:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 0 12px rgba(0, 229, 195, 0.6));
}

/* Fix Select Dropdown Option Contrast in Dark Mode */
select {
    background-color: #101415 !important;
    color: #e0e3e5 !important;
}
select option {
    background-color: #0b0f10 !important;
    color: #ffffff !important;
    padding: 10px 14px;
}
select option:hover, select option:focus, select option:checked {
    background-color: #00e5c3 !important;
    color: #002e69 !important;
}

/* ==========================================
   MOBILE DESIGN SYSTEM & RESPONSIVE LAYOUTS
   ========================================== */

/* Mobile Bottom Navigation Bar */
#mobileBottomNav {
    height: 64px;
    background: rgba(6, 9, 17, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.7);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: rgba(224, 227, 229, 0.6);
    font-size: 10px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    padding: 4px 0;
    border-radius: 12px;
}

.mobile-nav-item .material-symbols-outlined {
    font-size: 22px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}

.mobile-nav-item.active {
    color: var(--color-primary);
}

.mobile-nav-item.active .material-symbols-outlined {
    transform: translateY(-2px) scale(1.15);
    filter: drop-shadow(0 0 8px var(--color-primary));
}

.mobile-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 16px;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 99px;
    box-shadow: 0 0 8px var(--color-primary);
}

/* Mobile Sidebar Backdrop Overlay */
#mobileSidebarOverlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#mobileSidebarOverlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Off-Canvas Mobile Drawer Styles */
@media (max-width: 768px) {
    #appSidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 280px !important;
        z-index: 50 !important;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
        box-shadow: none;
    }
    #appSidebar.mobile-drawer-open {
        transform: translateX(0) !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 229, 195, 0.2) !important;
    }

    #mainContent {
        margin-left: 0 !important;
        padding-bottom: 76px !important;
        height: calc(100vh - 4rem) !important;
        height: calc(100dvh - 4rem) !important;
    }

    #appFooter {
        left: 0 !important;
        bottom: 64px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        height: 38px !important;
    }

    .canvas-node {
        touch-action: none;
    }

    /* Mobile Bottom Sheet Drawer for Node Inspector */
    .mobile-bottom-sheet {
        position: fixed !important;
        bottom: 64px !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 70vh !important;
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
        border-top: 1px solid rgba(0, 229, 195, 0.4) !important;
        background: rgba(10, 14, 15, 0.96) !important;
        backdrop-filter: blur(25px) !important;
        z-index: 45 !important;
        overflow-y: auto !important;
        animation: slideUpSheet 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.9), 0 -2px 15px rgba(0, 229, 195, 0.2);
    }
    @keyframes slideUpSheet {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Stack grid elements on mobile */
    .responsive-grid-cards {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    .responsive-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    /* Touch target sizes & input auto-zoom prevention */
    button, a, input, select, textarea {
        min-height: 44px;
        touch-action: manipulation;
    }
    
    input, select, textarea {
        font-size: 16px !important; /* Prevents auto-zoom on mobile iOS/Android */
    }

    /* Touch scroll optimization */
    .touch-scroll-x, .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
    }

    /* Mobile modal pop bounds */
    #voiceAiModal > div, #appLauncherModal > div, #createWorkspaceModal > div {
        margin: 16px !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* Touch active micro-animations */
@media (hover: none) and (pointer: coarse) {
    .glass-card-interactive:active {
        transform: scale(0.98);
    }
    button:active {
        transform: scale(0.96);
    }
}

/* ==========================================
   DAY MODE (LIGHT THEME) END-TO-END STYLING
   ========================================== */
body:not(.dark) {
    background-color: #F4F6F9 !important;
    color: #0F172A !important;
}

body:not(.dark) .text-white {
    color: #0F172A !important;
}

body:not(.dark) .text-on-surface-variant {
    color: #475569 !important;
}

body:not(.dark) .glass-panel {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(203, 213, 225, 0.7) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

body:not(.dark) .glass-panel-heavy {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(203, 213, 225, 0.85) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.09) !important;
}

body:not(.dark) header, 
body:not(.dark) #appSidebar, 
body:not(.dark) #mobileBottomNav, 
body:not(.dark) #appFooter {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(203, 213, 225, 0.75) !important;
    color: #0F172A !important;
}

body:not(.dark) .bg-surface-dim, 
body:not(.dark) .bg-surface-container, 
body:not(.dark) .bg-surface-container-low, 
body:not(.dark) .bg-surface-container-lowest,
body:not(.dark) .bg-slate-950\/90,
body:not(.dark) .bg-slate-950\/95 {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-color: rgba(203, 213, 225, 0.6) !important;
}

body:not(.dark) input, 
body:not(.dark) select, 
body:not(.dark) textarea {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
}

body:not(.dark) select option {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
}

body:not(.dark) .bg-white\/5, 
body:not(.dark) .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

body:not(.dark) .border-white\/5, 
body:not(.dark) .border-white\/10, 
body:not(.dark) .border-white\/15 {
    border-color: rgba(203, 213, 225, 0.6) !important;
}