// Layout patterns - Common page structures

/**
 * @section Containers
 */

/** @public Fluid container with responsive padding */
.container {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

/** @public Small container - 640px max-width */
.container-sm {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  max-width: 640px;
}

/** @public Medium container - 768px max-width */
.container-md {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  max-width: 768px;
}

/** @public Large container - 1024px max-width */
.container-lg {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  max-width: 1024px;
}

/** @public Extra large container - 1280px max-width */
.container-xl {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  max-width: 1280px;
}

/** @public 2XL container - 1536px max-width */
.container-2xl {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  max-width: 1536px;
}

/**
 * @section Page Layout
 */

/** @public Full-height page wrapper */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/** @public Page header section */
.page-header {
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  padding: var(--spacing-4);
}

/** @public Main content area - grows to fill space */
.page-main {
  flex: 1;
  padding: var(--spacing-6);
}

/** @public Page footer section */
.page-footer {
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  padding: var(--spacing-4);
}

/**
 * @section Sidebar Layout
 */

/** @public Grid layout with sidebar */
.layout-with-sidebar {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 0;
  min-height: 100vh;
}

/** @public Sidebar container */
.sidebar {
  border-right: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  padding: var(--spacing-6);
  overflow-y: auto;
}

/** @public Sidebar navigation list */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

// Responsive sidebar
@media (max-width: 768px) {
  .layout-with-sidebar {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .sidebar.mobile-visible {
    display: block;
  }
}

/**
 * @section Sections
 */

/** @public Section container with responsive spacing */
.section {
  --section-padding: var(--spacing-8);
  --section-gap: var(--gap-lg);
  --section-margin: var(--spacing-8);
  
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding: var(--section-padding);
  margin-bottom: var(--section-margin);
  
  @media (max-width: 768px) {
    --section-padding: var(--spacing-4);
    --section-gap: var(--gap-md);
    --section-margin: var(--spacing-4);
  }
  
  @media (max-width: 480px) {
    --section-padding: var(--spacing-3);
    --section-gap: var(--gap-sm);
    --section-margin: var(--spacing-3);
  }
}

/** @public Bordered section variant */
.section-bordered {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
}

/** @public Card-style section */
.section-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/** @public Elevated section with stronger shadow */
.section-elevated {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/** @public Muted background section */
.section-muted {
  background-color: hsl(var(--muted));
  border-radius: var(--radius-lg);
}

/** @public Compact section - reduced padding */
.section-compact {
  --section-padding: var(--spacing-6);
  --section-gap: var(--gap-md);
  
  @media (max-width: 768px) {
    --section-padding: var(--spacing-3);
    --section-gap: var(--gap-sm);
  }
  
  @media (max-width: 480px) {
    --section-padding: var(--spacing-2);
    --section-gap: var(--gap-xs);
  }
}

/** @public Spacious section - increased padding */
.section-spacious {
  --section-padding: var(--spacing-12);
  --section-gap: var(--gap-xl);
  
  @media (max-width: 768px) {
    --section-padding: var(--spacing-6);
    --section-gap: var(--gap-lg);
  }
  
  @media (max-width: 480px) {
    --section-padding: var(--spacing-4);
    --section-gap: var(--gap-md);
  }
}

/** @public Narrow section - max 768px centered */
.section-narrow {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}

/** @public Full width section */
.section-full {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

/** @public Section with no gap */
.section-no-gap {
  gap: 0;
}

/** @public Horizontal section layout */
.section-horizontal {
  flex-direction: row;
  align-items: center;
}

/**
 * @section Legacy v1 Patterns
 */

/** @public Narrow container - v1 compatible */
.narrow {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));

  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

/** @public Layout wrapper - v1 compatible */
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/** @public Centered layout modifier */
.layout--centered {
  align-items: center;
  justify-content: center;
}

/** @public Fullscreen layout modifier */
.layout--fullscreen {
  height: 100vh;
}

/** @public Fixed header layout modifier */
.layout--fixed-header {
  .layout-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
  }

  .layout-main {
    margin-top: 64px; // Default header height with padding
  }
}

/** @public Sidebar left layout modifier */
.layout--sidebar-left,
.layout--sidebar-right {
  flex-direction: row;

  .layout-sidebar {
    width: 250px;
    flex-shrink: 0;
  }

  .layout-main {
    flex: 1;
  }
}

/** @public Sidebar right layout modifier */
.layout--sidebar-right {
  flex-direction: row-reverse;
}

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

  .layout--hide-sidebar {
    .layout-sidebar {
      display: none;
    }
  }
}

/** @public Layout header */
.layout-header {
  padding: var(--spacing-4);
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
}

/** @public Layout main content */
.layout-main {
  flex: 1;
  padding: var(--spacing-6);
  overflow: auto; // Handle content overflow
}

/** @public Layout footer */
.layout-footer {
  padding: var(--spacing-4);
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
}

/** @public Layout sidebar */
.layout-sidebar {
  padding: var(--spacing-3);
  border-right: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  overflow: auto; // Handle sidebar overflow
  transition: transform 0.3s ease, width 0.3s ease;
}

/** @public Compact layout sidebar */
.layout-sidebar--compact {
  padding: var(--spacing-1);
}

// Sidebar navigation styling
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  
  .btn {
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    
    i {
      margin-right: var(--spacing-2);
      width: 1.25rem;
      text-align: center;
    }
  }
}

/** @public Collapsed sidebar layout */
.layout--sidebar-collapsed {
  .layout-sidebar {
    width: 60px;
    padding: var(--spacing-4);
    
    .sidebar-nav {
      gap: var(--spacing-1);
      
      .btn {
        justify-content: center;
        padding: var(--spacing-3);
        width: 100%;
        min-width: unset;
        
        span {
          display: none;
        }
        
        i {
          margin-right: 0;
        }
      }
    }
    
    .sidebar-header {
      text-align: center;
      display: flex;
      justify-content: center;
      padding: 0;
      margin-bottom: var(--spacing-4) !important;
      
      h1, h2, h3, h4, h5, h6, p, div {
        display: none;
      }
      
      .btn {
        display: flex;
        
        i {
          transform: rotate(180deg);
        }
      }
    }
    
    .sidebar-footer {
      text-align: center;
      
      h1, h2, h3, h4, h5, h6, p {
        display: none;
      }
    }
  }
}

/** @public Mobile-only elements (hidden on desktop) */
.mobile-only {
  display: none;
}

// Mobile sidebar (overlay mode)
@media (max-width: 768px) {
  .mobile-only {
    display: flex;
  }
  
  /** @public Mobile sidebar layout with overlay */
  .layout--sidebar-mobile {
    .layout-sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      z-index: 9999;
      transform: translateX(-100%);
      box-shadow: var(--shadow-lg);
    }
    
    &.sidebar-open .layout-sidebar {
      transform: translateX(0);
    }
    
    &.sidebar-open::before {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9998;
      cursor: pointer;
    }
  }
  
  .layout--sidebar-right.layout--sidebar-mobile {
    .layout-sidebar {
      left: auto;
      right: 0;
      transform: translateX(100%);
    }
    
    &.sidebar-open .layout-sidebar {
      transform: translateX(0);
    }
  }
}

/** @public Layout navigation bar */
.layout-nav {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background-color: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
}