/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#root {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #1e1e1e;
  color: #e0e0e0;
}

/* Main container */
.daw-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Main Display Area */
.main-display-area {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
}

/* Update structure in JSX to match this pattern:
<div className="main-content">
  <div className="main-content-wrapper">
    <div className="bar-numbers">...</div>
    <div className="main-content-body">
      <div className="info-container">...</div>
      <div className="grid-container">...</div>
    </div>
  </div>
</div>
*/