@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

* {
    margin: 0;
    padding: 0;
}

html body {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: #5a6c79;
    background: #fbfeff;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1 0 auto;
    width: 100%;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: "Space Grotesk", sans-serif;
}

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

body a {
    text-decoration: none;
}

body h1 {
    font-size: 54px;
}

.text-color {
    color: #071d35;
}

.text-theme {
    color: #00a5a5;
}

a.text-theme:hover {
    text-decoration: underline;
}

/*header-css*/
.logo img {
    max-width: 150px;
}

.logo a {
    outline: none !important;
}

.header {
    flex-shrink: 0;
    background: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid #d9e0e8;
    position: relative;
    z-index: 99;
}

.navigation ul li a {
    color: #071d35;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 10px;
    background: transparent;
    transition: 0.3s;
    letter-spacing: 0.2px;
}

.navigation ul li a:hover {
    background: #e7f3f5;
    color: #122539;
}

.header-button a {
    color: #122539;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 10px;
    background: transparent;
    transition: 0.3s;
    letter-spacing: 0.2px;
    margin-left: 10px;
}

.header-button a:hover {
    background: #e7f3f5;
    color: #122539;
}

.header-button a.button {
    background: #009e9a;
    color: #fff;
}

.header-button a.button:hover {
    background: #009e9ae0;
}

button.toggle-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    color: #071d35;
    display: none;
}

/*header-css*/

.banner {
    background: linear-gradient(90deg, #0b3047 0%, #004d5b 50%, #007b78 100%);
    padding: 80px 0;
}

.banner-content span.tagline {
    background: #ffffff2e;
    font-size: 13px;
    letter-spacing: 0.2px;
    padding: 2px 10px 2px;
    display: inline-block;
    border-radius: 10px;
}

.banner-content span.tagline i {
    margin: 0 5px 0 0;
}

.banner-content h1 {
    font-size: 54px;
    margin: 22px 0 20px;
    font-weight: 600;
}

.banner-content p {
    font-size: 18px;
    opacity: 0.75;
    padding: 0 70px 0 0;
}

.banner-content form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0 30px 0px 0;
}

.banner-content form input[type="text"] {
    border: 1px solid #073b4e;
    padding: 12px 20px 12px 40px;
    border-radius: 10px;
    font-size: 15px;
    width: 100%;
}

.banner-content form .form-group {
    width: calc(100% - 180px);
    position: relative;
}

.banner-content form .form-group i {
    position: absolute;
    left: 14px;
    top: 17px;
}

.banner-content form button {
    width: 170px;
    color: #fff;
    font-weight: 500;
    padding: 14px 14px;
    border-radius: 10px;
    background: #009e9a;
    transition: 0.3s;
    letter-spacing: 0.2px;
    border: none;
}

.banner-content form button:hover {
    background: #009e9ae0;
}

.banner-button a {
    background: #e7f3f5;
    color: #122539;
    border-radius: 10px;
    padding: 10px 25px;
    font-weight: 500;
    border: 1px solid #fbffff5e;
    transition: 0.3s;
}

.banner-button a:hover {
    background: #e7f3f5c9;
}

.banner-button a:last-child {
    background: transparent;
    color: #fff;
}

.banner-button a:last-child:hover {
    background: #ffffff24;
}

.banner-button {
    margin: 30px 0 0;
    gap: 10px;
}

.employer-candidate-section {
    padding: 70px 0;
}

.career-feature-card {
    background: #ffffff;
    border: 1px solid #d8e2e6;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0px 3px 20px #00000012;
}

.career-feature-label {
    display: block;
    margin-bottom: 13px;
    color: #009da5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.career-feature-card h3 {
    margin: 0 0 19px;
    color: #071d35;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}

.career-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #071d35;
    line-height: 1.5;
}

.career-feature-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #d8f5f5;
    color: #006d76;
    font-size: 12px;
}

.career-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #009da5;
    text-decoration: none;
    font-weight: 600;
}

.career-feature-link:hover {
    color: #007b82;
    text-decoration: underline;
}

ul.career-feature-list {
    margin: 0 0 22px;
}



.latest-openings {
    padding: 10px 0 38px;
}

.latest-openings h2 {
    margin: 0 0 4px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    color: #071d35;
}

.latest-openings p {
    margin: 0;
    font-size: 14px;
    color: #071d35;
}

.view-all {
    color: #001f3f;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 10px;
    background: transparent;
    transition: 0.3s;
}

.view-all:hover {
    background: #e7f3f5;
    color: #122539;
}

.job-card {
    background: #fff;
    border: 1px solid #d7e1e7;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(30, 65, 85, 0.08);
    display: block;
    transition: all 0.3s ease;
    text-decoration: none;
}

.job-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(30, 65, 85, 0.12);
    border-color: #7fcecc;
}

.job-card h3 {
    margin: 0;
    color: #062b50;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.job-card:hover h3 {
    color: #009da5;
}

.featured-slider {
    position: relative;
}

.featured-slider-viewport {
    overflow: hidden;
}

.featured-slider-track {
    display: flex;
    align-items: stretch;
    gap: 16px;
    transition: transform 0.35s ease;
}

.featured-slider .featured-job-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    height: auto;
}

.featured-slider.is-single .featured-job-card {
    flex: 0 0 100%;
}

.featured-slider.is-double .featured-job-card {
    flex: 0 0 calc((100% - 16px) / 2);
}

.featured-slider.is-multi .featured-job-card {
    flex: 0 0 calc((100% - 32px) / 3);
}

.featured-slider .job-time {
    flex-shrink: 0;
}

.featured-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border: 1px solid #d7e1e7;
    border-radius: 50%;
    background: #fff;
    color: #071d35;
    box-shadow: 0 6px 16px rgba(30, 65, 85, 0.12);
}

.featured-slider-prev {
    left: -18px;
}

.featured-slider-next {
    right: -18px;
}

.featured-slider-arrow:disabled {
    opacity: 0.4;
}

.featured-slider-arrow[hidden] {
    display: none;
}

@media (max-width: 991.98px) {

    .featured-slider.is-multi .featured-job-card,
    .featured-slider.is-double .featured-job-card {
        flex-basis: calc((100% - 16px) / 2);
    }
}

@media (max-width: 767.98px) {
    .featured-slider .featured-job-card {
        flex-basis: 100%;
    }

    .featured-slider-prev {
        left: 8px;
    }

    .featured-slider-next {
        right: 8px;
    }
}

.job-time {
    color: #58718a;
    font-size: 12px;
    white-space: nowrap;
}

.job-info {
    color: #071d35;
    font-size: 14px;
}

.job-info span {
    display: inline-flex;
    align-items: center;
}

.job-info i {
    font-size: 14px;
    color: #647c91;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 11px;
    border: 1px solid #d5e0e7;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #123653;
    background: #fff;
}

.tag-light {
    background: #e9f3f5;
    border-color: #e9f3f5;
}

.tag-blue {
    background: #d5f3f5;
    border-color: #c5edef;
}

.tag-featured,
.job-tags span.featured,
.job-tags span.tag-featured {
    background: #fff4d6;
    border-color: #f0d48a;
    color: #8a5a00;
}



.popular-categories {
    padding: 36px 0 90px;
}

.popular-categories h2 {
    font-size: 24px;
    font-weight: 700;
    color: #24384d;
}

.category-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 17px;
    border: 1px solid #cfd8df;
    border-radius: 50px;
    color: #071d35;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.category-tag:hover {
    border-color: #009e9a;
    color: #009e9a;
}


/* Footer base styles live with the refined block further below. */


.login-page {
    min-height: 100vh;
    display: flex;
}

.login-page.auth-fit {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.login-page.auth-fit .left-panel,
.login-page.auth-fit .right-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.login-page.auth-fit .left-panel {
    padding: 48px 46px;
}

.login-page.auth-fit .left-content h1 {
    margin-bottom: 16px;
    font-size: 30px;
}

.login-page.auth-fit .audience-groups {
    gap: 12px;
}

.login-page.auth-fit .login-wrapper {
    padding: 16px 20px;
}

.login-page.auth-fit .login-title {
    margin-bottom: 2px;
    font-size: 22px;
}

.login-page.auth-fit .login-subtitle {
    margin-bottom: 14px;
}

.login-page.auth-fit .account-type-label {
    margin-bottom: 8px;
}

.login-page.auth-fit .tab-button {
    margin-bottom: 14px;
}

.login-page.auth-fit .divider {
    margin: 14px 0 12px;
}

.login-page.auth-fit .login-wrapper .mb-3 {
    margin-bottom: 0.7rem !important;
}

.login-page.auth-fit .signin-btn {
    margin-top: 12px;
}

.login-page.auth-fit .create-account {
    margin-top: 14px;
}

.login-page.auth-fit .browse-link {
    margin-top: 10px;
}

@media (max-width: 991.98px) {
    .login-page.auth-fit,
    .login-page.auth-fit .left-panel,
    .login-page.auth-fit .right-panel {
        height: auto;
        max-height: none;
        overflow: visible;
    }
}

.left-panel {
    width: 50%;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 46px;
    background: linear-gradient(135deg, #12304a 0%, #074b59 48%, #007b76 100%);
    color: #fff;
}

.left-panel .brand {
    position: absolute;
    top: 44px;
    left: 46px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.left-panel .brand img {
    filter: brightness(0) invert(1);
    width: 150px;
}

.left-content {
    width: 100%;
}

.left-content h1 {
    margin: 0 0 24px;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.6px;
}

.left-content .intro {
    max-width: 485px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
}

.feature-list li {
    font-size: 15px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 13.5px;
    line-height: 2;
}

.feature-list li::before {
    content: "•";
    margin-right: 5px;
}

.audience-groups {
    display: grid;
    gap: 18px;
}

.audience-label {
    margin: 0 0 4px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.audience-groups .feature-list {
    line-height: 1.7;
}

.copyright {
    position: absolute;
    left: 46px;
    bottom: 44px;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.right-panel {
    position: relative;
    width: 50%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    align-items: center;
    padding-top: 72px;
    background: #fbfeff;
}

.auth-home-bar {
    position: absolute;
    top: 22px;
    right: 28px;
    z-index: 2;
}

.auth-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px 0 12px;
    border: 1px solid #d7e0e5;
    border-radius: 999px;
    background: #fff;
    color: #071d31;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .2s ease, color .2s ease;
}

.auth-home i {
    font-size: 11px;
}

.auth-home:hover {
    border-color: #009e9a;
    color: #009e9a;
}

@media (max-width: 991.98px) {
    .auth-home-bar {
        position: static;
        align-self: stretch;
        display: flex;
        justify-content: flex-end;
        margin: 0;
        padding: 0 16px 12px;
    }
}

.login-wrapper {
    width: 100%;
    max-width: 480px;
    padding: 40px 20px;
}

.login-title {
    margin-bottom: 4px;

    color: #071d31;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
}

.login-subtitle {
    margin-bottom: 23px;
    color: #071d35;
}

.google-btn {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid #d7e0e5;
    border-radius: 9px;
    background: #fff;
    color: #071d31;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 4px rgba(0, 0, 0, .03);
    transition: all .2s ease;
}

.google-btn:hover {
    background: #f8fafb;
    border-color: #c8d4da;
}

.google-icon {
    font-size: 17px;
    font-weight: 700;
    color: #4285f4;
}

.divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 26px 0 24px;
    color: #7a8997;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: 0.2px;
}

.divider::before,
.divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #d9e0e5;
}

.form-label {
    margin-bottom: 5px;
    color: #0b2438;
    font-size: 13px;
    font-weight: 500;
}

.login-wrapper .form-control {
    height: 36px;
    padding: 7px 10px;
    border: 1px solid #d4dfe5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
    transition: border-color .2s, box-shadow .2s;
    font-size: 15px;
}

.form-control:focus {
    border-color: #0aa39f;
    box-shadow: 0 0 0 .15rem rgba(10, 163, 159, .10);
}

.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: 42px;
}

.password-field .form-control.is-invalid {
    background-image: none;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6a7884;
    cursor: pointer;
}

.password-toggle:hover {
    color: #009e9a;
}

.password-row,
.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-options {
    gap: 12px;
    margin-top: 12px;
}

.login-options .form-check {
    margin-bottom: 0;
}

.forgot-link {
    color: #009b9e;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.forgot-link:hover {
    color: #007c80;
    text-decoration: underline;
}

.signin-btn {
    width: 100%;
    height: 36px;
    margin-top: 15px;
    border: 0;
    border-radius: 8px;
    background: #009e9a;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    transition: background .2s ease;
}

.signin-btn:hover {
    background: #078f8c;
}

.create-account {
    margin-top: 24px;
    text-align: center;
    color: #071d35;
}

.create-account a {
    color: #009c9f;
    text-decoration: none;
    font-weight: 700;
    margin-left: 4px;
}

.create-account a:hover {
    text-decoration: underline;
}

.browse-link {
    display: block;
    margin-top: 10px;
    color: #8b98a3;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    background: none;
    border: 0;
}

.browse-link:hover {
    color: #5c6b76;
    text-decoration: underline;
    background: none;
}

.account-type-label {
    margin: 0 0 10px;
    color: #071d31;
    font-size: 14px;
    font-weight: 700;
}

.tab-button {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 16px;
    border: 1px solid #d5dee3;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.tab-button button {
    position: relative;
    border: 0;
    border-right: 1px solid #d5dee3;
    background: #fff;
    padding: 8px 12px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.1px;
    flex: 1;
    min-width: 0;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: #6a7884;
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.tab-button button:last-child {
    border-right: 0;
}

.tab-button .role-radio {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 2px solid #c5d0d6;
    border-radius: 50%;
    background: #fff;
}

.tab-button button.active .role-radio {
    border-color: #009e9a;
}

.tab-button button.active .role-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #009e9a;
}

.tab-button button i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    background: #eef3f5;
    color: #7d8b96;
    font-size: 13px;
}

.tab-button button:hover {
    border-color: #009e9a;
    color: #122539;
}

.tab-button button.active {
    border-color: #d5dee3;
    background: #e7f6f5;
    color: #063b3a;
    font-weight: 700;
    box-shadow: none;
}

.tab-button button.active i {
    background: #009e9a;
    color: #fff;
}

.tab-button .role-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tab-button .role-name {
    font-size: 14px;
    line-height: 1.25;
}

.tab-button .role-hint {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: #7a8994;
}

.tab-button button.active .role-hint {
    font-weight: 500;
    color: #3f6f6d;
}

.tab-pannel {
    display: none;
}

.tab-pannel.active {
    display: block;
}



/*====================dashboard-css====================*/
.chat-icon {
    position: relative;
}

.chat-icon a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 7px 11px;
    color: #0d2b4d;
    text-decoration: none;
}

.chat-unread-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    display: none;
}

.chat-unread-badge.is-visible {
    display: inline-block;
}

.user-dropdown .dropdown-button {
    border: 1px solid #d4dfe5;
    background: #fff;
    border-radius: 20px;
    padding: 5px 14px 5px 46px;
    font-weight: 500;
    position: relative;
    height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.user-dropdown .dropdown-button span {
    position: absolute;
    left: 3px;
    top: 3px;
    background: #009e9a;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    width: 34px;
    height: 34px;
    line-height: 38px;
}

.user-dropdown .dropdown-button:hover {
    background: #e7f3f5;
}

.user-dropdown {
    position: relative;
}

.dropdown-nav p {
    padding: 8px 14px;
    margin: 0;
    border-bottom: 1px solid #e9e9e9;
    font-size: 12px;
}

.dropdown-nav ul li a {
    padding: 7px 10px;
    margin: 0;
    display: inline-block;
    width: 100%;
    font-size: 13px;
}

.dropdown-nav ul {
    padding: 10px 5px 0;
}

.dropdown-nav ul li:last-child {
    position: relative;
    width: calc(100% + 10px);
    left: -5px;
    border-top: 1px solid #e9e9e9;
    padding: 5px;
    margin: 10px 0 0;
}

.dropdown-nav ul li form .dropdown-signout {
    border: none;
    background: transparent;
    padding: 4px 10px;
}

.dropdown-nav ul li:last-child a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dropdown-nav ul li:last-child i {
    font-size: 15px;
}

.dropdown-nav {
    position: absolute;
    right: 0;
    width: 220px;
    background: #fff;
    border: 1px solid #d4dfe5;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(30, 65, 85, 0.08);
    text-align: left;
    top: 46px;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.dropdown-nav.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.dashboard-section {
    background: #fbfeff;
    padding: 36px 0 48px;
}

.dashboard-header h1 {
    font-size: 30px;
    font-weight: 700;
    color: #06264d;
}

.dashboard-header p {
    font-size: 15px;
    color: #071d35;
}

.dashboard-stat-card {
    background: #fff;
    border: 1px solid #d5e1e8;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 12px 25px rgba(0, 40, 70, 0.08);
}

.stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #d9f5f6;
    color: #006978;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.dashboard-stat-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #06264d;
    margin: 0 0 3px;
}

.dashboard-stat-card p {
    color: #071d35;
    font-size: 14px;
    margin: 0;
}

.dashboard-actions .btn {
    border-radius: 10px;
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 500;
}

.dashboard-actions .btn-primary {
    background: #00a5a5;
    border-color: #00a5a5;
}

.dashboard-actions .btn-primary:hover {
    background: #008f8f;
    border-color: #008f8f;
}

.dashboard-actions .btn-outline-secondary {
    color: #06264d;
    border-color: #d5e1e8;
    background: #fff;
}

.dashboard-actions .btn-outline-secondary:hover {
    color: #003a48;
    background: #d1f3f2;
}

.dashboard-actions .all-applications-link:hover {
    background: #d9f5f6;
    color: #071d35;
}

/* Candidate overview dashboard */
.cdash {
    --cdash-text: #202124;
    --cdash-muted: #5f6368;
    --cdash-border: #d9e0e8;
    --cdash-surface: #ffffff;
    --cdash-page: #f5f7fa;
    --cdash-accent: #009fa3;
    --cdash-accent-soft: #eef8f8;
    background: var(--cdash-page);
    color: var(--cdash-muted);
    padding: 28px 0 40px;
}

.cdash-welcome {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 24px;
    margin-bottom: 22px;
}

.cdash-welcome-copy {
    min-width: 0;
    flex: 1 1 280px;
}

.cdash-welcome-title {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 600;
    color: var(--cdash-text);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.cdash-welcome-sub {
    margin: 0;
    max-width: 560px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--cdash-muted);
}

.cdash-welcome-aside {
    flex: 0 0 auto;
    align-self: center;
}

.cdash-block {
    margin-bottom: 22px;
}

.cdash-section-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--cdash-text);
    letter-spacing: -0.01em;
}

.cdash .cdash-kpi {
    min-height: 132px;
    border-color: var(--cdash-border);
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
}

.cdash .edash-kpi-value {
    font-size: 28px;
    color: var(--cdash-text);
}

.cdash .edash-kpi-label {
    color: var(--cdash-muted);
}

.cdash-actions-block {
    margin-bottom: 20px;
}

.cdash-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cdash .edash-action-btn {
    background: var(--cdash-surface);
    border-color: var(--cdash-border);
    color: var(--cdash-text);
}

.cdash .edash-action-btn:hover {
    border-color: #c5d0db;
    background: #f8fafc;
    color: var(--cdash-text);
}

.cdash .edash-action-btn:focus-visible {
    outline: 2px solid var(--cdash-accent);
    outline-offset: 2px;
}

.cdash .edash-action-btn--primary {
    background: var(--cdash-accent);
    border-color: var(--cdash-accent);
    color: #fff;
}

.cdash .edash-action-btn--primary:hover {
    background: #00888c;
    border-color: #00888c;
    color: #fff;
}

.cdash-panel {
    border-color: var(--cdash-border);
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
}

.cdash .edash-panel-title {
    color: var(--cdash-text);
}

.cdash .edash-panel-sub {
    color: var(--cdash-muted);
}

.cdash .edash-panel-link {
    color: var(--cdash-accent);
}

.cdash .edash-panel-link:hover {
    color: #007f83;
}

.cdash-app-row,
.cdash-job-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 16px 18px;
    border-bottom: 1px solid #eef2f6;
    transition: background-color 0.15s ease;
}

.cdash-app-row:last-child,
.cdash-job-row:last-child {
    border-bottom: 0;
}

.cdash-app-row:hover,
.cdash-job-row:hover {
    background: #f8fafc;
}

.cdash-app-main,
.cdash-job-main {
    min-width: 0;
    flex: 1 1 220px;
}

.cdash-app-title,
.cdash-job-title {
    margin: 0 0 4px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.cdash-app-title a,
.cdash-job-title a {
    color: var(--cdash-text);
    text-decoration: none;
}

.cdash-app-title a:hover,
.cdash-job-title a:hover {
    color: var(--cdash-accent);
}

.cdash-app-company {
    margin: 0 0 2px;
    font-size: 13.5px;
    font-weight: 500;
    color: #3c4043;
}

.cdash-app-meta,
.cdash-job-meta {
    font-size: 13px;
    color: var(--cdash-muted);
    line-height: 1.4;
}

.cdash-app-aside {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.cdash-app-view,
.cdash-job-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--cdash-border);
    background: #fff;
    color: var(--cdash-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cdash-app-view:hover,
.cdash-job-view:hover {
    background: var(--cdash-accent-soft);
    border-color: #b7dfe0;
    color: #007f83;
}

.cdash-app-view:focus-visible,
.cdash-job-view:focus-visible {
    outline: 2px solid var(--cdash-accent);
    outline-offset: 2px;
}

.cdash-app-view i {
    font-size: 10px;
}

.cdash-secondary-row {
    align-items: stretch;
}

.cdash-side-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.cdash-side-body {
    padding: 16px 18px 18px;
}

.cdash .edash-empty-icon {
    background: var(--cdash-accent-soft);
    color: var(--cdash-accent);
}

.cdash .edash-empty-title {
    color: var(--cdash-text);
}

.cdash .edash-empty-copy {
    color: var(--cdash-muted);
}

@media (max-width: 991.98px) {
    .cdash-welcome-aside {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .cdash {
        padding: 20px 0 32px;
    }

    .cdash-welcome-title {
        font-size: 24px;
    }

    .cdash-actions .edash-action-btn {
        flex: 1 1 calc(50% - 10px);
        justify-content: center;
    }

    .cdash-app-aside {
        width: 100%;
        justify-content: space-between;
    }

    .cdash .edash-kpi {
        min-height: 118px;
        padding: 14px;
    }

    .cdash .edash-kpi-value {
        font-size: 24px;
    }
}

/* Employer overview dashboard */
.edash {
    background: linear-gradient(180deg, #f3fafb 0%, #fbfeff 45%, #fbfeff 100%);
    padding-bottom: 28px;
}

.edash-welcome {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 28px;
}

.edash-welcome-copy {
    min-width: 0;
    flex: 1 1 280px;
}

.edash-welcome-title {
    font-size: 32px;
    font-weight: 700;
    color: #06264d;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.edash-welcome-sub {
    color: #5a6c79;
    font-size: 15px;
    margin: 0 0 10px;
    max-width: 560px;
    line-height: 1.45;
}

.edash-welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0d7c80;
    font-size: 12.5px;
    font-weight: 600;
}

.edash-welcome-badge i {
    font-size: 12px;
    opacity: 0.85;
}

.edash-welcome-cta {
    flex: 0 0 auto;
    align-self: center;
}

.edash-primary-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    margin-bottom: 20px;
    padding: 18px 20px;
    border: 1px solid #cfe4e7;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef8f8 0%, #ffffff 68%);
    box-shadow: 0 8px 20px rgba(0, 40, 70, 0.05);
}

.edash-primary-cta-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0d7c80;
}

.edash-primary-cta-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #06264d;
    line-height: 1.35;
    max-width: 520px;
}

.edash-primary-cta-btn {
    flex: 0 0 auto;
    min-height: 46px;
    padding-inline: 20px;
    font-size: 15px;
}

.edash-next-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 24px;
    padding: 16px 18px;
    border: 1px solid #d7e8ea;
    border-radius: 14px;
    background: linear-gradient(135deg, #f4fbfb 0%, #ffffff 70%);
}

.edash-next-step-copy {
    min-width: 0;
    flex: 1 1 280px;
}

.edash-next-step-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0d7c80;
}

.edash-next-step-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #06264d;
    line-height: 1.35;
}

.edash-next-step-text {
    color: #5a6c79;
    font-size: 13.5px;
    line-height: 1.45;
    max-width: 520px;
}

.edash-next-step-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.edash-section-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: #8a9aa7;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.edash-block {
    min-width: 0;
    margin-bottom: 24px;
}

.edash-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

.edash-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 24px 22px 20px;
    border: 1px solid #d9e0e8;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.edash-plan-card:hover {
    border-color: #c5ced8;
    box-shadow: 0 8px 20px rgba(32, 33, 36, 0.07);
}

.edash-plan-card.is-popular {
    border-color: #009fa3;
    background: #eef8f8;
    box-shadow: 0 10px 24px rgba(0, 159, 163, 0.12);
}

.edash-plan-card.is-current {
    border-color: #9ecfd2;
    background: #f7fcfc;
}

.edash-plan-card-top {
    min-height: 4.5rem;
    padding-right: 4.5rem;
}

.edash-plan-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.edash-plan-badge--popular {
    background: #009fa3;
    color: #fff;
}

.edash-plan-badge--current {
    background: #e8f6f7;
    color: #0a6468;
    border: 1px solid #b7dfe1;
}

.edash-plan-name {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
    color: #202124;
    line-height: 1.25;
}

.edash-plan-fullname,
.edash-plan-tagline {
    margin-bottom: 0 !important;
    color: #5f6368;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
}

/* ==========================================================================
   Employer Plans & Billing page
   ========================================================================== */
.dashboard-section.eplans {
    background: #f5f7fa;
    padding: 32px 0 56px;
    color: #5f6368;
}

.eplans-container {
    max-width: 1180px;
}

.eplans-hero {
    margin-bottom: 28px;
}

.eplans-title {
    margin: 0 0 10px;
    font-size: 34px;
    font-weight: 600;
    color: #202124;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.eplans-lead {
    max-width: 640px;
    margin: 0 auto 8px;
    color: #5f6368;
    font-size: 15.5px;
    line-height: 1.5;
}

.eplans-hero-note {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    color: #5f6368;
    font-size: 14.5px;
    line-height: 1.5;
}

.eplans-redirect-notice {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.eplans-summary {
    max-width: 820px;
    margin: 0 auto 28px;
    padding: 18px 20px;
    border: 1px solid #cfe8e9;
    border-radius: 14px;
    background: #eef8f8;
    box-shadow: 0 4px 14px rgba(0, 159, 163, 0.06);
}

.eplans-summary-label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #009fa3;
}

