/* Hirly/styling/pages/page-post-job.css */
/* Styles specific to the Post a New Job page */

.main.container {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    min-height: calc(100vh - var(--header-height, 90px) - var(--footer-height, 200px));
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top if content is short */
    background-color: var(--background-light); /* Consistent background */
}

.post-job-container {
    background-color: var(--white);
    padding: var(--spacing-xl); /* Generous padding */
    border-radius: var(--border-radius-lg); /* More rounded corners */
    box-shadow: var(--shadow-md);
    max-width: 700px; /* Max width for the form container */
    width: 100%;
    border: 1px solid var(--border-color);
}

.post-job-container h2 {
    font-size: var(--font-size-xxl); /* Larger title for the form */
    color: var(--text-dark);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

/* Form Group spacing handled by main.css .form-group */

.form-group label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--spacing-xs);
    display: block;
}

.form-control {
    width: 100%;
    padding: 0.9rem 1.2rem; /* Slightly more padding for input fields */
    border: 1px solid var(--border-color); /* Use border-color */
    border-radius: var(--border-radius); /* Use default border-radius */
    font-size: var(--font-size-base);
    color: var(--text-body);
    background-color: var(--white);
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light); /* Use primary-light for shadow */
    outline: none;
}

textarea.form-control {
    min-height: 150px; /* Taller textarea for description */
    resize: vertical;
}

/* IMPORTANT FIX: Apply custom select styles ONLY to <select> elements */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2em;
    padding-right: 2.5rem;
}

/* --- NEW: Custom Dropdown Styles (from dashboard/signup) --- */

.custom-dropdown {
    position: relative;
    width: 100%;
    text-align: left;
    user-select: none;
}

.custom-dropdown .dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); /* Use smaller radius for consistency */
    padding: var(--spacing-sm); /* Adjusted padding */
    font-size: var(--font-size-base);
    color: var(--text-body);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 42px; /* Ensure consistent height with other inputs */
    width: 100%; /* Ensure it takes full width */
    text-align: left; /* Align text to left */
}

.custom-dropdown .dropdown-toggle:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
    outline: none;
}

/* Apply disabled styles when the button has the disabled attribute */
.custom-dropdown .dropdown-toggle[disabled] {
    background-color: var(--background-light);
    cursor: not-allowed;
    opacity: 0.7;
}

.custom-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 5px); /* Position slightly below the toggle - ENSURES DROPDOWN TO BOTTOM */
    left: 0;
    width: 100%;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 10;
    max-height: 250px; /* Make the menu itself scrollable */
    overflow-y: auto; /* Enable scrolling for the entire menu */
    display: none; /* Hidden by default */
    transform: translateY(10px); /* Start slightly below for animation */
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.custom-dropdown.active .dropdown-menu {
    display: block; /* Show when active */
    transform: translateY(0);
    opacity: 1;
}

.dropdown-arrow {
    transition: transform 0.2s;
}

.custom-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

/* Search Input (Professions only) */
.dropdown-menu-search {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0; /* Stick to the top of the scrollable dropdown-menu */
    background: var(--white);
    z-index: 2; /* Higher z-index than category-heading and checkboxes */
}

.profession-search-input { /* Reused for professions search */
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    box-sizing: border-box; /* Include padding in width */
}

.profession-search-input:focus {
    border-color: var(--primary);
    outline: none;
}

/* Apply disabled styles to search input when it has the disabled attribute */
.profession-search-input[disabled] {
    background-color: var(--background-light);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Checkbox List - now just a container for items */
.dropdown-menu-checkboxes {
    padding: var(--spacing-sm); /* Keep padding for content */
}

/* Category Item Styling (for Category Dropdown) */
.custom-dropdown .checkbox-item { /* Reusing checkbox-item for category list items */
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: var(--font-size-base);
    color: var(--text-body);
}

.custom-dropdown .checkbox-item:hover {
    background-color: var(--background-light);
}

/* Specific styling for items with icons (like categories) */
.custom-dropdown .checkbox-item i.category-icon {
    font-size: var(--font-size-md); /* Adjust icon size */
    margin-right: 10px; /* Space between icon and text */
    color: var(--primary); /* Icon color */
    width: 20px; /* Fixed width for alignment */
    text-align: center;
}

/* Styling for checkboxes within the professions dropdown */
.custom-dropdown .checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    min-width: 16px;
    min-height: 16px;
}

