/* Modal styles for AMD Construction Pro */

/* Overlay for the modal, covers the entire screen */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* High z-index to overlay other content */
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Prevents mouse events when hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition for showing/hiding */
}

/* Active state for the overlay, makes it visible */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Dialog box styles, the white box in the center of the screen */
.modal-dialog {
    position: relative;
    width: 90%; /* Responsive width */
    max-width: 600px; /* Max width of 600px */
    max-height: 90vh; /* Max height of 90% of the viewport height */
    background: white; /* White background for the dialog */
    border-radius: 8px; /* Rounded corners */
    /* 12px border shadow effect */
    box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.2); /* Shadow effect */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    transform: scale(0.9); /* Slightly scale down for effect */
    transition: transform 0.3s ease; /* Smooth scaling transition */
}

/* When the overlay is active, scale the dialog to normal size */
.modal-overlay.active .modal-dialog {
    transform: scale(1);
}

/* Content area of the modal, where the actual content goes */
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%; /* Full height of the dialog */
    border-radius: 8px; /* Match the dialog border radius */
    overflow: hidden; /* Hide overflow content */
}

/* Header section of the modal, for title and close button */
.modal-header {
    padding: 16px 20px; /* Padding around the content */
    border-bottom: 1px solid #e0e0e0; /* Bottom border */
    display: flex;
    justify-content: space-between; /* Space between title and close button */
    align-items: center;
    flex-shrink: 0; /* Prevents shrinking */
}

/* Title styles in the modal header */
.modal-title {
    font-size: 18px; /* Font size for the title */
    font-weight: 600; /* Semi-bold weight */
    margin: 0; /* Remove default margin */
}

/* Close button styles in the modal header */
.modal-close-btn {
    background: none; /* Transparent background */
    border: none; /* No border */
    font-size: 24px; /* Larger font size for the icon */
    cursor: pointer; /* Pointer cursor on hover */
    color: #666; /* Icon color */
    padding: 0; /* No padding */
    width: 30px; /* Fixed width */
    height: 30px; /* Fixed height */
    display: flex;
    align-items: center; /* Center icon vertically */
    justify-content: center; /* Center icon horizontally */
    border-radius: 4px; /* Rounded corners */
    transition: all 0.2s ease; /* Smooth transition for hover effects */
}

/* Close button hover effect */
.modal-close-btn:hover {
    background-color: #f0f0f0; /* Light gray background on hover */
    color: #333; /* Darker color on hover */
}

/* Body section of the modal, for the main content */
.modal-body {
    flex: 1; /* Take up remaining space */
    overflow-y: auto; /* Scrollable body if content overflows */
    padding: 20px; /* Padding around the content */
}

/* ...existing code... */