/* General Site Theme (Gray & White) */
body {
    background-color: #f8f5f8; /* Light gray background */
    color: #333; /* Darker text for readability */
    font-family: Arial, sans-serif;
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-start; /* Align items from the start */
    align-items: flex-start; /* Ensure columns align at the top */
    min-height: 100vh; /* Ensure body takes full height */
    flex-direction: column; /* Default desktop layout */
}

.container {
    width: 45%;
    margin: 20px;
    background-color: #feffef; /* White background for content areas */
    padding: 20px;
    border-radius: 10px;
    flex-grow: 1; /* Allow it to grow as needed */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    display: flex;
    flex-direction: column;
}

.container-wrapper {
    width: 100%;
    margin: 20px;
    padding: 20px;
    padding-top: 40px;
    color: #333;
    background-color: #fff;
    border-radius: 10px;
    flex-shrink: 0; /* Ensure it does not shrink */
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Adjusts content alignment */
}

.gallery {
    display: flex;
    gap: 20px;
}

.preview-section {
    width: 30%;
    margin: 20px;
    padding: 20px;
    padding-top: 40px;
    color: #333;
    background-color: #f9f9f9;
    border-radius: 10px;
    flex-shrink: 0; /* Ensure it does not shrink */
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Adjusts content alignment */
}

.sidebar {
    width: 25%;
    margin: 20px;
    padding: 15px;
    background-color: #f0f0f0; /* Light gray */
    border-radius: 10px;
    color: #333;
    font-size: 17px;
    flex-shrink: 0; /* Prevent shrinking */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Ensure all sections are aligned equally */
.container-wrapper, .preview-section, .sidebar {
    box-sizing: border-box;
    align-self: stretch; /* Make sure all columns have equal heights */
}

/* Sidebar Note Styling */
.sidebar h3 {
    color: #555; /* Medium gray for headers */
    margin-bottom: 10px;
}

.note {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    font-size: 15px;
    color: #333; /* Darker text */
}

/* Danger Level Color Gradation (White to Blood Red) */
.note1 { background-color: #ffffff; }  /* Least dangerous - white */
.note2 { background-color: #f2f2f2; }  /* Very light gray */
.note3 { background-color: #e6e6e6; }  /* Light gray */
.note4 { background-color: #cccccc; }  /* Gray */
.note5 { background-color: #b3b3b3; }  /* Medium gray */
.note6 { background-color: #999999; }  /* Darker gray */
.note7 { background-color: #808080; }  /* Muted dark gray */
.note8 { background-color: #666666; }  /* Dark gray */
.note9 { background-color: #ffcc99; }  /* Light orange - slight warning */
.note10 { background-color: #ff9966; } /* Medium orange - warning */
.note11 { background-color: #ff6633; } /* Orange-red - danger */
.note12 { background-color: #ff3300; } /* Blood red - most dangerous */

/* Input and Button Styling */
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, textarea {
    width: 90%;
    margin-bottom: 10px;
    padding: 8px;
    background-color: #f5f5f5; /* Light input background */
    border: 1px solid #ccc;
    color: #333;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    display: inline-block;
    width: auto;
}

button:hover {
    background-color: #0056b3;
}

.handle-button {
    padding: 10px 20px;
    background-color: #007bff;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    width: 20%;
}

.handle-button:hover {
    background-color: #0056b3;
}

.add-job {
    cursor: pointer;
    color: #007bff;
    font-weight: bold;
    margin-bottom: 20px;
    display: inline-block;
}

/* Mobile Styles */
@media (max-width: 1120px) {
    body {
        flex-direction: column; /* Stack items vertically on smaller screens */
        align-items: stretch; /* Make sure each item takes full width */
    }

    .container, .sidebar, .preview-section {
        width: 100%;
        margin: 10px 0; /* Smaller margin for mobile */
        padding: 10px;
    }

    .sidebar {
        order: 2; /* Move sidebar below content on mobile */
    }

    .preview-section {
        background-color: #ffffff;
    }
}

/* Top Bar Styling */
.top-bar {
    display: flex;
    justify-content: space-between;
    background: #000000;
    align-items: center;
    width: 100%;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    background: #000000;
    flex-wrap: wrap; /* Allow the items to wrap if needed */
}

@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        align-items: center;
    }
}

.top-bar .logo h2 {
    margin: 0;
}

.top-bar nav {
    display: flex;
    align-items: center;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 18px;
}

.burger-menu {
    display: none;
}

@media (max-width: 768px) {
    .burger-menu {
        display: block;
    }
}