/**
 * Layout System - Standardized Page Widths & Responsive Design
 * ============================================================
 * 
 * This file provides a consistent layout system across all pages.
 * Use these classes instead of custom max-width values.
 * 
 * LAYOUT TYPES:
 * - .layout-narrow  (768px)  - Reading-focused: wiki pages, docs, articles
 * - .layout-medium  (1024px) - General content, forms, moderate complexity
 * - .layout-wide    (1280px) - Data-heavy: tables, lists, feeds, dashboards
 * - .layout-max     (1400px) - Maximum bounded width
 * - .layout-full    (100%)   - App interfaces: messages, editors, sidebars
 * 
 * RESPONSIVE BREAKPOINTS:
 * - Mobile:  < 640px  (single column, stacked, touch-friendly)
 * - Tablet:  640px - 1024px (adapted, collapsible sidebars)
 * - Desktop: > 1024px (full experience)
 * 
 * USAGE:
 *   <main class="layout-narrow">...</main>
 *   <div class="layout-wide layout-padded">...</div>
 *   <section class="layout-full layout-with-sidebar">...</section>
 * 
 * KNOWN ISSUES TO FIX LATER:
 * - Mobile dropdown menus (navbar logo) need touch-friendly sizing
 * - Search bar on mobile needs responsive redesign
 * - Some sidebars don't collapse properly on tablet
 */

/* ===================
   BASE LAYOUT CONTAINERS
   =================== */

/* All layout containers share these base styles */
.layout-narrow,
.layout-medium,
.layout-wide,
.layout-max {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding-mobile);
  padding-right: var(--content-padding-mobile);
  box-sizing: border-box;
}

/* Narrow: Reading-focused content (768px) */
.layout-narrow {
  max-width: var(--layout-narrow);
}

/* Medium: General content (1024px) */
.layout-medium {
  max-width: var(--layout-medium);
}

/* Wide: Data-heavy content (1280px) */
.layout-wide {
  max-width: var(--layout-wide);
}

/* Max: Maximum bounded width (1400px) */
.layout-max {
  max-width: var(--layout-max);
}

/* Full: No max-width, for app-like interfaces */
.layout-full {
  width: 100%;
  padding-left: var(--content-padding-mobile);
  padding-right: var(--content-padding-mobile);
  box-sizing: border-box;
}

/* ===================
   RESPONSIVE PADDING
   =================== */

/* Tablet and up */
@media (min-width: 640px) {
  .layout-narrow,
  .layout-medium,
  .layout-wide,
  .layout-max,
  .layout-full {
    padding-left: var(--content-padding-tablet);
    padding-right: var(--content-padding-tablet);
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .layout-narrow,
  .layout-medium,
  .layout-wide,
  .layout-max,
  .layout-full {
    padding-left: var(--content-padding-desktop);
    padding-right: var(--content-padding-desktop);
  }
}

/* ===================
   LAYOUT MODIFIERS
   =================== */

/* No horizontal padding */
.layout-no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Extra padding for breathing room */
.layout-padded-lg {
  padding-left: calc(var(--content-padding-desktop) * 1.5);
  padding-right: calc(var(--content-padding-desktop) * 1.5);
}

/* Center content vertically (for flex parents) */
.layout-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===================
   SIDEBAR LAYOUTS
   =================== */

/* Container for sidebar + main content */
.layout-with-sidebar {
  display: flex;
  gap: var(--spacing-lg);
  width: 100%;
}

/* Main content area next to sidebar */
.layout-with-sidebar > .layout-main {
  flex: 1;
  min-width: 0; /* Prevent overflow */
}

/* Fixed sidebar */
.layout-with-sidebar > .layout-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
}

/* Sidebar on right */
.layout-with-sidebar.sidebar-right {
  flex-direction: row;
}

/* Sidebar on left */
.layout-with-sidebar.sidebar-left {
  flex-direction: row-reverse;
}

/* Collapse sidebar on tablet and below */
@media (max-width: 1024px) {
  .layout-with-sidebar {
    flex-direction: column;
  }
  
  .layout-with-sidebar > .layout-sidebar {
    width: 100%;
    order: -1; /* Sidebar appears first on mobile */
  }
  
  /* Option to hide sidebar on mobile */
  .layout-with-sidebar > .layout-sidebar.hide-mobile {
    display: none;
  }
}

/* ===================
   TWO-COLUMN LAYOUTS
   =================== */

.layout-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

/* Stack columns on tablet */
@media (max-width: 1024px) {
  .layout-two-column {
    grid-template-columns: 1fr;
  }
}

/* Three column grid */
.layout-three-column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

/* Responsive three columns */
@media (max-width: 1024px) {
  .layout-three-column {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .layout-three-column {
    grid-template-columns: 1fr;
  }
}

/* ===================
   RESPONSIVE UTILITIES
   =================== */

/* Hide on mobile */
.hide-mobile {
  display: block;
}

@media (max-width: 640px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on tablet and below */
.hide-tablet {
  display: block;
}

@media (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Show only on mobile */
.show-mobile {
  display: none;
}

@media (max-width: 640px) {
  .show-mobile {
    display: block !important;
  }
}

/* Show only on tablet and below */
.show-tablet {
  display: none;
}

@media (max-width: 1024px) {
  .show-tablet {
    display: block !important;
  }
}

/* ===================
   MOBILE-FIRST STACK
   =================== */

/* Stack any flex container on mobile */
.stack-mobile {
  display: flex;
  gap: var(--spacing-md);
}

@media (max-width: 640px) {
  .stack-mobile {
    flex-direction: column;
  }
}

/* ===================
   CONTENT WRAPPERS
   Common patterns for page content
   =================== */

/* Standard page content wrapper */
.page-content {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-2xl);
}

/* Compact page content */
.page-content-compact {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-lg);
}

/* Full height content (fills remaining viewport) */
.page-content-full-height {
  min-height: calc(100vh - var(--header-height) - var(--spacing-2xl));
}

/* ===================
   SECTION SPACING
   =================== */

.section {
  margin-bottom: var(--spacing-2xl);
}

.section-sm {
  margin-bottom: var(--spacing-lg);
}

.section-lg {
  margin-bottom: var(--spacing-3xl);
}

/* ===================
   CARD GRID LAYOUTS
   =================== */

.card-grid {
  display: grid;
  gap: var(--spacing-lg);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.card-grid-sm {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.card-grid-lg {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

/* ===================
   PRINT STYLES
   =================== */

@media print {
  .layout-narrow,
  .layout-medium,
  .layout-wide,
  .layout-max,
  .layout-full {
    max-width: 100%;
    padding: 0;
  }
  
  .hide-print {
    display: none !important;
  }
  
  .layout-with-sidebar > .layout-sidebar {
    display: none;
  }
}