/* layout.css - Contains styles for main application wrappers, window, and content areas. */

/* New wrapper for the entire application content */
#main-app-wrapper {
  width: 100%;
  flex-grow: 1; /* Allow it to grow to fill available vertical space */
  max-width: 1200px; /* Constrain wrapper width */

  flex-direction: column; /* Stack its children vertically */
  background-color: #ffffff; /* Added: White background */
  margin: 0 auto;
  border-radius: 5px;
  margin-top: 20px;
 
}

#app-window {
  border-radius: 12px; /* 0.75rem */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  width: 100%; /* Takes full width of its parent (#main-app-wrapper) */
  overflow-y: auto; /* Changed from hidden to auto to allow vertical scrolling */
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow it to grow and fill remaining height in #main-app-wrapper */
  min-height: 0; /* Important for flex items in a column to shrink */
  padding: 0 !important; /* This will remove the padding from the .p-3 class */
  margin-top:20px;
}

#window-content {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 0px 30px 0px 30px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allow content to scroll within this section if needed */
}


/* NEW: Styles for the charts-combined-container */
.charts-combined-container {
    display: flex;
    height: 100%;
    gap: 20px;
    width: 100%; /* Ensure it takes full width of its parent (.statistics) */
}

/* This div correctly sets up the flex layout for the sidebar and right content */
.content-area { /* Assuming this class is used for a main content area with sidebars */
    display: flex;
    flex-grow: 1;
}