/* ── LINGO CORE — MODERN 2026 MASTER LAYOUT ENGINE ──
   Built on CSS Container Queries, Native Flex Containment, and Overscroll Isolation. */

/* 1. VIEWPORT & CONTAINMENT RESET */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
  box-sizing: border-box;
  font-family: var(--font-sans);
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. ROOT APP SHELL: Semantic side-by-side flex layout */
#appShell {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 10;
  overscroll-behavior: contain;
}

/* 3. SIDEBAR NAVIGATION: Fixed 240px on wide screens (> 1024px), 64px icon rail on small screens (768px-1024px), drawer on mobile (< 768px) */
#appSidebar {
  flex: 0 0 240px;
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) and (max-width: 1024px) {
  #appSidebar {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    padding: 0.75rem 0.4rem !important;
  }
  #appSidebar .nav-item span,
  #appSidebar h1,
  #appSidebar p,
  #appSidebar .pipeline-status-text,
  #appSidebar div > div > p {
    display: none !important;
  }
  #appSidebar .nav-item {
    justify-content: center !important;
    padding: 0.6rem 0 !important;
    border-radius: 12px !important;
  }
  #appSidebar .nav-item svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin: 0 !important;
  }
  #appSidebar > div > div:first-child {
    justify-content: center !important;
    padding-bottom: 0.75rem !important;
  }
}

@media (max-width: 767px) {
  #appSidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  #appSidebar.sidebar-open {
    transform: translateX(0);
  }
}


/* 4. WORKSPACE CONTAINER */
#appWorkspace {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden !important;
  overflow-y: hidden;
}

/* 5. TOP HEADER BAR */
#appWorkspace > header {
  flex: 0 0 auto;
  min-height: 56px;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 50;
  overflow: visible !important;
}

/* 6. MAIN CONTENT WORKSPACE & CONTAINER QUERY CONTEXT */
#mainContent {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  padding: 1.25rem;
  padding-bottom: 5rem;
  container-type: inline-size;
  container-name: workspace;
}

/* 7. SPA SECTIONS CONTAINER */
.view-section {
  display: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.view-section.active {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 8. CONTAINER QUERY DRIVEN GRID ENGINE */
#kpiExecutiveBanner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.875rem;
  width: 100%;
}

@container workspace (max-width: 1050px) {
  #kpiExecutiveBanner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container workspace (max-width: 580px) {
  #kpiExecutiveBanner {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* 9. CLAY CARDS & MEDIA ELEMENTS CONTAINMENT */
.clay-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
canvas {
  max-width: 100%;
}
#terminalLogBody {
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 10. Z-INDEX STACKING ARCHITECTURE */
#matrixCanvas                { z-index: 0; pointer-events: none; max-width: 100vw; }
.glow-orb-1, .glow-orb-2     { z-index: 0; pointer-events: none; }
#appShell                    { z-index: 10; }
#appWorkspace > header       { z-index: 50; }
#appSidebar                  { z-index: 60; }
#sidebarBackdrop             { z-index: 59; }
#socialPlatformDropdownMenu  { z-index: 100; }
dialog                       { z-index: 200; }
.toast-container             { z-index: 999; }