:root {
    --color-brand-primary:    #3A5C1A;
    --color-brand-secondary:  #537A27;
    --color-brand-gradient:   linear-gradient(135deg, #3A5C1A 0%, #537A27 100%);
    --color-accent:           #F59E0B;
    --color-accent-hover:     #D97706;
    --color-nav-bg:           #2B4513;
    --color-nav-text:         #A8C490;
    --color-nav-logo:         #E8F0D4;
    --color-hero-bg:          #F5EDE6;
    --color-card-border:      #E8DDD6;
    --color-terracotta:       #C4714A;
    --color-bg-page:          #F8FAFC;
    --color-bg-surface:       #FFFFFF;
    --color-border:           #E8DDD6;
    --color-text-primary:     #0F172A;
    --color-text-secondary:   #475569;
    --color-text-muted:       #94A3B8;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--color-bg-page);
    color: var(--color-text-primary);
    font-size: 1.0625rem;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

@keyframes pageEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.content {
    animation: pageEnter 0.4s ease-out both;
}

/* Button styles */
.submit-button, 
.send-emails-button, 
.upload-file-button, 
.login-button {
    width: 150px; /* Set the width of the button */
    height: 40px; /* Set the height of the button */
    font-size: 16px; /* Set button font size */
    border: none; /* Remove button border */
    border-radius: 5px; /* Apply border radius to button */
    cursor: pointer; /* Change cursor to pointer on hover */
    margin: 10px 5px; /* Add consistent margin to buttons for spacing */
}

.submit-button {
    background-color: #007bff; /* Set button background color */
    color: #fff; /* Set button text color */
}

.upload-file-button {
    background-color: #007bff; /* Set button background color */
    color: #fff; /* Set button text color */
}

.send-emails-button {
    background-color: #4CAF50; /* Green */
    color: white;
}

.login-button {
    background-color: #6c757d; /* Set button background color */
    color: #fff; /* Set button text color */
}

.submit-button:hover {
    background-color: #0056b3; /* Change background color on hover */
}

.send-emails-button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

.login-button:hover {
    background-color: #5a6268; /* Change background color on hover */
}

.form-inline {
    margin-bottom: 20px; /* Add some margin between the form and other elements */
}

.error-message {
    color: red; /* Style error messages in red */
}

.messages {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #000; /* Default text color */
}

/* Success message */
.alert-success {
    background-color: #d4edda; /* Light green background */
    border-color: #c3e6cb; /* Green border */
    color: #155724; /* Dark green text color */
}

/* Error message */
.alert-danger {
    background-color: #f8d7da; /* Light red background */
    border-color: #f5c6cb; /* Red border */
    color: #721c24; /* Dark red text color */
}

/* Warning message */
.alert-warning {
    background-color: #fff3cd; /* Light yellow background */
    border-color: #ffeeba; /* Yellow border */
    color: #856404; /* Dark yellow text color */
}

/* Info message */
.alert-info {
    background-color: #d1ecf1; /* Light blue background */
    border-color: #bee5eb; /* Blue border */
    color: #0c5460; /* Dark blue text color */
}

/* Ensure message list items are styled properly */
.messages ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.messages li {
    margin-bottom: 0.5rem; /* Spacing between messages */
}


/* Prevent profile image from changing color on hover */
.nav-link img {
    transition: none; /* Disable transition effects */
}

.nav-link:hover img {
    filter: none; /* Remove any filter effects */
    background-color: transparent; /* Ensure background color remains transparent */
}

/* Dropdown menu styles */
.dropdown-menu {
    display: none; /* Hide by default */
    position: absolute; /* Position it absolutely */
    z-index: 2000; /* Ensure it is above other elements */
    background-color: white; /* Ensure it has a background color */
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-width: 300px; /* Set a maximum width for the dropdown */
    word-wrap: break-word; /* Ensure long words or URLs wrap to the next line */
    white-space: normal; /* Allow text to wrap */
    text-align: left;
    padding: 8px 0;
    margin-top: 8px;
    overflow: hidden;
}
.dropdown-item {
    padding: 12px 20px;
    color: #333;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    text-decoration: none;
    display: block;
    font-weight: 400;
}
.dropdown-item:hover {
    background-color: #f0f9ff;
    color: #3A5C1A;
    padding-left: 25px;
}
.dropdown-item:active {
    background-color: #e0f2fe;
    color: #3A5C1A;
}
.dropdown-divider {
    margin: 8px 0;
    border-top: 1px solid #e9ecef;
}
.dropdown-header {
    padding: 10px 20px 5px;
    font-weight: 600;
    color: #3A5C1A;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-menu.show {
    display: block !important; /* Force show when dropdown is active */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .dropdown-menu {
        max-width: 100%; /* Allow the dropdown to take up the full width */
        padding: 0.5rem; /* Add padding for better spacing */
    }

    .dropdown-item {
        font-size: 0.9rem; /* Slightly reduce font size for smaller screens */
        padding: 0.5rem 0.75rem; /* Adjust padding for smaller screens */
    }
}


/* Register page styles */
.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    max-width: 500px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-register {
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.text-center {
    text-align: center;
    width: 100%; /* Ensures the width spans the entire container */
    margin-top: 10px; /* Adds space above this section */
}

.submit-button {
    background-color: #007bff; /* Set button background color */
    color: #fff; /* Set button text color */
    width: 150px; /* Set the width of the button */
    height: 40px; /* Set the height of the button */
    font-size: 16px; /* Set button font size */
    border: none; /* Remove button border */
    border-radius: 5px; /* Apply border radius to button */
    cursor: pointer; /* Change cursor to pointer on hover */
    margin: 10px 0px; /* Add consistent margin to buttons for spacing */
}

.submit-button:hover {
    background-color: #0056b3; /* Change background color on hover */
}

/* Specific label styles for form-register and form-signin */
.form-register label,
.form-signin label,
.form-register legend,
.form-signin legend,
.register-container h2,
.profile-page-container label,
.profile-page-container h2,
.form-signin h2 {
    color: #333; /* Set the text color to a dark color */
    font-weight: bold; /* Make the text bold */
    margin-bottom: 5px; /* Add some margin below the label */
    display: block; /* Ensure the label takes up the full width */
}

/* Required field asterisk */
.asteriskField {
    color: red; /* Set the color of the asterisk to red */
}

/* Center the form fields in the middle of the page */
.form-wrapper {
    max-width: 400px; /* Set a maximum width for the form */
    margin: 0 auto; /* Center the form horizontally */
    padding: 20px; /* Add some padding around the form */
    background-color: #ffffff; /* Set a background color for the form */
    border-radius: 8px; /* Add rounded corners to the form */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
}

/* Specific styles for form fields */
.form-register .form-group,
.form-signin .form-group {
    margin-bottom: 15px; /* Add margin between form fields */
}

.form-register .form-control,
.form-signin .form-control {
    width: 100%; /* Ensure the input boxes take up the full width of their container */
    padding: 10px; /* Add padding for better appearance */
    border: 1px solid #ccc; /* Add a border */
    border-radius: 4px; /* Add rounded corners */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
    height: auto; /* Allow height to adjust */
}

/* Profile page outer layout — details in user_pages.css */
.profile-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Add spacing between Profile Info and the profile picture */
.profile-info {
    margin-bottom: 20px; /* Adjust the value as needed */
}

/* Specific styles for login form fields */
.login-form-wrapper #div_id_username, 
.login-form-wrapper #div_id_password{
    max-width: 400px; /* Set a maximum width for the input boxes */
    margin: 0 auto; /* Center the input boxes horizontally */
}

.login-form-wrapper #div_id_username .form-control, 
.login-form-wrapper #div_id_password .form-control{
    width: 100%; /* Ensure the input boxes take up the full width of their container */
    padding: 10px; /* Add padding for better appearance */
    border: 1px solid #ccc; /* Add a border */
    border-radius: 4px; /* Add rounded corners */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

/* Center the update button */
.profile-form-wrapper .form-group.text-center {
    display: flex;
    justify-content: center; /* Center the button horizontally */
}

/* Profile form controls — width handled in user_pages.css */
.profile-form-wrapper .form-control {
    padding: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
}

/* Style for the legend element */
.profile-form-wrapper legend {
    font-size: 1.5em; /* Increase the font size */
    font-weight: bold; /* Make the text bold */
    color: #333; /* Set the text color */
    border-bottom: 2px solid #ccc; /* Add a bottom border */
    padding-bottom: 10px; /* Add padding below the text */
    margin-bottom: 20px; /* Add margin below the legend */
}

/* Form text and muted text color specific to profile-form */
.profile-form .form-text.text-muted {
    color: #d8d8d8 !important; /* Example color, adjust as needed */
}

.profile-form .form-group {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

/* Text secondary color specific to profile-form */
.media-body .text-secondary {
    color: #000000fb !important; /* Example color, adjust as needed */
}


/* Add margin-bottom to the media element */
.media {
    margin-bottom: 20px; /* Adjust the value as needed */
}

/* Set text color for elements within the ck ck-content class */
.ck.ck-content p {
    color: #000; /* Set the text color to black or any other color that contrasts with the background */
}


.centered-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    max-width: 600px; /* Adjust the max-width as needed */
    padding: 20px;
}

.centered-container form {
    width: 100%; /* Ensure the form takes up the full width of the container */
    text-align: left; /* Align text to the left within the form */
}

.centered-container form p,
.centered-container form ul,
.centered-container form label,
.centered-container form input,
.centered-container form button {
    text-align: left; /* Align text to the left for form elements */
    width: 100%; /* Ensure form elements take up the full width of the container */
}

.centered-container form ul {
    padding-left: 20px; /* Add padding to the left for the list */
}

.centered-container form button {
    text-align: center; /* Center the button text */
}

.editable-email-content img {
    max-width: 100%; /* Ensure images are responsive */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Maintain original width if specified */
}

.errorlist {
    color: red;
    list-style-type: none; /* Remove default list styling */
    padding: 0;
}

/* Specific styling for non-field errors */
.errorlist.nonfield {
    margin-top: 20px;
    background-color: #f8d7da; /* Light red background */
    border: 1px solid #f5c6cb; /* Red border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Padding inside the box */
}

/* Style each error message */
.errorlist li {
    margin-bottom: 10px; /* Add spacing between error messages */
    display: flex;
    align-items: center;
}

/* Icon for error messages */
.error-icon {
    margin-right: 10px; /* Space between icon and text */
    color: #721c24; /* Dark red color for icon */
}

/* Error message text */
.error-text {
    color: #721c24; /* Dark red color for text */
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    background: #2B4513;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    min-height: 90px;
    position: relative;
    z-index: 1000;
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}
.navbar-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.header-container {
    display: flex;
    align-items: center;
    margin-bottom: 0; /* Remove bottom margin */
}
.header-title {
    margin-right: 10px;
}

.outlined-text {
    text-shadow: 
        -1px -1px 0 rgba(0, 0, 0, 0.5),  
        1px -1px 0 rgba(0, 0, 0, 0.5),
        -1px 1px 0 rgba(0, 0, 0, 0.5),
        1px 1px 0 rgba(0, 0, 0, 0.5); /* Create a faint black outline around the text */
}

.header-title a {
    text-decoration: none !important; /* Remove underline from link */
    color: #E8F0D4 !important; /* Keep the text color white */
}
.header-title a:hover {
    text-decoration: none !important; /* Remove underline on hover */
    color: #A8C490 !important; /* Keep the text color white on hover */
}
.cloud-db-logo {
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
}
.cloud-db-logo:hover {
    transform: scale(1.1) rotate(5deg);
}

.tagline {
    margin-top: 5px; /* Adjust top margin */
    margin-bottom: 0; /* Remove bottom margin */
    padding-bottom: 10px;
}


.navbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}
.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
}
.navbar ul li {
    margin: 0;
}
.navbar ul li a {
    text-decoration: none;
    color: #A8C490;
    padding: 10px 18px;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
    display: inline-block;
    position: relative;
}
.navbar ul li a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #E8F0D4;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.navbar ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 5px;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.navbar ul li a:hover::after {
    width: 70%;
}

