:root {
    --background-dark: #1E1E2F; /* Dark gray background */
    --text-dark: #1E1E2F; /* dark  text color */
    --background-darker: #2C2C3A; /* Darker gray for cards */
    --form-background: #1E1E2F; /* Form background */
    --input-border: #555; /* Input border color */
    --primary-blue: #66b3ff; /* Primary light blue */
    --primary-blue-hover: #4da6ff; /* Light blue on hover */
    --transparent-light-blue: rgba(79, 163, 247, 0.2); /* Transparent light blue */
    --text-light: white; /* Light text color */
    --white: #FFFFFF; /* Pure white */
    --navy-blue: #1C1F78;
    --transparent-white: rgba(255, 255, 255, 0.5);
    --bright-green: #37C440;
    --navy-blue-80: rgba(28, 31, 120, 0.8);
    --navy-blue-50: rgba(28, 31, 120, 0.5); /* 50% transparent */
    --navy-blue-20: rgba(28, 31, 120, 0.2); /* 20% transparent */
    --bright-green-50: rgba(55, 196, 64, 0.5); /* 50% transparent */
    --bright-green-20: rgba(55, 196, 64, 0.2); /* 20% transparent */
    --bright-green: #37C440; /* Your green color */
    --rz-primary: var(--bright-green); /* Override primary to green */
    --rz-primary-light: #5cd664; /* Lighter shade of green */
    --rz-primary-lighter: rgba(55, 196, 64, 0.2); /* Very light green for backgrounds */
    --rz-primary-dark: #2ea837; /* Darker shade of green */
    --rz-primary-darker: #258e2e; /* Even darker green */
    --rz-on-primary: #ffffff; /* Text on primary, keep white for contrast */
    --rz-on-primary-light: #ffffff; /* Text on primary-light */
    --rz-on-primary-lighter: #333333; /* Text on primary-lighter */
    --rz-on-primary-dark: #ffffff; /* Text on primary-dark */
    --rz-on-primary-darker: #ffffff; /* Text on primary-darker */
}


.rz-dropdown-item.rz-state-highlight,
.rz-dropdown-item.rz-state-highlight span {
    --rz-dropdown-item-selected-color: var(--bright-green) !important;
    color: var(--bright-green) !important;
}

.rz-form-field.rz-variant-outlined.rz-state-focused,
.rz-form-field.rz-variant-outlined .rz-dropdown.rz-state-focused,
.rz-dropdown.rz-state-focused {
    --rz-form-field-focus-border: var(--rz-border-width) solid var(--bright-green) !important;
    --rz-input-focus-border: var(--rz-border-width) solid var(--bright-green) !important;
    --rz-input-focus-shadow: inset 0 0 0 1px var(--bright-green) !important;
    --rz-outline-focus: var(--rz-outline-width) solid var(--bright-green) !important;
    --rz-dropdown-open-border: var(--rz-border-width) solid var(--bright-green) !important;
    --rz-border-focus: var(--rz-border-width) solid var(--bright-green) !important;
}


    .rz-form-field.rz-variant-outlined.rz-state-focused .rz-form-field-label,
    .rz-form-field.rz-variant-outlined .rz-form-field-label.rz-state-focused,
    .rz-dropdown.rz-state-focused .rz-dropdown-label {
        --rz-form-field-label-focus-color: var(--bright-green) !important;
        color: var(--bright-green) !important;
    }


.rz-dropdown.rz-state-open {
    --rz-dropdown-open-border: var(--rz-border-width) solid var(--bright-green) !important;
    --rz-border-focus: var(--rz-border-width) solid var(--bright-green) !important;
}
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

:root {
    font-size: var(--rz-root-font-size);
}

body {
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    background-color: var(--rz-body-background-color);
}

.rz-body {
    --rz-body-padding: 0;
}

a {
    color: var(--rz-link-color);
}

    a:hover,
    a:focus {
        color: var(--rz-link-hover-color);
    }

.blazor-error-boundary {
    background: #b32121; /* Red background */
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }




/* ========================== LAYOUT STYLES ========================== */
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: var(--background-dark) !important;
    color: var(--text-light) !important;
}

/* ========================== FORM STYLES ========================== */
.radzen-templateform {
    max-width: 350px;
    padding: 20px;
    background-color: var(--form-background) !important;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    color: var(--text-light) !important;
}

