/* ========================================
   KNOX DASHBOARD - CRITICAL LAYOUT FIXES
   Apply these styles to fix the "messy" appearance
   ======================================== */

/* ----------------------------------------
   1. Z-INDEX HIERARCHY FIX
   Establish proper stacking context
   ---------------------------------------- */

/* Login should always be on top */
.login-overlay {
    z-index: 30000 !important;
}

/* Modals above everything else */
.task-modal {
    z-index: 20001;
}

.command-overlay {
    z-index: 20000;
}

/* Toast notifications */
.undo-toast {
    z-index: 15000;
}

/* Floating UI elements */
.floating-chat {
    z-index: 1000;
}

.chat-toggle {
    z-index: 1001;  /* Just above chat panel */
}

/* Navigation and controls */
.nav-tabs {
    z-index: 900;
    top: 80px !important;  /* Below sigil */
}

.logout-btn {
    z-index: 950;
    right: 20px !important;  /* Consistent edge */
}

.drawer-toggle {
    z-index: 950;
    right: 100px !important;  /* Space for logout */
}

.sigil-core {
    z-index: 800;  /* Below nav but still visible */
}

/* Status area */
.status-bar {
    z-index: 500;
}

.system-widget {
    z-index: 600;  /* Above status bar */
}

/* Background decorations */
.vital-arcs-svg {
    z-index: 10;
}

.ambient-particle {
    z-index: 5;
}

/* ----------------------------------------
   2. OVERFLOW FIX
   Remove the !important that breaks layout
   ---------------------------------------- */

/* Remove this problematic rule entirely */
.main-orbital {
    overflow-x: hidden;
    overflow-y: auto;
    contain: layout style paint;
}

/* Allow glow on specific widgets only */
.system-widget {
    overflow: visible;
    contain: none;
}

/* ----------------------------------------
   3. DRAWER LAYOUT FIX
   Convert from grid-based to fixed slide-out
   ---------------------------------------- */

/* Remove drawer from grid */
.nerve-center {
    grid-template-columns: 300px 1fr !important;  /* No drawer column */
    grid-template-areas: "helix main" !important;
}

.nerve-center.drawer-open {
    grid-template-columns: 300px 1fr !important;  /* Keep same columns */
}

/* Make drawer a true overlay */
.spatial-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 350px !important;
    height: 100vh !important;
    transform: translateX(100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease 0.1s,
                visibility 0.3s !important;
    z-index: 700;
}

.spatial-drawer.open,
.nerve-center.drawer-open .spatial-drawer {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ----------------------------------------
   4. SYSTEM WIDGETS CONSOLIDATION
   Prevent overlap between left/right widgets
   ---------------------------------------- */

.system-widget-left,
.system-widget-right {
    position: fixed;
    bottom: 80px !important;  /* Above status bar */
    display: flex;
    gap: 12px;
    pointer-events: none;
}

.system-widget-left {
    left: 20px;
}

.system-widget-right {
    left: auto !important;
    right: 20px;  /* Move to right side to avoid collision */
}

.system-widget > * {
    pointer-events: auto;
}

/* ----------------------------------------
   5. FLOATING CHAT POSITION FIX
   Prevent collision with status bar
   ---------------------------------------- */

.floating-chat {
    bottom: 80px !important;  /* Above status bar */
    right: 20px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);  /* Better visibility */
}

/* ----------------------------------------
   6. MAIN CONTENT VIEW FIX
   Prevent multiple views from stacking
   ---------------------------------------- */

.view-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.view-container.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative;
}

/* Ensure only one view is visible */
#nerve-view:not(.active),
#projects-view:not(.active),
#files-view:not(.active),
#logs-view:not(.active),
#models-view:not(.active) {
    display: none;
}

/* ----------------------------------------
   7. RESPONSIVE FIXES
   Critical mobile adjustments
   ---------------------------------------- */

@media (max-width: 900px) {
    /* Chat takes full width on tablet/mobile */
    .floating-chat {
        width: calc(100vw - 40px) !important;
        height: calc(100vh - 160px) !important;
        bottom: 80px !important;
    }
    
    /* Move system widgets to not overlap */
    .system-widget-left,
    .system-widget-right {
        bottom: 140px !important;
        transform: scale(0.85);
        transform-origin: bottom left;
    }
    
    .system-widget-right {
        right: 20px;
        transform-origin: bottom right;
    }
}

@media (max-width: 600px) {
    /* Smaller gauges on mobile */
    .sys-gauge {
        width: 60px;
        height: 60px;
    }
    
    .sys-gauge-mini {
        width: 50px;
        height: 50px;
    }
    
    /* Compact status bar */
    .status-bar {
        left: 10px;
        right: 70px;  /* Space for chat toggle */
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .status-indicator {
        padding: 4px 6px;
        font-size: 9px;
    }
    
    /* Nav tabs scrollable on mobile */
    .nav-tabs {
        overflow-x: auto;
        max-width: calc(100vw - 20px);
        scrollbar-width: none;  /* Firefox */
        -ms-overflow-style: none;  /* IE */
    }
    
    .nav-tabs::-webkit-scrollbar {
        display: none;  /* Chrome/Safari */
    }
    
    .nav-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Hide non-critical widgets on very small screens */
    .system-widget-right {
        display: none;
    }
    
    .system-widget-left {
        bottom: 80px;
        transform: scale(0.75);
    }
}

/* ----------------------------------------
   8. SPACING CONSISTENCY FIXES
   Standardize padding across components
   ---------------------------------------- */

/* Main orbital padding consistency */
.main-orbital {
    padding: 24px;
}

/* Kanban columns consistent spacing */
.kanban-column {
    padding: 16px;
}

/* Activity helix match other sidebars */
.activity-helix {
    padding: 24px;
}

/* Drawer padding match */
.spatial-drawer {
    padding: 24px;
}

/* ----------------------------------------
   9. DUPLICATE ELEMENT FIX
   Remove conflicting logout button styles
   ---------------------------------------- */

/* The second logout-btn at line ~3474 should be removed from HTML */
/* If both exist, ensure they have identical styling */
#logout-btn,
.logout-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(26,26,38,0.7);
    border: 1px solid rgba(107,107,128,0.2);
    border-radius: 6px;
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--slate);
    cursor: pointer;
    z-index: 950;
    transition: all 0.2s;
}

#logout-btn:hover,
.logout-btn:hover {
    border-color: var(--coral);
    color: var(--coral);
}

/* ----------------------------------------
   10. PERFORMANCE FIX
   Add containment for smoother animations
   ---------------------------------------- */

/* Contain expensive animations */
.cyber-heart,
.sigil-core,
.kanban-board,
.shard {
    contain: layout style;
    will-change: transform;
}

/* Prevent paint during scroll */
.activity-helix,
.kanban-cards {
    contain: layout style paint;
}

/* Isolate modal overlays */
.command-overlay,
.task-modal,
.login-overlay {
    contain: layout style paint;
    isolation: isolate;
}