.eplans-summary-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.eplans-summary-name {
    font-size: 20px;
    font-weight: 700;
    color: #202124;
    line-height: 1.25;
}

.eplans-summary-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0.28em 0.7em;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

.eplans-summary-meta {
    display: grid;
    gap: 8px;
}

.eplans-summary-meta li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #3d5568;
    font-size: 14px;
    line-height: 1.45;
}

.eplans-summary-meta i {
    margin-top: 3px;
    color: #009fa3;
    width: 14px;
    text-align: center;
}

.eplans-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.eplans-empty {
    grid-column: 1 / -1;
    max-width: 480px;
    margin: 0 auto;
}

.eplans-jump-link {
    display: inline-flex;
    align-items: center;
    color: var(--brand, #009fa3);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

.eplans-jump-link:hover,
.eplans-jump-link:focus-visible {
    color: #1c4585;
    text-decoration: underline;
}

.eplans-panel {
    background: #fff;
    border: 1px solid #d9e0e8;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
    overflow: hidden;
}

.eplans-panel-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid #eef2f6;
}

.eplans-panel-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #202124;
    line-height: 1.3;
}

.eplans-panel-sub {
    max-width: 640px;
    color: #5f6368;
    font-size: 14.5px;
    line-height: 1.45;
}

.eplans-compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.eplans-compare-table {
    width: 100%;
    min-width: 640px;
    margin: 0;
    border-collapse: collapse;
}

.eplans-compare-table th,
.eplans-compare-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f6;
    color: #202124;
    font-size: 14px;
    line-height: 1.45;
    vertical-align: middle;
}

.eplans-compare-table thead th {
    background: #fafbfc;
    color: #202124;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.eplans-compare-table tbody th {
    font-weight: 600;
    text-align: left;
    color: #3d5568;
    min-width: 160px;
}

.eplans-compare-table td:not(:first-child),
.eplans-compare-table thead th:not(:first-child) {
    text-align: center;
}

.eplans-compare-table tbody tr:last-child th,
.eplans-compare-table tbody tr:last-child td {
    border-bottom: 0;
}

.eplans-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #e8f6f7;
    color: #188038;
    font-size: 12px;
}

.eplans-dash {
    color: #9aa3ab;
    font-weight: 600;
}

.eplans-faq-list {
    display: grid;
    gap: 0;
}

.eplans-faq-item {
    border-top: 1px solid #eef2f6;
    padding: 0;
}

.eplans-faq-item:first-child {
    border-top: 0;
}

.eplans-faq-q {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 16px 22px;
    cursor: pointer;
    color: #202124;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.eplans-faq-q::-webkit-details-marker {
    display: none;
}

.eplans-faq-q::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: #5f6368;
    transition: transform 0.15s ease;
}

.eplans-faq-item[open] > .eplans-faq-q::after {
    transform: rotate(180deg);
}

.eplans-faq-q:focus-visible {
    outline: 2px solid var(--brand, #009fa3);
    outline-offset: -2px;
}

.eplans-faq-a {
    margin: 0;
    padding: 0 22px 18px;
    color: #5f6368;
    font-size: 14.5px;
    line-height: 1.55;
}

.eplans-support-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 20px 22px;
    border: 1px solid #d9e0e8;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
}

.eplans-support-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #202124;
}

.eplans-support-text {
    color: #5f6368;
    font-size: 14.5px;
    line-height: 1.45;
}

.eplans-support-btn {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    border: 0;
    background: #009fa3;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
}

.eplans-support-btn:hover,
.eplans-support-btn:focus-visible {
    background: #00878a;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 159, 163, 0.18);
}

@media (max-width: 1199.98px) {
    .eplans-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eplans-title {
        font-size: 30px;
    }
}

@media (max-width: 767.98px) {
    .dashboard-section.eplans {
        padding: 22px 0 40px;
    }

    .eplans-title {
        font-size: 26px;
    }

    .eplans-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .eplans-summary,
    .eplans-panel-header,
    .eplans-support-card {
        padding-left: 16px;
        padding-right: 16px;
    }

    .eplans-faq-q,
    .eplans-faq-a {
        padding-left: 16px;
        padding-right: 16px;
    }

    .eplans-support-btn {
        width: 100%;
    }

    .edash-plan-card-top {
        padding-right: 0;
        min-height: 0;
    }

    .edash-plan-badge {
        position: static;
        margin-bottom: 10px;
    }
}

.eapps-count {
    color: #7a8b97;
    font-weight: 700;
}

.eapps-filters {
    padding: 14px 16px;
    border: 1px solid #dfe8ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 40, 70, 0.04);
}

.eapps-filters-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) repeat(2, minmax(0, 0.9fr)) auto;
    gap: 12px;
    align-items: end;
}

.eapps-empty-state {
    padding: 32px 20px 36px;
}

.eapps-candidate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.eapps-candidate-meta,
.eapps-job-title {
    color: #5a6c79;
    font-size: 13px;
}

.eapps-new-badge {
    font-size: 10px;
    padding: 3px 8px;
}

.eapps-status-select {
    min-width: 130px;
    border-color: #d5e1e8;
    font-size: 13px;
    font-weight: 600;
}

.eapps-card-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.eapps-card-status-row .eapps-status-form {
    flex: 1 1 140px;
    min-width: 0;
}

.eapps-card-status-row .eapps-status-select {
    width: 100%;
}

.applicant-workspace-status-card .eapps-status-form,
.applicant-workspace-status-card .eapps-status-select {
    width: 100%;
}

.eapps-status-modal .modal-title {
    font-weight: 700;
    color: #0b2545;
}

@media (max-width: 1199.98px) {
    .eapps-filters-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .eapps-filters-grid {
        grid-template-columns: 1fr;
    }

    .eapps-table-wrap {
        display: none;
    }

    .eapps-card-list {
        display: grid;
    }
}

.edash-plan-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 14px 0 6px;
}

.edash-plan-price {
    font-size: 32px;
    font-weight: 700;
    color: #202124;
    letter-spacing: -0.02em;
    line-height: 1;
}

.edash-plan-cadence {
    color: #5f6368;
    font-size: 14.5px;
    font-weight: 600;
}

.edash-plan-compare {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #5f6368;
    font-size: 12.5px;
}

.edash-plan-compare span {
    color: #188038;
    font-weight: 700;
}

.edash-plan-features {
    list-style: none;
    margin: 10px 0 18px;
    padding: 0;
    display: grid;
    gap: 10px;
    flex: 1 1 auto;
}

.edash-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #3d5568;
    font-size: 14px;
    line-height: 1.45;
}

.edash-plan-features li i {
    margin-top: 3px;
    color: #009fa3;
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.edash-plan-features li span {
    min-width: 0;
}

.edash-plan-cta {
    margin-top: auto;
}

.edash-plan-btn {
    width: 100%;
    justify-content: center;
}

.edash-plan-btn.is-disabled,
.edash-plan-btn.is-current-btn {
    cursor: default;
    opacity: 0.85;
    pointer-events: none;
}

.edash-plan-btn.is-current-btn {
    background: #e8f6f7;
    border-color: #b7dfe1;
    color: #0a6468;
}

.edash-plan-page-grid .edash-plan-card {
    height: 100%;
}

.edash-kpi-row > [class*="col-"] {
    display: flex;
}

.edash-kpi {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 148px;
    background: #fff;
    border: 1px solid #dfe8ee;
    border-radius: 14px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 18px rgba(0, 40, 70, 0.04);
}

.edash-kpi--link {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.edash-kpi--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 40, 70, 0.08);
    border-color: #c9d8e2;
    color: inherit;
}

.edash-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.edash-kpi-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f0f7f8;
    color: #0d7c80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.edash-kpi-chevron {
    color: #b4c2cd;
    font-size: 11px;
}

.edash-kpi-label {
    color: #6b7f8f;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
}

.edash-kpi-value {
    font-size: 30px;
    font-weight: 700;
    color: #06264d;
    line-height: 1.1;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.edash-kpi-value--text {
    font-size: 20px;
    line-height: 1.25;
}

.edash-kpi-meta {
    margin-top: auto;
    color: #8596a4;
    font-size: 12.5px;
    line-height: 1.35;
}

.edash-actions-block {
    margin-bottom: 20px;
}

.edash-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.edash-actions--sticky {
    position: sticky;
    top: 12px;
    z-index: 30;
    padding: 10px 12px;
    border: 1px solid #e3ecef;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 20px rgba(0, 40, 70, 0.06);
    backdrop-filter: blur(8px);
}

.edash-actions-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.edash-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid #d5e1e8;
    background: #fff;
    color: #3d5568;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.edash-action-btn:hover {
    background: #f5f8fa;
    border-color: #c5d5df;
    color: #254055;
}

.edash-action-btn.is-active {
    background: #eef7f8;
    border-color: #b7dfe1;
    color: #0a6468;
}

.edash-action-btn--primary {
    background: #1aa3a8;
    border-color: #1aa3a8;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(26, 163, 168, 0.28);
}

.edash-action-btn--primary:hover {
    background: #168f93;
    border-color: #168f93;
    color: #fff;
}

.edash-action-btn--primary.is-active {
    background: #168f93;
    box-shadow: 0 8px 18px rgba(26, 163, 168, 0.28);
}

.edash-mobile-cta {
    display: none;
}

.ejobs-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ejobs-credit-meta {
    color: #7a8b97;
    font-size: 13px;
    font-weight: 600;
}

.ejobs-plan-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 14px 16px;
    border: 1px solid #c9e4e6;
    border-radius: 14px;
    background: #f3fbfb;
}

.ejobs-plan-notice-title {
    margin: 0;
    color: #0a6468;
    font-size: 14px;
    font-weight: 700;
}

.ejobs-plan-notice-text {
    color: #3d5568;
    font-size: 13.5px;
}

.ejobs-empty-state {
    padding: 32px 20px 36px;
}

.ejobs-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ejobs-filter--compact {
    min-height: 44px;
}

.ejobs-toolbar-extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ejobs-location-input {
    width: 150px;
    min-height: 40px;
}

.ejobs-date-input {
    width: 150px;
    min-height: 40px;
}

@media (max-width: 767.98px) {
    .ejobs-toolbar-extras {
        width: 100%;
    }

    .ejobs-location-input,
    .ejobs-date-input {
        width: 100%;
    }
}

.ejobs-table tbody tr.ejobs-row:hover {
    background: #f8fbfc;
}

/* Action menus sit inside rounded panels / table-responsive; keep them unclipped. */
.ejobs .edash-panel,
.eapps .edash-panel {
    overflow: visible;
}

.ejobs-table-wrap.table-responsive,
.eapps-table-wrap.table-responsive {
    overflow: visible;
}

.ejobs-menu {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
    z-index: 1;
}

.ejobs-menu:has([data-ejobs-menu-toggle][aria-expanded="true"]) {
    z-index: 30;
}

.ejobs-menu-toggle {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5e1e8;
    border-radius: 10px;
    background: #fff;
    color: #3d5568;
    cursor: pointer;
}

.ejobs-menu-toggle:hover,
.ejobs-menu-toggle[aria-expanded="true"] {
    border-color: #b7dfe1;
    background: #f3fbfb;
    color: #0a6468;
}

.ejobs-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 180px;
    padding: 6px;
    border: 1px solid #dfe8ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 40, 70, 0.12);
}

/* Prefer opening upward on the last row so the menu stays on-screen. */
.ejobs-table tbody tr:last-child .ejobs-menu-dropdown,
.ejobs-card-list .ejobs-card:last-child .ejobs-menu-dropdown,
.eapps-table tbody tr:last-child .ejobs-menu-dropdown {
    top: auto;
    bottom: calc(100% + 6px);
}

.ejobs-menu-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #243746;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ejobs-menu-item:hover {
    background: #f3f8f9;
    color: #0a6468;
}

.ejobs-menu-item.is-danger {
    color: #b42318;
}

.ejobs-menu-item.is-danger:hover {
    background: #fdecec;
    color: #912018;
}

.ejobs-card-list {
    display: none;
}

.ejobs-card {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #eef3f6;
}

.ejobs-card:last-child {
    border-bottom: 0;
}

.ejobs-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ejobs-card-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
}

.ejobs-card-title a {
    color: #06264d;
    text-decoration: none;
}

.ejobs-card-title a:hover {
    color: #0d7c80;
}

.ejobs-card-meta,
.ejobs-card-expires {
    color: #5a6c79;
    font-size: 13px;
}

.ejobs-card-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

@media (max-width: 767.98px) {
    .ejobs-table-wrap {
        display: none;
    }

    .ejobs-card-list {
        display: grid;
    }
}

.ejobs-filters {
    padding: 16px 18px;
    border-bottom: 1px solid #eef3f6;
}

.ejobs-filters-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
}

.ejobs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ejobs-filter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #d5e1e8;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 40, 70, 0.04);
}

.ejobs-filter-label {
    margin: 0;
    color: #5a6c79;
    font-size: 13px;
    font-weight: 600;
}

.ejobs-filter-select {
    min-width: 180px;
    min-height: 36px !important;
    border-radius: 8px !important;
}

.edash-billing-action--danger {
    color: #b42318;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.edash-billing-action--danger:hover {
    color: #912018;
    text-decoration: underline;
}

@media (max-width: 991.98px) {
    .ejobs-filters-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .ejobs-filters-grid {
        grid-template-columns: 1fr;
    }
}

.ejobs-applicants-link {
    color: #0d7c80;
    font-weight: 600;
    text-decoration: none;
}

.ejobs-applicants-link:hover {
    color: #0a6468;
    text-decoration: underline;
}

.ejobs-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.ejobs-empty {
    text-align: center;
    padding: 48px 20px;
    color: #5a6c79;
}

.ejobs-empty i {
    display: block;
    margin-bottom: 12px;
    font-size: 28px;
    color: #1aa3a8;
}

.ejobs-empty-title {
    color: #06264d;
    font-size: 16px;
    font-weight: 700;
}

.ejobs-empty-text {
    font-size: 14px;
}

.ejobs-pagination {
    padding: 14px 20px;
    border-top: 1px solid #eef3f6;
}

.edash-panel {
    background: #fff;
    border: 1px solid #dfe8ee;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 40, 70, 0.04);
    overflow: hidden;
}

.edash-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef3f6;
}

.edash-panel-heading {
    min-width: 0;
}

.edash-panel-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #06264d;
}

.edash-panel-sub {
    margin-top: 4px;
    color: #5a6c79;
    font-size: 13px;
    line-height: 1.4;
}

.edash-panel-link {
    color: #0d7c80;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    margin-top: 2px;
}

.edash-panel-link:hover {
    color: #0a6468;
}

.edash-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.edash-table th,
.edash-table td {
    padding: 14px 20px;
    border-bottom: 1px solid #eef3f6;
    font-size: 14px;
    vertical-align: middle;
}

.edash-table th {
    color: #7a8b97;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #f8fbfc;
}

.edash-table tbody tr:last-child td {
    border-bottom: 0;
}

.edash-order-link {
    color: #06264d;
    font-weight: 600;
    text-decoration: none;
}

.edash-order-link:hover {
    color: #0d7c80;
}

.edash-billing-hero {
    margin-bottom: 22px;
}

.edash-billing-title {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    color: #06264d;
    letter-spacing: -0.02em;
}

.edash-billing-sub {
    max-width: 640px;
    color: #5a6c79;
    font-size: 15px;
    line-height: 1.5;
}

.edash-billing-stat {
    min-height: 108px;
    padding: 16px 18px;
    border: 1px solid #dfe8ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 40, 70, 0.04);
}

.edash-billing-stat-label {
    margin-bottom: 8px;
    color: #8a9aa7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.edash-billing-stat-value {
    color: #06264d;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
}

.edash-billing-filters {
    padding: 16px 18px;
    border-bottom: 1px solid #eef3f6;
}

.edash-billing-filters-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
}

.edash-billing-filter {
    display: grid;
    gap: 6px;
    margin: 0;
    color: #5a6c79;
    font-size: 12px;
    font-weight: 600;
}

.edash-billing-filter .form-select,
.edash-billing-filter .form-control {
    min-height: 40px;
    border-color: #d5e1e8;
    font-size: 13.5px;
    color: #243746;
}

.edash-billing-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.edash-billing-table th:last-child,
.edash-billing-table td:last-child {
    min-width: 150px;
}

@media (max-width: 991.98px) {
    .edash-billing-filters-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .edash-billing-filters-grid {
        grid-template-columns: 1fr;
    }
}

.edash-billing-amount {
    font-weight: 600;
    color: #06264d;
    white-space: nowrap;
}

.edash-billing-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.edash-billing-action {
    color: #0d7c80;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.35;
}

.edash-billing-action:hover {
    color: #0a6468;
    text-decoration: underline;
}

.edash-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

.edash-badge--paid {
    background: #e8f7ef;
    color: #147a3f;
}

.edash-badge--pending {
    background: #fff6e8;
    color: #9a6200;
}

.edash-badge--failed {
    background: #fdecec;
    color: #b42318;
}

.edash-badge--refunded,
.edash-badge--expired {
    background: #eef2f5;
    color: #4b5d6b;
}

.edash-panel-footer {
    padding: 14px 20px;
    border-top: 1px solid #eef3f6;
}

.edash-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #243746;
    font-weight: 500;
}

.edash-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9aabb8;
}

.edash-status-dot.is-active {
    background: #22c55e;
}

.edash-status-arrow {
    color: #9aabb8;
    text-decoration: none;
    font-size: 11px;
}

.edash-empty-cell {
    color: #5a6c79;
    text-align: center;
}

.edash-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px 30px;
}

.edash-empty-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f7f8;
    color: #0d7c80;
    font-size: 16px;
    margin-bottom: 12px;
}

.edash-empty-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #06264d;
}

.edash-empty-copy {
    margin: 0 0 16px;
    max-width: 400px;
    color: #5a6c79;
    font-size: 14px;
    line-height: 1.5;
}

.edash-empty-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 18px;
}

.edash-empty-actions .edash-action-btn--primary {
    width: auto;
}

.edash-empty-secondary {
    color: #0d7c80;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.edash-empty-secondary:hover {
    color: #0a6468;
    text-decoration: underline;
}

.edash-job-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #eef3f6;
}

.edash-job-item:last-child {
    border-bottom: 0;
}

.edash-job-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
}

.edash-job-title a {
    color: #06264d;
    text-decoration: none;
}

.edash-job-title a:hover {
    color: #0d7c80;
}

.edash-job-meta {
    color: #5a6c79;
    font-size: 13px;
}

.edash-job-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.edash-job-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e8f6f7;
    color: #0d7c80;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.edash-job-applicants {
    color: #5a6c79;
    font-size: 13px;
}

.edash-job-view {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    background: #1aa3a8;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.edash-job-view:hover {
    background: #168f93;
    color: #fff;
}

@media (max-width: 991.98px) {
    .edash-plan-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .edash {
        padding-bottom: 88px;
    }

    .edash-welcome {
        margin-bottom: 20px;
    }

    .edash-welcome-title {
        font-size: 26px;
    }

    .edash-welcome-cta {
        display: none;
    }

    .edash-primary-cta {
        align-items: stretch;
    }

    .edash-primary-cta-btn {
        width: 100%;
        justify-content: center;
    }

    .edash-plan-grid {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .edash-next-step {
        align-items: stretch;
    }

    .edash-next-step-actions {
        width: 100%;
    }

    .edash-next-step-actions .edash-action-btn--primary {
        width: 100%;
        justify-content: center;
    }

    .edash-actions--sticky {
        position: static;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .edash-actions--sticky > .edash-action-btn--primary {
        display: none;
    }

    .edash-actions-secondary {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .edash-actions-secondary .edash-action-btn {
        width: 100%;
        justify-content: center;
    }

    .edash-kpi {
        min-height: 132px;
    }

    .edash-mobile-cta {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(251, 254, 255, 0.96);
        border-top: 1px solid #e3ecef;
        box-shadow: 0 -8px 24px rgba(0, 40, 70, 0.08);
        backdrop-filter: blur(8px);
    }

    .edash-mobile-cta .edash-action-btn--primary {
        width: 100%;
        justify-content: center;
        min-height: 46px;
    }
}


.edit-resume-link {
    color: #06264d;
    text-decoration: none;
    font-size: 14px;
}

.edit-resume-link:hover {
    text-decoration: none;
    color: #003a48;
    background: #d1f3f2;
}

.recent-applications {
    background: #fff;
    border: 1px solid #d5e1e8;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 25px rgba(0, 40, 70, 0.08);
}

.recent-applications-header {
    padding: 20px 24px;
    border-bottom: 1px solid #d5e1e8;
}

.recent-applications-header h2 {
    font-size: 17px;
    font-weight: 600;
    color: #06264d;
}

.recent-applications-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.recent-applications-body p {
    color: #071d35;
    font-size: 14px;
}

.recent-applications-body .application-card {
    border: none;
    min-height: auto;
    box-shadow: none;
    padding: 20px 24px;
    border-bottom: 1px solid #d5e0e5;
    border-radius: 0;
}

.jobs-section {
    background: #fbfeff;
    padding: 60px 0 80px;
}

.jobs-section h1,
.jobs-page-header h1 {
    font-size: 30px;
    font-weight: 700;
    color: #06264d;
    margin: 0 0 6px;
}

.jobs-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}

.jobs-page-lead {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.5;
    color: #4f667a;
    max-width: 42rem;
}

.jobs-page-count {
    font-size: 14px;
    font-weight: 600;
    color: #18334c;
}

.jobs-section p {
    font-size: 15px;
    color: #071d35;
}

.candidate-job-card {
    background: #fff;
    border: 1px solid #d8e0e5;
    border-radius: 14px;
    padding: 16px 16px 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.candidate-job-card--empty {
    cursor: default;
}

.candidate-job-card:hover {
    border-color: #9ec9cb;
    box-shadow: 0 6px 16px rgba(6, 38, 77, 0.05);
}

.candidate-job-card.active {
    border-color: #00a7a7;
    background: #f3fbfb;
    box-shadow: 0 0 0 1px rgba(0, 167, 167, 0.18);
}

.job-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}

.job-card-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.candidate-job-card .job-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: #0f2740;
    line-height: 1.3;
}

.candidate-job-card .job-date {
    font-size: 12px;
    color: #718096;
    white-space: nowrap;
    flex-shrink: 0;
}

.job-card-company {
    font-size: 13.5px;
    font-weight: 600;
    color: #18334c;
    margin-bottom: 8px !important;
}

.candidate-job-card .job-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #4f667a;
    margin-bottom: 12px !important;
}

.job-info i,
.job-detail-meta-row i,
.detail-meta i {
    width: 14px;
    margin-right: 6px;
    color: #5d7285;
}

.job-featured-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, #00a7a7 12%, #fff);
    border: 1px solid color-mix(in srgb, #00a7a7 28%, #fff);
    color: #0a5f5c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

.job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.job-tags span {
    background: #edf4f7;
    border: 1px solid #e1eaf0;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
    color: #18334c;
}

.detail-card {
    background: #fff;
    border: 1px solid #d8e0e5;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    position: relative;
}

.detail-card h2,
.detail-card h3 {
    color: #122539;
}

.detail-card h3,
.job-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f2740;
    margin: 0 0 12px;
}

.detail-card p {
    color: #071d35;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 0;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #071d35;
}

.detail-card li {
    color: #071d35;
}

.job-detail-back {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #008f8f;
    font-size: 14px;
    font-weight: 600;
}

.job-detail-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.job-detail-title {
    font-size: 26px;
    font-weight: 700;
    color: #06264d;
    line-height: 1.25;
    margin: 0;
}

.job-detail-company-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #18334c;
}

.job-detail-sep {
    margin: 0 6px;
    color: #8aa0b2;
    font-weight: 500;
}

.job-detail-salary {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #0f2740;
}

.job-detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: #4f667a;
}

.job-company-website {
    color: #008f8f;
    font-weight: 600;
    text-decoration: none;
}

.job-company-website:hover {
    color: #006f6f;
    text-decoration: underline;
}

.job-detail-badges {
    margin-bottom: 18px;
}

.job-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.job-apply-btn {
    min-width: 128px;
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 18px;
}

.job-save-form {
    margin: 0;
}

.job-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 600;
    color: #18334c;
    border-color: #d5e1e8;
}

.job-save-btn.is-saved,
.job-save-btn.is-saved:hover {
    color: #0a5f5c;
    border-color: color-mix(in srgb, #00a7a7 35%, #fff);
    background: color-mix(in srgb, #00a7a7 10%, #fff);
}

.job-more-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #18334c;
    border-color: #d5e1e8;
}

.job-more-menu .dropdown-menu {
    min-width: 180px;
    border: 1px solid #e4edf2;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(6, 38, 77, 0.12);
    padding: 6px;
}

.job-more-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #18334c;
    padding: 9px 12px;
}

.job-more-menu .dropdown-item i {
    width: 16px;
    color: #5d7285;
}

.job-detail-body {
    padding-bottom: 72px;
}

.job-detail-body .job-print-section + .job-print-section {
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid #e6eef2;
}

.job-rich-text {
    font-size: 14.5px;
    line-height: 1.65;
    color: #24384d;
}

.job-rich-text p {
    margin-bottom: 12px;
}

.job-rich-text p:last-child {
    margin-bottom: 0;
}

.job-rich-text ul,
.job-rich-text ol {
    padding-left: 1.2rem;
    margin-bottom: 12px;
}

.job-detail-sticky-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 28%);
    border-top: 1px solid #e6eef2;
    z-index: 3;
}