.nav-plain-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 16px;
}

.nav-pill-filled {
    display: inline-block;
    background: #F59E0B;
    color: #1C2E0A !important;
    border-radius: 999px;
    padding: 7px 18px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: background 0.2s ease;
    white-space: nowrap;
}
.nav-pill-filled:hover {
    background: #D97706;
    text-decoration: none;
    color: #1C2E0A !important;
}

.nav-pill-outlined {
    display: inline-block;
    background: transparent;
    color: #F59E0B !important;
    border: 1.5px solid #F59E0B;
    border-radius: 999px;
    padding: 7px 16px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: background 0.2s ease;
    white-space: nowrap;
}
.nav-pill-outlined:hover {
    background: rgba(245, 158, 11, 0.12);
    text-decoration: none;
    color: #F59E0B !important;
}

.profile-container {
    display: flex;
    align-items: center;
    position: relative;
}
.profile-dropdown {
    margin-left: 20px;
}

.nav-link.dropdown-toggle {
    color: #A8C490 !important;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 18px !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    background-color: transparent;
    border: none;
    cursor: pointer;
}
.nav-link.dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #E8F0D4 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.nav-link.dropdown-toggle::after {
    margin-left: 8px;
    vertical-align: middle;
    border-top-color: white;
    border-width: 5px;
}
.profile-container .account-img {
    border: 3px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}
