/* ============================================
   LAYOUT: Container
   ============================================
   Main content area and container styles.
   ============================================ */

/* Main Content Area */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  transition: var(--transition);
}

.sidebar.collapsed ~ .main-content {
  margin-left: var(--sidebar-collapsed-width);
}

/* Container */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 20px;
}

/* Page Content (tab switching) */
.page-content {
  display: none;
}

.page-content.active {
  display: block;
}

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

@media (max-width: 1024px) {
  .main-content {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 14px;
  }
}