.featured-corner-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 88px;
    height: 88px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.featured-corner-ribbon span {
    position: absolute;
    top: 16px;
    right: -30px;
    display: block;
    width: 120px;
    padding: 5px 0 6px;
    background: linear-gradient(180deg, #f04343 0%, #d61f1f 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 4px 10px rgba(214, 31, 31, 0.35);
    border-radius: 2px;
}

.featured-corner-ribbon span::before,
.featured-corner-ribbon span::after {
    content: "";
    position: absolute;
    bottom: -5px;
    border-top: 5px solid #9f1212;
}

.featured-corner-ribbon span::before {
    left: 0;
    border-left: 5px solid transparent;
}

.featured-corner-ribbon span::after {
    right: 0;
    border-right: 5px solid transparent;
}

.featured-corner-ribbon--lg {
    width: 104px;
    height: 104px;
}

.featured-corner-ribbon--lg span {
    top: 20px;
    right: -28px;
    width: 130px;
    font-size: 11px;
    padding: 6px 0 7px;
}

.job-content {
    display: none !important;
}

.job-content.active {
    display: block !important;
}

.job-details:empty::before,
.job-details:not(:has(.job-content.active)):not(:has(.detail-card))::before {
    content: none;
}

.job-details {
    min-height: 240px;
}

@media (min-width: 992px) {
    /* Indeed-style split-pane scrolling:
       - Left column (job cards) scrolls naturally with the main page document.
       - Right column (job details) sticks to the viewport (`position: sticky; top: 16px`)
         with its own internal scrollbar (`max-height: calc(100vh - 32px)`).
       - Inside the right pane, the job header + primary action buttons stay sticky at the top
         while scrolling through the job description. */
    body:has(.jobs-section) {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    body:has(.jobs-section) .jobs-section {
        overflow: visible !important;
        padding: 24px 0 48px;
    }

    body:has(.jobs-section) .job-filters {
        margin-bottom: 18px;
    }

    .job-container > .row {
        align-items: flex-start;
    }

    .job-container > .row > .job-list-column {
        position: static !important;
        height: auto !important;
    }

    .job-container .job-list-scroll {
        overflow: visible;
        max-height: none;
    }

    .job-list-pagination {
        padding-top: 14px;
    }

    .job-list-pagination .pagination {
        margin-bottom: 0;
        flex-wrap: wrap;
        gap: 4px;
    }

    .job-list-pagination .page-link {
        border-radius: 8px;
        color: #071d35;
        font-size: 13px;
        padding: 4px 10px;
    }

    .job-list-pagination .page-item.active .page-link {
        background: var(--brand, #009fa3);
        border-color: var(--brand, #009fa3);
    }

    .job-container > .row > .job-details-column {
        position: sticky !important;
        top: 16px !important;
        align-self: flex-start !important;
        height: auto !important;
    }

    .job-container .job-details-fixed {
        width: 100%;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: #b8c4ce #f8fafc;
        background: #ffffff;
        border: 1px solid #d9e0e8;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
    }

    .job-container .job-details-fixed::-webkit-scrollbar {
        width: 8px;
    }

    .job-container .job-details-fixed::-webkit-scrollbar-track {
        background: #f8fafc;
        border-radius: 0 12px 12px 0;
    }

    .job-container .job-details-fixed::-webkit-scrollbar-thumb {
        background: #c1ccd6;
        border-radius: 999px;
    }

    .job-container .job-details-fixed::-webkit-scrollbar-thumb:hover {
        background: #9aa8b6;
    }

    .job-container .job-content.active {
        display: flex !important;
        flex-direction: column;
        min-height: 100%;
    }

    .job-container .job-details-fixed .detail-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    /* Sticky header inside the right detail scroll pane (like Indeed) */
    .job-container .job-detail-header {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #ffffff;
        border-bottom: 1px solid #eef1f5;
        transition: box-shadow 0.15s ease;
    }

    .job-container .job-details-fixed.is-scrolled .job-detail-header {
        box-shadow: 0 4px 12px rgba(15, 37, 55, 0.06);
    }

    .job-container .job-detail-body {
        display: block;
        margin-top: 0;
        padding-bottom: 24px;
        overflow: visible;
    }

    .job-container .job-detail-body > .detail-card {
        padding-top: 18px;
    }

    /* Hide redundant bottom sticky CTA on desktop since the header CTA stays sticky at top */
    .job-container .job-detail-sticky-actions {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .job-detail-back {
        display: inline-flex;
        padding: 4px 0 8px;
    }

    .job-details-fixed {
        border: 0;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
    }

    .job-detail-title {
        font-size: 22px;
    }

    .job-detail-sticky-actions {
        position: sticky;
        bottom: 0;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* Screen-only: hide details on small viewports. Never apply during print. */
@media screen and (max-width: 991.98px) {
    .jobs-section .job-details-column {
        display: none;
    }

    .jobs-section.jobs-section--detail-open .job-list-column {
        display: none;
    }

    .jobs-section.jobs-section--detail-open .job-details-column {
        display: block;
    }

    .jobs-section.jobs-section--detail-open .jobs-page-header,
    .jobs-section.jobs-section--detail-open .job-filters {
        display: none;
    }
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #718096;
}

.search-box input {
    padding-left: 40px;
}

.job-filters {
    margin-bottom: 28px;
}

.job-filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(180px, 0.7fr) minmax(160px, 0.6fr) auto;
    gap: 14px;
    align-items: end;
    padding: 16px;
    background: #fff;
    border: 1px solid #d8e0e5;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.job-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.job-filter-field span {
    color: #18344c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.job-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    background: #eef7f7;
    color: #0b6e72;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.job-filter-reset:hover {
    background: #d1f3f2;
    color: #003a48;
}

.job-filters .form-control,
.job-filters .form-select {
    min-height: 40px;
    border-color: #d8e0e5;
    border-radius: 10px;
    font-size: 14px;
    background-color: #fff;
}

@media (max-width: 991.98px) {
    .job-filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .job-filter-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .job-filter-bar {
        grid-template-columns: 1fr;
    }
}

.job-filters .form-select:focus {
    outline: none;
    box-shadow: none;
    border-color: #00a7a7;
}

.detail-card button.btn {
    border-radius: 10px;
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 500;
}

.detail-card .btn-primary {
    background: #00a7a7;
    border-color: #00a7a7;
}

.detail-card .btn-primary:hover {
    background: #008f8f;
    border-color: #008f8f;
}

.detail-card .btn.btn-outline-secondary {
    border-color: #d5e1e8;
}

.detail-card .btn.btn-outline-secondary:hover {
    color: #003a48;
    background: #d1f3f2;
}








.resume-page {
    background: #fbfeff;
    padding: 60px 0 80px;
}

.resume-heading h1 {
    color: #152b43;
    font-size: 30px;
    font-weight: 700;
}

.resume-heading p {
    color: #071d35;
    font-size: 15px;
}

.resume-heading-note {
    color: #5c6b76;
    font-size: 14px;
    line-height: 1.5;
}

.resume-help {
    margin: 0 0 8px;
    color: #6a7a8a;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

.resume-example {
    margin: 6px 0 0;
    color: #8b98a3;
    font-size: 12px;
    font-weight: 400;
}

.resume-optional {
    color: #8b98a3;
    font-size: 12px;
    font-weight: 500;
}

.resume-secondary-btn {
    min-height: 38px;
    font-weight: 600;
}

.resume-cancel-btn {
    color: #5c6b76;
    font-weight: 600;
    text-decoration: none;
}

.resume-cancel-btn:hover {
    color: #071d35;
    text-decoration: underline;
}

.resume-box .form-select {
    min-height: 38px;
    border: 1px solid #d4dfe5;
    border-radius: 7px;
    color: #34495e;
    font-size: 14px;
    box-shadow: none;
}

.resume-box {
    background: #fff;
    border: 1px solid #dce5e9;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(25, 50, 70, 0.08);
    display: flex;
    flex-wrap: wrap;
}

.resume-box-title {
    color: #182d44;
    font-size: 18px;
    font-weight: 700;
    margin-right: 10px;
}

.resume-box label {
    display: block;
    color: #24384e;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.resume-box .form-control {
    min-height: 38px;
    border: 1px solid #d4dfe5;
    border-radius: 7px;
    color: #34495e;
    font-size: 14px;
    box-shadow: none;
}

.resume-box .form-control:focus {
    border-color: #00a6a6;
    box-shadow: 0 0 0 2px rgba(0, 166, 166, 0.08);
}

.resume-box textarea.form-control {
    resize: vertical;
}

.resume-box .resume-item {
    border: 1px solid #dce5e9;
    border-radius: 12px;
    padding: 12px;
    width: 100%;
}

.resume-add-btn {
    background: #fff;
    border: 1px solid #d6e0e5;
    border-radius: 8px;
    padding: 7px 12px;
    color: #34495e;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    transition: 0.3s;
}

.resume-add-btn span {
    font-size: 17px;
    margin-right: 5px;
    vertical-align: -1px;
}

.resume-add-btn:hover {
    border-color: #00a6a6;
    color: #00a6a6;
}

.resume-remove-btn {
    border: 0;
    background: transparent;
    padding: 10px 0 0;
    color: #071d35;
    font-size: 12px;
}

.resume-remove-btn:hover {
    color: red;
}

.resume-remove-btn i {
    margin-right: 6px;
}

.resume-save-wrap {
    margin-top: 5px;
}

.resume-save-btn {
    background: #00a6a6;
    border: 0;
    border-radius: 7px;
    color: #fff;
    padding: 8px 18px;
    font-weight: 600;
}

.resume-save-btn:hover {
    background: #008f8f;
}

.apply-modal-dialog {
    max-width: 560px;
}

.apply-modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 56px rgba(6, 38, 77, 0.2);
}

.apply-modal-content::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #00a7a7 0%, #06264d 100%);
}

.apply-modal-header {
    padding: 22px 28px 16px;
    align-items: flex-start;
    border-bottom: 0;
    gap: 16px;
    background: linear-gradient(180deg, #f3fbfb 0%, #fff 100%);
}

.apply-modal-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding-right: 4px;
}

.apply-modal-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #00a7a7 14%, #fff);
    color: #008f8f;
    font-size: 16px;
}

.apply-modal-heading-text {
    min-width: 0;
}

.apply-modal-header .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #06264d;
    line-height: 1.3;
    margin: 0;
}

.apply-modal-company {
    font-size: 13.5px;
    font-weight: 600;
    color: #008f8f;
    margin: 4px 0 0;
}

.apply-modal-subtitle {
    font-size: 13.5px;
    line-height: 1.45;
    color: #4f667a;
    margin: 0 0 18px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f4f8fa;
    border: 1px solid #e4edf2;
}

.apply-modal-header .btn-close {
    margin: 4px 0 0;
    opacity: 0.5;
    flex-shrink: 0;
}

.apply-modal-header .btn-close:hover {
    opacity: 0.85;
}

.apply-modal-body {
    padding: 4px 28px 6px;
}

.apply-modal-field {
    margin-bottom: 16px;
}

.apply-modal-field--last {
    margin-bottom: 4px;
}

.apply-modal-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #18334c;
    margin-bottom: 8px;
}

.apply-modal-optional {
    font-size: 12px;
    font-weight: 500;
    color: #7a8ea0;
    text-transform: lowercase;
}

.apply-modal-control {
    position: relative;
}

.apply-modal-control-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #5d7285;
    font-size: 15px;
    pointer-events: none;
    z-index: 1;
}

.apply-modal-select {
    border: 1px solid #d5e1e8;
    border-radius: 10px;
    min-height: 48px;
    padding-left: 42px;
    color: #18334c;
    background-color: #fff;
    box-shadow: none;
}

.apply-modal-select:focus {
    border-color: #00a7a7;
    box-shadow: 0 0 0 3px rgba(0, 167, 167, 0.14);
}

.apply-modal-empty {
    display: grid;
    gap: 14px;
    padding: 4px 0 8px;
}

.apply-modal-empty-lead {
    font-size: 14.5px;
    line-height: 1.5;
    color: #18334c;
}

.apply-modal-empty-note {
    font-size: 13px;
    line-height: 1.45;
    color: #5d7285;
}

.apply-modal-body .select-resume {
    border: 1px solid #d5e1e8;
    border-radius: 8px;
    position: relative;
    padding: 16px;
    background: #fff;
    display: flex;
    gap: 16px;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
}

.select-resume .modal-resume-content:before {
    content: "";
    height: 20px;
    width: 20px;
    position: absolute;
    right: 20px;
    border: 1px solid #d5e1e8;
    border-radius: 100%;
    top: 30px;
    background: #fff;
}

.select-resume .modal-resume-content:after {
    content: "\f00c";
    height: 18px;
    width: 18px;
    position: absolute;
    right: 18px;
    border-radius: 100%;
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    font-size: 12px;
    top: 31px;
    opacity: 0;
}

.apply-modal-body .select-resume.active .modal-resume-content:after {
    opacity: 1;
}

.apply-modal-body .select-resume input {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
}

.apply-modal-body .select-resume:hover {
    background: #e5f2f5;
}

.apply-modal-body .select-resume.active {
    background: #d1f3f2 !important;
    border-color: #06264d;
}

.apply-modal-body .select-resume .icon {
    background: #edf7f7;
    min-width: 46px;
    min-height: 46px;
    text-align: center;
    line-height: 46px;
    border-radius: 6px;
}

.apply-modal-body .select-resume .icon i {
    font-size: 18px;
    color: #647c91;
}

.modal-resume-content h5 {
    margin: 0 0 2px;
    font-size: 18px;
}

.modal-resume-content p {
    margin: 0;
    color: #071d35;
}

.apply-modal-body .select-resume:hover .icon {
    background: #fff;
}

.apply-modal-body .select-resume.active .icon {
    background: #fff;
}

.apply-message {
    min-height: 132px;
    resize: vertical;
    border: 1px solid #d5e1e8 !important;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #18334c;
    background: #fff;
    box-shadow: none !important;
}

.apply-message::placeholder {
    color: #7a8ea0;
    opacity: 1;
}

.apply-message:focus {
    border-color: #00a7a7 !important;
    box-shadow: 0 0 0 3px rgba(0, 167, 167, 0.14) !important;
}

.apply-modal-footer {
    padding: 16px 28px 24px;
    border-top: 1px solid #e4edf2;
    gap: 10px;
    background: #fbfefe;
}

.cancel-btn {
    color: #18334c !important;
    border: 1px solid #d5e1e8 !important;
    background: #fff !important;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    min-width: 96px;
}

.cancel-btn:hover {
    color: #06264d !important;
    border-color: #b8c9d4 !important;
    background: #f5fafb !important;
}

.submit-application-btn {
    background: #00a7a7;
    border-color: #00a7a7;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    min-width: 168px;
}

.submit-application-btn:hover {
    background: #008f8f;
    border-color: #008f8f;
}

.apply-flow-dialog {
    max-width: 640px;
}

.apply-flow-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 56px rgba(6, 38, 77, 0.2);
}

.apply-flow-header {
    padding: 22px 28px 12px;
    border-bottom: 0;
    align-items: flex-start;
    gap: 12px;
}

.apply-flow-heading .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #06264d;
    margin: 0 0 4px;
}

.apply-flow-company {
    font-size: 14px;
    font-weight: 600;
    color: #008f8f;
}

.apply-flow-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 28px 16px;
    border-bottom: 1px solid #e4edf2;
}

.apply-flow-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #7a8ea0;
}

.apply-flow-step.is-active,
.apply-flow-step.is-complete {
    color: #0a5f5c;
}

.apply-flow-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8eef2;
    color: #5d7285;
    font-size: 12px;
}

.apply-flow-step.is-active .apply-flow-step-num,
.apply-flow-step.is-complete .apply-flow-step-num {
    background: #00a7a7;
    color: #fff;
}

.apply-flow-step-line {
    flex: 1 1 auto;
    height: 2px;
    background: #e4edf2;
    min-width: 16px;
}

.apply-flow-body {
    padding: 22px 28px 8px;
}

.apply-flow-panel-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #06264d;
}

.apply-flow-help {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: #5d7285;
    line-height: 1.45;
}

.apply-resume-list {
    display: grid;
    gap: 10px;
}

.apply-resume-card {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.apply-resume-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.apply-resume-card-body {
    display: block;
    padding: 14px 16px;
    border: 1px solid #d5e1e8;
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.apply-resume-radio:checked + .apply-resume-card-body {
    border-color: #00a7a7;
    background: #f3fbfb;
    box-shadow: 0 0 0 1px rgba(0, 167, 167, 0.2);
}

.apply-resume-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.apply-resume-name {
    font-size: 15px;
    font-weight: 700;
    color: #0f2740;
}

.apply-resume-meta {
    display: block;
    font-size: 12.5px;
    color: #5d7285;
    margin-bottom: 6px;
}

.apply-resume-preview {
    font-size: 13px;
    font-weight: 600;
    color: #008f8f;
    text-decoration: none;
}

.apply-resume-preview:hover {
    text-decoration: underline;
}

.apply-review-card {
    border: 1px solid #e4edf2;
    border-radius: 12px;
    overflow: hidden;
}

.apply-review-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e4edf2;
}

.apply-review-row:last-child {
    border-bottom: 0;
}

.apply-review-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #7a8ea0;
}

.apply-review-value {
    font-size: 14.5px;
    font-weight: 600;
    color: #18334c;
}

.apply-review-edit {
    align-self: flex-start;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #008f8f;
    text-decoration: none;
}

.apply-questions-list {
    display: grid;
    gap: 16px;
}

.apply-question-item {
    padding: 14px 16px;
    border: 1px solid #d5e1e8;
    border-radius: 12px;
    background: #fbfefe;
}

.apply-question-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.apply-question-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    color: #18334c;
    cursor: pointer;
}

.apply-review-answers {
    display: grid;
    gap: 10px;
}

.apply-review-answer-prompt {
    font-size: 13px;
    font-weight: 600;
    color: #18334c;
}

.apply-review-answer-value {
    font-size: 13.5px;
    color: #5d7285;
    white-space: pre-wrap;
}

.apply-flow-footer {
    padding: 14px 28px 22px;
    border-top: 1px solid #e4edf2;
    gap: 10px;
    background: #fbfefe;
}

.apply-submitted-body {
    padding: 36px 28px 32px;
}

.apply-submitted-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #00a7a7 14%, #fff);
    color: #0a5f5c;
    font-size: 22px;
}

.apply-submitted-title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    color: #06264d;
}

.apply-submitted-copy {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #4f667a;
}

.job-applied-state {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.job-applied-date {
    font-size: 12.5px;
    font-weight: 600;
    color: #5d7285;
}

.applications-tracker-card {
    overflow: hidden;
}

.applications-tracker-table thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #5d7285;
    background: #f7fbfc;
    border-bottom-color: #e4edf2;
    white-space: nowrap;
}

.applications-tracker-table tbody td {
    color: #18334c;
    vertical-align: middle;
}

.my-applications-section {
    background: #fbfeff;
    padding: 60px 0 100px;
}

.applications-title {
    font-size: 30px;
    font-weight: 700;
    color: #071d35;
}

.application-card {
    min-height: 86px;
    padding: 20px;
    border: 1px solid #d8e1e7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(11, 49, 88, 0.08);
}

.application-title {
    font-size: 17px;
    font-weight: 500;
    color: #071d35;
}

.application-meta {
    font-size: 14px;
    color: #071d35;
}

.application-status .status-badge {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 20px;
    background: #e5f2f5;
    color: #003b70;
    font-size: 13px;
    font-weight: 600;
    text-transform: lowercase;
}





/* Pricing Section */
.pricing-section {
    background: #fbfeff;
    padding-top: 60px;
    padding-bottom: 100px;
}

.pricing-title {
    color: #09233f;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}

.pricing-subtitle {
    color: #071d35;
    font-size: 16px;
    line-height: 1.45;
}

.pricing-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #d7e1e7;
    border-radius: 18px;
    padding: 27px 22px 22px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 25px rgba(15, 45, 65, 0.08);
}

.pricing-card-popular {
    border: 1px solid #00a6a6;
}

.plan-name {
    color: #0b2642;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 18px;
}

.plan-price {
    color: #092b4c;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px;
}

.plan-price span {
    font-size: 13px;
    font-weight: 400;
    margin-left: 2px;
}

.plan-description {
    color: #071d35;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 17px;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-features li {
    position: relative;
    color: #071d35;
    font-size: 14px;
    line-height: 1.4;
    padding-left: 22px;
    margin-bottom: 11px;
}

.plan-features li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    color: #00a6a6;
    font-size: 12px;
}

.plan-button-wrap {
    margin-top: auto;
    padding-top: 20px;
}

.plan-btn {
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #092b4c;
    background: #ffffff;
    border: 1px solid #d4dfe5;
    border-radius: 9px;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
}

.plan-btn:hover {
    color: #ffffff;
    background: #00a6a6;
    border-color: #00a6a6;
}

.plan-btn-primary {
    color: #ffffff;
    background: #00a6a6;
    border-color: #00a6a6;
}

.plan-btn-primary:hover {
    background: #008f8f;
    border-color: #008f8f;
}

.popular-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #00a6a6;
    color: #ffffff;
    border-radius: 20px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 600;
}




.candidate-details-section {
    background: #fbfeff;
}

.candidate-left-sticky,
.candidate-right-sticky {
    position: sticky;
    top: 20px;
}

.back-list {
    color: #00a6a6;
    text-decoration: none;
    font-size: 13px;
}

.back-list i {
    margin-right: 6px;
}

.applicants-card,
.activity-card {
    background: #fff;
    border: 1px solid #dce6e9;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(30, 60, 70, 0.08);
}

.applicants-title {
    padding: 14px;
    font-weight: 700;
    border-bottom: 1px solid #dce6e9;
    color: #071d35;
}

.applicant-item {
    padding: 15px;
    border-left: 2px solid transparent;
}

.applicant-item.active {
    border-left-color: #00a6a6;
    background: #f8fbfc;
}

.applicant-item h6 {
    margin: 0 0 3px;
    font-weight: 700;
    color: #071d35;
}

.applicant-item p {
    margin: 0 0 2px;
    color: #071d35;
    font-size: 13px;
}

.candidate-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.candidate-header h1 {
    font-size: 24px;
    margin: 0 0 5px;
    font-weight: 800;
    color: #071d35;
}

.candidate-location,
.applied-job {
    margin: 4px 0;
    color: #071d35;
}

.candidate-location i {
    margin-right: 5px;
}

.applied-job a {
    color: #172d42;
    font-weight: 600;
    margin: 0 0 0 4px;
}

.applied-job a:hover {
    color: #00a5a5;
}

.candidate-header .message-btn {
    border: 0;
    background: #00a5a5;
    color: #fff;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.message-btn i {
    margin-right: 5px;
}

.resume-card {
    background: #fff;
    border: 1px solid #dce6e9;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(30, 60, 70, 0.08);
}

.resume-card-header {
    padding: 13px 17px;
    border-bottom: 1px solid #dce6e9;
    display: flex;
    justify-content: space-between;
    color: #071d35;
}

.resume-card-header span {
    color: #748792;
    font-size: 12px;
}

.resume-content {
    padding: 20px;
}

.resume-content h3 {
    font-size: 20px;
    margin-bottom: 3px;
    color: #071d35;
    font-weight: 700;
}

.resume-job {
    color: #00a5a5;
    font-weight: 600;
}

.resume-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 5px 0 22px;
    color: #071d35;
}

.resume-section {
    margin-bottom: 20px;
}

.resume-section h4 {
    color: #13283a;
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 14px;
}

.resume-section p {
    color: #071d35;
    line-height: 1.55;
    margin-bottom: 0;
}

.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.skills-list span {
    background: #edf6f7;
    color: #18384b;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.resume-card .resume-item {
    border-left: 2px solid #bde6e6;
    padding-left: 10px;
}

.resume-card .resume-item h5 {
    font-size: 14px;
    margin-bottom: 2px;
    color: #071d35;
}

.resume-card .resume-date {
    font-size: 12px;
    color: #748792;
}

.resume-card .resume-item p {
    margin-top: 5px;
}

.cover-letter {
    border-top: 1px solid #dce6e9;
    padding-top: 20px;
}

.activity-card {
    padding: 12px;
}

.activity-card .form-select {
    border-radius: 9px;
    color: #071d35;
    font-size: 14px;
}

.activity-card .form-select:focus {
    outline: none;
    box-shadow: none;
    border-color: #00a7a7;
}

.activity-card h5 {
    font-size: 15px;
    margin: 8px 0 15px;
    color: #071d35;
}

.activity-item {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.activity-item .activity-icon {
    min-width: 22px;
    min-height: 22px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: #e6f8f8;
    color: #00a5a5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    height: 22px;
    width: 22px;
}

.activity-item small {
    display: block;
    color: #748792;
}

.activity-item p {
    color: #071d35;
    margin: 2px 0 0;
}




.job-postings-card {
    background: #fff;
    border: 1px solid #d5e0e5;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(20, 50, 70, 0.08);
}

.job-postings-header {
    padding: 20px 24px;
    border-bottom: 1px solid #d5e0e5;
}

.job-postings-header h5 {
    color: #062b4c;
    font-size: 17px;
    font-weight: 600;
}

.job-postings-card .job-posting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid #d5e0e5;
}

.job-postings-card .job-posting-item:last-child {
    border-bottom: 0;
}

.job-postings-card .job-info h6 {

    font-size: 16px;
    font-weight: 500;
}

.job-postings-card .job-info h6 a {
    color: #062b4c;
}

.job-postings-card .job-info h6 a:hover {
    color: #00a5a5;
}

.job-postings-card .job-info p {
    color: #536d84;
    font-size: 14px;
}

.job-postings-card .job-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.job-postings-card .job-status {
    background: #00a5a5;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.job-postings-card .applicants {
    color: #536d84;
    font-size: 14px;
}

.job-postings-card .btn-view {
    color: #062b4c;
    background: #fff;
    border: 1px solid #d5e0e5;
    border-radius: 10px;
    padding: 5px 14px;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.job-postings-card .btn-view:hover {
    color: #062b4c;
    background: #d9f5f6;
}




.applications-section {
    background: #f8fbfc;
    padding: 60px 0 100px;
}

.applications-section .applications-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.applications-section .applications-title {
    color: #0d2b4d;
    font-size: 30px;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.applications-section .applications-subtitle {
    color: #5a6c79;
    font-size: 14px;
}

.applications-section .applications-title-sep {
    color: #94a3b8;
    font-weight: 500;
}

.applications-section .applications-job-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: min(100%, 360px);
}

.applications-section .applications-job-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 180px;
    max-width: 100%;
    height: 42px;
    padding: 0 40px 0 14px;
    border: 1px solid #cfe3e6;
    border-radius: 10px;
    background: #fff;
    color: #0d2b4d;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(13, 44, 77, 0.04);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.applications-section .applications-job-select:hover {
    border-color: #1aa3a8;
}

.applications-section .applications-job-select:focus {
    border-color: #1aa3a8;
    box-shadow: 0 0 0 3px rgba(26, 163, 168, 0.14);
}

.applications-section .applications-job-caret {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #0d7c80;
    font-size: 12px;
}

.applications-section .application-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 24px;
    background: #fff;
    border: 1px solid #d5e0e5;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 8px 18px rgba(20, 55, 80, 0.06);
}

.applications-section .application-card--empty {
    justify-content: center;
    padding: 40px 22px;
}

.applications-section .application-card-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    flex: 1 1 320px;
}

.applications-section .applicant-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e7f6f6;
    color: #0d7c80;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.applications-section .applicant-info {
    min-width: 0;
    flex: 1;
}

.applications-section .applicant-info-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    margin-bottom: 4px;
}

.applications-section .applicant-name {
    color: #06264d;
    font-size: 17px;
    font-weight: 700;
}

.applications-section .application-applied {
    color: #7a8b97;
    font-size: 13px;
    font-weight: 500;
}

.applications-section .job-title {
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px !important;
}

.applications-section .applicant-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: #5a6c79;
    font-size: 13px;
}

