/* 1. Body and General Contrast */
body {
    min-height: 100vh;
    /* White Background */
    background-color: #ffffff;
    /* Add subtle background to distinguish from content */
    background-color: #f5f5f5;
}
.container {
    /* Default text color is very dark gray/almost black */
    color: #212529;
    /* Add max-width and padding to prevent wall-to-wall content */
    max-width: 1000px;  /* Narrower max-width = more side space */
    margin-left: auto;
    margin-right: auto;
    padding-left: 3rem;  /* Inner padding for content */
    padding-right: 3rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    /* White background for content area */
    background-color: #ffffff;
    /* Subtle shadow for depth */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    /* Slight rounding on corners */
    border-radius: 8px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Constrain container-fluid to feel more like a document */
.container-fluid {
    max-width: 1400px;  /* Maximum width for fluid containers */
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Make document editor feel more like a document page */
body .container-fluid .row .col-md-12 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
h2 {
    /* Ensure the main heading is dark gray */
    color: #343a40 !important;
}

/* 2. Alert/Info Box (The "Before Submitting" section) */
.alert-secondary {
    /* Light gray background for a clean border */
    background-color: #f8f9fa !important;
    color: #212529 !important;
    /* Subtle, light border */
    border: 1px solid #dee2e6 !important;
}

/* 3. Code Output (Title and Content Boxes) */
.code-output {
    white-space: pre-wrap;
    font-size: 1rem;
    /* Pure white background for output box */
    background: #ffffff;
    color: #212529; /* Dark text */
    border-radius: 0.5rem;
    padding: 1rem;
    /* Clean, professional border */
    border: 1px solid #ced4da;
}

/* 4. Labels and Form Elements */
.form-label {
    /* Darker gray labels */
    color: #495057;
    font-weight: 500;
}
.form-control, .form-select {
    /* Inputs match the background but have a defined border */
    background-color: #ffffff;
    color: #212529;
    border-color: #ced4da;
}

/* 5. Primary Button (A standard dark blue accent for action) */
.btn-primary {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #ffffff !important;
}

/* Additional Styling for the underline links */
u {
    color: #0056b3; /* Darker blue for readable links */
}