/* Global Styles */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f9fa; /* Light grey background for a clean look */
    color: #343a40; /* Dark grey text for better readability */
}

/* Container for the main content */
.container {
    display: flex;
    flex: 1;
    max-width: 100%; /* Restrict the maximum width for better content alignment */
    min-width: 100%;
    margin: 20px auto; /* Center container with margin on top and bottom */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Light shadow for depth */
    border-radius: 8px; /* Rounded corners */
    background-color: #ffffff; /* White background for the main container */
}

/* Sidebar Styles */
.sidebar {
    padding: 2rem;
    background-color: #f1f3f5; /* Slightly darker grey for the sidebar */
    border-right: 1px solid #dee2e6; /* Subtle border to separate from main content */
    flex: 1; /* Allow flexible resizing */
}

.sidebar.left {
    max-width: 20%; /* Maximum width for large screens */
}

.sidebar.right {
    max-width: 30%; /* Maximum width for large screens */
    background-color: #f8f9fa; /* Lighter grey to distinguish it from the left */
    border-left: 1px solid #dee2e6; /* Subtle border to separate from main content */
}

/* Main Content Area */
main {
    flex: 2; /* Main content takes up more space */
    padding: 2rem;
    background-color: #ffffff; /* White background */
}

/* Media query for tablets and below */
@media (max-width: 992px) {
    .container {
        flex-direction: column; /* Stack elements vertically */
        margin: 10px; /* Reduce margin on smaller screens */
        box-shadow: none; /* Remove shadow for small screens */
        border-radius: 0; /* Remove rounded corners */
    }

    main, .sidebar.left, .sidebar.right {
        max-width: 100%; /* Full width for smaller screens */
        padding: 1.5rem;
        border: none; /* Remove borders for a simpler layout */
    }

    .main {
        order: 1; /* Display main content first */
        padding: 1rem;
        background-color: #ffffff;
    }

    .sidebar.left {
        order: 2; /* Display left sidebar below main content */
        padding: 1rem;
        border-top: 1px solid #dee2e6; /* Separate the left sidebar with a top border */
    }

    .sidebar.right {
        order: 3; /* Display right sidebar at the bottom */
        padding: 1rem;
        border-top: 1px solid #dee2e6; /* Separate the right sidebar with a top border */
        background-color: #ffffff;
    }
}