.applications-section .applicant-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.applications-section .applicant-meta-row i {
    color: #1aa3a8;
    width: 14px;
    text-align: center;
}

.applications-section .application-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 1 auto;
}

.applications-section .application-status-form {
    margin: 0;
}

.applications-section .application-status {
    height: 42px;
    min-width: 150px;
    padding: 0 14px;
    border: 1px solid #d5e0e5;
    border-radius: 10px;
    background: #fff;
    color: #07325a;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    outline: none;
}

.applications-section .application-status:focus {
    border-color: #1aa3a8;
    box-shadow: 0 0 0 3px rgba(26, 163, 168, 0.12);
}

.applications-section .view-resume-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid #1aa3a8;
    background: #1aa3a8;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.applications-section .view-resume-btn:hover {
    background: #168f93;
    border-color: #168f93;
    color: #fff;
}

.applications-section .applications-empty {
    text-align: center;
    color: #5a6c79;
}

.applications-section .applications-empty i {
    display: block;
    margin-bottom: 10px;
    font-size: 28px;
    color: #1aa3a8;
}

.applications-section .applications-empty-title {
    color: #06264d;
    font-size: 16px;
    font-weight: 700;
}

.applications-section .applications-empty-text {
    font-size: 14px;
}

.application-tagline {
    font-size: 15px;
    color: #5a6c79;
}

.application-tagline a {
    display: inline-block;
    color: #071d35;
    padding: 4px 6px 4px 6px;
    border-radius: 10px;
    background: transparent;
    transition: 0.3s;
    letter-spacing: 0.2px;
    font-weight: 500;
}

.application-tagline a:hover {
    background: #d9f5f6;
    color: #122539;
}

.application-tagline span {
    color: #071d35;
}




.post-job-section {
    background: #f8fbfc;
    padding: 60px 0 100px;
}

.post-job-heading h1 {
    font-size: 30px;
    font-weight: 700;
    color: #152b43;
}

.post-job-heading p {
    color: #071d35;
    font-size: 15px;
}

.job-form-box {
    background: #fff;
    border: 1px solid #dce5e9;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(31, 55, 70, 0.08);
}

.job-form-box .form-label {
    display: block;
    color: #24384e;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.job-form-box .form-control,
.job-form-box .form-select {
    height: 38px;
    border: 1px solid #d5e0e5;
    border-radius: 7px;
    font-size: 14px;
    color: #34495e;
    padding: 8px 10px;
}

.job-form-box textarea.form-control {
    height: auto;
    min-height: 125px;
    resize: vertical;
}

.job-form-box .form-control::placeholder {
    color: #71869a;
    opacity: 1;
}

.job-form-box .form-control:focus,
.job-form-box .form-select:focus {
    border-color: #0ca6a6;
    box-shadow: 0 0 0 2px rgba(12, 166, 166, 0.1);
}

.job-form-box .remote-toggle-box {
    height: 49px;
    border: 1px solid #d5e0e5;
    border-radius: 8px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
}

.job-form-box .remote-toggle-box span {
    font-size: 13px;
    color: #17324d;
}

.job-form-box .remote-toggle-box .form-check-input {
    width: 38px;
    height: 20px;
    cursor: pointer;
}

.job-form-box .remote-toggle-box .form-check-input:checked {
    background-color: #08a5a5;
    border-color: #08a5a5;
}

.job-form-box .publish-job-btn {
    background: #08a5a5;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 23px;
    border-radius: 7px;
    border: 0;
}

.job-form-box .publish-job-btn:hover {
    background: #078f8f;
    color: #fff;
}




.job-details-section {
    background: #f7fbfc;
    padding: 60px 0 100px;
}

.job-post-card,
.job-content-card {
    background: #fff;
    border: 1px solid #dce5e8;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 18px rgba(31, 61, 72, 0.08);
}

.job-post-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.job-post-card-top .job-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.job-back-to-list {
    flex-shrink: 0;
    white-space: nowrap;
}

.job-post-card .job-title {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    color: #071d35;
    margin: 0 0 10px;
}

.job-post-card .job-meta {
    color: #071d35;
}

.job-post-card .job-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.job-post-card .job-meta i {
    font-size: 13px;
}

.job-post-card .job-tags {
    align-items: center;
}

.job-post-card .job-tag {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #d9e3e7;
    border-radius: 20px;
    background: #fff;
    color: #344f63;
    font-size: 12px;
    line-height: 1.2;
}

.job-post-card .job-tag:first-child {
    background: #e9f5f5;
    border-color: #e9f5f5;
    color: #155b60;
    font-weight: 600;
}

.employer-apply-btn {
    padding: 6px 12px;
    border: 1px solid #e0e7ea;
    border-radius: 8px;
    background: #fff;
    color: #8998a3;
    font-size: 12px;
}

.job-content-card h2 {
    margin: 0 0 12px;
    color: #071d35;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.job-content-card p,
.job-content-card .job-list {
    margin: 0;
    color: #071d35;
    line-height: 1.75;
}

.job-content-card .job-list {
    padding-left: 0;
    list-style: none;
}

.job-content-card .job-list li::before {
    content: "•";
    margin-right: 6px;
}

.print-job-btn i {
    margin-right: 6px;
}

.job-print-letterhead {
    display: none;
}

@media print {
    /* Print engines often use a narrow page width, so mobile max-width
       rules that hide the details column must be overridden here. */
    body:has(.jobs-section),
    body:has(.job-details-section) {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .job-print-locked {
        display: none !important;
    }

    @page {
        size: A4;
        margin: 12mm 14mm;
    }

    header.header,
    footer.site-footer,
    .no-print,
    .job-filters,
    .jobs-page-header,
    .job-list-column,
    .job-list.job-list-scroll,
    .job-list-pagination,
    .pagination,
    .modal,
    .featured-corner-ribbon,
    .job-featured-badge,
    .job-save-toggle,
    .job-detail-sticky-actions,
    .job-detail-back,
    .job-more-menu,
    .job-detail-actions,
    .jobs-section>.container>.d-flex,
    .app-toast-root {
        display: none !important;
    }

    body,
    .jobs-section,
    .job-details-section {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #122539 !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .jobs-section > .container,
    .job-details-section .container,
    .job-container,
    .job-container > .row {
        display: block !important;
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .job-container > .row > .col-lg-4,
    .job-list-column {
        display: none !important;
    }

    .job-container > .row > .col-lg-8,
    .job-details-column,
    .jobs-section .job-details-column,
    .job-details-section .col-lg-8 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .job-content {
        display: none !important;
    }

    .job-content.active,
    .job-container .job-content.active {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .job-details,
    .job-details-fixed,
    .job-container .job-details-fixed,
    .job-container .job-detail-header,
    .job-container .job-detail-body,
    .job-detail-header,
    .job-detail-body {
        display: block !important;
        position: static !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        width: 100% !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .job-detail-title {
        font-size: 20px !important;
        color: #06264d !important;
        margin: 0 0 8px !important;
    }

    .job-detail-company-line,
    .job-detail-salary,
    .job-detail-meta-row,
    .job-detail-posted {
        color: #18334c !important;
    }

    .job-detail-salary {
        font-size: 15px !important;
        margin: 0 0 10px !important;
    }

    .job-detail-body {
        padding-bottom: 0 !important;
        border-top: 0 !important;
    }

    .job-print-letterhead {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin: 0 0 16px;
        padding: 0 0 12px;
        border-bottom: 2px solid #00a7a7;
        break-after: avoid;
        page-break-after: avoid;
    }

    .job-print-letterhead-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .job-print-letterhead-brand img {
        height: 40px;
        width: auto;
        max-width: 170px;
        object-fit: contain;
    }

    .job-print-letterhead-brand strong {
        display: block;
        color: #06264d;
        font-size: 15px;
        line-height: 1.2;
    }

    .job-print-letterhead-brand span {
        display: block;
        margin-top: 2px;
        color: #4a6278;
        font-size: 12px;
    }

    .job-print-letterhead-contact {
        text-align: right;
        color: #18334c;
        font-size: 11px;
        line-height: 1.45;
    }

    .job-print-letterhead-contact p {
        margin: 0;
        white-space: pre-line;
    }

    .job-print-letterhead-site {
        color: #008f8f;
        font-weight: 600;
    }

    .job-print-header,
    .detail-card.job-print-header,
    .job-post-card.job-print-header {
        border: 1px solid #d5e1e8 !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        padding: 14px 16px !important;
        margin: 0 0 12px !important;
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: avoid;
        page-break-after: avoid;
    }

    .job-print-section,
    .detail-card.job-print-section,
    .job-content-card.job-print-section {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 0 14px !important;
        break-inside: auto;
        page-break-inside: auto;
    }

    .job-print-section h2,
    .job-print-section h3,
    .job-content-card.job-print-section h2 {
        break-after: avoid;
        page-break-after: avoid;
        margin: 0 0 8px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #06264d !important;
    }

    .job-print-header h2,
    .job-print-header .job-title,
    .job-print-header .job-detail-title,
    .detail-card.job-print-header h2,
    .job-post-card.job-print-header .job-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
        color: #06264d !important;
        margin: 0 0 8px !important;
    }

    .detail-meta,
    .job-post-card .job-meta {
        color: #18334c !important;
        font-size: 12px !important;
        gap: 8px 14px !important;
        margin-bottom: 10px !important;
    }

    .job-tags {
        margin-bottom: 0 !important;
        gap: 6px !important;
    }

    .job-tags span,
    .job-tag {
        border: 1px solid #d5e1e8 !important;
        background: #f7fbfc !important;
        color: #18334c !important;
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    .job-rich-text,
    .job-print-section .job-list {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
        color: #122539 !important;
        orphans: 3;
        widows: 3;
    }

    .job-rich-text p,
    .job-rich-text li {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .job-company-logo {
        width: 36px !important;
        height: 36px !important;
    }

    a {
        color: #122539 !important;
        text-decoration: none !important;
    }
}


/*====================dashboard-css====================*/


/*====================app-panel (employer + candidate)====================*/
.employer-panel,
.candidate-panel {
    background: #fbfeff;
    padding: 60px 0 80px;
}

.employer-panel .panel-title,
.candidate-panel .panel-title {
    font-size: 30px;
    font-weight: 700;
    color: #06264d;
    margin-bottom: 4px;
}

.employer-panel .panel-subtitle,
.candidate-panel .panel-subtitle {
    font-size: 15px;
    color: #071d35;
    margin-bottom: 0;
}

.resume-title-link {
    color: #152b43;
    text-decoration: none;
}

.resume-title-link:hover {
    color: #009e9a;
    text-decoration: underline;
}

.resume-default-badge {
    background: color-mix(in srgb, #009e9a 14%, #fff);
    color: #0a5f5c;
    border: 1px solid color-mix(in srgb, #009e9a 28%, #fff);
    font-weight: 600;
}

.resume-actions-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.candidate-panel .panel-card.resume-list-card {
    overflow: visible;
}

.candidate-panel .resume-list-scroll {
    overflow: visible;
}

@media (max-width: 767.98px) {
    .candidate-panel .resume-list-scroll {
        overflow-x: auto;
        overflow-y: visible;
    }
}

.resume-actions-dropdown .dropdown-menu {
    z-index: 1080;
    min-width: 11.5rem;
}

.resume-actions-dropdown .dropdown-item {
    font-size: 14px;
}

.resume-actions-dropdown form {
    margin: 0;
}

.resume-delete-modal .modal-title {
    font-weight: 700;
    color: #152b43;
}

.resume-delete-modal .modal-body {
    color: #40566d;
    font-size: 14px;
    line-height: 1.5;
}

.resume-delete-modal .modal-footer {
    gap: 8px;
}

.resume-delete-modal .modal-footer form {
    margin: 0;
}

.resume-upload-page .resume-upload-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.resume-upload-card .panel-card-body {
    padding: 28px;
}

.resume-upload-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e4edf2;
}

.resume-upload-section--last {
    border-bottom: 0;
    padding-bottom: 0;
}

.resume-upload-section-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: #06264d;
}

.resume-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 180px;
    padding: 28px 20px;
    border: 1.5px dashed #b7c9d4;
    border-radius: 14px;
    background: #f7fbfc;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.resume-dropzone:hover,
.resume-dropzone.is-dragging,
.resume-dropzone.has-file {
    border-color: #00a7a7;
    background: #f1fbfb;
}

.resume-dropzone.is-dragging {
    box-shadow: 0 0 0 3px rgba(0, 167, 167, 0.12);
}

.resume-dropzone.is-invalid {
    border-color: #dc3545;
}

.resume-dropzone-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.resume-dropzone-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #00a7a7 12%, #fff);
    color: #008f8f;
    font-size: 20px;
    margin-bottom: 6px;
}

.resume-dropzone-title {
    font-size: 15px;
    font-weight: 600;
    color: #18334c;
    max-width: 26rem;
}

.resume-dropzone-browse {
    color: #008f8f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.resume-dropzone-meta {
    font-size: 13px;
    color: #5d7285;
}

.resume-file-status {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f4f8fa;
    border: 1px solid #e4edf2;
    font-size: 14px;
    color: #18334c;
}

.resume-setting-card {
    padding: 14px 16px;
    border: 1px solid #e4edf2;
    border-radius: 12px;
    background: #fbfefe;
}

.resume-setting-card .form-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.resume-setting-card .form-check-input {
    margin-top: 3px;
}

.resume-setting-label {
    display: block;
    font-weight: 600;
    color: #18334c;
}

.resume-setting-help {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    color: #5d7285;
    line-height: 1.45;
}

.resume-upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.resume-upload-success {
    text-align: center;
    margin-bottom: 22px;
}

.resume-upload-success-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #00a7a7 14%, #fff);
    color: #0a5f5c;
    font-size: 22px;
}

.resume-upload-success-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #06264d;
}

.resume-upload-success-copy {
    font-size: 14.5px;
    line-height: 1.5;
    color: #4f667a;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

.resume-upload-complete-meta {
    padding: 14px 16px;
    border-radius: 12px;
    background: #f4f8fa;
    border: 1px solid #e4edf2;
    margin-bottom: 20px;
}

.employer-panel .panel-card,
.candidate-panel .panel-card {
    background: #fff;
    border: 1px solid #d5e1e8;
    border-radius: 10px;
    box-shadow: 0 12px 25px rgba(0, 40, 70, 0.08);
    overflow: hidden;
}

.employer-panel .panel-card-header,
.candidate-panel .panel-card-header {
    padding: 14px 24px;
    border-bottom: 1px solid #d5e1e8;
    font-size: 17px;
    font-weight: 600;
    color: #06264d;
}

.employer-panel .panel-card-body,
.candidate-panel .panel-card-body {
    padding: 24px;
}

.employer-panel .panel-card-footer,
.candidate-panel .panel-card-footer {
    padding: 16px 24px;
    border-top: 1px solid #d5e1e8;
}

.employer-panel label,
.employer-panel .form-label,
.candidate-panel label,
.candidate-panel .form-label {
    display: block;
    color: #071d35;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.employer-panel .form-control,
.employer-panel .form-select,
.candidate-panel .form-control,
.candidate-panel .form-select {
    min-height: 38px;
    border: 1px solid #d4dfe5;
    border-radius: 7px;
    color: #071d35;
    font-size: 14px;
    box-shadow: none;
}

.employer-panel .form-control:focus,
.employer-panel .form-select:focus,
.candidate-panel .form-control:focus,
.candidate-panel .form-select:focus {
    border-color: #00a6a6;
    box-shadow: 0 0 0 2px rgba(0, 166, 166, 0.08);
}

.employer-panel .btn-brand,
.employer-panel .btn-primary,
.candidate-panel .btn-brand,
.candidate-panel .btn-primary {
    background: #00a5a5;
    border-color: #00a5a5;
    color: #fff;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
}

.employer-panel .btn-brand:hover,
.employer-panel .btn-primary:hover,
.candidate-panel .btn-brand:hover,
.candidate-panel .btn-primary:hover {
    background: #008f8f;
    border-color: #008f8f;
    color: #fff;
}

.employer-panel .btn-outline-secondary,
.employer-panel .btn-light,
.candidate-panel .btn-outline-secondary,
.candidate-panel .btn-light {
    border-radius: 8px;
    color: #06264d;
    border-color: #d5e1e8;
    background: #fff;
    font-size: 14px;
}

.employer-panel .btn-outline-secondary:hover,
.employer-panel .btn-light:hover,
.candidate-panel .btn-outline-secondary:hover,
.candidate-panel .btn-light:hover {
    color: #003a48;
    background: #d1f3f2;
    border-color: #d5e1e8;
}

.employer-panel .table,
.candidate-panel .table {
    margin-bottom: 0;
}

.employer-panel .table thead th,
.candidate-panel .table thead th {
    color: #06264d;
    font-size: 13px;
    font-weight: 600;
    border-bottom-color: #d5e1e8;
    background: #f8fcfd;
}

.employer-panel .table td,
.candidate-panel .table td {
    color: #071d35;
    vertical-align: middle;
    border-color: #e7eef2;
}

.employer-panel .back-link,
.candidate-panel .back-link {
    color: #00a6a6;
    text-decoration: none;
    font-size: 13px;
}

.employer-panel .back-link:hover,
.candidate-panel .back-link:hover {
    color: #008f8f;
    text-decoration: underline;
}

.employer-panel .message-mine,
.candidate-panel .message-mine {
    background: #00a5a5;
    color: #fff;
}

.employer-panel .message-theirs,
.candidate-panel .message-theirs {
    background: #f3f8fa;
    color: #071d35;
}

.employer-panel .message-pending,
.candidate-panel .message-pending {
    opacity: 0.7;
}

.employer-panel .payment-option,
.candidate-panel .payment-option {
    border: 1px solid #d5e1e8;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    cursor: pointer;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.employer-panel .payment-option:has(input:checked),
.employer-panel .payment-option.is-selected,
.candidate-panel .payment-option:has(input:checked),
.candidate-panel .payment-option.is-selected {
    border-color: #00a6a6;
    background: rgba(0, 166, 166, 0.06);
    box-shadow: 0 0 0 2px rgba(0, 166, 166, 0.12);
}

.checkout-panel .checkout-plan-hero {
    max-width: 28rem;
}

.checkout-panel .checkout-plan-hero__name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #071d35;
    margin-bottom: 0.25rem;
}

.checkout-panel .checkout-plan-hero__price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.checkout-panel .checkout-plan-hero__amount {
    font-size: 1.75rem;
    font-weight: 800;
    color: #071d35;
    line-height: 1.15;
}

.checkout-panel .checkout-plan-hero__cadence {
    color: #5b7285;
    font-size: 1rem;
}

.checkout-panel .checkout-plan-hero__compare {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #5b7285;
    font-size: 0.9375rem;
}

.checkout-panel .checkout-plan-hero__compare span {
    color: #0a7a3e;
    font-weight: 600;
}

.checkout-panel .checkout-dev-banner {
    border: 1px dashed #c9a227;
    background: #fff8e6;
    color: #6b5300;
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-size: 0.875rem;
}

.checkout-panel .checkout-summary-plan {
    font-weight: 700;
    color: #071d35;
    margin-bottom: 1rem;
}

.checkout-panel .checkout-summary-list {
    margin: 0;
}

.checkout-panel .checkout-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #e8eef2;
}

.checkout-panel .checkout-summary-row dt {
    margin: 0;
    color: #5b7285;
    font-weight: 400;
}

.checkout-panel .checkout-summary-row dd {
    margin: 0;
    text-align: right;
    color: #071d35;
    font-weight: 600;
}

.checkout-panel .checkout-summary-row--due {
    border-bottom: 0;
    margin-top: 0.35rem;
    padding-top: 0.85rem;
    border-top: 2px solid #d5e1e8;
}

.checkout-panel .checkout-summary-row--due dt,
.checkout-panel .checkout-summary-row--due dd {
    font-size: 1.05rem;
    font-weight: 800;
    color: #071d35;
}

.checkout-panel .checkout-methods-label {
    font-weight: 600;
    color: #071d35;
    margin-bottom: 0.75rem;
}

.checkout-panel .checkout-methods {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .checkout-panel .checkout-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.checkout-panel .payment-option__radio {
    flex: 0 0 auto;
    padding-top: 0.15rem;
}

.checkout-panel .payment-option__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.checkout-panel .payment-option__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: #071d35;
}

.checkout-panel .payment-option__icon {
    color: #00a6a6;
}

.checkout-panel .payment-option__desc {
    color: #5b7285;
    font-size: 0.875rem;
    line-height: 1.35;
}

.checkout-panel .checkout-billing-note {
    color: #5b7285;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.checkout-panel .checkout-pay-btn {
    min-width: 11rem;
}

.checkout-panel .checkout-trust {
    border-top: 1px solid #e8eef2;
    padding-top: 0.9rem;
}

.checkout-panel .checkout-trust__title {
    font-weight: 700;
    color: #071d35;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.checkout-panel .checkout-trust__text,
.checkout-panel .checkout-terms {
    color: #5b7285;
    font-size: 0.85rem;
    line-height: 1.45;
}

.checkout-panel .checkout-terms a {
    color: #00a6a6;
    text-decoration: underline;
}

.checkout-result {
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    border: 1px solid transparent;
}

.checkout-result__title {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
    color: #071d35;
}

.checkout-result__message,
.checkout-result__hint {
    color: #3d5163;
    margin: 0;
}

.checkout-result--success {
    background: #eefaf4;
    border-color: #b7e4cb;
}

.checkout-result--failed {
    background: #fff1f1;
    border-color: #f0c2c2;
}

.checkout-result--cancelled {
    background: #fff8e6;
    border-color: #ecd48a;
}

.checkout-result--pending {
    background: color-mix(in srgb, var(--brand, #009fa3) 8%, #fff);
    border-color: #c5d7f2;
}

.candidate-panel form button.btn.btn-outline-danger {
    border-radius: 8px;
}

.panel-card form .btn-link {
    color: #00a5a5;
}

.panel-card form .btn-link:hover {
    opacity: 0.9;
}

.resume-items {
    width: 100%;
}

.all-resume-btn {
    font-size: 14px;
    line-height: 22px;
    border-color: #d5e1e8;
    background: #fff;
    color: #071d35;
    border-radius: 8px;
}

.all-resume-btn:hover {
    color: #003a48;
    background: #d1f3f2;
}

.resume-save-wrap a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 17px;
    border: 1px solid #cfd8df;
    border-radius: 6px;
    color: #071d35;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

.resume-save-wrap a.btn:hover {
    background: #d8f5f5;
}

.resume-heading a.btn.btn-outline-secondary {
    border: 1px solid #cfd8df;
    border-radius: 6px;
    color: #071d35;
    font-size: 14px;
    font-weight: 500;
}

.resume-heading a.btn.btn-outline-secondary:hover {
    background: #d8f5f5;
}

.detail-card form button.job-save-toggle {
    border: none;
    background: transparent;
}

.detail-card form button.job-save-toggle:hover {
    color: #00a7a7;
}

.employer-panel .panel-card-body dt,
.employer-panel .panel-card-body dd {
    color: #071d35 !important;
    font-size: 14px;
}

.save-jobs-btn {
    color: #071d35;
    border: 1px solid #d4dfe5;
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.save-jobs-btn:hover {
    background: #d8f5f5;
    color: #071d35;
    border-color: #d4dfe5;
}

.alert {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

.applicant-workspace-status-card form .form-select {
    min-height: 40px;
    border-color: #d8e0e5;
    border-radius: 10px;
    font-size: 14px;
}

.applicant-workspace-status-card {
    margin-bottom: 12px;
}



/*====================responsive-css====================*/

@media (max-width: 1024px) {
    .popular-badge {
        top: 6px;
        right: 6px;
    }
}


@media (max-width: 991px) {
    button.toggle-btn {
        display: block;
    }

    .navigation {
        display: none;
        width: 100%;
        position: absolute;
        left: 0;
        top: 100%;
        background: #d8f5f5;
        padding: 16px 20px;
    }

    .navigation.active {
        display: block;

    }

    .navigation ul {
        flex-direction: column;
        gap: 12px !important;
    }

    .header-button {
        display: flex;
        justify-content: end;
        gap: 10px;
    }

    .header-button a {
        padding: 8px 14px;
        margin-left: 0;
    }

    .applications-section .application-actions {
        gap: 8px;
        width: 100%;
        justify-content: stretch;
    }

    .applications-section .application-status,
    .applications-section .view-resume-btn {
        flex: 1 1 auto;
    }

    .applications-section .application-status {
        min-width: 0;
        width: 100%;
    }

    .applications-section .view-resume-btn {
        padding: 0 12px;
    }
}

@media (max-width: 767px) {

    .employer-panel .panel-title,
    .candidate-panel .panel-title {
        font-size: 24px;
    }

    .employer-panel .table td,
    .candidate-panel .table td {
        white-space: nowrap;
    }
}

@media (max-width: 575px) {
    .banner-content h1 {
        font-size: 38px;
        margin: 16px 0 14px;
    }

    .banner-content p {
        font-size: 16px;
        padding: 0;
    }

    .banner-content form {
        padding: 0;
        flex-direction: column;
    }

    .banner-content form .form-group {
        width: 100%;
    }

    .banner-content form button {
        width: 100%;
    }

    .banner-button {
        margin: 20px 0 0;
    }

    .banner {
        padding: 50px 0;
    }

    .employer-candidate-section {
        padding: 50px 0;
    }

    .career-feature-card {
        padding: 20px;
    }

    .job-list .job-info {
        gap: 10px !important;
    }

    .latest-openings {
        padding: 10px 0 20px;
    }

    .popular-categories {
        padding: 26px 0 60px;
    }

    .category-tag {
        padding: 7px 12px;
        font-size: 13px;
    }

    .left-content h1 {
        margin: 0 0 16px;
        font-size: 30px;
    }

    .left-content .intro {
        margin-bottom: 16px;
    }

    .left-panel .brand {
        margin-bottom: 20px;
    }

    .feature-list li {
        font-size: 14px;
    }

    .tab-button button {
        padding: 8px 10px;
        font-size: 13px;
    }

    .login-wrapper {
        padding: 20px 20px;
    }

    .browse-link {
        margin-top: 18px;
    }

    .right-panel {
        padding: 24px 0 20px;
    }

    .jobs-section {
        padding: 40px 0 40px;
    }

    .detail-meta {
        gap: 12px;
    }

    .header-button a {
        padding: 8px 8px;
        margin-left: 0;
    }

    .header-button {
        gap: 6px;
    }

    button.toggle-btn {
        margin: 0 0 0 2px;
    }

    .candidate-panel .form-select {
        width: 100%;
    }

    .my-applications-section form {
        width: 100%;
    }

    .employer-panel,
    .candidate-panel {
        padding: 40px 0 50px;
    }

    .user-dropdown .dropdown-button {
        padding: 5px 14px 5px 38px;
        height: 38px;
        max-width: 140px;
        font-size: 13px;
    }

    .user-dropdown .dropdown-button span {
        font-size: 11px;
        width: 30px;
        height: 30px;
        line-height: 32px;
    }

    .header-button .chat-icon a {
        padding: 0;
    }

    .pricing-title {
        font-size: 30px;
    }

    .pricing-subtitle {
        font-size: 14px;
    }

    .employer-panel .table thead th,
    .candidate-panel .table thead th {
        white-space: nowrap;
    }

    .logo img {
        max-width: 140px;
    }

    .msg-inbox-send-btn {
        gap: 0;
        padding: 0 13px;
    }

    .applicant-workspace-item {
        padding: 9px 14px;
    }
}

/*====================responsive-css====================*/
/* Applicant review + messaging workspace */
.applicant-workspace {
    background: #f8fbfc;
    padding: 32px 0 80px;
}

.applicant-workspace-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 260px;
    gap: 20px;
    align-items: start;
}

.applicant-workspace--messages .applicant-workspace-grid:not(.applicant-workspace-grid--chat-only) {
    grid-template-columns: 260px minmax(0, 1fr);
}

.applicant-workspace-grid--chat-only {
    grid-template-columns: minmax(0, 1fr);
    max-width: 900px;
    margin: 0 auto;
}

.applicant-workspace-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #07325a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
}

.applicant-workspace-back:hover {
    color: #1aa3a8;
}

.applicant-workspace-list-card,
.applicant-workspace-resume-card,
.applicant-workspace-status-card,
.applicant-workspace-feed-card,
.applicant-workspace-chat-card {
    background: #fff;
    border: 1px solid #d5e0e5;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(20, 55, 80, 0.06);
}

.applicant-workspace-list-title {
    padding: 14px 16px;
    border-bottom: 1px solid #e6eef2;
    color: #0d2b4d;
    font-weight: 600;
    font-size: 15px;
}

.applicant-workspace-list-job {
    display: block;
    margin-top: 4px;
    color: #5a6c79;
    font-size: 12px;
    font-weight: 500;
}

.applicant-workspace-list {
    max-height: 70vh;
    overflow: auto;
}

.applicant-workspace-item {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #eef3f6;
    transition: background 0.2s ease;
    border-left: 2px solid transparent;
}

.applicant-workspace-item:last-child {
    border-bottom: 0;
}

.applicant-workspace-item:hover {
    background: #f4fafb;
}

.applicant-workspace-item.is-active {
    background: #e8f6f7;
    border-left-color: #009e9a;
}

.applicant-workspace-item-name {
    color: #06264d;
    font-size: 15px;
    font-weight: 600;
}

.applicant-workspace-item-title {
    color: #071d35;
    margin-top: 2px;
    margin-bottom: 6px;
}

.applicant-workspace-item-location {
    color: #071d35;
}

.applicant-workspace-item-meta {
    color: #071d35;
    margin-top: 2px;
}

.applicant-workspace-empty {
    padding: 18px 16px;
    color: #5a6c79;
    font-size: 13px;
}

.applicant-workspace-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.applicant-workspace-name {
    color: #0d2b4d;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.applicant-workspace-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: #000;
    font-size: 14px;
}

.applicant-workspace-meta i {
    color: #1aa3a8;
}

.applicant-workspace-message-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    background: #1aa3a8;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border: none;
}

.applicant-workspace-message-btn:hover {
    background: #168f93;
    color: #fff;
}

.applicant-workspace-resume-header,
.applicant-workspace-feed-card h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e6eef2;
    color: #0d2b4d;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.applicant-workspace-resume-header span {
    color: #5a6c79;
    font-size: 13px;
    font-weight: 500;
}

.applicant-workspace-resume-body,
.applicant-workspace-status-card,
.applicant-workspace-chat-composer {
    padding: 18px;
}

.applicant-workspace-section-title {
    color: #0d2b4d;
    font-size: 15px;
    font-weight: 600;
    margin: 22px 0 10px;
}

.applicant-workspace-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.applicant-workspace-skills span {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e8f6f7;
    color: #0d2b4d;
    font-size: 12px;
    font-weight: 500;
}

.applicant-workspace-entry {
    margin-bottom: 14px;
}

.applicant-workspace-cover {
    color: #243746;
    font-size: 14px;
    line-height: 1.6;
}

.applicant-workspace-feed {
    list-style: none;
    margin: 0;
    padding: 0 18px 18px;
}

.applicant-workspace-feed li {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 12px;
    position: relative;
    padding: 12px 0;
}

.applicant-workspace-feed li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 28px;
    width: 2px;
    background: #d9e7ec;
    height: 100%;
}

.applicant-workspace-feed-dot {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 50%;
    background: #1aa3a8;
    box-shadow: 0 0 0 3px #e8f6f7;
}

.applicant-workspace-feed-date {
    color: #5a6c79;
    font-size: 12px;
    margin-bottom: 2px;
}

.applicant-workspace-chat-thread {
    max-height: 420px;
    overflow: auto;
    padding: 18px;
    border-bottom: 1px solid #e6eef2;
}

.applicant-workspace-resume-body .workspace-resume-btn {
    width: auto;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #092b4c;
    background: #ffffff;
    border: 1px solid #d4dfe5;
    border-radius: 9px;
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease;
}

.applicant-workspace-resume-body .workspace-resume-btn:hover {
    color: #003a48;
    background: #d1f3f2;
}

@media (max-width: 1199.98px) {

    .applicant-workspace-grid,
    .applicant-workspace--messages .applicant-workspace-grid:not(.applicant-workspace-grid--chat-only) {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .applicant-workspace-aside {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 767.98px) {

    .applicant-workspace-grid,
    .applicant-workspace--messages .applicant-workspace-grid:not(.applicant-workspace-grid--chat-only),
    .applicant-workspace-aside {
        grid-template-columns: 1fr;
    }

    .applicant-workspace-name {
        font-size: 22px;
    }

    .applicant-workspace-list {
        max-height: 240px;
    }
}

/* Indeed-style applicant review */
.applicant-workspace--ats {
    background: #f3f6f8;
    padding: 16px 0 120px;
}

.applicant-ats-container {
    max-width: 1440px;
    padding-left: 16px;
    padding-right: 16px;
}

.applicant-ats-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.applicant-ats-pager {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #5a6c79;
    font-size: 13px;
    font-weight: 500;
}

.applicant-ats-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #d5e0e5;
    background: #fff;
    color: #0d2b4d;
    text-decoration: none;
}

.applicant-ats-pager-btn:hover {
    background: #f4fafb;
    color: #0d2b4d;
}

.applicant-ats-pager-btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.applicant-ats-grid {
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    gap: 16px;
}

.applicant-workspace--ats .applicant-workspace-sidebar .applicant-workspace-back {
    display: none;
}

.applicant-workspace--ats .applicant-workspace-list-card,
.applicant-workspace--ats .applicant-workspace-resume-card,
.applicant-workspace--ats .applicant-workspace-status-card,
.applicant-workspace--ats .applicant-workspace-feed-card {
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 40, 60, 0.05);
}

.applicant-workspace--ats .applicant-workspace-item.is-active {
    background: #eef3f6;
    box-shadow: inset 0 0 0 1px #c5d4dc;
}

.applicant-ats-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.applicant-ats-applied {
    color: #5a6c79;
    font-size: 14px;
    margin-bottom: 6px;
}

.applicant-ats-applied strong {
    color: #0d2b4d;
}

.applicant-ats-job-link {
    color: #1aa3a8;
    margin-left: 4px;
    text-decoration: none;
}

.applicant-ats-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.applicant-ats-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #1aa3a8;
    background: #fff;
    color: #0d7c80;
    text-decoration: none;
    font-weight: 600;
}

.applicant-ats-secondary-btn:hover {
    background: #e8f6f7;
    color: #0d7c80;
}

.applicant-ats-cv-tools {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.applicant-ats-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0d7c80;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.applicant-ats-download:hover {
    color: #0a6468;
}

.applicant-ats-cv-body {
    padding: 0;
    background: #eef2f5;
}

.applicant-ats-cv-frame {
    display: block;
    width: 100%;
    min-height: 720px;
    border: 0;
    background: #fff;
}

.applicant-ats-cv-fallback {
    display: none;
    padding: 18px;
}

.applicant-ats-cv-built,
.applicant-ats-cover {
    padding: 18px;
    background: #fff;
}

.applicant-ats-cover {
    border-top: 1px solid #e6eef2;
}

@media (max-width: 1199.98px) {
    .applicant-ats-grid {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .applicant-ats-grid {
        grid-template-columns: 1fr;
    }

    .applicant-ats-cv-frame {
        min-height: 480px;
    }
}

/* Floating Indeed-style message dock — pinned to viewport bottom */
.msg-dock {
    position: fixed;
    right: 24px;
    bottom: 0;
    z-index: 1080;
    width: min(380px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    transform-origin: bottom center;
}

.msg-dock-bar {
    display: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px 12px 0 0;
    background: #243746;
    color: #fff;
    text-align: left;
    box-shadow: 0 -4px 24px rgba(15, 40, 60, 0.22);
    cursor: pointer;
}

.msg-dock.is-minimized .msg-dock-bar {
    display: flex;
}

.msg-dock-bar-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-dock-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1aa3a8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.msg-dock-panel {
    display: flex;
    flex-direction: column;
    max-height: min(560px, calc(100vh - 24px));
    opacity: 1;
    transform: translateY(0);
    transform-origin: bottom center;
    background: #fff;
    border: 1px solid #d5e0e5;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    box-shadow: 0 -8px 32px rgba(15, 40, 60, 0.22);
    transition:
        max-height 0.25s ease,
        opacity 0.2s ease,
        transform 0.25s ease,
        box-shadow 0.2s ease;
}

.msg-dock.is-minimized .msg-dock-panel {
    max-height: 0;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    border-color: transparent;
    box-shadow: none;
}

.msg-dock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #243746;
    color: #fff;
}

.msg-dock-title {
    font-size: 14px;
    font-weight: 700;
}

.msg-dock-sub {
    font-size: 12px;
    opacity: 0.8;
}

.msg-dock-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.msg-dock-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.msg-dock-icon-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.msg-dock-meta {
    padding: 10px 14px;
    background: #f3f6f8;
    color: #5a6c79;
    font-size: 12px;
    border-bottom: 1px solid #e6eef2;
}

.msg-dock-thread {
    flex: 1;
    min-height: 160px;
    max-height: 280px;
    overflow: auto;
    padding: 14px;
    background: #f7fafb;
}

.msg-dock-empty,
.msg-dock-start-label {
    color: #5a6c79;
    font-size: 13px;
}

.msg-dock-start-label {
    font-weight: 600;
    color: #0d2b4d;
    margin-bottom: 10px;
}

.msg-dock-suggestions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.msg-dock-suggestion {
    flex: 0 0 auto;
    max-width: 220px;
    padding: 10px 12px;
    border: 1px solid #b7e4e6;
    border-radius: 12px;
    background: #e8f6f7;
    color: #0d4f6c;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}

.msg-dock-suggestion:hover {
    background: #d7f0f1;
}

.msg-dock-composer {
    padding: 12px 14px 14px;
    border-top: 1px solid #e6eef2;
    background: #fff;
}

.msg-dock-input {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    border: 1px solid #d5e0e5;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    color: #0d2b4d;
}

.msg-dock-input:focus {
    outline: 0;
    border-color: #1aa3a8;
    box-shadow: 0 0 0 3px rgba(26, 163, 168, 0.15);
}

.msg-dock-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.msg-dock-send {
    margin-left: auto;
    min-width: 84px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: #1aa3a8;
    color: #fff;
    font-weight: 600;
}

.msg-dock-send:disabled {
    background: #c5d4dc;
    cursor: not-allowed;
}

.msg-dock .msg-bubble-row {
    margin-bottom: 10px;
}

.msg-dock .msg-bubble-row.is-mine {
    display: flex;
    justify-content: flex-end;
}

.msg-dock .msg-bubble {
    max-width: 85%;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 13px;
}

.msg-dock .message-mine {
    background: #1aa3a8;
    color: #fff;
}

.msg-dock .message-theirs {
    background: #fff;
    border: 1px solid #dbe3e8;
    color: #0d2b4d;
}

.msg-dock .msg-bubble-meta {
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.msg-dock .message-mine .msg-bubble-meta {
    color: rgba(255, 255, 255, 0.85);
}

/* Indeed-style messaging inbox */
.msg-inbox {
    background: #f3f6f8;
    padding: 24px 0 48px;
    min-height: calc(100vh - 120px);
}

.msg-inbox-shell {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    min-height: 680px;
    background: #fff;
    border: 1px solid #dbe3e8;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(15, 40, 60, 0.06);
}

.msg-inbox-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e4ebf0;
    background: #fbfcfd;
    min-height: 0;
}

.msg-inbox-sidebar-header {
    padding: 18px 16px 12px;
    border-bottom: 1px solid #e4ebf0;
}

.msg-inbox-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #0d2b4d;
}

.msg-inbox-subtitle {
    margin: 4px 0 0;
    max-width: 260px;
    color: #5a6c79;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
}

.msg-inbox-unread-label {
    margin-top: 6px;
    font-size: 12px;
    color: #5a6c79;
}

.msg-inbox-new-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e8f6f7;
    color: #0d7c80;
    text-decoration: none;
}

.msg-inbox-new-btn:hover {
    background: #d7f0f1;
    color: #0d7c80;
}

.msg-inbox-search {
    position: relative;
    margin-top: 12px;
}

.msg-inbox-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #7a8b97;
    font-size: 14px;
}

.msg-inbox-search input {
    width: 100%;
    height: 40px;
    border: 1px solid #d5e0e5;
    border-radius: 10px;
    padding: 0 12px 0 36px;
    background: #fff;
    color: #0d2b4d;
    outline: none;
}

.msg-inbox-search input:focus {
    border-color: #1aa3a8;
    box-shadow: 0 0 0 3px rgba(26, 163, 168, 0.15);
}

.msg-inbox-threads {
    overflow: auto;
    flex: 1;
}

.msg-inbox-thread-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #eef3f6;
    transition: background .15s ease;
}

.msg-inbox-thread-item:hover {
    background: #f4fafb;
}

.msg-inbox-thread-item.is-active {
    background: #e8f6f7;
    box-shadow: inset 3px 0 0 #1aa3a8;
}

.msg-inbox-thread-item.is-unread {
    background: #f3fbfb;
}

.msg-inbox-thread-item.is-unread .msg-inbox-thread-name,
.msg-inbox-thread-item.is-unread .msg-inbox-thread-subject {
    font-weight: 700;
    color: #0d2b4d;
}

.msg-inbox-thread-item.is-unread .msg-inbox-thread-preview {
    font-weight: 600;
    color: #24384e;
}

.msg-inbox-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg, #1aa3a8, #0d7c80);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.msg-inbox-avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.msg-inbox-thread-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}

.msg-inbox-thread-name {
    color: #0d2b4d;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-inbox-thread-time {
    color: #7a8b97;
    font-size: 11px;
    white-space: nowrap;
}

.msg-inbox-thread-subject {
    color: #456070;
    font-size: 12px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-inbox-thread-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #5a6c79;
    font-size: 12px;
    margin-top: 2px;
}

.msg-inbox-unread-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #1aa3a8;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.msg-inbox-empty-list {
    padding: 28px 18px;
    color: #5a6c79;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.msg-inbox-empty-list-title {
    margin: 0 0 6px;
    color: #0d2b4d;
    font-size: 15px;
    font-weight: 700;
}

.msg-inbox-empty-list-copy {
    margin: 0;
    color: #5a6c79;
    font-size: 13px;
    line-height: 1.5;
}

.msg-inbox-back-btn {
    display: none;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef3f5;
    color: #0d2b4d;
    text-decoration: none;
}

.msg-inbox-back-btn:hover {
    background: #e4ebf0;
    color: #0d2b4d;
}

.msg-inbox-chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
}

.msg-inbox-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e4ebf0;
    background: #fff;
}

.msg-inbox-chat-name {
    font-size: 17px;
    font-weight: 700;
    color: #0d2b4d;
}

.msg-inbox-chat-sub {
    font-size: 13px;
    color: #5a6c79;
}

.msg-inbox-link-btn {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #d5e0e5;
    border-radius: 8px;
    background: #fff;
    color: #0d2b4d;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.msg-inbox-link-btn:hover {
    background: #f7fafb;
    color: #0d2b4d;
}

.msg-inbox-chat-thread {
    flex: 1;
    overflow: auto;
    padding: 22px 20px;
    background: linear-gradient(180deg, #f8fbfc 0%, #ffffff 120px);
}

.msg-bubble-row {
    display: flex;
    margin-bottom: 12px;
}

.msg-bubble-row.is-mine {
    justify-content: flex-end;
}

.msg-bubble-row.is-theirs {
    justify-content: flex-start;
}

.msg-bubble {
    max-width: min(520px, 82%);
    padding: 12px 14px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(20, 55, 80, 0.05);
}

.msg-bubble-row.is-mine .msg-bubble {
    border-bottom-right-radius: 6px;
}

.msg-bubble-row.is-theirs .msg-bubble {
    border-bottom-left-radius: 6px;
    box-shadow: none;
    border: 1px solid #e2e9ed;
}

.msg-inbox .message-mine,
.msg-inbox .msg-bubble.message-mine {
    background: #1aa3a8;
    color: #fff;
}

.msg-inbox .message-theirs,
.msg-inbox .msg-bubble.message-theirs {
    background: #eef3f6;
    color: #0d2b4d;
}

.msg-bubble-meta {
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.msg-bubble-body {
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.45;
}

.msg-inbox-thread-empty {
    text-align: center;
    color: #5a6c79;
    padding: 60px 20px;
}

.msg-inbox-thread-empty i {
    font-size: 28px;
    color: #1aa3a8;
    display: block;
    margin-bottom: 10px;
}

.msg-inbox-composer {
    border-top: 1px solid #e4ebf0;
    padding: 14px 16px 16px;
    background: #fff;
}

.msg-inbox-composer-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    border: 1px solid #d5e0e5;
    border-radius: 14px;
    padding: 10px;
    background: #f8fbfc;
}

.msg-inbox-composer-box:focus-within {
    border-color: #1aa3a8;
    box-shadow: 0 0 0 3px rgba(26, 163, 168, 0.12);
    background: #fff;
}

.msg-inbox-composer-input {
    width: 100%;
    border: 0;
    background: transparent;
    resize: none;
    min-height: 34px;
    max-height: 140px;
    padding: 6px;
    color: #0d2b4d;
    outline: none;
    font-size: 14px;
    line-height: 1.4;
}

.msg-inbox-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: #1aa3a8;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.msg-inbox-send-btn:hover {
    background: #168f93;
}

.msg-inbox-send-btn:disabled {
    opacity: 0.7;
}

.msg-inbox-empty-chat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: #f8fbfc;
}