/* Input fields */
.radzen-textbox, .radzen-password {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--input-border) !important;
    margin-bottom: 10px;
    background-color: var(--form-background) !important;
    color: var(--text-light) !important;
}

/* ========================== BUTTON STYLES ========================== */
.rz-button.rz-primary {
    background-color: var(--bright-green) !important;
    color: var(--text-light) !important;
    font-weight: bold;
    border-radius: 5px;
    width: 30%;
    padding: 10px;
    border: none;
    transition: background 0.3s ease;
}

.rz-button.rz-primary:hover {
    background-color: var(--bright-green) !important;
}

/* Primary background gradient */
.rz-background-color-primary {
    background: var(--white) !important;
}

/* ========================== ALERT MESSAGES ========================== */
.radzen-alert {
    background-color: var(--background-darker) !important;
    color: var(--text-light) !important;
    border-radius: 5px;
    padding: 10px;
}




/* Card background */
.rz-shadow-3 {
    background-color: var(--background-darker) !important;
}

/* ========================== MENU ITEMS ========================== */
.rz-navigation-item-link:hover {
    background-color: var(--transparent-white) !important;
    color: var(--navy-blue) !important;
}
    .rz-navigation-item-link:hover .rz-navigation-item-icon:hover {
        color: var(--navy-blue) !important;
    }

    .rz-navigation-item-link:hover .rz-navigation-item-text {
        color: var(--navy-blue) !important;
    }

.rz-navigation-item-link-active {
    background-color: var(--navy-blue-20) !important;
    color: var(--navy-blue) !important;
}

    .rz-navigation-item-link-active .rz-navigation-item-icon {
        color: var(--navy-blue) !important;
    }

/* ========================== TAB STYLES ========================== */
.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border-top-width: 0;
    border-bottom: 2px solid var(--bright-green) !important;
}

.rz-tabview-selected .rz-tabview-title {
    color: var(--bright-green) !important;
    text-decoration: none; /* Remove any text decoration */
}

/* ========================== PAGER STYLES ========================== */
.rz-pager-page.rz-state-active {
    background-color: var(--bright-green-20) !important;
    color: var(--bright-green) !important;
    border: var(--rz-pager-numeric-button-selected-border);
    padding: var(--rz-pager-numeric-button-selected-padding);
}

/*h5, .rz-color-on-primary, .rz-text-primary {
    color: var(--text-dark) !important;
}*/
/* ========================== TEXT COLORS ========================== */
h5, .rz-color-on-primary, .rz-text-primary {
    color: var(--text-light) !important;
}

.rz-primary {
    background-color: var(--white) !important;
}

/* Ensure this rule is more specific than the one in site.css */
html body .rz-background-color-primary {
    background: var(--white) !important;
}

.rz-background-color-primary {
    background: var(--white) !important;
}

/* Profile Page Styling ====================================================================================================== */
/* Main Content Container */
.profile-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Profile Body */
.profile-body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Header Bar */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-indicator {
    background-color: #059669;
    color: #FFFFFF;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
}

.btn-edit {
    background-color: var(--bright-green);
    color: #FFFFFF;
    border: none;
    border-radius: 9999px;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

/* Info Cards */
.profile-small-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns per row */
    gap: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.info-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    min-height: 80px; /* Ensure consistent height for all cards */
}

    .info-card.about-card {
        grid-column: 1 / -1; /* Span all columns for the About section */
        align-items: flex-start; /* Align content to the top */
    }

.icon-wrapper {
    background-color: #E5E7EB;
    border-radius: 9999px;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #374151;
}

.info-content {
    display: flex;
    flex-direction: column;
    flex: 1; /* Allow the content to take up remaining space */
}

.info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
}

.info-value {
    font-size: 1rem;
    font-weight: 500;
    color: #111827;
}

    .info-value.scrollable {
        max-height: 150px; /* Limit the height of the About section */
        overflow-y: auto; /* Add scrollbar if content overflows */
        font-size: 0.875rem;
        line-height: 1.5;
        color: #111827; /* Match the color of other info-value elements */
    }

