body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    margin: 0;
    overflow: hidden; /* Hide scrollbar during loading */
}

.form-wrapper {
    position: relative;
    /* <--- Make the wrapper the positioning context */
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 400px;
    width: 100%;
    /* Add some bottom padding to prevent overlay from cutting off too quickly */
    padding-bottom: 0;
}

.container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-bottom: 20px;    /* Adjust based on status message height + desired spacing */
}

/* Loading screen styles */
#loadingScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f2f5; /* Match body background or choose a contrasting color */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it's on top of everything */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* Fade out effect */
}

#loadingScreen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Disable interaction with hidden element */
}

.loader {
    border: 8px solid rgba(0, 123, 255, 0.2); /* Softer initial border color */
    border-top: 8px solid #007bff; /* Blue spinner color */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite; /* Spinning animation */
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


#loadingScreen p {
    font-size: 18px;
    color: #333;
}

/* Main content initially hidden */
#mainContent {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in, visibility 0.5s ease-in; /* Fade in effect */
    width: 100%; /* Ensure content takes full width */
    height: 100%; /* Ensure content takes full height */
    display: flex; /* Adjust if your main content layout differs */
    flex-direction: column; /* Adjust if your main content layout differs */
    align-items: center; /* Center your form-wrapper */
    justify-content: center; /* Center your form-wrapper */
}

#mainContent.show {
    opacity: 1;
    visibility: visible;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
}

.form-group input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height */
    transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus {
    border-color: #007bff;
    /* Highlight border on focus */
    outline: none;
    /* Remove default browser outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}

/* Error state for input fields */
.form-group input[type="text"].input-error {
    border-color: #dc3545; /* Red border for errors */
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.4);
}

.button-group {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    /* Spacing between buttons */
}

.btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    font-weight: 600;
}

.btn.primary {
    background-color: #007bff;
    color: #ffffff;
}

.btn.primary:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    /* Lift slightly on hover */
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
}

.btn.secondary {
    background-color: #6c757d;
    color: #ffffff;
}

.btn.secondary:hover {
    background-color: #545b62;
    transform: translateY(-2px);
    /* Lift slightly on hover */
    box-shadow: 0 5px 10px rgba(108, 117, 125, 0.2);
}

/* Disabled styles for primary button */
.btn.primary:disabled,
.btn.primary[disabled] { /* Using both :disabled and [disabled] for broader browser compatibility */
    background-color: #a8d6ff; /* Lighter shade of blue */
    color: #ffffff; /* Keep white text or change to a lighter gray for contrast */
    cursor: not-allowed; /* Change cursor to indicate non-interactiveness */
    opacity: 0.7; /* Optionally reduce opacity for a muted look */
    box-shadow: none; /* Remove shadow */
    transform: none; /* Remove any transform effect from hover */
    pointer-events: none; /* Prevents click and hover events */
}

/* Disabled styles for secondary button */
.btn.secondary:disabled,
.btn.secondary[disabled] {
    background-color: #ced4da; /* Lighter shade of gray */
    color: #6c757d; /* Use a muted gray text color */
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
    transform: none;
    pointer-events: none;
}

.btn.hidden {
    display: none;
}

.header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

.user-profile-dropdown {
    position: relative;
    display: inline-block;
}

.user-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    width: 40px;
    /* Adjust size as needed */
    height: 40px;
    /* Adjust size as needed */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.user-icon-btn:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* Add a more pronounced shadow on hover */
    background-color: #f0f2f5;
    /* Subtle background change on hover */
}

/* .user-icon-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 */

 .initials-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Fill the button's width/height */
    height: 100%; /* Fill the button's width/height */
    border-radius: 50%;
    background-color: #ccc; /* Default background, will be overridden by JS */
    color: #ffffff;
    font-size: 18px; /* Adjust font size for the initial */
    font-weight: 600;
    text-transform: uppercase;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    /* Position below the button */
    background-color: #ffffff;
    min-width: 220px;
    /* Slightly wider for more content */
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    /* Softer, larger shadow */
    border-radius: 12px;
    /* More rounded corners */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    /* Start slightly above and move down */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s ease-out;
    padding: 10px 0;
    /* Adjust padding for items */
}

.dropdown-content.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-info {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    display: flex; /* Use flex to align avatar and text horizontally */
    align-items: center; /* Vertically align items */
}

.profile-info .initials-avatar.large {
    width: 50px; /* Larger avatar in the dropdown */
    height: 50px;
    margin-right: 15px;
    font-size: 24px; /* Adjust font size for larger initial */
    flex-shrink: 0; /* Prevent it from shrinking */
    border: 2px solid #007bff; /* Keep the border if desired */
}

.profile-info .text-content {
    /* No need for inline-block now that parent is flex */
    flex-grow: 1; /* Allow text content to grow */
}

.profile-info .username {
    font-weight: 700;
    /* Bolder for emphasis */
    color: #333;
    margin: 0;
    font-size: 16px;
}

.profile-info .email {
    font-size: 13px;
    color: #777;
    margin: 2px 0 0;
    font-weight: 400;
    /* Regular weight */
}