.msg-inbox-empty-chat-card {
    text-align: center;
    max-width: 360px;
}

.msg-inbox-empty-chat-card i {
    font-size: 36px;
    color: #1aa3a8;
}

.msg-inbox-empty-chat-card h2 {
    margin: 12px 0 8px;
    font-size: 20px;
    color: #0d2b4d;
}

.msg-inbox-empty-chat-card p {
    margin: 0;
    color: #5a6c79;
    font-size: 14px;
}

.msg-inbox--compose .msg-compose-card {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #dbe3e8;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 28px rgba(15, 40, 60, 0.06);
}

.msg-compose-subtitle {
    color: #5a6c79;
    font-size: 14px;
}

.msg-inbox .message-pending {
    opacity: 0.7;
}

/* Indeed-style 3-column messages layout (candidate + employer) */
.msg-inbox--candidate .msg-inbox-shell,
.msg-inbox--employer .msg-inbox-shell {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    gap: 16px;
    grid-template-columns: 310px minmax(0, 1fr);
    min-height: 700px;
}

.msg-inbox--candidate .msg-inbox-shell.has-detail-panel,
.msg-inbox--employer .msg-inbox-shell.has-detail-panel {
    grid-template-columns: 300px minmax(0, 1fr) 320px;
}

.msg-inbox--candidate .msg-inbox-sidebar,
.msg-inbox--candidate .msg-inbox-chat,
.msg-inbox--candidate .msg-inbox-detail,
.msg-inbox--employer .msg-inbox-sidebar,
.msg-inbox--employer .msg-inbox-chat,
.msg-inbox--employer .msg-inbox-detail {
    background: #fff;
    border: 1px solid #dfe6ec;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(15, 40, 60, 0.04);
    overflow: hidden;
    max-height: 740px;
}

.msg-inbox-online-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e7f6ec;
    color: #0f6e33;
    font-size: 12px;
    font-weight: 700;
}

.msg-inbox-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
}

.msg-inbox-avatar--company {
    position: relative;
    border-radius: 10px;
    background: #7c4a1e;
    color: #fff;
    font-size: 16px;
}

.msg-inbox-avatar-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a;
    border: 2px solid #fff;
}

.msg-inbox-people-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand, #009fa3);
    font-size: 13px;
    font-weight: 700;
}

.msg-thread-job-summary {
    margin-bottom: 18px;
}

.msg-thread-view-job {
    text-align: center;
    margin-bottom: 10px;
}

.msg-thread-view-job a {
    color: var(--brand, #009fa3);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
}

.msg-thread-job-card {
    border: 1px solid color-mix(in srgb, var(--brand, #009fa3) 18%, #fff);
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--brand, #009fa3) 6%, #fff);
}

.msg-thread-job-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--brand, #009fa3) 14%, #fff);
    color: var(--brand-deep, #00666b);
    font-size: 13.5px;
    font-weight: 700;
}

.msg-thread-job-card-body {
    padding: 14px 16px;
    color: #1f2937;
    font-size: 13.5px;
    line-height: 1.55;
}

.msg-thread-job-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.msg-thread-job-card-line {
    color: #374151;
}

.msg-thread-date-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: #4b5563;
    font-size: 12.5px;
    font-weight: 700;
}

.msg-thread-date-divider::before,
.msg-thread-date-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.msg-bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: min(520px, 82%);
}

.msg-bubble-row.is-mine .msg-bubble-wrap {
    align-items: flex-end;
}

.msg-bubble-row.is-theirs .msg-bubble-wrap {
    align-items: flex-start;
}

.msg-bubble-wrap .msg-bubble {
    max-width: 100%;
}

.msg-bubble-wrap .msg-bubble-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 11.5px;
    color: #4b5563;
    opacity: 1;
}

.msg-bubble-sender-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #7c4a1e;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.msg-inbox-composer-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #d5e0e5;
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
}

.msg-inbox-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.msg-inbox-composer-hint {
    color: #7a8b97;
    font-size: 12px;
}

/* Right-hand Applied Application / Job Detail column */
.msg-inbox-detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.msg-detail-scroll {
    overflow-y: auto;
    flex: 1;
}

.msg-detail-section {
    padding: 16px 18px;
    border-bottom: 1px solid #eef2f6;
}

.msg-detail-section:last-child {
    border-bottom: 0;
}

.msg-detail-kicker {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #009fa3;
}

.msg-detail-job-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.msg-detail-candidate-line {
    margin-top: 10px;
    color: #5f6368;
    font-size: 13px;
    line-height: 1.45;
}

.msg-detail-meta-wrap {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.msg-detail-company-line {
    font-size: 13.5px;
    margin-bottom: 2px;
}

.msg-detail-company-link,
.msg-detail-company-name {
    color: var(--brand, #009fa3);
    font-weight: 500;
    text-decoration: underline;
}

.msg-detail-location {
    color: #6b7280;
    font-size: 13px;
}

.msg-detail-heading {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.msg-detail-bullets {
    margin: 0;
    padding-left: 18px;
    color: #374151;
    font-size: 13.5px;
    line-height: 1.65;
}

.msg-detail-inline-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--brand, #009fa3);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.msg-detail-inline-link:hover {
    text-decoration: underline;
}

.msg-detail-meta {
    margin: 10px 0 0;
    display: grid;
    gap: 8px;
}

.msg-detail-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.msg-detail-meta-row dt {
    color: #6b7280;
    font-weight: 500;
}

.msg-detail-meta-row dd {
    margin: 0;
    color: #111827;
    font-weight: 600;
    text-align: right;
}

.msg-detail-block {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
}

.msg-detail-sublabel {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 6px;
}

.msg-detail-pre {
    white-space: pre-wrap;
    font-size: 13px;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #eef2f6;
    border-radius: 8px;
    padding: 10px;
    max-height: 180px;
    overflow-y: auto;
}

.msg-detail-qa-list {
    display: grid;
    gap: 8px;
}

.msg-detail-qa-item {
    background: #f9fafb;
    border: 1px solid #eef2f6;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
}

.msg-detail-qa-q {
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}

.msg-detail-qa-a {
    color: #4b5563;
    white-space: pre-wrap;
}

.msg-detail-actions {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.msg-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #d5e0e5;
    background: #fff;
    color: #0d2b4d;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.msg-detail-btn:hover {
    background: #f4f8fa;
    color: #0d2b4d;
}

.msg-detail-btn--danger {
    color: #b42318;
    border-color: #f3c6c3;
}

.msg-detail-btn--danger:hover {
    background: #fef2f2;
    color: #912018;
}

.msg-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.msg-detail-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
}

.msg-detail-description {
    font-size: 13px;
    color: #374151;
    max-height: 280px;
    overflow-y: auto;
}

@media (max-width: 1199.98px) {
    .msg-inbox--candidate .msg-inbox-shell.has-detail-panel,
    .msg-inbox--employer .msg-inbox-shell.has-detail-panel {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .msg-inbox--candidate .msg-inbox-detail,
    .msg-inbox--employer .msg-inbox-detail {
        grid-column: 1 / -1;
        max-height: none;
    }
}

@media (max-width: 991.98px) {
    .msg-inbox-shell,
    .msg-inbox--candidate .msg-inbox-shell,
    .msg-inbox--candidate .msg-inbox-shell.has-detail-panel,
    .msg-inbox--employer .msg-inbox-shell,
    .msg-inbox--employer .msg-inbox-shell.has-detail-panel {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .msg-inbox-sidebar {
        border-right: 0;
        border-bottom: 0;
        max-height: none;
        min-height: 60vh;
    }

    .msg-inbox-chat {
        min-height: 70vh;
    }

    .msg-inbox.is-list-only .msg-inbox-chat {
        display: none;
    }

    .msg-inbox.has-active-conversation .msg-inbox-sidebar {
        display: none;
    }

    .msg-inbox.has-active-conversation .msg-inbox-back-btn {
        display: inline-flex;
    }

    .msg-inbox.is-list-only:not(:has(.msg-inbox-thread-item)) .msg-inbox-chat {
        display: flex;
    }

    .msg-inbox.is-list-only:not(:has(.msg-inbox-thread-item)) .msg-inbox-sidebar {
        border-bottom: 1px solid #e4ebf0;
        min-height: 0;
    }
}

/* Job listing rich text (description / how to apply) */
.job-rich-text {
    color: #071d35;
    font-size: 14px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.job-rich-text> :last-child {
    margin-bottom: 0;
}

.job-rich-text p {
    margin: 0 0 .75rem;
}

.job-rich-text h2,
.job-rich-text h3,
.job-rich-text h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 1rem 0 .5rem;
}

.job-rich-text ul,
.job-rich-text ol {
    padding-left: 1.4rem;
    margin: 0 0 .75rem;
}

.job-rich-text ul {
    list-style: disc;
}

.job-rich-text ol {
    list-style: decimal;
}

.job-rich-text blockquote {
    border-left: 3px solid #00a5a5;
    padding-left: 12px;
    color: #475569;
    margin: 0 0 .75rem;
}

.job-rich-text a {
    color: #00a5a5;
    text-decoration: underline;
}

.job-rich-text .ql-align-center {
    text-align: center;
}

.job-rich-text .ql-align-right {
    text-align: right;
}

.job-rich-text .ql-align-justify {
    text-align: justify;
}

.job-rich-text .ql-indent-1 {
    margin-left: 1.5rem;
}

.job-rich-text .ql-indent-2 {
    margin-left: 3rem;
}

.job-rich-text .ql-indent-3 {
    margin-left: 4.5rem;
}

.job-company-logo {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
    border-radius: 6px;
}

.job-company-website {
    color: #00a5a5;
    text-decoration: none;
}

.job-company-website:hover {
    text-decoration: underline;
}

.plan-btn.plan-btn-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.plan-once-note {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
    text-align: center;
}

/* Popular categories slider */
.category-slider {
    position: relative;
}

.category-slider-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.category-slider-viewport::-webkit-scrollbar {
    display: none;
}

.category-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 4px 2px;
    width: max-content;
}

.category-slider-track .category-tag {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
}

.category-slider.is-scrollable .category-slider-viewport {
    margin: 0 46px;
}

.category-slider-prev {
    left: 0;
}

.category-slider-next {
    right: 0;
}

.job-container {
    scroll-margin-top: 16px;
}

/* ==========================================================================
   Refined Marketing Navigation Active State & Alignment
   ========================================================================== */
.header {
    min-height: 66px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #d9e0e8;
}

.navigation ul li a {
    font-size: 14.5px;
    font-weight: 500;
    color: #202124;
    padding: 7px 12px;
    border-radius: 8px;
}

.navigation ul li a:hover {
    background: #f1f5f9;
    color: #0d2b4d;
}

.navigation ul li a.is-active {
    color: #0b5d69;
    background: #eef7f8;
    font-weight: 600;
}

/* ==========================================================================
   Candidate Application Details Page — Indeed-Inspired Professional UI
   ========================================================================== */
.candidate-panel.app-detail-page {
    background: #f5f7fa;
    padding: 28px 0 64px;
    min-height: calc(100vh - 140px);
    color: #202124;
}

.app-detail-container {
    max-width: 1280px;
}

.app-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid #d9e0e8;
}

.app-detail-header-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}

