/* ========================================
   KNOX DASHBOARD - LAYOUT PATCH
   Applied after layout-fixes.css for final fixes
   ======================================== */

/* ----------------------------------------
   CLEAN Z-INDEX HIERARCHY
   ---------------------------------------- */

/* Layer 5: Background elements */
.ambient-particle { z-index: 5; }
.vital-arcs-svg { z-index: 10; }

/* Layer 100-500: Main UI components */
.cyber-heart, .sigil-core { z-index: 100; }
.status-bar { z-index: 500; }

/* Layer 600-700: Widgets and overlays */
.system-widget,
.system-widget-left,
.system-widget-right { z-index: 600; }

.spatial-drawer { z-index: 700; }

/* Layer 800-950: Navigation and controls */
.nav-tabs { z-index: 800; }
.drawer-toggle { z-index: 900; }
.logout-btn { z-index: 950; }

/* Layer 1000-1500: Floating panels */
.floating-chat { z-index: 1000; }
.chat-toggle { z-index: 1001; }
.undo-toast { z-index: 1500; }

/* Layer 20000+: Modals and overlays */
.command-overlay { z-index: 20000; }
.task-modal { z-index: 20001; }
.login-overlay { z-index: 30000; }

/* ----------------------------------------
   WIDGET POSITIONING - Clean Layout
   ---------------------------------------- */

/* N8N Widget - Top right */
.n8n-widget-container {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 280px;
    z-index: 600;
}

/* Agent Panel - Top left area (after sidebar) */
.agent-panel-container {
    position: fixed;
    top: 80px;
    left: 320px;
    width: 260px;
    z-index: 600;
}

/* System vitals - Bottom left */
.system-widget-left {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    gap: 12px;
    z-index: 600;
}

/* System info - Bottom right */
.system-widget-right {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
    z-index: 600;
}

/* ----------------------------------------
   RESPONSIVE ADJUSTMENTS
   ---------------------------------------- */

@media (max-width: 1200px) {
    .agent-panel-container {
        left: 310px;
        width: 240px;
    }
    .n8n-widget-container {
        width: 260px;
    }
}

@media (max-width: 900px) {
    .n8n-widget-container,
    .agent-panel-container {
        display: none; /* Hide on tablet/mobile - show in drawer instead */
    }
    
    .system-widget-left,
    .system-widget-right {
        transform: scale(0.9);
    }
}

@media (max-width: 600px) {
    .system-widget-left {
        bottom: 80px;
        left: 10px;
        transform: scale(0.8);
    }
    
    .system-widget-right {
        bottom: 80px;
        right: 10px;
        transform: scale(0.75);
    }
}