/* Apply disabled styles to checkboxes when they have the disabled attribute */
.dropdown-menu-checkboxes input[type="checkbox"][disabled] {
    cursor: not-allowed;
    opacity: 0.7;
}

.checkbox-item span {
    flex-grow: 1;
}

.no-results-message {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--text-light);
    font-size: var(--font-size-sm);
}

.loading-spinner-small {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--text-light);
    font-size: var(--font-size-sm);
}

/* Selected Tags Display */
.selected-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    min-height: 20px; /* Ensure space even if empty */
}

.selected-tag {
    background: var(--primary-light);
    color: var(--primary);
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    white-space: nowrap; /* Prevent tag text from wrapping */
}

.remove-tag-icon {
    cursor: pointer;
    color: var(--primary);
    display: flex;
    align-items: center;
    font-size: 12px;
}

.remove-tag-icon:hover {
    opacity: 0.8;
}

.tag-placeholder {
    color: var(--text-light);
    font-style: italic;
    font-size: var(--font-size-sm);
    padding: 4px 0;
}


/* NEW: Image Upload Styles (adjusted for consistency) */
.file-upload-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xs);
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.file-upload-input {
    display: none; /* Hide the default file input */
}

.file-upload-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--primary-light); /* Light primary background */
    color: var(--primary-dark); /* Dark primary text */
    padding: 0.8rem 1.2rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    border: 1px solid var(--primary); /* Primary border */
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
    font-weight: 500;
}

.file-upload-label:hover {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary-dark);
}

.file-name-display {
    flex-grow: 1;
    font-size: var(--font-size-sm);
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* Limit width for long filenames */
}

.image-preview-container {
    margin-top: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--background-light);
}

.image-preview {
    max-width: 100%;
    height: auto;
    max-height: 200px; /* Limit preview height */
    border-radius: var(--radius-sm);
    object-fit: contain; /* Ensure the whole image is visible */
    margin-bottom: var(--spacing-sm);
}


/* Submit Button */
.btn-block {
    width: 100%;
    padding: 1rem 2rem; /* Larger button */
    font-size: var(--font-size-lg); /* Larger font size */
    margin-top: var(--spacing-xl); /* More space above the button */
}

/* Message Display (Success/Error) */
#postJobMessage {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-base);
    text-align: center;
}

#postJobMessage.success {
    background-color: rgba(40, 167, 69, 0.1); /* Use rgba for success light */
    color: var(--success);
    border: 1px solid var(--success);
}

#postJobMessage.error {
    background-color: rgba(220, 53, 69, 0.1); /* Use rgba for danger light */
    color: var(--danger);
    border: 1px solid var(--danger);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .main.container {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    .post-job-container {
        padding: var(--spacing-lg);
    }
    .post-job-container h2 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-lg);
    }
    .form-group {
        margin-bottom: var(--spacing-md);
    }
    .form-control {
        padding: 0.8rem 1rem;
        font-size: var(--font-size-base);
    }
    .btn-block {
        padding: 0.9rem 1.5rem;
        font-size: var(--font-size-base);
        margin-top: var(--spacing-lg);
    }
    .file-upload-container {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    .file-name-display {
        max-width: 100%; /* Allow full width on small screens */
    }
}

@media (max-width: 480px) {
    .main.container {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
    .post-job-container {
        padding: var(--spacing-md);
    }
    .post-job-container h2 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-md);
    }
    .form-group label {
        font-size: var(--font-size-sm);
    }
    .form-control {
        padding: 0.7rem 0.9rem;
        font-size: var(--font-size-sm);
    }
    .btn-block {
        padding: 0.8rem 1.2rem;
        font-size: var(--font-size-sm);
        margin-top: var(--spacing-md);
    }
}