/* Listing Preview */
.listing-preview {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.listing-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.listing-detail {
    display: flex;
    gap: 0.5rem;
}

    .listing-detail .label {
        font-weight: 600;
        color: #6B7280;
    }

    .listing-detail .value {
        font-weight: 500;
        color: #111827;
    }

.listing-actions {
    display: flex;
    gap: 0.5rem;
}

.btn {
    border: none;
    cursor: pointer;
    font-weight: 500;
    border-radius: 8px;
    padding: 0.5rem 1rem;
}

.btn-view {
    background-color: var(--navy-blue);
    color: #FFFFFF;
}

.btn-message {
    background-color: var(--navy-blue);
    color: #FFFFFF;
}

.toggle-button {
    display: flex;
    align-items: center;
    background-color: var(--bright-green);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.eye-icon {
    margin-left: 10px;
}

/* Qualifications Page Styles */
.qualifications-main {
    padding: 2rem; /* Default padding when used as a standalone page */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* When QualificationsPage is embedded inside MyProfile, remove the padding */
.profile-main .qualifications-main {
    padding: 0 !important; /* Remove nested padding */
}

.qualifications-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.scroll-card {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.card-header {
    background-color: #f8f9fa;
    padding: 0.75rem 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between title and button */
    gap: 0.5rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.card-header-title {
    color: #000000; /* Change to black */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-body {
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.search-box {
    width: 100%;
    margin-bottom: 1rem;
}

.data-grid {
    border: none;
}

.qualification-table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed; /* Force the table to respect column widths */
}

/* Adjust table column widths to stretch evenly */
.qualification-table-header {
    font-weight: 600;
    color: #000000; /* Already black */
    text-align: left;
}

.qualification-table-header-cell {
    padding: 0.5rem 0.5rem; /* Add some horizontal padding for better spacing */
    width: auto; /* Allow columns to stretch */
}

/* Specific adjustments for each table to ensure even distribution */
.qualification-table.cad-courses th:nth-child(1) {
    width: 50%; /* Course Name / Qualification */
    min-width: 200px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.cad-courses th:nth-child(2) {
    width: 20%; /* Year */
    min-width: 80px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.cad-courses th:nth-child(3) {
    width: 20%; /* Proof */
    min-width: 80px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.additional-qualifications th:nth-child(1) {
    width: 20%; /*Qualification */
    min-width: 200px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.additional-qualifications th:nth-child(2) {
    width: 30%; /* dicipline */
    min-width: 80px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.additional-qualifications th:nth-child(3) {
    width: 20%; /* Year */
    min-width: 80px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.additional-qualifications th:nth-child(4) {
    width: 20%; /* proof */
    min-width: 80px; /* Ensure the column doesn't shrink too much */
}


.qualification-table.cad-courses th:nth-child(4),
.qualification-table.additional-qualifications th:nth-child(4) {
    width: 10%; /* Actions */
    min-width: 60px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.software-experience th:nth-child(1) {
    width: 50%; /* Software */
    min-width: 250px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.software-experience th:nth-child(2) {
    width: 40%; /* Years */
    min-width: 80px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.software-experience th:nth-child(3) {
    width: 10%; /* Actions */
    min-width: 60px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.work-experience th:nth-child(1) {
    width: 20%; /* Title */
    min-width: 100px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.work-experience th:nth-child(2) {
    width: 15%; /* Industry */
    min-width: 100px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.work-experience th:nth-child(3) {
    width: 30%; /* Duration */
    min-width: 80px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.work-experience th:nth-child(4) {
    width: 30%; /* Details */
    min-width: 150px; /* Ensure the column doesn't shrink too much */
}

.qualification-table.work-experience th:nth-child(5) {
    width: 10%; /* Actions */
    min-width: 60px; /* Ensure the column doesn't shrink too much */
}

.qualification-table-row {
    border-bottom: 1px solid #e5e7eb;
}

.qualification-table-cell {
    padding: 0.5rem 0.5rem; /* Add some horizontal padding for better spacing */
    word-wrap: break-word; /* Ensure long text wraps within the cell */
}

.qualification-table-primary {
    color: #111827;
}

.qualification-table-secondary {
    color: #6B7280;
}

.qualification-table-details {
    color: #4B5563;
}

.qualification-table-actions {
    text-align: right;
}

/* Custom Button Styles for Qualifications Page */
.custom-add-btn,
.custom-delete-btn,
.custom-edit-btn {
    background-color: var(--navy-blue);
    color: white;
    border: none;
    width: 32px; /* Increased size */
    height: 32px; /* Increased size */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

    .custom-add-btn:hover,
    .custom-delete-btn:hover,
    .custom-edit-btn:hover {
        background-color: #0e2f5a; /* Slightly darker navy blue for hover */
    }

/* Ensure the content area takes the full width if inside a Radzen layout */
.rz-content,
.rz-layout,
.rz-layout-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important; /* Remove any default padding that might constrain the width */
}

/* Optional: Add responsiveness for smaller screens */
@media (max-width: 768px) {
    .profile-main,
    .qualifications-main {
        padding: 1rem; /* Reduce padding on smaller screens */
    }

    .profile-small-cards {
        grid-template-columns: 1fr; /* Single column on small screens */
    }

    .info-card.about-card {
        grid-column: 1 / -1; /* Still spans the full width */
    }

    /* Adjust qualification table columns for smaller screens */
    .qualification-table {
        table-layout: auto; /* Allow natural column widths on smaller screens */
    }

        .qualification-table th,
        .qualification-table td {
            width: auto !important; /* Reset widths for smaller screens */
            min-width: 0 !important; /* Remove min-width on smaller screens */
            padding: 0.5rem 0.25rem; /* Reduce padding for smaller screens */
        }
}

.btn-change-password {
    background-color: var(--bright-green);
    color: #FFFFFF;
    border: none;
    border-radius: 9999px;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-change-password {
    background-color: var(--navy-blue);
}

    .btn-edit:hover,
    .btn-change-password:hover {
        opacity: 0.9;
    }




/* Job Listings Main Container */
.job-listings-main {
    padding: 0; /* Remove padding since RadzenRow/Column already handles spacing */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Job Listing Preview */
.job-listing-preview {
    background-color: var(--white) !important;
    border-radius: 12px;
    padding: 1rem; /* Reduced padding from 1.5rem to 1rem to make the card more compact */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 1rem; /* Space between cards */
}

/* Job Listing Header */
.job-listing-header {
    margin-bottom: 0.75rem; /* Reduced from 1rem to 0.75rem to reduce vertical space */
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* Small gap between title row and company name */
}

/* Header Row (Job Title and Created At) */
.header-row {
    display: flex;
    justify-content: space-between; /* Align job title on the left, Created At on the right */
    align-items: center; /* Vertically center the items */
}

.job-title {
    font-size: 1.25rem; /* Larger font for the title */
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.created-at {
    font-size: 1rem; /* Smaller than the job title */
    font-weight: 600; /* Match the job title font weight */
    color: var(--text-dark); /* Match the job title color */
    display: flex;
    gap: 0.5rem;
}

    .created-at .label {
        font-weight: 600; /* Match the job title */
        color: var(--text-dark); /* Match the job title */
    }

    .created-at .value {
        font-weight: 600; /* Match the job title */
        color: var(--text-dark); /* Match the job title */
    }

.company-name {
    font-size: 0.875rem; /* Smaller font for the company name */
    font-weight: 400;
    color: #6B7280; /* Matches your secondary text color */
    margin: 0;
}

/* Job Listing Content (Four-column grid) */
.job-listing-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.5fr; /* Four columns, with the last one narrower for actions */
    gap: 0.75rem; /* Reduced gap from 1rem to 0.75rem to make the layout more compact */
    align-items: start; /* Align items to the top */
}

/* Job Listing Details (Occupies first three columns) */
.job-listing-details {
    grid-column: 1 / 4; /* Span the first three columns */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Reduced gap from 1rem to 0.75rem */
}

/* Listing Row (Three-column grid within the first three columns) */
.listing-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns for the details */
    gap: 0.75rem; /* Reduced gap from 1rem to 0.75rem */
    align-items: start; /* Align items to the top of each column */
}

/* Listing Detail */
.listing-detail {
    display: flex;
    gap: 0.5rem;
}

    .listing-detail.empty {
        display: none; /* Hide empty columns */
    }

    .listing-detail.full-width {
        grid-column: 1 / -1; /* Span the full width for Description and Created At */
    }

    .listing-detail .label {
        font-weight: 600;
        color: #6B7280; /* Matches your secondary text color */
    }

    .listing-detail .value {
        font-weight: 500;
        color: #111827; /* Matches your primary text color */
        word-wrap: break-word; /* Ensure long text (like Description) wraps */
    }

/* Stacked Values (for Salary/Hourly Rate) */
.stacked-values {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Job Listing Actions (Occupies the fourth column) */
.job-listing-actions {
    grid-column: 4 / 5; /* Occupy the fourth column */
    grid-row: 1 / 3; /* Span only the first two rows instead of all three to reduce height */
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 0.5rem;
    justify-content: center; /* Center buttons vertically */
    align-items: center; /* Center buttons horizontally */
}

/* Button Styles */
.btn {
    border: none;
    cursor: pointer;
    font-weight: 500;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content (text and icon) */
    gap: 0.5rem;
    transition: background-color 0.3s ease;
    width: 100%; /* Ensure buttons take the full width of the column */
    height: 40px; /* Fixed height to ensure all buttons are the same size */
    box-sizing: border-box; /* Ensure padding doesn't affect the height */
}

.btn-view {
    background-color: var(--navy-blue) !important; /* Use navy blue */
    color: var(--text-light) !important;
}

    .btn-view:hover {
        background-color: #0e2f5a !important; /* Slightly darker navy blue for hover */
    }

.btn-save {
    background-color: var(--navy-blue) !important; /* Use navy blue */
    color: var(--text-light) !important;
}

    .btn-save:hover {
        background-color: #0e2f5a !important; /* Slightly darker navy blue for hover */
    }

.btn-unsave {
    background-color: var(--navy-blue) !important; /* Use navy blue */
    color: var(--text-light) !important;
}

    .btn-unsave:hover {
        background-color: #0e2f5a !important; /* Slightly darker navy blue for hover */
    }


/* Responsive adjustments */
@media (max-width: 768px) {
    .job-listing-content {
        grid-template-columns: 1fr; /* Stack everything on smaller screens */
    }

    .job-listing-details {
        grid-column: 1 / -1; /* Span the full width */
    }

    .job-listing-actions {
        grid-column: 1 / -1; /* Span the full width */
        grid-row: auto; /* Reset row spanning */
        justify-content: center; /* Center buttons horizontally */
    }

    .listing-row {
        grid-template-columns: 1fr; /* Stack all columns on smaller screens */
    }

    .listing-detail.empty {
        display: none; /* Ensure empty columns remain hidden */
    }

    .listing-detail {
        grid-column: 1 / -1; /* Ensure each detail takes the full width */
    }


    .header-row {
        flex-direction: column; /* Stack job title and Created At on smaller screens */
        align-items: flex-start; /* Align to the left */
/*Master code*/
    .qualification-table-header-cell.ascended
    .qualification-table-header-cell.qualification-table-actions{
    width: 100px;
}

    .created-at {
        font-size: 0.875rem; /* Even smaller on mobile for better fit */
    }
}



/* Filter Button */
.filter-button {
    background-color: var(--bright-green) !important;
    color: var(--text-light) !important;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
    width: auto; /* Allow the button to size based on content */
    margin: 0 auto 1rem auto; /* Center the button and add spacing below */
    display: block; /* Ensure the button is centered properly */
}

    .filter-button:hover {
        background-color: #2ea55b !important; /* Slightly darker green for hover */
    }




.rz-button.dialog-button {
    background-color: var(--bright-green) !important;
    color: var(--text-light) !important;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

    .rz-button.dialog-button:hover {
        background-color: #2ea55b !important; /* Slightly darker green for hover */
    }

}


.qualification-table-actions {
    text-align: right;
}

/* Company Page Styling */
.company-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
}

.company-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.btn-edit {
    background-color: var(--bright-green);
    color: #FFFFFF;
    border: none;
    border-radius: 9999px;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.company-body {
    display: grid;
    grid-template-columns: 2fr ;
    gap: 1rem;
}

.company-small-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.info-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.icon-wrapper {
    background-color: #E5E7EB;
    border-radius: 9999px;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #374151;
}

.info-content {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
}

.info-value {
    font-size: 1rem;
    font-weight: 500;
    color: #111827;
}

.scroll-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    overflow-y: auto;
    max-height: 300px;
    width: 100%;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #111827;
}

.card-body {
    font-size: 0.875rem;
    color: #4B5563;
}
.btn-toggle-company-joblisting {
    background-color: var(--navy-blue) !important;
    color: var(--text-light) !important;
}

    .btn-toggle-company-joblisting:hover {
        background-color: #0e2f5a !important;
    }

/*View Job Details Page Styling-------------------------------------------------*/
.job-details-main {
    padding: 2rem;
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .job-header h2 {
        font-size: 1.5rem;
        font-weight: 600;
        color: #111827;
    }

.job-body {
    width: 100%;
}

.job-small-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.info-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

    .info-card.full-width {
        grid-column: 1 / -1;
    }

.icon-wrapper {
    background-color: #E5E7EB;
    border-radius: 9999px;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #374151;
}

.info-content {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
}

.info-value {
    font-size: 1rem;
    font-weight: 500;
    color: #111827;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .job-small-cards {
        grid-template-columns: 1fr;
    }
}
/* Company Job Listings Page Styling -------------------------------------------*/
.company-job-listings {
    margin-top: 1rem;
}

    .company-job-listings .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .company-job-listings .section-title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .company-job-listings .btn-add {
        background-color: var(--bright-green);
        color: #FFFFFF;
        border: none;
        border-radius: 8px;
        padding: 0.375rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
    }

/* Optional: Retain job-cards if still used in your markup */
.job-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.8rem;
}

/* Edit and Delete Buttons */
.btn-edit {
    background-color: var(--bright-green); 
    color: #FFFFFF;
    border: none;
    border-radius: 9999px;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}
.btn-edit-company-joblisting {
    background-color: var(--navy-blue) !important; /* Use navy blue */
    color: var(--text-light) !important;
}

    .btn-edit-company-joblisting:hover {
        background-color: #0e2f5a !important; /* Slightly darker navy blue for hover */
    }
.btn-toggle-company-joblisting {
    background-color: var(--navy-blue);
    color: var(--text-light);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

    .btn-toggle-company-joblisting:hover {
        background-color: #0e2f5a;
    }
 .btn-delete-company-joblisting {
    background-color: var(--navy-blue);
    color: #FFFFFF;
    border: none;
    border-radius: 9999px;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}

/* Optional: Truncate description text if needed */
.listing-detail .value {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Message Request Card -------------------------------------------------*/
.message-request-card {
    background-color: var(--white) !important;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

/* Message Request Header */
.message-request-header {
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.requested-at {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    gap: 0.5rem;
}

    .requested-at .label {
        font-weight: 600;
        color: var(--text-dark);
    }

    .requested-at .value {
        font-weight: 600;
        color: var(--text-dark);
    }

.status {
    font-size: 0.875rem;
    font-weight: 400;
    color: #6B7280;
    margin: 0;
}

/* Message Request Content */
.message-request-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.5fr;
    gap: 0.75rem;
    align-items: start;
}

/* Message Request Details */
.message-request-details {
    grid-column: 1 / 4;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Listing Row */
.listing-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    align-items: start;
}

/* Listing Detail */
.listing-detail {
    display: flex;
    gap: 0.5rem;
}

    .listing-detail .label {
        font-weight: 600;
        color: #6B7280;
    }

    .listing-detail .value {
        font-weight: 500;
        color: #111827;
        word-wrap: break-word;
    }

/* Message Request Actions */
.message-request-actions {
    grid-column: 4 / 5;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

/* Button Styles */
.btn {
    border: none;
    cursor: pointer;
    font-weight: 500;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.3s ease;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
}

.btn-delete {
    background-color: var(--navy-blue) !important; /* Use navy blue */
    color: var(--text-light) !important;
}



.btn-accept {
    background-color: var(--navy-blue) !important; /* Use navy blue */
    color: var(--text-light) !important;
}

    

.btn-decline {
    background-color: var(--navy-blue) !important; /* Use navy blue */
    color: var(--text-light) !important;
}

    

/* Responsive Adjustments */
@media (max-width: 768px) {
    .message-request-content {
        grid-template-columns: 1fr;
    }

    .message-request-details {
        grid-column: 1 / -1;
    }

    .message-request-actions {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-content: center;
    }

    .listing-row {
        grid-template-columns: 1fr;
    }

    .listing-detail {
        grid-column: 1 / -1;
    }

    .header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .requested-at {
        font-size: 0.875rem;
    }
}

/* Container and Section Titles */
.msg-req-container {

    color: var(--text-light);
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
}

.msg-req-header {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.msg-req-search {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background-color: var(--form-background);
    color: var(--text-light);
    margin-bottom: 1rem;
}



.msg-req-unauthorized {
    color: var(--text-light);
    text-align: center;
    margin-top: 2rem;
}


.rz-form .rz-form-field.rz-variant-outlined.rz-floating-label .rz-textbox:focus {
    border: 1px solid var(--bright-green) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--bright-green) !important;
}


.rz-form  .rz-form-field.rz-variant-outlined.rz-floating-label.rz-state-focused {
    --rz-form-field-filled-focus-border: 1px solid var(--bright-green) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}


    .rz-form .rz-form-field.rz-variant-outlined.rz-floating-label.rz-state-focused .rz-form-field-label {
        color: var(--bright-green) !important;
    }

/* Custom variables for consistency */
:root {
    --bright-green: #37C440;
}

/* Style the Forgot password? link */
.rz-form  .rz-link {
    color: var(--bright-green) !important;
}

    .rz-form  .rz-link:hover {
        color: #2ea336 !important; /* Darker green for hover */
        text-decoration: underline !important;
    }

/* Style the Sign up button */
.rz-form .rz-register .rz-button.rz-variant-flat.rz-secondary.rz-shade-lighter {
    color: var(--bright-green) !important;
    background-color: transparent !important;
}

    .rz-form  .rz-register .rz-button.rz-variant-flat.rz-secondary.rz-shade-lighter:hover {
        color: #2ea336 !important; /* Darker green for hover */
        background-color: rgba(55, 196, 64, 0.1) !important; /* Subtle hover background */
    }



.rz-form  .rz-form-field.rz-variant-outlined.rz-floating-label .rz-textbox {
    border: none !important; /* Prevent input-level borders */
}

.rz-form  .rz-form-field.rz-variant-outlined.rz-floating-label.rz-state-focused .rz-form-field-label {
    color: var(--bright-green) !important; /* Label color on focus */
}

.listing-row-two-fields {
    display: grid;
    grid-template-columns: 1fr 2fr; /* First column 1/3, second column 2/3 */
    gap: 0.75rem;
    align-items: start;
    justify-items: start; /* Changed from center to start for better alignment */
    width: 100%; /* Ensure it takes full available width */
    box-sizing: border-box; /* Include padding/border in width calculation */
}

/* Ensure content within grid cells wraps and fits */
.listing-detail {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    gap: 0.5rem;
}

    .listing-detail .value {
        word-wrap: break-word;
        overflow-wrap: break-word; /* Ensure long text wraps */
        max-width: 100%; /* Prevent overflow beyond column width */
    }


.rz-button.custom-add-btn {
    background-color: var(--navy-blue) !important;
    color: white !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: background-color 0.3s ease !important;
    padding: 0 !important; /* Override Radzen's padding */
    min-height: unset !important; /* Override Radzen's min-height */
    min-width: unset !important; /* Override Radzen's min-width */
    line-height: normal !important; /* Override Radzen's line-height */
    text-transform: none !important; /* Override Radzen's text-transform */
}

    .rz-button.custom-add-btn:hover {
        background-color: #0e2f5a !important;
    }


/* Scroll card container */
.scroll-card {
    width: 70%;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Card header */
.card-header {
    background-color: #f8f9fa;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Card body */
.scroll-card .card-body {
    padding: 0;
    margin-top: 0;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Table container */
.table-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Scrollable wrapper for table body */
.scroll-wrapper-tables {
    height: 143px !important;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 8px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

/* Qualification table */
.qualification-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    display: table;
}

    /* Table cells */
    .qualification-table th,
    .qualification-table td {
        white-space: nowrap;
        padding: 2px 5px;
        box-sizing: border-box;
        text-align: left;
    }

    /* Sticky table header */
    .qualification-table thead {
        position: sticky;
        top: 0;
        background-color: #ffffff;
        z-index: 1;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* Column widths for CAD Courses */
    .qualification-table.cad-courses th:nth-child(1),
    .qualification-table.cad-courses td:nth-child(1) {
        width: 50%;
        min-width: 200px;
    }

    .qualification-table.cad-courses th:nth-child(2),
    .qualification-table.cad-courses td:nth-child(2) {
        width: 20%;
        min-width: 80px;
    }

    .qualification-table.cad-courses th:nth-child(3),
    .qualification-table.cad-courses td:nth-child(3) {
        width: 20%;
        min-width: 80px;
    }

    .qualification-table.cad-courses th:nth-child(4),
    .qualification-table.cad-courses td:nth-child(4) {
        width: 10%;
        min-width: 60px;
    }

    /* Column widths for Additional Qualifications */
    .qualification-table.additional-qualifications th:nth-child(1),
    .qualification-table.additional-qualifications td:nth-child(1) {
        width: 20%;
        min-width: 200px;
    }

    .qualification-table.additional-qualifications th:nth-child(2),
    .qualification-table.additional-qualifications td:nth-child(2) {
        width: 30%;
        min-width: 80px;
    }

    .qualification-table.additional-qualifications th:nth-child(3),
    .qualification-table.additional-qualifications td:nth-child(3) {
        width: 20%;
        min-width: 80px;
    }

    .qualification-table.additional-qualifications th:nth-child(4),
    .qualification-table.additional-qualifications td:nth-child(4) {
        width: 20%;
        min-width: 80px;
    }

    .qualification-table.additional-qualifications th:nth-child(5),
    .qualification-table.additional-qualifications td:nth-child(5) {
        width: 10%;
        min-width: 60px;
    }

    /* Column widths for Software Experience */
    .qualification-table.software-experience th:nth-child(1),
    .qualification-table.software-experience td:nth-child(1) {
        width: 50%;
        min-width: 250px;
    }

    .qualification-table.software-experience th:nth-child(2),
    .qualification-table.software-experience td:nth-child(2) {
        width: 40%;
        min-width: 80px;
    }

    .qualification-table.software-experience th:nth-child(3),
    .qualification-table.software-experience td:nth-child(3) {
        width: 10%;
        min-width: 60px;
    }

    /* Column widths for Work Experience */
    .qualification-table.work-experience th:nth-child(1),
    .qualification-table.work-experience td:nth-child(1) {
        width: 20%;
        min-width: 100px;
    }

    .qualification-table.work-experience th:nth-child(2),
    .qualification-table.work-experience td:nth-child(2) {
        width: 15%;
        min-width: 100px;
    }

    .qualification-table.work-experience th:nth-child(3),
    .qualification-table.work-experience td:nth-child(3) {
        width: 20%;
        min-width: 80px;
    }

    .qualification-table.work-experience th:nth-child(4),
    .qualification-table.work-experience td:nth-child(4) {
        width: 35%;
        min-width: 150px;
    }

    .qualification-table.work-experience th:nth-child(5),
    .qualification-table.work-experience td:nth-child(5) {
        width: 10%;
        min-width: 60px;
    }

/* Table cell styling */
.qualification-table-header-cell {
    font-weight: 600;
    color: #000000;
}

.qualification-table-row {
    border-bottom: 1px solid #e5e7eb;
}

.qualification-table-primary {
    color: #111827;
}

.qualification-table-secondary {
    color: #6b7280;
}

.qualification-table-details {
    color: #4b5563;
}

.qualification-table-actions {
    text-align: right;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scroll-card {
        width: 100%;
    }

    .qualification-table {
        table-layout: auto;
    }

        .qualification-table th,
        .qualification-table td {
            width: auto;
            min-width: 0;
            padding: 2px 3px;
        }

    .scroll-wrapper-tables {
        height: 120px !important;
    }
}







.msg-req-section-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var( --background-dark) !important;
}


.text-lightmode {
    color: #343a40 !important;
}


.cad-proof-link {
    color: var(--navy-blue-80); /* Change to any color you want */
    text-decoration: underline;
    font-weight: 500;
}

    .cad-proof-link:hover {
        color: var(--navy-blue); /* Optional: darker on hover */
        text-decoration: underline;
    }