.profile-container .account-img:hover {
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

p {
    color: #000000e7; /* Set paragraph text color */
}

li {
    color:#000000e7;
}

#profileDropdownMenu {
    display: none;
    visibility: hidden;
    position: absolute; /* Position the dropdown relative to the navbar */
    top: 100%; /* Align it just below the navbar */
    left: auto !important; /* Reset the left position */
    right: 0; /* Align it to the right edge of the navbar */
    z-index: 2000; /* Ensure it appears above other elements */
    transform: none !important; /* Reset any transform applied */
    max-width: 300px; /* Set a maximum width for the dropdown */
    overflow-wrap: break-word; /* Break long words to prevent overflow */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Ensure long words wrap */
    overflow-y: auto; /* Add a vertical scrollbar if content exceeds the height */
    max-height: 400px; /* Limit the height of the dropdown */
    padding: 8px 0; /* Add padding for better spacing */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* Add a subtle shadow */
    background-color: white; /* Ensure the dropdown has a background color */
    border: none;
    border-radius: 8px; /* Add rounded corners */
    margin-top: 8px;
}

#profileDropdownMenu.show {
    display: block;
    visibility: visible;
}

#notificationBadge {
    position: absolute; /* Position the badge relative to the dropdown menu */
    bottom: 2px; /* Adjust to position it slightly below the dropdown menu */
    right: 2px; /* Adjust to position it slightly to the right of the dropdown menu */
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border-radius: 50%; /* Ensure it remains circular */
    width: 22px; /* Explicitly set the width */
    height: 22px; /* Explicitly set the height */
    line-height: 22px; /* Center the text vertically */
    font-size: 11px; /* Set the font size */
    font-weight: bold; /* Make the text bold */
    text-align: center; /* Center the text horizontally */
    padding: 0; /* Remove padding to prevent stretching */
    display: inline-block;
    z-index: 1001; /* Ensure it appears above other elements */
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {

    .navbar {
        padding: 10px 15px; /* Reduce padding on mobile */
    }
    
    .navbar-right {
        gap: 8px; /* Reduce gap between items */
    }
    
    .navbar ul {
        gap: 5px; /* Reduce gap between nav items */
    }
    
    .navbar ul li a {
        padding: 8px 12px; /* Reduce padding on nav links */
        font-size: 0.9rem; /* Slightly smaller text */
    }

    .profile-container {
        justify-content: center; /* Center the profile container on smaller screens */
        position: relative; /* Ensure the profile container is the positioning context */
    }
    
    .profile-container .account-img {
        width: 50px !important; /* Reduce profile image size on mobile */
        height: 50px !important;
    }
    
    .header-title {
        font-size: 1.2rem; /* Smaller header on mobile */
    }
    
    .header-title .text-muted {
        font-size: 0.75rem; /* Smaller tagline */
    }
    
    .cloud-db-logo {
        width: 35px; /* Smaller logo on mobile */
        height: 35px;
    }

    #profileDropdownMenu {
        position: absolute; /* Position it relative to the navbar */
        top: 100%; /* Place it directly below the navbar */
        left: 0; /* Align it to the left edge of the navbar */
        right: 0; /* Stretch it to the right edge of the navbar */
        margin: 0; /* Remove any margin */
        width: 40%; /* Make it span the full width of the screen */
        z-index: 2000; /* Ensure it appears above other elements */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
        border: 1px solid #ccc; /* Add a border for separation */
        border-radius: 0; /* Remove rounded corners */
        background-color: white; /* Ensure the dropdown has a background color */
    }

    #notificationBadge {
        position: absolute; /* Keep the badge positioned relative to the profile container */
        bottom: -15px;
        right: 20px; /* Position it at the right of the profile container */
        transform: translate(50%, -50%); /* Adjust to ensure it stays in the top-right corner */
        width: 20px; /* Keep the same width as desktop */
        height: 20px; /* Keep the same height as desktop */
        line-height: 20px; /* Keep the text vertically centered */
        font-size: 12px; /* Keep the font size consistent */
        padding: 0; /* Ensure no extra padding is applied */
        text-align: center; /* Center the text horizontally */
        border-radius: 50%; /* Ensure it remains circular */
        background-color: red; /* Keep the red background */
        color: white; /* Keep the white text */
        font-weight: bold; /* Ensure the text is bold */
        z-index: 1000; /* Ensure it appears above other elements */
    }


}