.dropdown-item {
    color: #444;
    padding: 12px 20px;
    /* Adjust padding for better spacing */
    text-decoration: none;
    display: flex;
    /* Use flex for potential icon/text alignment */
    align-items: center;
    /* Vertically align content */
    transition: background-color 0.2s ease;
    font-size: 15px;
    font-weight: 500;
    /* Medium weight */
}

.dropdown-item:hover {
    background-color: #f5f8fa;
    /* Lighter hover background */
    color: #007bff;
    /* Highlight text color on hover */
}

.dropdown-item i {
    /* For icon, if using Font Awesome or similar */
    margin-right: 10px;
    font-size: 18px;
    /* Adjust icon size */
}

.dropdown-item.sign-out-btn {
    border: none;
    background-color: transparent;
    /* Transparent background */
    color: #007bff;
    border-top: 1px solid #eee;
    /* Add a top border for separation */
    margin-top: 5px;
    /* Space from previous item */
    border-radius: 0 0 12px 12px;
    /* Match dropdown border-radius */
    font-weight: 600;
}

.dropdown-item.sign-out-btn:hover {
    background-color: #e0f2f7;
    /* Light red hover background */
    color: #007bff;
}

.status-message-overlay {
    position: absolute;
    /* <--- Position absolutely within the form-wrapper */
    top: calc(100% + 5px); /* Position it 5px below the end of the form-wrapper's normal content flow */
    left: 50%;
    /* <--- Position at 50% from the left */
    transform: translateX(-50%);
    /* <--- Center horizontally using translate */
    background-color: #ffffff;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 100;
    /* Ensure it's above the container if they overlap slightly */
    min-width: 450px;
    max-width: 500px;
    font-size: 13px;
    line-height: 1.6;
    text-align: justify;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    color: #333;
}

.status-message-overlay.show {
    opacity: 1;
    visibility: visible;
}

.status-message-overlay.success {
    background-color: #e9f7ef;
    color: #28a745;
    border: 1px solid #28a745;
}

.status-message-overlay.error {
    background-color: #fcebeb;
    color: #dc3545;
    border: 1px solid #dc3545;
}

.branding {
    display: flex;
    /* Use flexbox for horizontal alignment */
    flex-direction: column;
    /* Stack logo and title vertically */
    align-items: center;
    /* Center items horizontally */
    margin-bottom: 25px;
    /* Space below the branding section */
    padding-bottom: 20px;
    /* Internal padding */
    border-bottom: 1px solid #eee;
    /* Separator line */
}

.company-logo {
    width: 80px;
    /* Adjust size as needed */
    height: auto;
    margin-bottom: 10px;
    /* Space between logo and title */
}

.form-title {
    font-size: 24px;
    color: #333;
    margin: 0;
    /* Remove default margin */
    text-align: center;
    font-weight: 700;
}

/* Invalid Login Overlay Styles */
#invalidLoginOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Darker, semi-transparent background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9998; /* Below loading screen, above content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

#invalidLoginOverlay.show {
    opacity: 1;
    visibility: visible;
}

.overlay-content-box {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 350px;
    width: 90%;
}

.error-icon {
    font-size: 48px;
    color: #dc3545; /* Red color for error */
    margin-bottom: 20px;
}

.overlay-message {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.5;
}

.redirect-countdown {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
}

.redirect-countdown #countdown {
    font-weight: bold;
    color: #007bff;
}

#invalidLoginOverlay .btn.primary {
    background-color: #007bff;
    color: #ffffff;
    padding: 10px 25px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

#invalidLoginOverlay .btn.primary:hover {
    background-color: #0056b3;
}

.status-bar {
    display: flex; /* Arrange status label and message horizontally */
    justify-content: space-between; /* Push items to ends */
    align-items: center; /* Vertically align items */
    width: 100%;
    padding: 10px 0;
    margin-top: 20px; /* Space above the status bar */
    border-top: 1px solid #eee; /* Separator line */
    font-size: 14px;
    color: #666;
}

.status-label {
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Status-specific colors */
.status-label.running {
    background-color: #d4edda; /* Light green background */
    color: #155724; /* Dark green text */
}

.status-label.waiting {
    background-color: #fff3cd; /* Light orange/yellow background */
    color: #856404; /* Dark orange/brown text */
}

.status-label.error {
    background-color: #f8d7da; /* Light red background */
    color: #721c24; /* Dark red text */
}

.status-label.stopped {
    background-color: #e2e3e5; /* Light gray background */
    color: #495057; /* Dark gray text */
}

.state-message {
    font-style: italic;
    color: #777;
}

/* Styles for number input, ensure consistency with text inputs */
.form-group input[type="number"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    -moz-appearance: textfield; /* Hide Firefox stepper buttons */
}

/* Hide Webkit/Edge stepper buttons for number input */
.form-group input[type="number"]::-webkit-outer-spin-button,
.form-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-group input[type="number"]:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}

.form-group input[type="number"].input-error { /* Apply error style to number input */
    border-color: #dc3545;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.4);
}