/**
 * DESIGN_51: Responsive Content Layout System
 *
 * Purpose: Unified max-width layout system for content areas
 * Created: 2025-12-24
 *
 * Features:
 * - Responsive max-width constraints
 * - Centered content layout
 * - Smooth transitions with assistant expand/collapse
 * - Multiple content-type variants (narrow, standard, wide, full)
 *
 * Usage:
 * <div class="nona-page-container">
 *   <div class="nona-content-wrapper">
 *     <!-- Page content here -->
 *   </div>
 * </div>
 */

/* ========================================
   Global Scrollbar Hiding
   ======================================== */

/**
 * Hide main page scrollbar (html/body level)
 * Content scrolling is handled by .nona-page-container or .quantitative-market-builder__container
 * with position: fixed, so main page scrollbar is unnecessary
 */
html,
body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  overflow-x: hidden; /* Prevent horizontal scrollbar */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
  width: 0;
  height: 0;
}

/* ========================================
   Base Container - Respects Nav & Assistant
   ======================================== */

/**
 * Main page container that adjusts for nav bar and assistant panel
 * - Fixed positioning to handle scrolling properly
 * - Dynamically adjusts width based on assistant state
 */
.nona-page-container {
  position: fixed;
  top: var(--nona-header-height);
  left: var(--nona-nav-width);
  right: var(--assistant-current-width);
  width: var(--content-available-width);
  height: calc(100vh - var(--nona-header-height) - var(--bottom-toolbar-height));
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Content Wrapper - Max-Width Constraints
   ======================================== */

/**
 * Main content wrapper with max-width constraints
 * - Centers content on large screens
 * - Provides consistent padding (horizontal + vertical)
 * - Smoothly transitions when window resizes
 * - Top padding: 72px for comfortable header clearance
 */
.nona-content-wrapper {
  position: relative;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: calc(var(--spacing-lg) * 3) var(--content-padding-x) var(--spacing-lg);
  transition: max-width 0.3s ease, padding 0.3s ease;
}

/* ========================================
   Content Type Variants
   ======================================== */

/**
 * Narrow variant - For forms, settings, documentation
 * Example: API Key Management, User Settings
 */
.nona-content-wrapper--narrow {
  max-width: var(--content-max-width-narrow);
}

/**
 * Wide variant - For data tables, dashboards
 * Example: Backtest Results, Market Analysis
 */
.nona-content-wrapper--wide {
  max-width: var(--content-max-width-large);
}

/**
 * Full-width variant - For canvas, builders
 * Example: Workflow Builder, Entry Signal Builder
 */
.nona-content-wrapper--full {
  max-width: none;
  padding: 0;
}

/* ========================================
   Responsive Breakpoints
   ======================================== */

/**
 * Ultra-wide screens (4K+)
 * Increase max-width to utilize larger displays
 */
@media (min-width: 2560px) {
  :root {
    --content-max-width: var(--content-max-width-ultra);
    --content-padding-x: 48px;
  }
}

/**
 * Large screens (2K displays)
 * Optimal max-width for 1920px-2559px displays
 */
@media (min-width: 1920px) and (max-width: 2559px) {
  :root {
    --content-max-width: var(--content-max-width-large);
    --content-padding-x: 40px;
  }
}

/**
 * Standard desktop (most common)
 * Default max-width for 1440px-1919px displays
 */
@media (min-width: 1440px) and (max-width: 1919px) {
  :root {
    --content-max-width: var(--content-max-width-standard);
    --content-padding-x: 32px;
  }
}

/**
 * Small desktop / Large laptop
 * Switch to full-width with padding
 */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --content-max-width: var(--content-max-width-small);
    --content-padding-x: 24px;
  }
}

/**
 * Tablet and below
 * Full-width with minimal padding
 */
@media (max-width: 1023px) {
  :root {
    --content-max-width: var(--content-max-width-small);
    --content-padding-x: 16px;
  }

  /* Override page container on mobile */
  .nona-page-container {
    position: relative;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
  }

  /* Adjust content wrapper padding on mobile */
  .nona-content-wrapper {
    padding: 0 var(--content-padding-x);
  }
}

/* ========================================
   Assistant State Integration
   ======================================== */

/**
 * When assistant expands, content area automatically adjusts
 * No additional CSS needed - uses CSS variable system
 *
 * Flow:
 * 1. body.assistant-expanded class added
 * 2. --assistant-current-width changes from 0 to var(--assistant-width-expanded)
 * 3. --content-available-width recalculates automatically
 * 4. .nona-page-container width transitions smoothly
 */

/* ========================================
   GPU Acceleration Hints
   ======================================== */

/**
 * Optimize animations for smooth 60fps transitions
 */
.nona-page-container,
.nona-content-wrapper {
  will-change: width, max-width;
}

/* Remove will-change after transitions complete */
.nona-page-container:not(:hover),
.nona-content-wrapper:not(:hover) {
  will-change: auto;
}

/* ========================================
   Utility Classes
   ======================================== */

/**
 * No padding variant - Remove horizontal padding
 * Use when content has its own padding management
 */
.nona-content-wrapper--no-padding {
  padding-left: 0;
  padding-right: 0;
}

/**
 * Vertical padding utilities
 */
.nona-content-wrapper--padding-top {
  padding-top: calc(var(--spacing-unit) * 2);
}

.nona-content-wrapper--padding-bottom {
  padding-bottom: calc(var(--spacing-unit) * 2);
}

/**
 * Full-height content (for scrollable inner containers)
 */
.nona-content-wrapper--full-height {
  height: 100%;
}

/* ========================================
   Debug Helper (Development Only)
   ======================================== */

/**
 * Uncomment for visual debugging of layout boundaries
 * Shows content wrapper boundaries with colored outlines
 */
/*
.nona-page-container {
  outline: 2px dashed rgba(255, 0, 0, 0.3);
}

.nona-content-wrapper {
  outline: 2px dashed rgba(0, 255, 0, 0.3);
}

.nona-content-wrapper--narrow {
  outline-color: rgba(0, 0, 255, 0.3);
}

.nona-content-wrapper--wide {
  outline-color: rgba(255, 165, 0, 0.3);
}

.nona-content-wrapper--full {
  outline-color: rgba(128, 0, 128, 0.3);
}
*/