.app-detail-company-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 10px;
    border: 1px solid #d9e0e8;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.app-detail-company-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.app-detail-title-group {
    min-width: 0;
}

.candidate-panel.app-detail-page .app-detail-title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.28;
    color: #0f2537;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.candidate-panel.app-detail-page .app-detail-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    line-height: 1.45;
    color: #5f6368;
}

.app-detail-employer {
    font-weight: 600;
    color: #202124;
}

.app-detail-dot {
    color: #9aa0a6;
}

.app-detail-header-actions {
    flex: 0 0 auto;
}

/* Balanced 2-Column Grid (approx 67% / 33%) */
.app-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.05fr) minmax(300px, 1fr);
    gap: 22px;
    align-items: start;
}

.app-detail-main,
.app-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* Standardized Cards */
.candidate-panel.app-detail-page .app-card {
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    overflow: hidden;
    margin: 0;
}

.candidate-panel.app-detail-page .app-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 20px;
    background: #ffffff;
    border-bottom: 1px solid #eef1f5;
}

.app-card-title {
    margin: 0;
    font-size: 16.5px;
    font-weight: 600;
    color: #0f2537;
    line-height: 1.35;
}

.app-card-header-meta {
    font-size: 13px;
    font-weight: 500;
    color: #5f6368;
}

.app-card-header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand, #009fa3);
    text-decoration: none;
}

.app-card-header-link:hover {
    color: var(--brand-hover, #00878b);
    text-decoration: underline;
}

.candidate-panel.app-detail-page .app-card-body {
    padding: 20px;
}

/* Status Section */
.app-status-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #d6e4ff;
    background: color-mix(in srgb, var(--brand, #009fa3) 6%, #fff);
}

.app-status-banner--info,
.app-status-banner--review {
    border-color: color-mix(in srgb, var(--brand, #009fa3) 22%, #fff);
    background: #f3f7ff;
}

.app-status-banner--progress,
.app-status-banner--success {
    border-color: #cce8d6;
    background: #f2fbf5;
}

.app-status-banner--warning {
    border-color: #f5d9a8;
    background: #fffaf0;
}

.app-status-banner--danger {
    border-color: #f5c6cb;
    background: #fdf3f4;
}

.app-status-banner--neutral {
    border-color: #d9e0e8;
    background: #f8f9fb;
}

.app-status-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #ffffff;
    color: var(--brand, #009fa3);
    border: 1px solid color-mix(in srgb, var(--brand, #009fa3) 16%, transparent);
}

.app-status-banner--progress .app-status-icon,
.app-status-banner--success .app-status-icon {
    color: #188038;
    border-color: rgba(24, 128, 56, 0.2);
}

.app-status-banner--warning .app-status-icon {
    color: #b06000;
    border-color: rgba(176, 96, 0, 0.2);
}

.app-status-banner--danger .app-status-icon {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.2);
}

.app-status-banner--neutral .app-status-icon {
    color: #5f6368;
    border-color: #d9e0e8;
}

.app-status-content {
    min-width: 0;
    flex: 1 1 auto;
}

.app-status-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.app-status-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #202124;
}

.app-status-badge {
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.app-status-copy {
    font-size: 13.5px;
    line-height: 1.5;
    color: #3c4043;
}

.app-status-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eef1f5;
}

.app-status-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-status-fact-label {
    font-size: 12px;
    font-weight: 500;
    color: #5f6368;
}

.app-status-fact-value {
    font-size: 13.5px;
    font-weight: 600;
    color: #202124;
}

/* Job Summary Metadata & Description */
.app-job-closed-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #f1f3f4;
    color: #5f6368;
}

.app-job-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e7edf3;
}

.app-job-meta-item {
    margin: 0;
}

.app-job-meta-item dt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #5f6368;
    margin-bottom: 3px;
}

.app-job-meta-item dt i {
    color: var(--brand, #009fa3);
    font-size: 12px;
}

.app-job-meta-item dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #202124;
    overflow-wrap: anywhere;
}

.app-job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.app-job-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand-hover, #00878b);
    font-size: 12.5px;
    font-weight: 500;
}

.app-subheading {
    margin: 0 0 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: #0f2537;
}

.app-job-description-block {
    padding-top: 14px;
    border-top: 1px solid #eef1f5;
}

.app-prose-text {
    font-size: 14px;
    line-height: 1.65;
    color: #2d3748;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.app-expandable-full.job-rich-text,
.app-prose-text.job-rich-text {
    white-space: normal;
}

.app-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand, #009fa3);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.app-expand-toggle:hover {
    color: var(--brand-hover, #00878b);
    text-decoration: underline;
}

.app-expand-toggle i {
    font-size: 11px;
    transition: transform 0.18s ease;
}

.app-expand-toggle.is-expanded i {
    transform: rotate(180deg);
}

.app-job-footer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef1f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Screening Questions */
.app-qa-list {
    display: grid;
    gap: 12px;
}

.app-qa-item {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e7edf3;
    background: #f9fbfd;
}

.app-qa-question {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f2537;
    margin-bottom: 4px;
}

.app-qa-answer {
    font-size: 13.5px;
    line-height: 1.55;
    color: #3c4043;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Submitted Resume Document Card */
.app-doc-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #d9e0e8;
    background: #f8fafc;
    margin-bottom: 14px;
}

.app-doc-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand, #009fa3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.app-doc-info {
    min-width: 0;
    flex: 1 1 auto;
}

.app-doc-name {
    font-size: 14px;
    font-weight: 600;
    color: #202124;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-doc-meta {
    font-size: 12.5px;
    color: #5f6368;
    margin-top: 2px;
}

.app-doc-actions {
    display: grid;
    gap: 8px;
}

.app-empty-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f8f9fb;
    color: #5f6368;
    font-size: 13.5px;
}

/* Cover Letter */
.app-cover-letter-box {
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #e7edf3;
    background: #f9fbfd;
    font-size: 13.5px;
    line-height: 1.6;
    color: #2d3748;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.app-empty-copy {
    font-size: 13.5px;
    color: #5f6368;
}

/* Buttons & Actions */
.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    border: 1px solid transparent;
}

.app-btn:focus-visible {
    outline: 2px solid var(--brand, #009fa3);
    outline-offset: 2px;
}

.app-btn--primary {
    background: var(--brand, #009fa3);
    border-color: var(--brand, #009fa3);
    color: #ffffff;
}

.app-btn--primary:hover {
    background: var(--brand-hover, #00878b);
    border-color: var(--brand-hover, #00878b);
    color: #ffffff;
}

.app-btn--secondary {
    background: #ffffff;
    border-color: #d0d7de;
    color: #202124;
}

.app-btn--secondary:hover {
    background: #f3f6f9;
    border-color: #bcc6d0;
    color: #0f2537;
}

.app-btn--danger-outline {
    background: #ffffff;
    border-color: #e4b4b0;
    color: #b42318;
}

.app-btn--danger-outline:hover {
    background: #fef3f2;
    border-color: #d92d20;
    color: #912018;
}

.app-btn--danger {
    background: #b42318;
    border-color: #b42318;
    color: #ffffff;
}

.app-btn--danger:hover {
    background: #912018;
    border-color: #912018;
    color: #ffffff;
}

.app-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.app-withdraw-help {
    font-size: 13px;
    line-height: 1.5;
    color: #5f6368;
    margin-bottom: 12px;
}

/* Accessible Confirmation Dialog */
.app-confirm-dialog {
    max-width: 440px;
    width: calc(100% - 32px);
    margin: auto;
    padding: 0;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(15, 37, 55, 0.18);
    color: #202124;
}

.app-confirm-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.app-confirm-dialog-body {
    padding: 22px 22px 16px;
}

.app-confirm-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fef3f2;
    color: #b42318;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 12px;
}

.app-confirm-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #0f2537;
}

.app-confirm-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #5f6368;
}

.app-confirm-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    background: #f8fafc;
    border-top: 1px solid #eef1f5;
}

@media (max-width: 991.98px) {
    .app-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .candidate-panel.app-detail-page {
        padding: 20px 0 48px;
    }

    .app-detail-header {
        flex-direction: column;
        align-items: stretch;
    }

    .candidate-panel.app-detail-page .app-detail-title {
        font-size: 22px;
    }

    .app-detail-header-actions .app-btn {
        width: 100%;
    }

    .app-confirm-dialog-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-btn,
    .app-expand-toggle i {
        transition: none;
    }
}

/* ==========================================================================
   Jobs Listing & Job Details Page — Premium Indeed-Inspired UI
   ========================================================================== */
.jobs-section {
    background: #f5f7fa;
    padding: 28px 0 48px;
    color: #202124;
}

.jobs-discovery-container {
    max-width: 1380px;
}

.jobs-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.jobs-page-header h1 {
    font-size: 26px;
    font-weight: 600;
    color: #15304b;
    margin: 0 0 4px;
    letter-spacing: -0.015em;
}

.jobs-page-lead {
    margin: 0 0 8px;
    font-size: 14.5px;
    line-height: 1.45;
    color: #667085;
}

.jobs-page-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.jobs-page-count {
    font-size: 13.5px;
    font-weight: 500;
    color: #3c4043;
}

.jobs-page-count strong {
    color: #0f2537;
    font-weight: 600;
}

.jobs-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.jobs-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--brand, #009fa3) 28%, #fff);
    color: var(--brand-deep, #00666b);
    font-size: 12px;
    font-weight: 600;
}

.save-jobs-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #d0d7de;
    background: #ffffff;
    color: #202124;
    font-size: 13.5px;
    font-weight: 600;
}

.save-jobs-btn:hover {
    background: #f3f6f9;
    border-color: #bcc6d0;
    color: #0f2537;
}

/* Search & Filter Bar */
.job-filters {
    margin-bottom: 20px;
}

.job-filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(180px, 0.75fr) minmax(160px, 0.65fr) auto;
    gap: 12px;
    align-items: end;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}

.job-filter-field span {
    color: #3c4043;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
}

.job-filters .form-control,
.job-filters .form-select {
    height: 40px;
    min-height: 40px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    font-size: 14px;
    color: #202124;
    background-color: #ffffff;
}