#notificationsList p {
    color: #000; /* Set text color */
    background-color: #f8f9fa; /* Set background color */
    font-weight: bold; /* Make the text bold */
    padding: 0.25rem 1.5rem; /* Match the padding of .dropdown-item */
    margin: 0; /* Remove default margin */
    word-wrap: break-word; /* Break long words to prevent overflow */
    overflow-wrap: break-word; /* Ensure long words wrap */
    white-space: normal; /* Allow text to wrap to the next line */
    text-align: left; /* Align text to the left */
    display: block; /* Ensure it behaves like a block element */
}

#notificationsList p.dropdown-item {
    margin: 0.5rem 0; /* Add spacing between notifications */
    padding: 0.5rem 1rem; /* Adjust padding for better readability */
    font-size: 0.9rem; /* Adjust font size for smaller screens */
    background-color: #64646465; /* Optional: Add a subtle background color */
    border-radius: 4px; /* Optional: Add rounded corners */
    word-wrap: break-word; /* Ensure long words wrap */
    overflow-wrap: break-word; /* Break long words */
    white-space: normal; /* Allow text to wrap */
    text-align: left; /* Align text to the left */
}

/* Override dropdown-item color to black */
.dropdown-menu .dropdown-item,
.dropdown-item {
    color: #000 !important;
}

/* Make the Requests dropdown link a specific font size */
#requestsDropdown {
    font-size: 1.0rem; /* Change to your desired size */
}

.closer-text {
    margin-top: -1px;
    display: block;
    font-size: 1rem;
    line-height: 1.1;
    color: #A8C490 !important;
}

/* Footer */
.contact-content-container {
    background: #2B4513 !important;
}
.contact-content-container a,
.contact-content-container .gmail-link img,
.contact-content-container .github-link img {
    filter: brightness(0) invert(1) sepia(1) saturate(0.3) hue-rotate(60deg);
    opacity: 0.75;
}
.contact-content-container a:hover img {
    opacity: 1;
}