/* ========================================
   CONTAINER LAYOUTS
   Container and layout utilities
   ======================================== */

/* Base Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Container Sizes */
.container-xs {
  max-width: 320px;
}

.container-sm {
  max-width: 640px;
}

.container-md {
  max-width: 768px;
}

.container-lg {
  max-width: 1024px;
}

.container-xl {
  max-width: 1280px;
}

.container-2xl {
  max-width: 1536px;
}

.container-full {
  max-width: 100%;
}

/* Container Padding */
.container-padding-sm {
  padding: 0 var(--space-4);
}

.container-padding-md {
  padding: 0 var(--space-6);
}

.container-padding-lg {
  padding: 0 var(--space-8);
}

.container-padding-xl {
  padding: 0 var(--space-12);
}

/* Container with Sidebar */
.container-sidebar {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--space-8);
  min-height: 100vh;
}

.container-sidebar-sm {
  grid-template-columns: 200px 1fr;
}

.container-sidebar-lg {
  grid-template-columns: 300px 1fr;
}

.container-sidebar-xl {
  grid-template-columns: 350px 1fr;
}

.container-sidebar-content {
  padding: var(--space-8) 0;
}

.container-sidebar-sidebar {
  padding: var(--space-8) 0;
  border-right: 1px solid var(--border-light);
}

/* Container with Header */
.container-header {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container-header-header {
  flex-shrink: 0;
}

.container-header-main {
  flex: 1;
  padding: var(--space-8) 0;
}

.container-header-footer {
  flex-shrink: 0;
}

/* Container with Footer */
.container-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container-footer-main {
  flex: 1;
  padding: var(--space-8) 0;
}

.container-footer-footer {
  flex-shrink: 0;
}

/* Container with Header and Footer */
.container-header-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container-header-footer-header {
  flex-shrink: 0;
}

.container-header-footer-main {
  flex: 1;
  padding: var(--space-8) 0;
}

.container-header-footer-footer {
  flex-shrink: 0;
}

/* Container with Navigation */
.container-nav {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.container-nav-nav {
  grid-row: 1;
  z-index: 1000;
}

.container-nav-main {
  grid-row: 2;
  padding: var(--space-8) 0;
}

/* Container with Sidebar and Navigation */
.container-nav-sidebar {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.container-nav-sidebar-nav {
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 1000;
}

.container-nav-sidebar-sidebar {
  grid-column: 1;
  grid-row: 2;
  padding: var(--space-8) 0;
  border-right: 1px solid var(--border-light);
}

.container-nav-sidebar-main {
  grid-column: 2;
  grid-row: 2;
  padding: var(--space-8) 0;
}

/* Container with Tabs */
.container-tabs {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container-tabs-tabs {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-white);
}

.container-tabs-content {
  flex: 1;
  padding: var(--space-8) 0;
}

/* Container with Breadcrumb */
.container-breadcrumb {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container-breadcrumb-breadcrumb {
  flex-shrink: 0;
  padding: var(--space-4) 0;
  background: var(--bg-gray-50);
  border-bottom: 1px solid var(--border-light);
}

.container-breadcrumb-main {
  flex: 1;
  padding: var(--space-8) 0;
}

/* Container with Hero */
.container-hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container-hero-hero {
  flex-shrink: 0;
}

.container-hero-main {
  flex: 1;
  padding: var(--space-8) 0;
}

/* Container with Search */
.container-search {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container-search-search {
  flex-shrink: 0;
  padding: var(--space-6) 0;
  background: var(--bg-gray-50);
  border-bottom: 1px solid var(--border-light);
}

.container-search-main {
  flex: 1;
  padding: var(--space-8) 0;
}

/* Container with Filters */
.container-filters {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container-filters-filters {
  flex-shrink: 0;
  padding: var(--space-4) 0;
  background: var(--bg-gray-50);
  border-bottom: 1px solid var(--border-light);
}

.container-filters-main {
  flex: 1;
  padding: var(--space-8) 0;
}

/* Container with Sidebar and Filters */
.container-sidebar-filters {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto auto 1fr;
  min-height: 100vh;
}

.container-sidebar-filters-sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
  padding: var(--space-8) 0;
  border-right: 1px solid var(--border-light);
}

.container-sidebar-filters-filters {
  grid-column: 2;
  grid-row: 1;
  padding: var(--space-4) 0;
  background: var(--bg-gray-50);
  border-bottom: 1px solid var(--border-light);
}

.container-sidebar-filters-main {
  grid-column: 2;
  grid-row: 2;
  padding: var(--space-8) 0;
}

/* Container with Modal */
.container-modal {
  position: relative;
  min-height: 100vh;
}

.container-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.container-modal-content {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

/* Container with Drawer */
.container-drawer {
  position: relative;
  min-height: 100vh;
}

.container-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-4);
}

.container-drawer-content {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 400px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

/* Container with Split */
.container-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  min-height: 100vh;
}

.container-split-left {
  padding: var(--space-8) 0;
}

.container-split-right {
  padding: var(--space-8) 0;
}

/* Container with Three Column */
.container-three-column {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-8);
  min-height: 100vh;
}

.container-three-column-left {
  padding: var(--space-8) 0;
}

.container-three-column-main {
  padding: var(--space-8) 0;
}

.container-three-column-right {
  padding: var(--space-8) 0;
}

/* Container with Centered */
.container-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-8) 0;
}

.container-centered-content {
  max-width: 600px;
  width: 100%;
  text-align: center;
}

/* Container with Full Width */
.container-full-width {
  width: 100%;
  padding: 0;
}

.container-full-width-content {
  padding: var(--space-8) var(--space-6);
}

/* Container with Fluid */
.container-fluid {
  width: 100%;
  padding: 0 var(--space-4);
}

.container-fluid-sm {
  padding: 0 var(--space-2);
}

.container-fluid-lg {
  padding: 0 var(--space-8);
}

.container-fluid-xl {
  padding: 0 var(--space-12);
}

/* Responsive Containers */
@media (max-width: 640px) {
  .container {
    padding: 0 var(--space-4);
  }
  
  .container-sidebar {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .container-sidebar-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    padding: var(--space-4) 0;
  }
  
  .container-sidebar-content {
    padding: var(--space-4) 0;
  }
  
  .container-split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .container-three-column {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .container-nav-sidebar {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }
  
  .container-nav-sidebar-sidebar {
    grid-column: 1;
    grid-row: 2;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  
  .container-nav-sidebar-main {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 768px) {
  .container-sidebar-lg {
    grid-template-columns: 1fr;
  }
  
  .container-sidebar-xl {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .container-sidebar {
    grid-template-columns: 1fr;
  }
  
  .container-nav-sidebar {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }
  
  .container-nav-sidebar-sidebar {
    grid-column: 1;
    grid-row: 2;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  
  .container-nav-sidebar-main {
    grid-column: 1;
    grid-row: 3;
  }
}