.job-filters .form-control:focus,
.job-filters .form-select:focus {
    border-color: var(--brand, #009fa3);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #009fa3) 22%, transparent);
    outline: none;
}

.job-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.job-filter-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--brand, #009fa3);
    border-radius: 8px;
    background: var(--brand, #009fa3);
    color: var(--on-brand, #ffffff);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.job-filter-submit:hover {
    background: var(--brand-hover, #00878b);
    border-color: var(--brand-hover, #00878b);
}

.job-filter-submit:focus-visible {
    outline: 2px solid var(--brand, #009fa3);
    outline-offset: 2px;
}

.job-filter-reset {
    height: 40px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #d0d7de;
    background: #ffffff;
    color: #3c4043;
    font-size: 13.5px;
    font-weight: 600;
}

.job-filter-reset:hover {
    background: #f3f6f9;
    color: #0f2537;
}

/* Left Column: Job Listing Cards */
.candidate-job-card {
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 11px;
    padding: 16px 18px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.candidate-job-card:hover {
    border-color: color-mix(in srgb, var(--brand, #009fa3) 42%, #dce5ed);
    background: #fcfefe;
    box-shadow: 0 2px 8px rgba(15, 37, 55, 0.06);
}

.candidate-job-card:focus-visible {
    outline: 2px solid var(--brand, #009fa3);
    outline-offset: 2px;
}

.candidate-job-card.active {
    background: color-mix(in srgb, var(--brand, #009fa3) 8%, #fff);
    border-color: var(--brand, #009fa3);
    box-shadow: inset 3px 0 0 var(--brand, #009fa3), 0 2px 8px color-mix(in srgb, var(--brand, #009fa3) 16%, transparent);
}

.job-card-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.job-featured-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--brand, #009fa3) 28%, #fff);
    color: var(--brand-deep, #00666b);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.job-applied-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #e8f5e9;
    border: 1px solid #c3e6cb;
    color: #188038;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}

.candidate-job-card .job-title {
    font-size: 16.5px;
    font-weight: 600;
    color: #15304b;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.candidate-job-card.active .job-title {
    color: var(--brand-deep, #00666b);
}

.job-card-company-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
}

.job-card-logo {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    object-fit: contain;
    border: 1px solid #e5e9f0;
    background: #ffffff;
}

.job-card-company {
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    margin: 0 !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-job-card .job-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13.5px;
    color: #5f6368;
    margin-bottom: 12px !important;
}

.candidate-job-card .job-info li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    line-height: 1.4;
    min-width: 0;
}

.candidate-job-card .job-info li i {
    width: 14px;
    margin-right: 0;
    color: #667085;
    font-size: 12.5px;
    flex-shrink: 0;
}

.candidate-job-card .job-info li span {
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

.job-card-salary {
    font-weight: 600;
    color: #344054;
}

.job-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(217, 224, 232, 0.65);
}

.job-tags span {
    background: #f1f4f8;
    border: 1px solid #dfe5ec;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
    color: #2d3748;
}

.candidate-job-card.active .job-tags span {
    background: #ffffff;
    border-color: color-mix(in srgb, var(--brand, #009fa3) 28%, #dce5ed);
}

.candidate-job-card .job-date {
    font-size: 12px;
    color: #5f6368;
    margin-left: auto;
}

/* Right Column: Job Details Panel */
.job-container .job-details-fixed {
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.05);
    background: #ffffff;
}

.job-detail-header .detail-card {
    padding: 22px 24px 18px;
}

.job-detail-top-block {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.job-detail-top-block .job-company-logo {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 10px;
    border: 1px solid #d9e0e8;
    object-fit: contain;
    background: #ffffff;
    padding: 4px;
}

.job-detail-heading-wrap {
    min-width: 0;
    flex: 1 1 auto;
}

.job-detail-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.job-detail-title {
    font-size: 24px;
    font-weight: 600;
    color: #15304b;
    line-height: 1.28;
    margin: 0;
    overflow-wrap: anywhere;
    min-width: 0;
}

.job-detail-company-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 500;
    color: #5f6368;
}

.job-detail-company-name {
    font-weight: 600;
    color: #202124;
}

.job-detail-Compensation-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}

.job-detail-salary {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f2537;
}

.job-detail-type-inline {
    font-size: 14px;
    font-weight: 500;
    color: #5f6368;
}

.job-detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #5f6368;
}

.job-company-website {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--brand, #009fa3);
    font-weight: 600;
    text-decoration: none;
}

.job-company-website:hover {
    color: var(--brand-hover, #00878b);
    text-decoration: underline;
}

.job-company-website i {
    color: var(--brand, #009fa3);
    font-size: 12px;
    margin-right: 0;
}

.job-detail-badges {
    margin-bottom: 18px;
}

/* Action Area */
.job-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #eef1f5;
}

.jobs-section .job-apply-btn.btn-primary,
.detail-card .job-apply-btn.btn-primary,
.job-detail-sticky-actions .job-apply-btn.btn-primary {
    height: 40px;
    padding: 0 22px;
    border-radius: 8px;
    background: var(--brand, #009fa3);
    border-color: var(--brand, #009fa3);
    color: var(--on-brand, #ffffff);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jobs-section .job-apply-btn.btn-primary:hover,
.detail-card .job-apply-btn.btn-primary:hover,
.job-detail-sticky-actions .job-apply-btn.btn-primary:hover {
    background: var(--brand-hover, #00878b);
    border-color: var(--brand-hover, #00878b);
}

.jobs-section .job-apply-btn.btn-primary:focus-visible,
.detail-card .job-apply-btn.btn-primary:focus-visible,
.job-detail-sticky-actions .job-apply-btn.btn-primary:focus-visible {
    outline: 2px solid var(--brand, #009fa3);
    outline-offset: 2px;
    box-shadow: none;
}

#applyModal .btn-primary {
    background: var(--brand, #009fa3);
    border-color: var(--brand, #009fa3);
    color: var(--on-brand, #ffffff);
}

#applyModal .btn-primary:hover {
    background: var(--brand-hover, #00878b);
    border-color: var(--brand-hover, #00878b);
}

.job-applied-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    background: #f2fbf5;
    border: 1px solid #cce8d6;
}

.job-applied-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #188038;
    font-size: 13.5px;
    font-weight: 700;
}

.job-applied-date {
    font-size: 13px;
    font-weight: 500;
    color: #3c4043;
}

.job-view-application-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid #d0d7de;
    background: #ffffff;
    color: #202124;
    font-size: 13.5px;
    font-weight: 600;
}

.job-view-application-btn:hover {
    background: #f3f6f9;
    border-color: #bcc6d0;
    color: #0f2537;
}

.job-save-btn {
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    border-color: #d0d7de;
    font-size: 13.5px;
    color: #202124;
}

.job-save-btn:hover {
    background: #f3f6f9;
    border-color: #bcc6d0;
    color: #0f2537;
}

.job-save-btn.is-saved,
.job-save-btn.is-saved:hover {
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    border-color: color-mix(in srgb, var(--brand, #009fa3) 28%, #fff);
    color: var(--brand-deep, #00666b);
}

.job-more-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border-color: #d0d7de;
    color: #3c4043;
}

.job-more-btn:hover {
    background: #f3f6f9;
    border-color: #bcc6d0;
    color: #0f2537;
}

/* Job Details Body & Structured Facts Grid */
.job-detail-body > .detail-card {
    padding: 20px 24px;
}

.job-facts-section {
    border-bottom: 1px solid #eef1f5;
}

.job-facts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.job-fact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    height: 76px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #f4f8fa;
    border: 1px solid #dce5ed;
    overflow: hidden;
}

.job-fact-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand, #009fa3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.job-fact-copy {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.job-fact-label {
    font-size: 11px;
    font-weight: 500;
    color: #667085;
    line-height: 1.25;
}

.job-fact-value {
    font-size: 12.5px;
    font-weight: 600;
    color: #344054;
    line-height: 1.35;
    margin-top: 1px;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.job-truncate-tooltip {
    position: fixed;
    z-index: 1080;
    max-width: 320px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #15304b;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: 0 10px 24px rgba(15, 37, 55, 0.22);
    pointer-events: none;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Empty states */
.candidate-job-card--empty,
.job-details-empty {
    text-align: center;
    padding: 36px 20px;
}

.job-empty-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand, #009fa3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.job-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #15304b;
    margin: 0 0 4px;
}

.job-empty-reset-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--brand, #009fa3);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.job-empty-reset-link:hover {
    color: var(--brand-hover, #00878b);
    text-decoration: underline;
}

@media (max-width: 1199.98px) {
    .job-facts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .job-filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .job-filter-search,
    .job-filter-actions {
        grid-column: 1 / -1;
    }

    .job-filter-submit {
        flex: 1 1 auto;
    }

    .job-facts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .job-filter-bar {
        grid-template-columns: 1fr;
    }

    .job-detail-header .detail-card,
    .job-detail-body > .detail-card {
        padding: 16px;
    }

    .job-facts-grid {
        grid-template-columns: 1fr;
    }

    .job-fact-item {
        height: 68px;
    }
}

/* ==========================================================================
   My Applications Page — Indeed-Inspired Tracker & Balanced Footer Layout
   ========================================================================== */
.candidate-panel.my-applications-section {
    flex: 1 0 auto;
    background: #f5f7fa;
    padding: 28px 0 48px;
    color: #202124;
}

.my-apps-container {
    max-width: 1280px;
}

.my-apps-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 20px;
    margin-bottom: 18px;
}

.candidate-panel .my-apps-title {
    font-size: 27px;
    font-weight: 600;
    color: #0f2537;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.candidate-panel .my-apps-subtitle {
    font-size: 14.5px;
    color: #5f6368;
    line-height: 1.45;
}

/* Summary Strip */
.my-apps-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.my-apps-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.my-apps-stat-card:hover {
    border-color: color-mix(in srgb, var(--brand, #009fa3) 42%, #dce5ed);
    background: #fcfdff;
    color: inherit;
}

.my-apps-stat-card.is-active {
    border-color: var(--brand, #009fa3);
    background: #f4f8ff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #009fa3) 18%, transparent);
}

.my-apps-stat-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.my-apps-stat-icon--total {
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand, #009fa3);
}

.my-apps-stat-icon--submitted {
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand-hover, #00878b);
}

.my-apps-stat-icon--review {
    background: #f0f4ff;
    color: #3949ab;
}

.my-apps-stat-icon--interview {
    background: #e6f7f5;
    color: #0b6e72;
}

.my-apps-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.my-apps-stat-label {
    font-size: 12.5px;
    font-weight: 500;
    color: #5f6368;
    line-height: 1.3;
}

.my-apps-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #0f2537;
    line-height: 1.25;
}

/* Search & Filter Toolbar */
.my-apps-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.my-apps-search-wrap {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
}

.my-apps-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 13.5px;
    pointer-events: none;
}

.candidate-panel .my-apps-search-input {
    height: 40px;
    min-height: 40px;
    padding-left: 36px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    font-size: 13.5px;
    color: #202124;
    background: #ffffff;
}

.candidate-panel .my-apps-search-input:focus {
    border-color: var(--brand, #009fa3);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #009fa3) 22%, transparent);
}

.my-apps-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.candidate-panel .my-apps-select {
    height: 40px;
    min-height: 40px;
    min-width: 175px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #202124;
    background-color: #ffffff;
}

.candidate-panel .my-apps-select:focus {
    border-color: var(--brand, #009fa3);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #009fa3) 22%, transparent);
}

.my-apps-submit-btn,
.my-apps-clear-btn {
    height: 40px;
}

/* Applications Tracker Card & Table */
.candidate-panel .applications-tracker-card {
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

.applications-tracker-table thead th {
    padding: 13px 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #5f6368;
    background: #f8fafc;
    border-bottom: 1px solid #e5eaf0;
}

.applications-tracker-table tbody td {
    padding: 15px 20px;
    font-size: 14px;
    color: #202124;
    border-bottom: 1px solid #eef1f5;
    vertical-align: middle;
}

.applications-tracker-table tbody tr:last-child td {
    border-bottom: 0;
}

.applications-tracker-table tbody tr.my-apps-row:hover {
    background: #f9fbff;
}

.my-apps-job-link {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #0f2537;
    text-decoration: none;
    line-height: 1.35;
}

.my-apps-job-link:hover {
    color: var(--brand, #009fa3);
    text-decoration: underline;
}

.my-apps-job-meta {
    margin-top: 3px;
    font-size: 12.5px;
    color: #5f6368;
}

.my-apps-company-name {
    font-weight: 500;
    color: #202124;
}

.my-apps-date-cell {
    color: #5f6368;
    font-size: 13.5px;
    white-space: nowrap;
}

.my-apps-view-btn {
    height: 34px;
    padding: 0 13px;
    font-size: 13px;
    gap: 6px;
}

.my-apps-view-btn i {
    font-size: 10px;
    color: #5f6368;
}

/* Centralized Status Pill System */
.badge.app-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.badge.app-status-pill--submitted {
    background: #e8f1ff !important;
    color: var(--brand-hover, #00878b) !important;
    border-color: #c8dcff;
}

.badge.app-status-pill--review {
    background: #eef2ff !important;
    color: #3730a3 !important;
    border-color: #c7d2fe;
}

.badge.app-status-pill--shortlisted {
    background: #e6f6f4 !important;
    color: #0f5f5c !important;
    border-color: #b8e4df;
}

.badge.app-status-pill--interview {
    background: #fff7e6 !important;
    color: #9a5200 !important;
    border-color: #f7d694;
}

.badge.app-status-pill--selected {
    background: #e6f4ea !important;
    color: #137333 !important;
    border-color: #b7dfc3;
}

.badge.app-status-pill--rejected {
    background: #fce8e6 !important;
    color: #b42318 !important;
    border-color: #f5c2c0;
}

.badge.app-status-pill--withdrawn {
    background: #f1f3f4 !important;
    color: #5f6368 !important;
    border-color: #dadce0;
}

/* Mobile Cards (Hidden on Desktop) */
.my-apps-mobile-list {
    display: none;
}

.my-apps-mobile-card {
    padding: 16px;
    border-bottom: 1px solid #eef1f5;
}

.my-apps-mobile-card:last-child {
    border-bottom: 0;
}

.my-apps-mobile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.my-apps-mobile-title {
    margin: 0 0 3px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
}

.my-apps-mobile-title a {
    color: #0f2537;
    text-decoration: none;
}

.my-apps-mobile-company {
    font-size: 13px;
    color: #5f6368;
}

.my-apps-mobile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f4f8;
}

.my-apps-mobile-date {
    font-size: 12.5px;
    color: #5f6368;
}

/* Empty & Filtered Empty States */
.my-apps-empty-state {
    padding: 48px 24px;
    text-align: center;
    max-width: 460px;
    margin: 0 auto;
}

.my-apps-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand, #009fa3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.my-apps-empty-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: #0f2537;
}

.candidate-panel .my-apps-empty-copy {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #5f6368;
}

/* ==========================================================================
   Site Footer — modern CareerMirror marketplace footer
   ========================================================================== */
.site-footer {
    margin-top: auto;
    flex-shrink: 0;
    background: #f4f8fa;
    border-top: 1px solid #e2e8f0;
    color: #667085;
}

.footer-container {
    max-width: 1200px;
}

.footer-main {
    padding: 44px 0 36px;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(150px, 0.85fr));
    gap: 28px 48px;
    align-items: start;
}

.footer-grid:has(.footer-nav:nth-of-type(3)) {
    grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 0.75fr));
}

.footer-brand {
    max-width: 300px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    text-decoration: none;
}

.footer-logo img {
    display: block;
    width: auto;
    max-width: 168px;
    height: auto;
}

.footer-brand-copy {
    margin: 0;
    max-width: 280px;
    color: #667085;
    font-size: 14.5px;
    line-height: 1.6;
}

.footer-heading {
    margin: 0 0 14px;
    color: #15304b;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.footer-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.footer-link-list a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #344054;
    font-size: 14.5px;
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.18s ease;
}

.footer-link-list a i {
    font-size: 11px;
    color: #009fa3;
}

.footer-link-list a:hover,
.footer-link-list a:focus-visible {
    color: #00878b;
}

.footer-link-list a:focus-visible {
    outline: 2px solid #009fa3;
    outline-offset: 3px;
    border-radius: 4px;
}

.footer-bottom {
    border-top: 1px solid #e2e8f0;
    background: #eef4f7;
    padding: 18px 0;
}

.footer-copyright {
    margin: 0;
    text-align: center;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.5;
}

@media (max-width: 991.98px) {
    .footer-main {
        padding: 36px 0 28px;
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
        gap: 24px 28px;
    }

    .footer-brand {
        grid-column: 1 / -1;
        max-width: 420px;
    }
}

@media (max-width: 767.98px) {
    .footer-main {
        padding: 32px 0 24px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 20px;
    }

    .footer-brand {
        grid-column: 1 / -1;
        max-width: none;
    }

    .footer-logo img {
        max-width: 150px;
    }

    .footer-link-list a {
        min-height: 28px;
    }

    .footer-bottom {
        padding: 16px 0;
    }
}

@media (max-width: 479.98px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 991.98px) {
    .my-apps-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .candidate-panel.my-applications-section {
        padding: 20px 0 40px;
    }

    .my-apps-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .my-apps-search-wrap {
        flex: 1 1 auto;
    }

    .my-apps-filter-group {
        width: 100%;
    }

    .my-apps-select-wrap {
        flex: 1 1 calc(50% - 4px);
    }

    .candidate-panel .my-apps-select {
        min-width: 0;
        width: 100%;
    }

    .my-apps-submit-btn,
    .my-apps-clear-btn {
        width: 100%;
    }

    .my-apps-table-wrap {
        display: none;
    }

    .my-apps-mobile-list {
        display: block;
    }
}

@media (max-width: 479.98px) {
    .my-apps-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .my-apps-stat-card {
        padding: 10px 12px;
    }
}

/* ==========================================================================
   My Resumes Page — Premium Document Manager UI
   ========================================================================== */
.candidate-panel.my-resumes-section,
.candidate-panel.resume-upload-page {
    flex: 1 0 auto;
    background: #f5f7fa;
    padding: 28px 0 48px;
    color: #202124;
}

.my-resumes-container {
    max-width: 1280px;
}

.my-resumes-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 18px;
}

.my-resumes-header-copy {
    max-width: 720px;
}

.candidate-panel .my-resumes-title {
    font-size: 27px;
    font-weight: 600;
    color: #0f2537;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-bottom: 4px;
}

.candidate-panel .my-resumes-lead {
    font-size: 14.5px;
    font-weight: 500;
    color: #202124;
    line-height: 1.45;
}

.candidate-panel .my-resumes-sub {
    font-size: 13.5px;
    color: #5f6368;
    line-height: 1.5;
}

.my-resumes-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.my-resumes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
}

.candidate-panel .my-resumes-btn--primary {
    background: #009fa3;
    border-color: #009fa3;
    color: #ffffff;
}

.candidate-panel .my-resumes-btn--primary:hover {
    background: #00888c;
    border-color: #00888c;
    color: #ffffff;
}

.candidate-panel .my-resumes-btn--secondary {
    background: #ffffff;
    border: 1px solid #d0d7de;
    color: #202124;
}

.candidate-panel .my-resumes-btn--secondary:hover {
    background: #f3f6f9;
    border-color: #bcc6d0;
    color: #0f2537;
}

/* Resume Overview Strip */
.my-resumes-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.my-resumes-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 10px;
    min-width: 0;
}

.my-resumes-stat-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.my-resumes-stat-icon--total {
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand, #009fa3);
}

.my-resumes-stat-icon--default {
    background: #e6f6f4;
    color: #0f5f5c;
}

.my-resumes-stat-icon--breakdown {
    background: #f1f4f8;
    color: #3c4043;
}

.my-resumes-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.my-resumes-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: #5f6368;
    line-height: 1.3;
}

.my-resumes-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #0f2537;
    line-height: 1.3;
}

.my-resumes-stat-value--sm {
    font-size: 14px;
    font-weight: 600;
}

/* Resume List Card & Table */
.candidate-panel .panel-card.resume-list-card {
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    overflow: visible;
}

.resume-list-table thead th {
    padding: 13px 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #5f6368;
    background: #f8fafc;
    border-bottom: 1px solid #e5eaf0;
}

.resume-list-table tbody td {
    padding: 15px 20px;
    font-size: 14px;
    color: #202124;
    border-bottom: 1px solid #eef1f5;
    vertical-align: middle;
}

.resume-list-table tbody tr:last-child td {
    border-bottom: 0;
}

.resume-list-table tbody tr.resume-row:hover {
    background: #f9fbff;
}

.resume-doc-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.resume-doc-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.resume-doc-icon.is-pdf {
    background: #fef2f2;
    color: #b42318;
    border: 1px solid #f7d3d0;
}

.resume-doc-icon.is-word {
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand, #009fa3);
    border: 1px solid color-mix(in srgb, var(--brand, #009fa3) 22%, #fff);
}

.resume-doc-icon.is-builder {
    background: #e6f6f4;
    color: #0b6e72;
    border: 1px solid #bce5e0;
}

.resume-doc-info {
    min-width: 0;
}

.resume-title-link {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #0f2537;
    text-decoration: none;
    line-height: 1.35;
}

.resume-title-link:hover {
    color: var(--brand, #009fa3);
    text-decoration: underline;
}

.resume-doc-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: #5f6368;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.resume-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    background: #f1f4f8;
    color: #3c4043;
    border: 1px solid #e2e8f0;
}

.resume-type-pill i {
    font-size: 11px;
    color: #5f6368;
}

.badge.resume-default-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #e6f6f4;
    color: #0b6e72;
    border: 1px solid #b8e4df;
    font-size: 12.5px;
    font-weight: 600;
}

.resume-secondary-status {
    font-size: 13px;
    color: #5f6368;
}

.resume-date-cell {
    font-size: 13.5px;
    color: #5f6368;
    white-space: nowrap;
}

.resume-Quick-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.resume-inline-action {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #d0d7de;
    background: #ffffff;
    color: #202124;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.resume-inline-action:hover {
    background: #f3f6f9;
    border-color: #bcc6d0;
    color: #0f2537;
}

.resume-actions-toggle {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #d0d7de;
    background: #ffffff;
    color: #3c4043;
}

.resume-actions-toggle:hover {
    background: #f3f6f9;
    border-color: #bcc6d0;
    color: #0f2537;
}

.resume-actions-dropdown .dropdown-menu {
    z-index: 1080;
    min-width: 196px;
    padding: 6px;
    border: 1px solid #d9e0e8;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 37, 55, 0.12) !important;
}

.resume-actions-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: #202124;
}

.resume-actions-dropdown .dropdown-item i {
    width: 16px;
    text-align: center;
    color: #5f6368;
}

.resume-actions-dropdown .dropdown-item.text-danger,
.resume-actions-dropdown .dropdown-item.text-danger i {
    color: #b42318 !important;
}

.resume-actions-dropdown .dropdown-item:hover {
    background: #f3f6f9;
}

.resume-actions-dropdown .dropdown-item.text-danger:hover {
    background: #fef2f2;
}

/* Mobile Resume Cards */
.resume-mobile-list {
    display: none;
}

.resume-mobile-card {
    padding: 16px;
    border-bottom: 1px solid #eef1f5;
}

.resume-mobile-card:last-child {
    border-bottom: 0;
}

.resume-mobile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.resume-mobile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #f1f4f8;
}

.resume-mobile-view-btn {
    height: 34px;
    padding: 0 12px;
    font-size: 12.5px;
}

/* Empty State */
.my-resumes-empty {
    padding: 48px 24px;
    text-align: center;
    max-width: 460px;
    margin: 0 auto;
}

.my-resumes-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand, #009fa3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.my-resumes-empty-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: #0f2537;
}

.my-resumes-empty-copy {
    margin: 0 0 18px;
    font-size: 14px;
    color: #5f6368;
}

.my-resumes-empty-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

@media (max-width: 991.98px) {
    .my-resumes-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .candidate-panel.my-resumes-section {
        padding: 20px 0 40px;
    }

    .my-resumes-header-actions {
        width: 100%;
    }

    .my-resumes-header-actions .my-resumes-btn {
        flex: 1 1 auto;
    }

    .resume-list-scroll {
        display: none;
    }

    .resume-mobile-list {
        display: block;
    }
}
/* ==========================================================================
   Saved Jobs Page � Indeed-Inspired Candidate List
   ========================================================================== */
.candidate-panel.csaved-section {
    flex: 1 0 auto;
    background: #f5f7fa;
    padding: 28px 0 48px;
    color: #5f6368;
}

.csaved-container {
    max-width: 1100px;
}

.csaved-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 20px;
    margin-bottom: 18px;
}

.csaved-header-copy {
    min-width: 0;
    flex: 1 1 280px;
}

.csaved-title {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 600;
    color: #202124;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.csaved-subtitle {
    margin: 0;
    max-width: 560px;
    font-size: 14.5px;
    line-height: 1.45;
    color: #5f6368;
}

.csaved-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.csaved-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
}

.csaved-search-wrap {
    position: relative;
    flex: 1 1 220px;
    min-width: 180px;
}

.csaved-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a949e;
    font-size: 13px;
    pointer-events: none;
}

.csaved-input,
.csaved-select {
    min-height: 40px;
    border: 1px solid #d9e0e8;
    border-radius: 8px;
    font-size: 14px;
    color: #202124;
    background: #fff;
}

.csaved-input {
    padding-left: 36px;
}

.csaved-search-wrap .csaved-input {
    width: 100%;
}

.csaved-filter-group .csaved-input {
    padding-left: 12px;
}

.csaved-input:focus,
.csaved-select:focus {
    border-color: #009fa3;
    box-shadow: 0 0 0 3px rgba(0, 159, 163, 0.12);
}

.csaved-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
}

.csaved-field {
    flex: 0 1 160px;
    min-width: 140px;
}

.csaved-submit-btn {
    flex: 0 0 auto;
}

.csaved-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.csaved-card {
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.csaved-card:hover {
    border-color: #c5d0db;
    box-shadow: 0 8px 20px rgba(32, 33, 36, 0.06);
}

.csaved-card.is-unavailable {
    background: #fcfcfd;
}

.csaved-card-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.csaved-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 10px;
    border: 1px solid #e6ebf0;
    background: #f8fafc;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.csaved-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csaved-logo--fallback {
    color: #009fa3;
    font-size: 18px;
    background: #eef8f8;
}

.csaved-card-main {
    min-width: 0;
    flex: 1 1 auto;
}

.csaved-card-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 4px;
}

.csaved-job-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #202124;
    line-height: 1.35;
    word-break: break-word;
}

.csaved-job-title a {
    color: inherit;
    text-decoration: none;
}

.csaved-job-title a:hover {
    color: #009fa3;
}

.csaved-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: #fef3f2;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.csaved-company {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: #3c4043;
}

.csaved-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 10px;
}

.csaved-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #5f6368;
    line-height: 1.35;
}

.csaved-meta-item i {
    font-size: 11px;
    color: #8a949e;
}

.csaved-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.csaved-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand, #009fa3);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.csaved-excerpt {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #5f6368;
}

.csaved-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eef2f6;
}

.csaved-remove-form {
    margin: 0;
}

.csaved-missing {
    display: flex;
    align-items: flex-start;
}

.csaved-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
}

.csaved-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef8f8;
    color: #009fa3;
    font-size: 18px;
    margin-bottom: 14px;
}

.csaved-empty-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #202124;
}

.csaved-empty-copy {
    margin: 0 0 16px;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.5;
    color: #5f6368;
}

.csaved-pagination {
    margin-top: 18px;
}

@media (max-width: 767.98px) {
    .candidate-panel.csaved-section {
        padding: 20px 0 36px;
    }

    .csaved-title {
        font-size: 24px;
    }

    .csaved-header-actions {
        width: 100%;
    }

    .csaved-header-actions .app-btn {
        width: 100%;
        justify-content: center;
    }

    .csaved-toolbar {
        padding: 12px;
    }

    .csaved-field,
    .csaved-search-wrap {
        flex: 1 1 100%;
        min-width: 0;
    }

    .csaved-submit-btn,
    .csaved-filter-group .app-btn--secondary {
        flex: 1 1 auto;
        justify-content: center;
    }

    .csaved-card {
        padding: 16px;
    }

    .csaved-card-actions .app-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ==========================================================================
   Job Alerts Page ? Modern Category Preference Center
   ========================================================================== */
.candidate-panel.job-alerts-section {
    flex: 1 0 auto;
    background: #f5f7fa;
    padding: 28px 0 48px;
    color: #202124;
}

.job-alerts-container {
    max-width: 1120px;
}

.job-alerts-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 20px;
    margin-bottom: 18px;
}

.job-alerts-header-copy {
    max-width: 680px;
}

.job-alerts-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand-hover, #00878b);
    font-size: 12px;
    font-weight: 600;
}

.candidate-panel .job-alerts-title {
    font-size: 27px;
    font-weight: 600;
    color: #0f2537;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-bottom: 4px;
}

.candidate-panel .job-alerts-subtitle {
    font-size: 14.5px;
    color: #5f6368;
    line-height: 1.5;
}

.job-alerts-email-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid #d9e0e8;
    color: #3c4043;
    font-size: 13px;
}

.job-alerts-email-pill i {
    color: var(--brand, #009fa3);
}

.job-alerts-email-pill strong {
    color: #0f2537;
    font-weight: 600;
}

/* Preferences Panel Card */
.candidate-panel .panel-card.job-alerts-card {
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

.candidate-panel .job-alerts-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 18px 22px;
    background: #ffffff;
    border-bottom: 1px solid #eef1f5;
}

.job-alerts-card-title {
    margin: 0 0 2px;
    font-size: 17px;
    font-weight: 600;
    color: #0f2537;
}

.job-alerts-card-sub {
    font-size: 13px;
    font-weight: 400;
    color: #5f6368;
}

.job-alerts-counter-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.job-alerts-unsaved-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff7e6;
    border: 1px solid #f7d694;
    color: #9a5200;
    font-size: 12px;
    font-weight: 600;
}

.job-alerts-count-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--brand, #009fa3) 22%, #fff);
    color: var(--brand-hover, #00878b);
    font-size: 12.5px;
    font-weight: 600;
}

.candidate-panel .job-alerts-card-body {
    padding: 20px 22px 24px;
}

/* Search & Bulk Actions Toolbar */
.job-alerts-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin-bottom: 18px;
}

.job-alerts-search-wrap {
    position: relative;
    flex: 1 1 280px;
    max-width: 360px;
}

.job-alerts-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 13.5px;
    pointer-events: none;
}

.candidate-panel .job-alerts-search-input {
    height: 40px;
    min-height: 40px;
    padding-left: 36px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    font-size: 13.5px;
    color: #202124;
    background: #ffffff;
}

.candidate-panel .job-alerts-search-input:focus {
    border-color: var(--brand, #009fa3);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #009fa3) 22%, transparent);
}

.job-alerts-bulk-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.job-alerts-bulk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 13px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    background: #ffffff;
    color: #202124;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.job-alerts-bulk-btn:hover {
    background: #f3f6f9;
    border-color: #bcc6d0;
    color: #0f2537;
}

.job-alerts-bulk-btn:focus-visible {
    outline: 2px solid var(--brand, #009fa3);
    outline-offset: 2px;
}

.job-alerts-bulk-btn i {
    font-size: 11.5px;
    color: #5f6368;
}

/* 3-Column Category Selection Cards */
.job-alerts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.alert-category-item {
    min-width: 0;
}

.alert-category-card {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    height: 100%;
    min-height: 46px;
    padding: 11px 14px;
    margin: 0;
    border: 1px solid #d9e0e8;
    border-radius: 9px;
    background: #ffffff;
    color: #202124;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.alert-category-card:hover {
    border-color: color-mix(in srgb, var(--brand, #009fa3) 42%, #dce5ed);
    background: #f9fbff;
}

.alert-category-card:has(.alert-category-check:focus-visible) {
    outline: 2px solid var(--brand, #009fa3);
    outline-offset: 2px;
}

.alert-category-card.is-selected,
.alert-category-card:has(.alert-category-check:checked) {
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    border-color: var(--brand, #009fa3);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #009fa3) 22%, transparent);
}

.alert-category-check.form-check-input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1.5px solid #9aa5b1;
    border-radius: 5px;
    cursor: pointer;
}

.alert-category-check.form-check-input:checked {
    background-color: var(--brand, #009fa3);
    border-color: var(--brand, #009fa3);
}

.alert-category-label {
    font-size: 14px;
    font-weight: 500;
    color: #202124;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.alert-category-card.is-selected .alert-category-label,
.alert-category-card:has(.alert-category-check:checked) .alert-category-label {
    font-weight: 600;
    color: #0f2537;
}

/* Empty & No-Match States */
.job-alerts-empty-state,
.job-alerts-no-match {
    padding: 36px 20px;
    text-align: center;
    max-width: 440px;
    margin: 0 auto;
}

.job-alerts-empty-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand, #009fa3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.job-alerts-empty-icon--sm {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

.job-alerts-empty-title,
.job-alerts-no-match-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f2537;
}

.job-alerts-clear-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 7px;
    border: 1px solid #d0d7de;
    background: #ffffff;
    color: var(--brand, #009fa3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.job-alerts-clear-search-btn:hover {
    background: #f3f6f9;
}

/* Card Footer & Save Action */
.candidate-panel .job-alerts-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 16px 22px;
    background: #f8fafc;
    border-top: 1px solid #eef1f5;
}

.job-alerts-footer-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #5f6368;
}

.job-alerts-footer-hint i {
    color: var(--brand, #009fa3);
}

.candidate-panel .job-alerts-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border-radius: 8px;
    background: #009fa3;
    border-color: #009fa3;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.candidate-panel .job-alerts-save-btn:hover {
    background: #00888c;
    border-color: #00888c;
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .job-alerts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .candidate-panel.job-alerts-section {
        padding: 20px 0 40px;
    }

    .job-alerts-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .job-alerts-search-wrap {
        max-width: none;
        flex: 1 1 auto;
    }

    .job-alerts-bulk-actions {
        width: 100%;
    }

    .job-alerts-bulk-btn {
        flex: 1 1 calc(50% - 4px);
    }

    .job-alerts-grid {
        grid-template-columns: 1fr;
    }

    .candidate-panel .job-alerts-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .candidate-panel .job-alerts-save-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Candidate Profile Page � Modern Professional Editor
   ========================================================================== */
.candidate-panel.cprofile-section {
    flex: 1 0 auto;
    background: #f5f7fa;
    padding: 28px 0 48px;
    color: #5f6368;
}

.cprofile-container {
    max-width: 1180px;
}

.cprofile-header {
    margin-bottom: 20px;
}

.cprofile-title {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 600;
    color: #202124;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.cprofile-subtitle {
    margin: 0;
    max-width: 640px;
    font-size: 14.5px;
    line-height: 1.45;
    color: #5f6368;
}

.cprofile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.95fr) minmax(260px, 0.85fr);
    gap: 20px;
    align-items: start;
}

.cprofile-main,
.cprofile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.cprofile-card {
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
    overflow: hidden;
}

.cprofile-card-header {
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f6;
}

.cprofile-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #202124;
    line-height: 1.3;
}

.cprofile-card-sub {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: #5f6368;
}

.cprofile-card-body {
    padding: 18px;
}

.cprofile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.cprofile-field {
    min-width: 0;
}

.cprofile-field--full {
    grid-column: 1 / -1;
}

.cprofile-field--narrow {
    max-width: 280px;
}

.candidate-panel.cprofile-section .form-label {
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #202124;
}

.candidate-panel.cprofile-section .form-control,
.candidate-panel.cprofile-section .form-select {
    min-height: 42px;
    border: 1px solid #d9e0e8;
    border-radius: 8px;
    font-size: 14.5px;
    color: #202124;
    background: #fff;
    box-shadow: none;
}

.candidate-panel.cprofile-section .form-control:focus,
.candidate-panel.cprofile-section .form-select:focus {
    border-color: var(--brand, #009fa3);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #009fa3) 12%, transparent);
}

.candidate-panel.cprofile-section .form-control.is-invalid,
.candidate-panel.cprofile-section .form-select.is-invalid {
    border-color: #b42318;
}

.candidate-panel.cprofile-section .form-control.is-invalid:focus,
.candidate-panel.cprofile-section .form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.cprofile-textarea {
    min-height: 120px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

.cprofile-group-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #202124;
}

.cprofile-salary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cprofile-phone .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.cprofile-phone .input-group .form-select {
    max-width: 11.5rem;
    flex: 0 0 11.5rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cprofile-phone .input-group .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.cprofile-photo-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.cprofile-avatar-wrap {
    width: 112px;
    height: 112px;
}

.cprofile-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #d9e0e8;
    background: #f8fafc;
    display: block;
}

.cprofile-avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef8f8;
    color: #009fa3;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cprofile-upload {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cprofile-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cprofile-upload-btn {
    width: 100%;
    justify-content: center;
    cursor: pointer;
}

.cprofile-file-name {
    font-size: 12.5px;
    color: #3c4043;
    word-break: break-all;
}

.cprofile-help {
    font-size: 12.5px;
    color: #5f6368;
    line-height: 1.4;
}

.cprofile-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding-top: 4px;
    border-top: 1px solid #eef2f6;
    margin-top: 2px;
    text-align: left;
}

.cprofile-remove .form-check-input {
    margin: 0;
    flex: 0 0 auto;
}

.cprofile-remove .form-check-label {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #202124;
}

.cprofile-sidebar-save {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
    position: sticky;
    top: 16px;
}

.cprofile-save-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
}

.cprofile-save-hint {
    font-size: 12.5px;
    line-height: 1.4;
    color: #5f6368;
    text-align: center;
}

@media (max-width: 991.98px) {
    .cprofile-layout {
        grid-template-columns: 1fr;
    }

    .cprofile-sidebar-save {
        position: static;
    }

    .cprofile-field--narrow {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .candidate-panel.cprofile-section {
        padding: 20px 0 36px;
    }

    .cprofile-title {
        font-size: 24px;
    }

    .cprofile-grid,
    .cprofile-salary-grid {
        grid-template-columns: 1fr;
    }

    .cprofile-phone .input-group {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cprofile-phone .input-group .form-select,
    .cprofile-phone .input-group .form-control {
        max-width: none;
        flex: 1 1 100%;
        border-radius: 8px;
    }

    .cprofile-card-body {
        padding: 16px;
    }
}

/* ==========================================================================
   Candidate Account Settings ? modern security page
   ========================================================================== */
.candidate-panel.csettings-section {
    flex: 1 0 auto;
    background: #f5f7fa;
    padding: 28px 0 48px;
    color: #5f6368;
}

.csettings-container {
    max-width: 1120px;
}

.csettings-header {
    margin-bottom: 22px;
}

.csettings-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #009fa3;
}

.csettings-kicker i {
    font-size: 13px;
}

.csettings-title {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 600;
    color: #202124;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.csettings-subtitle {
    margin: 0;
    max-width: 540px;
    font-size: 14.5px;
    line-height: 1.45;
    color: #5f6368;
}

.csettings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    gap: 22px;
    align-items: start;
}

.csettings-main,
.csettings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.csettings-card {
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
    overflow: hidden;
}

.csettings-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f6;
    background: #fafbfc;
}

.csettings-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #202124;
    line-height: 1.3;
}

.csettings-card-sub {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: #5f6368;
}

.csettings-card-body {
    padding: 20px;
}

.csettings-field {
    margin-bottom: 16px;
}

.csettings-helper {
    margin: -8px 0 16px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #5f6368;
}

.candidate-panel.csettings-section .form-label {
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #202124;
}

.candidate-panel.csettings-section .form-control {
    min-height: 44px;
    border: 1px solid #d9e0e8;
    border-radius: 8px;
    font-size: 14.5px;
    color: #202124;
    background: #fff;
    box-shadow: none;
}

