/* src/styles/global.css */

/* General body styling for consistent font and overflow */
body {
    font-family: "Product Sans", "Open Sans", Arial, sans-serif;
    font-weight: 100;
    font-style: normal;
    margin: 0;
    bottom: auto;
    min-height: 100vh;
    right: auto;
    width: auto;
    box-sizing: content-box;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: scroll;
}

/* Main content area - Reverting to original desired layout */
#app-content {
    display: block; /* Ensure it behaves as a block element */
    min-height: 100vh; /* Ensure it takes at least full viewport height */
    max-width: 1024px; /* Fixed maximum width as requested */
    width: 100%; /* Be responsive up to max-width */
    margin: 0 auto; /* Center the main content horizontally */
    box-sizing: border-box;
    overflow: visible; /* Include padding in element's total width/height */
    /* Transition for menu-open is handled in Navigation.css */
    /* Default margin-left: 0 is handled in Navigation.css */
}

/* New: Styles for the flexbox layout within main, based on your original CSS */
.flexbox-main {
    display: flex;
    max-width: 1024px; /* Ensure this inner container also respects the max width */
    width: 100%;
    margin: 0 auto; /* Center this container within 'main' */
    margin-left: 15px;
}

#app-content.main-space {
    min-width: 675px; /* Minimum width for the primary content area */
    /* Add flex-grow to ensure it takes available space in flexbox-main */
    flex-grow: 1;
}

#app-content.aside {
    width: 100%; /* Take full width on smaller screens, or contextually within flexbox */
    margin-left: 30px; /* Space from main-space */
    flex-shrink: 0; /* Prevent it from shrinking too much */
}


/* Utility classes for text colors */
.text-green {
    color: #137333; /* Google Green */
}

.text-red {
    color: #a50e0e; /* Google Red */
}