/* Popup overlay for modals */
/* Styling for the overlay background of popups */
.popup-overlay, .popup-overlay-wo-button {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position to cover the entire screen */
    top: 0; /* Start at the top */
    left: 0; /* Start at the left */
    width: 100%; /* Full width of the viewport */
    height: 100%; /* Full height of the viewport */
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    justify-content: center; /* Center popup horizontally */
    align-items: center; /* Center popup vertically */
    z-index: 1000; /* Ensure it appears above other elements */
    overflow: auto; /* Enable scrolling for small screens */
}

/* Popup content styling */
/* General styling for popup content */
.popup {
    background-color: #fff; /* White background for contrast */
    padding: 20px; /* Internal spacing */
    border-radius: 8px; /* Rounded corners */
    max-width: 400px; /* Maximum width */
    width: 90%; /* Use 90% of the viewport width on smaller screens */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    text-align: center; /* Center text inside the popup */
    font-size: 1.1em; /* Slightly larger font */
    margin: 10px; /* Space around the popup */
}

/* Headings in popups */
/* Styling for popup headings */
.popup h3 {
    margin-top: 0; /* Remove default margin above the heading */
    font-size: 1.2em; /* Slightly larger font size */
}

/* Button inside popups */
/* Styling for buttons in popups */
.popup button {
    margin-top: 15px; /* Space above the button */
    padding: 10px 20px; /* Button padding */
    font-size: 1em; /* Standard font size */
    font-weight: bold; /* Bold text for emphasis */
    color: white; /* White text */
    background-color: #d1bc8a; /* Goldish background */
    border: none; /* Remove borders */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.popup button:hover {
    background-color: #b5a079; /* Darker gold color on hover */
}

/* Edit company and user popup styling */
/* Shared styling for different edit popups */
#editCompanyPopup .popup, 
#editUserPopup .popup, 
#editAdminPopup .popup, 
#editPermissionsPopup .popup {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center-align elements */
    gap: 15px; /* Space between elements */
    max-width: 400px; /* Maximum width for popups */
    width: 90%; /* Use most of the viewport width on smaller screens */
}

/* Shared styling for popup headings in edit popups */
#editCompanyPopup h3, 
#editUserPopup h3, 
#editAdminPopup h3, 
#editPermissionsPopup h3 {
    text-align: center; /* Center align headings */
    margin-bottom: 20px; /* Space below the heading */
    font-size: 1.3em; /* Larger font for emphasis */
}

/* Fields inside edit popups */
/* Styling for input fields in edit popups */
.edit-popup-field {
    width: 80%; /* Use 80% of the container width */
    max-width: 300px; /* Limit width on larger screens */
}

.edit-popup-field label {
    display: block; /* Display labels as block elements */
    margin-bottom: 5px; /* Space below the label */
    font-weight: bold; /* Bold font for emphasis */
    font-size: 1em; /* Standard font size */
}

.edit-popup-field .styled-input {
    width: 100%; /* Full width for input fields */
    padding: 8px; /* Internal padding */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

/* Buttons inside edit popup */
/* Layout for buttons in edit popups */
.edit-popup-buttons {
    display: flex; /* Use flexbox for layout */
    justify-content: space-around; /* Distribute buttons evenly */
    width: 80%; /* Use 80% of the container width */
    margin-top: 20px; /* Space above the buttons */
    gap: 10px; /* Space between buttons */
}

.edit-popup-buttons button {
    padding: 10px 20px; /* Button padding */
    font-weight: bold; /* Bold text for emphasis */
    border: none; /* Remove borders */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    font-size: 1em; /* Standard font size */
    color: white; /* White text */
    background-color: #d1bc8a; /* Goldish background */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.edit-popup-buttons button:hover {
    background-color: #b5a079; /* Darker gold color on hover */
}

/* Loading overlay */
/* Styling for a loading overlay */
#loadingPopup {
    display: none; /* Hidden by default */
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    position: fixed; /* Fixed position to cover the entire screen */
    top: 0; /* Start at the top */
    left: 0; /* Start at the left */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    z-index: 1000; /* High z-index to appear above other elements */
}

/* Responsive adjustments for small screens */
/* Styles for screens up to 768px wide */
@media screen and (max-width: 768px) {
    .popup {
        font-size: 1em; /* Smaller font size */
        padding: 15px; /* Reduce padding */
        display: flex; /* Ensure content is centrally aligned */
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center elements horizontally */
        justify-content: center; /* Center elements vertically */
    }

    .popup h3 {
        font-size: 1.1em; /* Slightly smaller font size for headings */
    }

    .edit-popup-field {
        width: 90%; /* Almost full width for smaller screens */
        text-align: center; /* Center-align input labels and fields */
    }

    .edit-popup-buttons {
        flex-direction: column; /* Stack buttons vertically */
        width: 100%; /* Full width for smaller screens */
        display: flex; /* Ensure buttons are centrally aligned */
        align-items: center; /* Center buttons horizontally */
        justify-content: center; /* Center buttons vertically */
        gap: 10px; /* Space between buttons */
    }

    .edit-popup-buttons button {
        width: 80%; /* Adjust width for better layout */
        font-size: 0.9em; /* Slightly smaller font size */
    }
}

/* Responsive adjustments for medium screens */
/* Styles for screens between 769px and 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .popup {
        font-size: 1em; /* Standard font size */
        display: flex; /* Ensure content is centrally aligned */
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center elements horizontally */
        justify-content: center; /* Center elements vertically */
    }

    .edit-popup-field {
        max-width: 350px; /* Adjust field width for medium screens */
        text-align: center; /* Center-align input labels and fields */
    }

    .edit-popup-buttons {
        display: flex; /* Ensure buttons are centrally aligned */
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center buttons horizontally */
        justify-content: center; /* Center buttons vertically */
        gap: 10px; /* Space between buttons */
    }

    .edit-popup-buttons button {
        width: 70%; /* Adjust width for better layout */
        font-size: 1em; /* Standard font size */
    }
}