.candidate-panel.csettings-section .form-control:focus {
    border-color: var(--brand, #009fa3);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #009fa3) 12%, transparent);
}

.candidate-panel.csettings-section .form-control.is-invalid {
    border-color: #b42318;
}

.candidate-panel.csettings-section .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.candidate-panel.csettings-section .password-toggle:hover,
.candidate-panel.csettings-section .password-toggle:focus-visible {
    color: var(--brand, #009fa3);
    outline: none;
}

.candidate-panel.csettings-section .invalid-feedback {
    font-size: 12.5px;
    color: #b42318;
}

.csettings-actions {
    margin-top: 8px;
    padding-top: 4px;
}

.csettings-submit {
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: #009fa3;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    box-shadow: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.csettings-submit:hover,
.csettings-submit:focus-visible {
    background: #00878a;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 159, 163, 0.18);
}

.csettings-submit:disabled,
.csettings-submit.is-processing {
    opacity: 0.72;
    cursor: wait;
}

.csettings-info-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.csettings-info-row {
    display: grid;
    grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
    gap: 12px 16px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid #eef2f6;
}

.csettings-info-row:first-child {
    padding-top: 2px;
}

.csettings-info-row:last-child {
    padding-bottom: 2px;
    border-bottom: 0;
}

.csettings-info-row dt {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #5f6368;
    line-height: 1.45;
}

.csettings-info-value {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #202124;
    line-height: 1.45;
    word-break: break-word;
}

.csettings-info-value--wrap {
    overflow-wrap: anywhere;
}

.csettings-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0.28em 0.7em;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

@media (max-width: 991.98px) {
    .csettings-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 767.98px) {
    .candidate-panel.csettings-section {
        padding: 20px 0 36px;
    }

    .csettings-title {
        font-size: 24px;
    }

    .csettings-card-header,
    .csettings-card-body {
        padding: 16px;
    }

    .csettings-info-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 0;
    }

    .csettings-submit {
        width: 100%;
    }
}

/* ==========================================================================
   Employer Job Postings Page ? Indeed / LinkedIn-Inspired Management UI
   ========================================================================== */
.dashboard-section.edash.ejobs {
    flex: 1 0 auto;
    background: #f5f7fa;
    padding: 28px 0 48px;
    color: #202124;
}

.dashboard-section.edash.ejobs {
    background: #f5f7fa;
    padding: 28px 0 48px;
}

.ejobs-container {
    max-width: 1320px;
}

.ejobs .ejobs-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 20px;
    margin-bottom: 18px;
}

.ejobs .ejobs-page-title {
    margin: 0 0 4px;
    font-size: 28px;
    font-weight: 600;
    color: #0f2537;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.ejobs .ejobs-page-sub {
    font-size: 14.5px;
    color: #5f6368;
    line-height: 1.45;
}

.ejobs .ejobs-post-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    background: #009fa3;
    border-color: #009fa3;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.ejobs .ejobs-post-btn:hover {
    background: #00888c;
    border-color: #00888c;
    color: #ffffff;
}

/* Compact Subscription & Credit Notices */
.ejobs .ejobs-plan-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid #f5d8a8;
    border-radius: 10px;
    background: #fffcf5;
}

.ejobs-plan-notice-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ejobs-plan-notice-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
    background: #fff3db;
    color: #b54708;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.ejobs .ejobs-plan-notice-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #7a2e0e;
}

.ejobs .ejobs-plan-notice-text {
    font-size: 13px;
    color: #5f6368;
}

.ejobs .ejobs-plan-notice-btn {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid #d0d7de;
    color: #202124;
}

.ejobs .ejobs-plan-notice-btn:hover {
    background: #f3f6f9;
    border-color: #bcc6d0;
    color: #0f2537;
}

.ejobs-credit-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 16px;
    margin-bottom: 16px;
    border: 1px solid #cfe5e6;
    border-radius: 10px;
    background: #f2fbfb;
}

.ejobs-credit-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 7px;
    background: #dff4f4;
    color: #0b6e72;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.ejobs .ejobs-credit-meta {
    font-size: 13.5px;
    font-weight: 500;
    color: #202124;
}

.ejobs .ejobs-credit-meta strong {
    color: #0b6e72;
    font-weight: 700;
}

.ejobs-credit-link {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand, #009fa3);
    text-decoration: none;
}

.ejobs-credit-link:hover {
    text-decoration: underline;
}

/* Compact Overview Strip */
.ejobs-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ejobs-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ejobs-stat-card:hover {
    border-color: color-mix(in srgb, var(--brand, #009fa3) 42%, #dce5ed);
    background: #fcfdff;
    color: inherit;
}

.ejobs-stat-card.is-active {
    border-color: var(--brand, #009fa3);
    background: #f4f8ff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #009fa3) 18%, transparent);
}

.ejobs-stat-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.ejobs-stat-icon--all {
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand, #009fa3);
}

.ejobs-stat-icon--active {
    background: #e6f4ea;
    color: #188038;
}

.ejobs-stat-icon--draft {
    background: #f1f4f8;
    color: #3c4043;
}

.ejobs-stat-icon--inactive {
    background: #fff7e6;
    color: #b54708;
}

.ejobs-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ejobs-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: #5f6368;
    line-height: 1.3;
}

.ejobs-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #0f2537;
    line-height: 1.25;
}

/* Cohesive Filter Toolbar */
.ejobs .ejobs-toolbar-filters {
    display: block;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.ejobs-toolbar-grid {
    display: grid;
    grid-template-columns: minmax(190px, 1.3fr) minmax(145px, 0.85fr) minmax(150px, 0.9fr) minmax(135px, 0.8fr) minmax(135px, 0.8fr) auto;
    gap: 10px;
    align-items: end;
}

.ejobs-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.ejobs .ejobs-filter-label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #3c4043;
}

.ejobs-input-icon-wrap {
    position: relative;
}

.ejobs-input-icon-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 13px;
    pointer-events: none;
}

.ejobs .ejobs-search-input,
.ejobs .ejobs-location-input,
.ejobs .ejobs-date-input,
.ejobs .ejobs-filter-select {
    width: 100%;
    min-width: 0;
    height: 40px !important;
    min-height: 40px !important;
    border: 1px solid #d0d7de;
    border-radius: 8px !important;
    font-size: 13.5px;
    color: #202124;
    background-color: #ffffff;
}

.ejobs .ejobs-search-input,
.ejobs .ejobs-location-input {
    padding-left: 34px;
}

.ejobs .ejobs-search-input:focus,
.ejobs .ejobs-location-input:focus,
.ejobs .ejobs-date-input:focus,
.ejobs .ejobs-filter-select:focus {
    border-color: var(--brand, #009fa3);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #009fa3) 22%, transparent);
    outline: none;
}

.ejobs-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ejobs .ejobs-apply-btn,
.ejobs .ejobs-clear-btn {
    min-height: 40px;
    height: 40px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ejobs .ejobs-apply-btn {
    background: var(--brand, #009fa3);
    border-color: var(--brand, #009fa3);
    color: #ffffff;
}

.ejobs .ejobs-apply-btn:hover {
    background: var(--brand-hover, #00878b);
    border-color: var(--brand-hover, #00878b);
    color: #ffffff;
}

/* Job Postings Panel & Table */
.ejobs .ejobs-panel {
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    background: #ffffff;
}

.ejobs .ejobs-table thead th {
    padding: 13px 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #5f6368;
    background: #f8fafc;
    border-bottom: 1px solid #e5eaf0;
    white-space: nowrap;
}

.ejobs .ejobs-table tbody td {
    padding: 15px 18px;
    font-size: 13.5px;
    color: #202124;
    border-bottom: 1px solid #eef1f5;
    vertical-align: middle;
}

.ejobs .ejobs-table tbody tr:last-child td {
    border-bottom: 0;
}

.ejobs .ejobs-table tbody tr.ejobs-row:hover {
    background: #f9fbff;
}

.ejobs-col-title {
    width: 32%;
    min-width: 220px;
}

.ejobs-col-location {
    width: 18%;
    min-width: 140px;
}

.ejobs-col-status {
    width: 11%;
    min-width: 105px;
}

.ejobs-col-date {
    width: 12%;
    min-width: 110px;
}

.ejobs-col-applicants {
    width: 13%;
    min-width: 125px;
}

.ejobs-col-actions {
    width: 72px;
}

.ejobs-title-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ejobs .ejobs-title-link {
    font-size: 15px;
    font-weight: 600;
    color: #0f2537;
    text-decoration: none;
    line-height: 1.35;
}

.ejobs .ejobs-title-link:hover {
    color: var(--brand, #009fa3);
    text-decoration: underline;
}

.ejobs-featured-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #fff7e6;
    border: 1px solid #f7d694;
    color: #9a5200;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
}

.ejobs-featured-pill i {
    font-size: 10px;
}

.ejobs-title-meta {
    margin-top: 3px;
    font-size: 12.5px;
    color: #5f6368;
}

.ejobs-location-text {
    color: #3c4043;
    line-height: 1.4;
    display: inline-block;
    max-width: 240px;
    overflow-wrap: anywhere;
}

.ejobs-cell-date {
    color: #5f6368;
    white-space: nowrap;
}

.ejobs-applicants-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f1f4f8;
    border: 1px solid #e2e8f0;
    color: #3c4043;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ejobs-applicants-pill.has-applicants {
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    border-color: color-mix(in srgb, var(--brand, #009fa3) 22%, #fff);
    color: var(--brand-hover, #00878b);
}

.ejobs-applicants-pill:hover {
    background: #e2ecff;
    border-color: #b4cdfa;
    color: var(--brand-hover, #00878b);
    text-decoration: none;
}

.ejobs-applicants-pill i {
    font-size: 11.5px;
}

/* Action Menu Dropdown Enhancements */
.ejobs .ejobs-menu-toggle {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border-color: #d9e0e8;
    color: #3c4043;
}

.ejobs .ejobs-menu-toggle:hover,
.ejobs .ejobs-menu-toggle[aria-expanded="true"] {
    border-color: var(--brand, #009fa3);
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    color: var(--brand-hover, #00878b);
}

.ejobs-menu-dropdown {
    min-width: 196px;
    padding: 6px;
    border: 1px solid #d9e0e8;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 37, 55, 0.14);
}

.ejobs-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: #202124;
}

.ejobs-menu-item i {
    width: 16px;
    text-align: center;
    color: #5f6368;
    font-size: 13px;
}

.ejobs-menu-item.is-danger,
.ejobs-menu-item.is-danger i {
    color: #b42318;
}

.ejobs-menu-divider {
    height: 1px;
    margin: 5px 4px;
    background: #eef1f5;
}

.ejobs-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f4f8;
}

.ejobs-card-edit-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand, #009fa3);
    text-decoration: none;
}

.ejobs-card-edit-link i {
    font-size: 10px;
}

@media (max-width: 1199.98px) {
    .ejobs-toolbar-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ejobs-toolbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 991.98px) {
    .ejobs-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ejobs-toolbar-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ejobs-field--search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .dashboard-section.edash.ejobs {
        padding: 20px 0 40px;
    }

    .ejobs .ejobs-page-title {
        font-size: 24px;
    }

    .ejobs-header-actions,
    .ejobs .ejobs-post-btn {
        width: 100%;
        justify-content: center;
    }

    .ejobs-toolbar-grid {
        grid-template-columns: 1fr;
    }

    .ejobs-toolbar-actions {
        width: 100%;
    }

    .ejobs .ejobs-apply-btn,
    .ejobs .ejobs-clear-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ==========================================================================
   Resume Viewer � Professional Document Preview (Candidate & Employer)
   ========================================================================== */
.resume-viewer-page {
    flex: 1 0 auto;
    background: #f5f7fa;
    padding: 28px 0 48px;
    color: #5f6368;
}

.resume-viewer-container {
    max-width: 1100px;
}

.resume-viewer-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 20px;
    margin-bottom: 18px;
}

.resume-viewer-header-copy {
    min-width: 0;
    flex: 1 1 260px;
}

.resume-viewer-title {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 600;
    color: #202124;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.resume-viewer-subtitle {
    font-size: 14.5px;
    line-height: 1.45;
    color: #5f6368;
}

.resume-viewer-dot {
    margin: 0 6px;
    color: #9aa0a6;
}

.resume-viewer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.resume-document {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(32, 33, 36, 0.06);
    padding: 36px 40px;
}

.resume-doc-header {
    padding-bottom: 22px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e8edf2;
}

.resume-doc-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.resume-doc-avatar {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #d9e0e8;
    background: #f8fafc;
}

.resume-doc-name {
    margin: 0 0 4px;
    font-size: 30px;
    font-weight: 700;
    color: #202124;
    letter-spacing: -0.02em;
    line-height: 1.2;
    word-break: break-word;
}

.resume-doc-headline {
    font-size: 16px;
    font-weight: 600;
    color: #3c4043;
    line-height: 1.4;
}

.resume-doc-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.resume-doc-contact li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: #5f6368;
    line-height: 1.4;
    word-break: break-word;
}

.resume-doc-contact i {
    width: 14px;
    text-align: center;
    color: #009fa3;
    font-size: 12px;
}

.resume-doc-contact a {
    color: var(--brand, #009fa3);
    text-decoration: none;
}

.resume-doc-contact a:hover {
    text-decoration: underline;
}

.resume-doc-section {
    padding-top: 22px;
}

.resume-doc-section + .resume-doc-section {
    border-top: 1px solid #eef2f6;
    margin-top: 22px;
}

.resume-doc-section-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #009fa3;
}

.resume-doc-body {
    font-size: 14px;
    line-height: 1.55;
    color: #202124;
}

.resume-doc-entries {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.resume-doc-entry-title {
    margin: 0 0 3px;
    font-size: 15.5px;
    font-weight: 600;
    color: #202124;
    line-height: 1.35;
}

.resume-doc-entry-meta {
    font-size: 13.5px;
    font-weight: 500;
    color: #3c4043;
    line-height: 1.4;
}

.resume-doc-entry-dates {
    margin-top: 2px;
    font-size: 12.5px;
    color: #5f6368;
}

.resume-doc-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.resume-doc-skills li {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand, #009fa3) 12%, #fff);
    border: 1px solid #d7e4ff;
    color: var(--brand-hover, #00878b);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}

.resume-doc-list {
    margin: 0;
    padding-left: 1.15rem;
    color: #202124;
    font-size: 14px;
    line-height: 1.55;
}

.resume-doc-list li + li {
    margin-top: 6px;
}

.resume-doc-list-strong {
    font-weight: 600;
}

.resume-doc-link {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand, #009fa3);
    text-decoration: none;
}

.resume-doc-link:hover {
    text-decoration: underline;
}

.resume-uploaded {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 12px;
}

.resume-uploaded-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef8f8;
    color: #009fa3;
    font-size: 18px;
    margin-bottom: 12px;
}

.resume-uploaded-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #202124;
    word-break: break-word;
}

.resume-uploaded-meta {
    font-size: 13.5px;
    color: #5f6368;
}

@media (max-width: 767.98px) {
    .resume-viewer-page {
        padding: 20px 0 36px;
    }

    .resume-viewer-title {
        font-size: 24px;
    }

    .resume-viewer-actions {
        width: 100%;
    }

    .resume-viewer-actions .app-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .resume-document {
        padding: 22px 18px;
        border-radius: 10px;
    }

    .resume-doc-name {
        font-size: 24px;
    }

    .resume-doc-identity {
        align-items: flex-start;
    }

    .resume-doc-avatar {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }
}

@media print {
    .no-print,
    .header,
    .site-footer,
    .app-toast-root {
        display: none !important;
    }

    html body {
        background: #ffffff;
    }

    .resume-viewer-page {
        background: #ffffff;
        padding: 0;
    }

    .resume-viewer-container {
        max-width: none;
        padding: 0;
    }

    .resume-document {
        width: 100%;
        max-width: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    .resume-doc-section {
        break-inside: avoid;
    }

    a[href]::after {
        content: none !important;
    }
}

/* ==========================================================================
   Secure Checkout � Modern SaaS Checkout Layout
   ========================================================================== */
.employer-panel.checkout-modern {
    flex: 1 0 auto;
    background: #f5f7fa;
    padding: 28px 0 48px;
    color: #5f6368;
}

.checkout-modern .checkout-container {
    max-width: 1160px;
}

.checkout-modern .checkout-header {
    margin-bottom: 18px;
}

.checkout-modern .checkout-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #009fa3;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.checkout-modern .checkout-back:hover {
    color: #007f83;
    text-decoration: underline;
}

.checkout-modern .checkout-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
}

.checkout-modern .checkout-header-copy {
    min-width: 0;
    flex: 1 1 280px;
}

.checkout-modern .checkout-title {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 600;
    color: #202124;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.checkout-modern .checkout-subtitle {
    max-width: 520px;
    font-size: 15px;
    line-height: 1.45;
    color: #5f6368;
}

.checkout-modern .checkout-plan-hero {
    max-width: none;
    min-width: 220px;
    padding: 14px 16px;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
}

.checkout-modern .checkout-plan-hero__name {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    color: #202124;
}

.checkout-modern .checkout-plan-hero__amount {
    font-size: 32px;
    font-weight: 700;
    color: #202124;
    letter-spacing: -0.02em;
}

.checkout-modern .checkout-plan-hero__cadence {
    font-size: 14px;
    color: #5f6368;
}

.checkout-modern .checkout-plan-hero__compare {
    margin-top: 6px;
}

.checkout-modern .checkout-plan-hero__compare span {
    color: #188038;
}

.checkout-modern .checkout-dev-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #f5d8a8;
    border-radius: 10px;
    background: #fffcf5;
    color: #7a2e0e;
}

.checkout-modern .checkout-dev-banner__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff3db;
    color: #b54708;
    font-size: 14px;
}

.checkout-modern .checkout-dev-banner__title {
    font-size: 13.5px;
    font-weight: 700;
    color: #7a2e0e;
}

.checkout-modern .checkout-dev-banner__text {
    font-size: 13px;
    line-height: 1.4;
    color: #5f6368;
}

.checkout-modern .checkout-result {
    margin-bottom: 16px;
}

.checkout-modern .checkout-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.35fr);
    gap: 20px;
    align-items: start;
}

.checkout-modern .panel-card {
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
    overflow: hidden;
    background: #ffffff;
}

.checkout-modern .panel-card-header {
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f6;
    font-size: 16px;
    font-weight: 700;
    color: #202124;
}

.checkout-modern .panel-card-body {
    padding: 18px;
}

.checkout-modern .checkout-summary-plan {
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 600;
    color: #202124;
}

.checkout-modern .checkout-summary-row {
    padding: 10px 0;
    border-bottom-color: #eef2f6;
}

.checkout-modern .checkout-summary-row dt {
    color: #5f6368;
    font-size: 13.5px;
}

.checkout-modern .checkout-summary-row dd {
    color: #202124;
    font-size: 13.5px;
    font-weight: 600;
}

.checkout-modern .checkout-summary-row--due {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 2px solid #d9e0e8;
}

.checkout-modern .checkout-summary-row--due dt,
.checkout-modern .checkout-summary-row--due dd {
    font-size: 15px;
    font-weight: 700;
    color: #202124;
}

.checkout-modern .checkout-methods-label {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #202124;
}

.checkout-modern .checkout-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

@media (min-width: 768px) {
    .checkout-modern .checkout-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.checkout-modern .payment-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 92px;
    margin: 0;
    padding: 14px;
    border: 1px solid #d9e0e8;
    border-radius: 11px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-modern .payment-option:hover {
    border-color: #b7dfe0;
    background: #f8fcfc;
}

.checkout-modern .payment-option.is-selected,
.checkout-modern .payment-option:has(input:checked) {
    border-color: #009fa3;
    background: #eef8f8;
    box-shadow: inset 0 0 0 1px rgba(0, 159, 163, 0.25);
}

.checkout-modern .payment-option:focus-within {
    outline: 2px solid var(--brand, #009fa3);
    outline-offset: 2px;
}

.checkout-modern .payment-option__title {
    font-size: 14px;
    font-weight: 700;
    color: #202124;
}

.checkout-modern .payment-option__icon {
    color: #009fa3;
}

.checkout-modern .payment-option__desc {
    font-size: 12.5px;
    line-height: 1.4;
    color: #5f6368;
}

.checkout-modern .checkout-billing-note {
    margin-bottom: 14px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #5f6368;
}

.checkout-modern .checkout-pay-btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 10px;
    background: #009fa3;
    border-color: #009fa3;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

.checkout-modern .checkout-pay-btn:hover {
    background: #00888c;
    border-color: #00888c;
    color: #ffffff;
}

.checkout-modern .checkout-pay-btn:focus-visible {
    outline: 2px solid var(--brand, #009fa3);
    outline-offset: 2px;
}

.checkout-modern .checkout-trust {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eef2f6;
}

.checkout-modern .checkout-trust__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: #202124;
}

.checkout-modern .checkout-trust__title i {
    color: #009fa3;
}

.checkout-modern .checkout-trust__text,
.checkout-modern .checkout-terms {
    font-size: 13px;
    line-height: 1.5;
    color: #5f6368;
}

.checkout-modern .checkout-terms {
    margin-top: 12px;
}

.checkout-modern .checkout-terms a {
    color: #009fa3;
    font-weight: 600;
    text-decoration: none;
}

.checkout-modern .checkout-terms a:hover {
    text-decoration: underline;
}

@media (max-width: 991.98px) {
    .checkout-modern .checkout-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .employer-panel.checkout-modern {
        padding: 20px 0 36px;
    }

    .checkout-modern .checkout-title {
        font-size: 24px;
    }

    .checkout-modern .checkout-plan-hero {
        width: 100%;
    }

    .checkout-modern .checkout-plan-hero__amount {
        font-size: 28px;
    }

    .checkout-modern .checkout-methods {
        grid-template-columns: 1fr;
    }

    .checkout-modern .payment-option {
        min-height: 0;
    }
}

/* ==========================================================================
   Employer Order Details � billing confirmation
   ========================================================================== */
.employer-panel.eorder-section {
    flex: 1 0 auto;
    background: #f5f7fa;
    padding: 28px 0 48px;
    color: #5f6368;
}

.eorder-container {
    max-width: 1120px;
}

.eorder-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
    margin-bottom: 24px;
    padding: 18px 20px;
    border: 1px solid #d9e0e8;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
}

.eorder-status--success,
.eorder-status--activation,
.eorder-status--paid-pending {
    background: #ecfdf3;
    border-color: #abe2c4;
}

.eorder-status--pending {
    background: #fff8eb;
    border-color: #f2d6a8;
}

.eorder-status--failed {
    background: #fef3f2;
    border-color: #f2c4c0;
}

.eorder-status--refunded {
    background: #f8fafc;
    border-color: #d9e0e8;
}

.eorder-status-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    flex: 1 1 280px;
}

.eorder-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #fff;
    color: #067647;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(32, 33, 36, 0.08);
}

.eorder-status--pending .eorder-status-icon {
    color: #b54708;
}

.eorder-status--failed .eorder-status-icon {
    color: #b42318;
}

.eorder-status--refunded .eorder-status-icon {
    color: #5f6368;
}

.eorder-status-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 4px;
}

.eorder-status-title {
    font-size: 18px;
    font-weight: 700;
    color: #202124;
    line-height: 1.3;
}

.eorder-status-message {
    color: #5f6368;
    font-size: 14.5px;
    line-height: 1.45;
}

.eorder-status-badge {
    font-size: 12px;
    font-weight: 600;
}

.eorder-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.eorder-header {
    margin-bottom: 22px;
}

.eorder-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--brand, #009fa3);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.eorder-back:hover,
.eorder-back:focus-visible {
    color: #1c4585;
    text-decoration: underline;
}

.eorder-title {
    margin: 0 0 4px;
    font-size: 30px;
    font-weight: 600;
    color: #202124;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.eorder-order-number {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #009fa3;
    letter-spacing: 0.01em;
}

.eorder-subtitle {
    max-width: 560px;
    margin: 0 0 12px;
    color: #5f6368;
    font-size: 14.5px;
    line-height: 1.45;
}

.eorder-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    color: #5f6368;
    font-size: 13.5px;
}

.eorder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
    gap: 20px;
    align-items: start;
}

.eorder-main,
.eorder-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.eorder-card {
    background: #fff;
    border: 1px solid #d9e0e8;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.04);
    overflow: hidden;
}

.eorder-card-header {
    padding: 16px 18px 12px;
    border-bottom: 1px solid #eef2f6;
    background: #fafbfc;
}

.eorder-card-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 4px;
}

.eorder-card-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: #202124;
    line-height: 1.3;
}

.eorder-card-sub {
    color: #5f6368;
    font-size: 13.5px;
    line-height: 1.4;
}

.eorder-card-body {
    padding: 8px 18px 16px;
}

.eorder-rows {
    display: flex;
    flex-direction: column;
}

.eorder-row {
    display: grid;
    grid-template-columns: minmax(120px, 42%) minmax(0, 1fr);
    gap: 10px 16px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f6;
}

.eorder-row:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.eorder-row dt {
    margin: 0;
    color: #5f6368;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
}

.eorder-row dd {
    margin: 0;
    color: #202124;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    word-break: break-word;
}

.eorder-row--emphasis dd {
    color: #009fa3;
    font-size: 16px;
    font-weight: 700;
}

.eorder-reference {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.eorder-reference-value {
    overflow-wrap: anywhere;
}

.eorder-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #d9e0e8;
    border-radius: 6px;
    background: #fff;
    color: #5f6368;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.eorder-copy-btn:hover,
.eorder-copy-btn:focus-visible {
    border-color: var(--brand, #009fa3);
    color: var(--brand, #009fa3);
    outline: none;
}

.eorder-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px !important;
}

.eorder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.eorder-btn--primary {
    border: 0;
    background: #009fa3;
    color: #fff;
}

.eorder-btn--primary:hover,
.eorder-btn--primary:focus-visible {
    background: #00878a;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 159, 163, 0.18);
}

.eorder-btn--secondary {
    border: 1px solid #d9e0e8;
    background: #fff;
    color: #202124;
}

.eorder-btn--secondary:hover,
.eorder-btn--secondary:focus-visible {
    border-color: var(--brand, #009fa3);
    color: var(--brand, #009fa3);
    background: #fff;
}

.eorder-note {
    color: #5f6368;
    font-size: 14px;
    line-height: 1.5;
    padding-top: 8px;
}

@media (max-width: 991.98px) {
    .eorder-layout {
        grid-template-columns: 1fr;
    }

    .eorder-title {
        font-size: 26px;
    }
}

@media (max-width: 767.98px) {
    .employer-panel.eorder-section {
        padding: 20px 0 36px;
    }

    .eorder-status,
    .eorder-card-header,
    .eorder-card-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .eorder-status-actions,
    .eorder-actions {
        width: 100%;
    }

    .eorder-status-actions .eorder-btn,
    .eorder-actions .eorder-btn {
        width: 100%;
    }

    .eorder-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}