@keyframes l3 {to{transform: rotate(1turn)}}

.sc-login-required {
    margin: 100px auto;
    text-align: center;
}
.sc-login-required p{
    margin-bottom: 20px;
}
.jobsearch-employer-dashboard-nav h3{
    text-align: center;
    font-size: 22px !important;
}
.jobsearch-employer-profile-form select{
    border-radius: 30px !important;
    height: 41px !important;
}
.type-radio{
    display: flex !important;
    flex-direction: column;
}
.type-radio span{
    display: flex;
    align-items: center;
    color: #000;
    font-size: 14px;
}
.type-radio span input{
    margin-right: 10px;
}
.sc-tab-content h2{
    font-size: 26px !important;
}
.sc-tab-content{
    display: none;
}
#recruiter-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.table-wrap{
    overflow-x: auto;
    clear: both;
}
#recruiter-dashboard-table thead {
    background-color: #9c9efe;
    color: white;
    text-align: left;
}

#recruiter-dashboard-table th,
#recruiter-dashboard-table td {
    padding: 12px 10px;
    border: 1px solid #fff;
    min-width: 80px;
    line-height: 1.3;
}
#recruiter-dashboard-table td{
    color: #000;
}
#recruiter-dashboard-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

#recruiter-dashboard-table tbody tr:hover {
    background-color: #f1f1f1;
}

/* Status colors */
.mpjs-status,
#recruiter-dashboard-table .mpjs-status {
    font-weight: 500;
    line-height: 1.5;
}

.mpjs-text-warning,
#recruiter-dashboard-table .mpjs-text-warning {
    color: #ffc000;
}

.mpjs-text-danger,
#recruiter-dashboard-table .mpjs-text-danger {
    color: #fb353f;
}

.mpjs-text-success,
#recruiter-dashboard-table .mpjs-text-success {
    color: #00b050;
}

.mpjs-text-gray,
#recruiter-dashboard-table .mpjs-text-gray {
    color: gray;
}

.mpjs-text-brown,
#recruiter-dashboard-table .mpjs-text-brown {
    color: #993300;
}

/* Action buttons */
#recruiter-dashboard-table button,
#recruiter-dashboard-table a {
    padding: 6px 10px !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px !important;
    text-decoration: none;
    height: auto;
    line-height: 1.2;
    /*max-width: 70px;*/
    text-wrap: auto;
}

#recruiter-dashboard-table a {
    color: #6a0dad;
    padding: 6px 0 !important;
}

#recruiter-dashboard-table a.review-profile-btn,
#recruiter-dashboard-table a.reviewed-profile-btn {
    padding: 6px 5px !important;
    font-weight: 500;
}

#recruiter-dashboard-table a.review-profile-btn {
    color: #333 !important;
    background: #fff !important;
}

#recruiter-dashboard-table a.reviewed-profile-btn {
    color: #9c9efe !important;
    background: none !important;
}

#recruiter-dashboard-table .no-submissions {
    color: red;
    font-weight: bold;
    display: inline-block;
}

@media only screen and (min-width: 920px) {
    #recruiter-dashboard-table {
        table-layout: fixed;
    }
}

.switch-btn-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    border: 1px solid #9c9efe;
    border-radius: 0.4rem;
}

.switch-btn-group.border-transparent {
    border-color: transparent;
}

.switch-btn-group .switch-btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.switch-btn-group label,
.jobsearch-employer-profile-form .switch-btn-group label {
    margin: 0;
}

.mpjs-btn,
button.mpjs-btn,
input.mpjs-btn,
.jobsearch-typo-wrap .mpjs-btn,
.jobsearch-employer-profile-form input.mpjs-btn,
.switch-btn-group > .switch-btn {
    position: relative;
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: #9c9efe;
    background-color: transparent;
    border: 0;
    padding: 6px 20px;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.switch-btn-group > span.switch-btn {
    cursor: auto;
}

.mpjs-btn,
button.mpjs-btn,
input.mpjs-btn,
.jobsearch-typo-wrap .mpjs-btn,
.jobsearch-employer-profile-form input.mpjs-btn {
    border: 1px solid #9c9efe;
}

.mpjs-btn-actions p {
    margin-top: 5px;
    margin-bottom: 20px;
}

.mpjs-btn-action {
    display: flex;
    /*align-items: center;*/
    gap: 20px;
}

.mpjs-btn-action,
.jobsearch-typo-wrap .mpjs-btn-action {
    /*margin-top: 40px;*/
}

.mpjs-btn-actions .mpjs-btn {
    height: 40px;
    text-wrap: auto;
    line-height: 1.2;
    font-weight: 400;
    flex-grow: 0;
}

.mpjs-btn.style-1,
.mpjs-btn-actions .mpjs-btn.style-1,
.jobsearch-typo-wrap .mpjs-btn.style-1,
.jobsearch-typo-wrap .mpjs-btn.style-1.mpjs-btn-primary {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpjs-btn.style-2,
.mpjs-btn-actions .mpjs-btn.style-2,
.jobsearch-typo-wrap .mpjs-btn.style-2,
.jobsearch-typo-wrap .mpjs-btn.style-2.mpjs-btn-primary {
    height: 50px;
    max-width: 200px;
    line-height: 1.1;
    display: flex;
    align-items: center;
}

.mpjs-btn-actions.mpjs-btn-sm .mpjs-btn {
    width: 150px;
}

#freelance-profile-preview-form .mpjs-btn-actions {
    margin: 30px 0;
}

#freelance-profile-preview-form .jobsearch-alert {
    float: none;
}

.jobsearch-main-content {
    position: relative;
}

.mpjs-btn.mpjs-btn-primary,
.mpjs-btn.mpjs-btn-primary:hover,
.mpjs-btn.mpjs-btn-primary:focus,
.mpjs-btn.mpjs-btn-primary:active,
#recruiter-dashboard-table a.mpjs-btn.mpjs-btn-primary,
#recruiter-dashboard-table a.mpjs-btn.mpjs-btn-primary:hover,
#recruiter-dashboard-table a.mpjs-btn.mpjs-btn-primary:focus,
#recruiter-dashboard-table a.mpjs-btn.mpjs-btn-primary:active,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-primary,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-primary:hover,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-primary:focus,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-primary:active {
    color: #fff;
    border-color: #9c9efe;
    background-color: #9c9efe;
}

.mpjs-btn.mpjs-btn-success,
.mpjs-btn.mpjs-btn-success:hover,
.mpjs-btn.mpjs-btn-success:focus,
.mpjs-btn.mpjs-btn-success:active,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-success,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-success:hover,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-success:focus,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-success:active {
    color: #fff;
    border-color: #00b050;
    background-color: #00b050;
}

.mpjs-btn.mpjs-btn-warning,
.mpjs-btn.mpjs-btn-warning:hover,
.mpjs-btn.mpjs-btn-warning:focus,
.mpjs-btn.mpjs-btn-warning:active,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-warning,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-warning:hover,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-warning:focus,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-warning:active {
    color: #fff;
    border-color: #ffc000;
    background-color: #ffc000;
}

.mpjs-btn.mpjs-btn-danger,
.mpjs-btn.mpjs-btn-danger:hover,
.mpjs-btn.mpjs-btn-danger:focus,
.mpjs-btn.mpjs-btn-danger:active,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-danger,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-danger:hover,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-danger:focus,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-danger:active {
    color: #fff;
    border-color: #fb353f;
    background-color: #fb353f;
}

.mpjs-btn.mpjs-btn-orange,
.mpjs-btn.mpjs-btn-orange:hover,
.mpjs-btn.mpjs-btn-orange:focus,
.mpjs-btn.mpjs-btn-orange:active,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-orange,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-orange:hover,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-orange:focus,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-orange:active {
    color: #fff;
    border-color: #ffa500;
    background-color: #ffa500;
}

.mpjs-btn.mpjs-btn-green,
.mpjs-btn.mpjs-btn-green:hover,
.mpjs-btn.mpjs-btn-green:focus,
.mpjs-btn.mpjs-btn-green:active,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-green,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-green:hover,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-green:focus,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-green:active {
    color: #fff;
    border-color: #84c15a;
    background-color: #84c15a;
}

.mpjs-btn.mpjs-btn-blue,
.mpjs-btn.mpjs-btn-blue:hover,
.mpjs-btn.mpjs-btn-blue:focus,
.mpjs-btn.mpjs-btn-blue:active,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-blue,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-blue:hover,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-blue:focus,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-blue:active {
    color: #fff;
    border-color: #008dc9;
    background-color: #008dc9;
}

.mpjs-btn.mpjs-btn-disable,
.mpjs-btn.mpjs-btn-disable:hover,
.mpjs-btn.mpjs-btn-disable:focus,
.mpjs-btn.mpjs-btn-disable:active,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-disable,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-disable:hover,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-disable:focus,
.jobsearch-typo-wrap .mpjs-btn.mpjs-btn-disable:active {
    color: #fff !important;
    border-color: #aaa !important;
    background-color: #aaa !important;
    cursor: auto !important;
}

/*.switch-btn-group > .switch-btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.switch-btn-group > .switch-btn:nth-child(n+3),
.switch-btn-group > :not(.switch-btn-check)+.switch-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}*/

.switch-btn-group > .switch-btn:not(:first-child) {
    margin-left: -1px;
}

.switch-btn-group .switch-btn-success {
    color: #00b050;
}

.switch-btn-group .switch-btn-warning {
    color: #ffc000;
}

.switch-btn-group .switch-btn-danger {
    color: #fb353f;
}

.switch-btn-group .switch-btn-check:active+.switch-btn-primary,
.switch-btn-group .switch-btn-check:checked+.switch-btn-primary,
.switch-btn-group .switch-btn-primary.active {
    color: #fff;
    border-color: #9c9efe;
    background-color: #9c9efe;
}

.switch-btn-group .switch-btn-check:active+.switch-btn-success,
.switch-btn-group .switch-btn-check:checked+.switch-btn-success,
.switch-btn-group .switch-btn-success.active {
    color: #fff;
    border-color: #9c9efe;
    background-color: #00b050;
}

.switch-btn-group .switch-btn-check:active+.switch-btn-warning,
.switch-btn-group .switch-btn-check:checked+.switch-btn-warning,
.switch-btn-group .switch-btn-warning.active {
    color: #fff;
    border-color: #9c9efe;
    background-color: #ffc000;
}

.switch-btn-group .switch-btn-check:active+.switch-btn-danger,
.switch-btn-group .switch-btn-check:checked+.switch-btn-danger,
.switch-btn-group .switch-btn-danger.active {
    color: #fff;
    border-color: #9c9efe;
    background-color: #fb353f;
}

.mpjs-msg.mpjs-msg-error {
    color: #fb353f;
}

.mpjs-msg.mpjs-msg-success {
    color: #00b050;
}

.freelancer-submission-page .freelance-submission-actions {
    display: flex;
    /*align-items: center;*/
}
.freelancer-submission-page .freelance-submission-actions .mpjs-btn{
    margin-right: 15px;
}

.mpjs-sc-table td,
.mpjs-sc-table th {
    padding: 5px 10px;
}

table.mpjs-sc-table-form,
table.mpjs-sc-table-form th,
table.mpjs-sc-table-form tr,
table.mpjs-sc-table-form td {
    border: 0;
    background: none !important;
}

table.mpjs-sc-table-form td {
    vertical-align: middle;
    padding: 5px 0;
}

button:disabled,
.jobsearch-disable-btn {
    position: relative;
    opacity: 0.5;
}

.jobsearch-disable-btn-loading {
    position: relative;
    opacity: 0.5;
}

.jobsearch-disable-btn-loading:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    margin-left: -10px;
    width: 20px;
    padding: 4px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
          mask: var(--_m);
    -webkit-mask-composite: source-out;
          mask-composite: subtract;
    animation: l3 1s infinite linear;
}

#mpjs-sc-assign-recruiter-modal .mpjs-filter-recruiter {
    margin-top: 20px;
}

#mpjs-sc-assign-recruiter-modal #mpjs-sc-assign-recruiter-table {
    margin-top: 30px;
}

#mpjs-sc-assign-recruiter-modal input {
    padding: 5px 10px;
    border-color: #9c9efe;
}

#mpjs-sc-assign-recruiter-modal label,
#mpjs-sc-assign-recruiter-modal .label,
.jobsearch-employer-profile-form .label {
    font-size: 14px;
    margin-bottom: 13px;
    font-weight: 500;
    color: #333333;
    float: left;
    width: 100%;
    line-height: 1;
}

.mpjs-pagination {
    display: flex;
    gap: 5px;
    margin: 0;
}

.mpjs-pagination .pagination-item {
    margin: 10px 0 0 0;
    padding: 2px 8px;
    border: 1px solid #9c9efe;
    color: #9c9efe;
    background: #fff;
}

.mpjs-pagination .pagination-item.current-page {
    color: #fff;
    background: #9c9efe;
}

.mpjs-dropdown {
    position: relative;
}

.mpjs-dropdown-menu,
.jobsearch-typo-wrap .mpjs-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 8px 0 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    border: 0;
    background: none;
}

.mpjs-dropdown-menu-inner {
    position: relative;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
    min-width: 300px;
    background-color: #fff;
    background-clip: padding-box;
}

.mpjs-dropdown-menu-inner:before {
    content: "";
    position: absolute;
    border-color: rgba(194, 225, 245, 0);
    border: solid transparent;
    border-bottom-color: white;
    border-width: 8px;
    margin-left: 0;
    top: -16px;
    left: 10px;
    z-index: 1;
}

.mpjs-dropdown-item,
.jobsearch-typo-wrap .mpjs-dropdown-item {
    display: inline-block;
    width: 100%;
    padding: 5px 15px;
}

.mpjs-dropdown:hover .mpjs-dropdown-menu {
    display: block;
}

.jobsearch-typo-wrap table.mpjs-sc-table > tbody > tr > td {
    line-height: 1.5;
}
.jobsearch-employer-profile-form .custom-tablet-view{
    position: relative;
}

.jobsearch-employer-profile-form label.label-checkbox,
.jobsearch-employer-profile-form .label.label-checkbox {
    display: flex;
    justify-items: center;
    gap: 10px;
    vertical-align: middle;
    line-height: 20px;
    font-weight: 300;
    margin-bottom: 8px;
}

.jobsearch-modal .jobsearch-alert.jobsearch-success-alert,
.jobsearch-modal .jobsearch-alert.jobsearch-error-alert {
    margin-bottom: 30px;
}

.resubmission-info,
.jobsearch-typo-wrap .jobsearch-employer-profile-form li p.resubmission-info {
    margin: 0 !important;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.message-block,
.jobsearch-typo-wrap .message-block {
    margin-top: 8px;
}

.message-block p,
.jobsearch-typo-wrap .jobsearch-employer-profile-form li .message-block p {
    margin: 0;
    line-height: 1.3;
    display: block;
}

.jobsearch-typo-wrap .freelance-contract-button.mpjs-btn {
    cursor: auto;
}

#recruiter-dashboard-table td {
    vertical-align: middle;
}

table table {
    font-size: inherit;
    table-layout: fixed;
}

table.mpjs-sc-table-none,
table.mpjs-sc-table-none th,
table.mpjs-sc-table-none tr,
table.mpjs-sc-table-none td,
#recruiter-dashboard-table table.mpjs-sc-table-none th,
#recruiter-dashboard-table table.mpjs-sc-table-none td,
#recruiter-dashboard-table table.mpjs-sc-table-none tbody tr:nth-child(even) {
    border: 0;
    background: none !important;
    padding: 0;
    margin: 0;
    min-width: auto;
    text-align: left;
}

table.mpjs-sc-table-none th,
#recruiter-dashboard-table table.mpjs-sc-table-none th {
    padding-top: 5px;
}

table.mpjs-sc-table-none.align-right th,
#recruiter-dashboard-table table.mpjs-sc-table-none.align-right th {
    text-align: left;
    padding-right: 5px;
}

table.mpjs-sc-table-none td,
#recruiter-dashboard-table table.mpjs-sc-table-none td {
    vertical-align: middle;
    padding: 0;
    word-break: break-word;
}

@media (max-width: 1441px) {
    .sc-admin-panel .jobsearch-column-3 {
        width: 23%;
    }

    .sc-admin-panel .jobsearch-column-9 {
        width: 77%;
    }
}

@media (max-width: 767px) {
    #recruiter-dashboard-table {
        table-layout: fixed;
    }

    #recruiter-dashboard-table table {
        font-size: inherit;
    }
}

#list .jobsearch-employer-box-section {
    margin-top: 60px;
    margin-bottom: 10px;
}

.table-counter {
    clear: both;
    margin-bottom: 5px;
    font-size: 14px;
}

#list .jobsearch-employer-box-section:first-child {
    margin-top: 0;
}

.jobsearch-submission-status-filter-form.jobsearch-employer-search {
    margin: 0 0 30px;
}

.jobsearch-submission-status-filter-form .jobsearch-submission-status-filter {
    width: 100%;
}

.jobsearch-submission-status-filter-form .selectize-control.single .selectize-dropdown {
    min-width: 200px;
}

.empty-record {
    height: 120px;
    text-align: center;
}

.mpjs-pagination-default,
.jobsearch-typo-wrap .mpjs-pagination-default {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin: 0;
    margin-top: 30px;
}

.mpjs-pagination-default .page-numbers {
    background: #fff;
    border: 1px solid #9C9EFE;
    border-radius: 4px;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    margin: 5px;
}

.mpjs-pagination-default .page-numbers.current {
    background: #9C9EFE;
    color: #fff;
}

.sc-content .table-counter,
.sc-content .jobsearch-user-form label {
    font-size: 14px;
    font-weight: 500;
}

.sc-content input,
.sc-content select,
.sc-content .selectize-control,
.sc-content form input,
.sc-content form textarea,
.sc-content form select,
.sc-content .jobsearch-employer-profile-form li input,
.sc-content .jobsearch-employer-profile-form li textarea,
.sc-content .jobsearch-employer-profile-form li select {
    font-size: 13px;
    font-weight: 300;
}
.jobsearch-employer-profile-form input::placeholder, 
.jobsearch-employer-profile-form select,
.sc-content form input::placeholder,
.sc-content form textarea::placeholder,
.sc-content .jobsearch-employer-profile-form li input::placeholder,
.sc-content .jobsearch-employer-profile-form li textarea::placeholder {
    font-size: 13px;
    font-weight: 300;
    font-style: italic;
}

.selectize-control.single .selectize-input input {
    height: auto;
}

.sc-content .btn-secondary,
.sc-content .jobsearch-typo-wrap .btn-secondary,
.sc-content .btn-secondary-outline,
.sc-content .jobsearch-typo-wrap .btn-secondary-outline {
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: unset;
}
.custom-forgot-password-css input[type="submit"],
.custom-forgot-password-css input[type="button"]{
    height: 40px;
}

/* =========================================================================
   SC Admin Panel — V2 redesign (Recruiter Management Dashboard)
   All rules scoped under .sc-admin-panel-v2 so legacy layout is unaffected.
   ========================================================================= */

/* ---------- Fullscreen takeover for the SC dashboard page ------------
   When the body has `sc-admin-page` (set by `mpjs_sc_add_admin_body_class`),
   hide the site's normal chrome (Elementor header/footer, WP admin bar,
   floating back-to-top button) and strip the wrapping <main>'s padding so
   the SC panel fills the viewport edge to edge.
   ------------------------------------------------------------------- */
body.sc-admin-page .elementor-location-header,
body.sc-admin-page .elementor-location-footer,
body.sc-admin-page #wpadminbar,
body.sc-admin-page #back-to-top {
    display: none !important;
}
body.sc-admin-page {
    margin-top: 0 !important;
    background: var(--sc-content-bg, #f3f4f6);
}
html.sc-admin-active,
body.sc-admin-page,
body.sc-admin-page main#content,
body.sc-admin-page #content {
    padding-top: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100%;
}
body.sc-admin-page main#content {
    min-height: 100vh;
}
/* The WP admin bar inserts `html { margin-top: 32px !important }` inline —
   override it just in case `show_admin_bar(false)` runs too late. */
html[lang][class*=""] body.sc-admin-page { margin-top: 0 !important; }


.sc-admin-panel-v2 {
    --sc-sidebar-bg:    #1f2937;
    --sc-sidebar-bg-2:  #111827;
    --sc-sidebar-text:  #d1d5db;
    --sc-sidebar-mute:  #9ca3af;
    --sc-sidebar-hover: #374151;
    --sc-sidebar-active-bg: #2563eb;
    --sc-content-bg:    #f3f4f6;
    --sc-card-bg:       #ffffff;
    --sc-card-border:   #e5e7eb;
    --sc-text:          #111827;
    --sc-text-mute:     #6b7280;
    --sc-accent:        #2563eb;
    --sc-accent-hover:  #1d4ed8;
    --sc-radius:        8px;
    --sc-shadow:        0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
    background: var(--sc-content-bg);
    color: var(--sc-text);
    font-size: 14px;
}

.sc-admin-panel-v2 .sc-layout {
    display: flex;
    align-items: stretch;
    min-height: 720px;
}

/* ---------- Sidebar -------------------------------------------------- */
.sc-admin-panel-v2 .sc-sidebar {
    width: 240px;
    flex: 0 0 240px;
    background: var(--sc-sidebar-bg);
    color: var(--sc-sidebar-text);
    display: flex;
    flex-direction: column;
}

/* When on the dedicated SC dashboard page (chrome hidden), pin the
   sidebar to the left edge. `position: sticky` requires the sidebar to
   NOT be stretched by flex, hence `align-self: flex-start` and an
   explicit `height: 100vh`. If the nav list outgrows the viewport, the
   sidebar scrolls internally rather than the whole page. */
body.sc-admin-page .sc-admin-panel-v2 .sc-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
    overflow-y: auto;
}
.sc-admin-panel-v2 .sc-sidebar-brand {
    padding: 22px 24px;
    background: var(--sc-sidebar-bg-2);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #fff;
}
.sc-admin-panel-v2 .sc-sidebar-nav {
    flex: 1;
    padding: 12px 0;
}
.sc-admin-panel-v2 .sc-sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sc-admin-panel-v2 .sc-sidebar-nav li {
    margin: 0;
}
.sc-admin-panel-v2 .sc-sidebar-nav li.sc-sidebar-spacer {
    flex: 1;
}
.sc-admin-panel-v2 .sc-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 24px;
    color: var(--sc-sidebar-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color .15s, color .15s, border-color .15s;
}
.sc-admin-panel-v2 .sc-sidebar-nav a:hover {
    background: var(--sc-sidebar-hover);
    color: #fff;
}
.sc-admin-panel-v2 .sc-sidebar-nav li.is-active > a {
    background: var(--sc-sidebar-active-bg);
    color: #fff;
    border-left-color: #fff;
}
.sc-admin-panel-v2 .sc-sidebar-nav a svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: currentColor;
}

/* ---------- Main column --------------------------------------------- */
.sc-admin-panel-v2 .sc-main {
    flex: 1;
    min-width: 0;
    background: var(--sc-content-bg);
    display: flex;
    flex-direction: column;
}

/* ---------- Topbar -------------------------------------------------- */
.sc-admin-panel-v2 .sc-topbar {
    background: #fff;
    border-bottom: 1px solid var(--sc-card-border);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.sc-admin-panel-v2 .sc-topbar-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--sc-text);
    line-height: 1.2;
}
.sc-admin-panel-v2 .sc-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sc-text-mute);
}
.sc-admin-panel-v2 .sc-topbar-welcome strong {
    color: var(--sc-text);
    font-weight: 600;
}
.sc-admin-panel-v2 .sc-topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* ---------- Content area ------------------------------------------- */
.sc-admin-panel-v2 .sc-content {
    padding: 24px 28px;
    flex: 1;
}

/* ---------- Stats cards (4-up) ------------------------------------- */
.sc-admin-panel-v2 .sc-stats-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.sc-admin-panel-v2 .sc-stat-card {
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius);
    padding: 18px 20px;
    box-shadow: var(--sc-shadow);
}
.sc-admin-panel-v2 .sc-stat-card .value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 6px;
}
.sc-admin-panel-v2 .sc-stat-card.is-total   .value { color: var(--sc-accent); }
.sc-admin-panel-v2 .sc-stat-card.is-new     .value { color: #059669; }
.sc-admin-panel-v2 .sc-stat-card.is-active  .value { color: #059669; }
.sc-admin-panel-v2 .sc-stat-card.is-pending .value { color: #d97706; } /* legacy — no longer rendered in binary status model */
.sc-admin-panel-v2 .sc-stat-card.is-suspended .value { color: #dc2626; }
.sc-admin-panel-v2 .sc-stat-card .label {
    color: var(--sc-text-mute);
    font-size: 13px;
}

/* ---------- Filter bar --------------------------------------------- */
.sc-admin-panel-v2 .sc-filter-bar {
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: var(--sc-shadow);
}
.sc-admin-panel-v2 .sc-filter-bar input[type="text"],
.sc-admin-panel-v2 .sc-filter-bar input[type="search"],
.sc-admin-panel-v2 .sc-filter-bar input[type="date"],
.sc-admin-panel-v2 .sc-filter-bar select {
    height: 36px;
    border: 1px solid var(--sc-card-border);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    background: #fff;
    color: var(--sc-text);
    min-width: 0;
}
.sc-admin-panel-v2 .sc-filter-bar .sc-filter-search { flex: 1 1 200px; }
.sc-admin-panel-v2 .sc-filter-bar .sc-filter-select  { flex: 0 1 160px; }
.sc-admin-panel-v2 .sc-filter-bar .sc-filter-date    { flex: 0 1 150px; }
.sc-admin-panel-v2 .sc-filter-bar .sc-filter-export {
    margin-left: auto;
    background: var(--sc-accent);
    color: #fff;
    border: 0;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-transform: none;
}
.sc-admin-panel-v2 .sc-filter-bar .sc-filter-export:hover { background: var(--sc-accent-hover); }

/* ---------- Section card (table wrapper) --------------------------- */
.sc-admin-panel-v2 .sc-section {
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow);
    overflow: hidden;
    padding-bottom: 30px;
}
.sc-admin-panel-v2 .sc-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sc-card-border);
}
.sc-admin-panel-v2 .sc-section-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.sc-admin-panel-v2 .sc-section-head .sc-add-new {
    background: var(--sc-accent);
    color: #fff;
    border: 0;
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.sc-admin-panel-v2 .sc-section-head .sc-add-new:hover { background: var(--sc-accent-hover); }

/* ---------- Recruiter table ---------------------------------------- */
.sc-admin-panel-v2 .sc-table-wrap { overflow-x: auto; }
.sc-admin-panel-v2 .sc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sc-admin-panel-v2 .sc-table th,
.sc-admin-panel-v2 .sc-table td {
    padding: 12px 14px;
    text-align: left;
    border: 1px solid var(--sc-card-border);
    vertical-align: middle;
}
.sc-admin-panel-v2 .sc-table th {
    background: #f9fafb;
    color: var(--sc-text-mute);
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
}
.sc-admin-panel-v2 .sc-table tr:hover td { background: #f9fafb; }

/* Badges */
.sc-admin-panel-v2 .sc-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.sc-admin-panel-v2 .sc-badge.is-active    { background: #d1fae5; color: #065f46; }
.sc-admin-panel-v2 .sc-badge.is-pending   { background: #fef3c7; color: #92400e; }
.sc-admin-panel-v2 .sc-badge.is-suspended { background: #fee2e2; color: #991b1b; }
.sc-admin-panel-v2 .sc-badge.is-approved  { background: #ede9fe; color: #5b21b6; }
.sc-admin-panel-v2 .sc-badge.is-review    { background: #fef9c3; color: #854d0e; }

/* Action buttons */
.sc-admin-panel-v2 .sc-actions {
    display: inline-flex;
    gap: 6px;
}
.sc-admin-panel-v2 .sc-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--sc-card-border);
    background: #fff;
    color: var(--sc-text-mute);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
    padding: 0;
    text-decoration: none;
    position: relative;
}
.sc-admin-panel-v2 .sc-btn-icon svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    stroke: currentColor;
    fill: none;
    display: block;
}
.sc-admin-panel-v2 .sc-btn-icon:hover { background: #f3f4f6; color: var(--sc-text); }
.sc-admin-panel-v2 .sc-btn-icon.is-view    { color: var(--sc-accent); border-color: var(--sc-accent); }
.sc-admin-panel-v2 .sc-btn-icon.is-view:hover { background: var(--sc-accent); color: #fff; }
.sc-admin-panel-v2 .sc-btn-icon.is-block   { background: #dc2626; color: #fff; border-color: #dc2626; }
.sc-admin-panel-v2 .sc-btn-icon.is-block:hover  { background: #b91c1c; }
.sc-admin-panel-v2 .sc-btn-icon.is-unblock { background: #059669; color: #fff; border-color: #059669; }
.sc-admin-panel-v2 .sc-btn-icon.is-unblock:hover { background: #047857; }
.sc-admin-panel-v2 .sc-btn-icon.is-delete    { background: #fff; color: #374151; border-color: #e5e7eb; }
.sc-admin-panel-v2 .sc-btn-icon.is-delete:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* Loading state — shown on action buttons while their popup is fetching
   data. The original SVG icon is hidden and a small CSS spinner is
   centered inside the button via the parent's flex centering. */
.sc-admin-panel-v2 .sc-btn-icon.is-loading {
    cursor: wait;
    pointer-events: none;
}
.sc-admin-panel-v2 .sc-btn-icon.is-loading svg { visibility: hidden; }
.sc-admin-panel-v2 .sc-btn-icon.is-loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mpjs-sc-btn-spin 0.6s linear infinite;
    opacity: 0.7;
}
@keyframes mpjs-sc-btn-spin { to { transform: rotate(1turn); } }

/* ---------- Pagination ---------------------------------------------
   Covers both shapes:
   - the custom partial (`templates/partials/pagination.php`): plain <a>,
     <button> and <span class="is-current"> / <span aria-hidden>
   - WordPress core `paginate_links()`: <a class="page-numbers">,
     <span class="page-numbers current"> and <span class="page-numbers dots">
   ------------------------------------------------------------------- */
.sc-admin-panel-v2 .sc-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 20px 0 6px;
    flex-wrap: wrap;
    font-size: 13px;
}

/* All button-like items (links, buttons, current-span, page-numbers).
   Excluded: ellipsis spans, see rules further down. */
.sc-admin-panel-v2 .sc-pagination > a,
.sc-admin-panel-v2 .sc-pagination > button,
.sc-admin-panel-v2 .sc-pagination > span.is-current,
.sc-admin-panel-v2 .sc-pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--sc-card-border);
    background: #fff;
    color: var(--sc-text);
    border-radius: 6px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Hover — links only (don't hover disabled buttons or current span) */
.sc-admin-panel-v2 .sc-pagination > a:hover,
.sc-admin-panel-v2 .sc-pagination a.page-numbers:hover {
    background: #eef2ff;
    color: var(--sc-accent);
    border-color: #c7d2fe;
}

/* Active / current page */
.sc-admin-panel-v2 .sc-pagination > span.is-current,
.sc-admin-panel-v2 .sc-pagination .page-numbers.current {
    background: var(--sc-accent);
    color: #fff;
    border-color: var(--sc-accent);
    cursor: default;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .2);
}

/* Disabled (Previous/Next when on first/last page) */
.sc-admin-panel-v2 .sc-pagination > button[disabled] {
    opacity: 1;
    background: #f9fafb;
    color: #9ca3af;
    border-color: var(--sc-card-border);
    cursor: not-allowed;
}

/* Ellipsis — strip the button styling so the dots float between buttons */
.sc-admin-panel-v2 .sc-pagination > span[aria-hidden],
.sc-admin-panel-v2 .sc-pagination .page-numbers.dots {
    min-width: auto;
    height: auto;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--sc-text-mute);
    cursor: default;
    box-shadow: none;
}

/* Visual gap to separate Previous/Next from numeric buttons */
.sc-admin-panel-v2 .sc-pagination > a:first-of-type,
.sc-admin-panel-v2 .sc-pagination > button:first-of-type,
.sc-admin-panel-v2 .sc-pagination a.page-numbers.prev {
    margin-right: 6px;
}
.sc-admin-panel-v2 .sc-pagination > a:last-of-type,
.sc-admin-panel-v2 .sc-pagination > button:last-of-type,
.sc-admin-panel-v2 .sc-pagination a.page-numbers.next {
    margin-left: 6px;
}

/* Keyboard focus */
.sc-admin-panel-v2 .sc-pagination > a:focus-visible,
.sc-admin-panel-v2 .sc-pagination > button:focus-visible,
.sc-admin-panel-v2 .sc-pagination .page-numbers:focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: 2px;
}

/* ---------- Sub-status pills (Freelancers tab) --------------------- */
.sc-admin-panel-v2 .sc-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.sc-admin-panel-v2 .sc-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--sc-card-border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--sc-text);
    text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s;
}
.sc-admin-panel-v2 .sc-pill:hover {
    background: #f3f4f6;
    color: var(--sc-text);
    border-color: #d1d5db;
}
.sc-admin-panel-v2 .sc-pill.is-active {
    background: var(--sc-accent);
    color: #fff;
    border-color: var(--sc-accent);
}
.sc-admin-panel-v2 .sc-pill-count {
    font-size: 11px;
    background: rgba(0,0,0,.08);
    border-radius: 999px;
    padding: 1px 8px;
    line-height: 1.4;
}
.sc-admin-panel-v2 .sc-pill.is-active .sc-pill-count {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* ---------- Action confirmation modals (shared chrome) -------------
   Shared styles for the SC admin row-action modals (Suspend / Unsuspend
   / Delete / View). Apply by adding the `sc-action-modal` class to the
   top-level `.jobsearch-modal` div.
   ------------------------------------------------------------------- */

/* Modal box — soft rounded corners + elevation shadow + clean overflow.
   The `!important` on padding/border-radius defeats the wp-jobsearch
   plugin's own `.modal-box-area { padding: 25px }` rule. */
.sc-action-modal .modal-box-area {
    max-width: 480px;
    padding: 0 !important;          /* inner blocks own their own padding */
    border-radius: 12px !important;
    background: #fff;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, .12),
        0 10px 10px -5px rgba(0, 0, 0, .04);
    overflow: hidden;
}

/* Entrance — fade + slight slide-up so the popup feels less abrupt */
.sc-action-modal.fade-in .modal-box-area {
    animation: mpjs-sc-modal-enter .22s ease-out;
}
@keyframes mpjs-sc-modal-enter {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Title bar — subtle background separates it visually from body */
.sc-action-modal .jobsearch-modal-title-box {
    position: relative;
    padding: 18px 28px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.sc-action-modal .jobsearch-modal-title-box h2 {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    letter-spacing: -.01em;
    text-transform: none;
}

/* Close (X) — bigger hit area + hover feedback */
.sc-action-modal .modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #9ca3af;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.sc-action-modal .modal-close:hover {
    background: #e5e7eb;
    color: #111827;
}
.sc-action-modal .modal-close .fa { font-size: 16px; line-height: 1; }

/* Form body — generous padding */
.sc-action-modal form {
    padding: 22px 28px 24px;
}

/* Form field rows */
.sc-action-modal .sc-form-field {
    margin-bottom: 16px;
}
.sc-action-modal .sc-form-field:last-of-type {
    margin-bottom: 0;
}
.sc-action-modal .sc-form-field > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 7px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* Inputs / Selects / Textareas */
.sc-action-modal .sc-form-field input[type="text"],
.sc-action-modal .sc-form-field select,
.sc-action-modal .sc-form-field textarea {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
    color: #111827;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.sc-action-modal .sc-form-field textarea {
    height: auto;
    min-height: 84px;
    padding: 10px 14px;
    resize: vertical;
    line-height: 1.5;
}
/* Focus ring — accent blue */
.sc-action-modal .sc-form-field input:focus,
.sc-action-modal .sc-form-field select:focus,
.sc-action-modal .sc-form-field textarea:focus {
    outline: none;
    border-color: var(--sc-accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
/* Disabled (read-only) fields — subtle gray fill */
.sc-action-modal .sc-form-field input[disabled],
.sc-action-modal .sc-form-field input[readonly] {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

/* Checkbox row */
.sc-action-modal .sc-form-checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    color: #111827;
    cursor: pointer;
}
.sc-action-modal .sc-form-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--sc-accent, #2563eb);
    cursor: pointer;
}

/* Action button row — top divider, right-aligned */
.sc-action-modal .sc-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f3f4f6;
}

/* Buttons — bigger, rounded, smooth hover lift */
.sc-action-modal .sc-btn-cancel,
.sc-action-modal .sc-btn-suspend,
.sc-action-modal .sc-btn-delete,
.sc-action-modal .sc-btn-unblock {
    border: 0;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .15s, box-shadow .15s, transform .1s;
}
.sc-action-modal .sc-btn-cancel:hover,
.sc-action-modal .sc-btn-suspend:hover,
.sc-action-modal .sc-btn-delete:hover,
.sc-action-modal .sc-btn-unblock:hover {
    transform: translateY(-1px);
}
.sc-action-modal .sc-btn-cancel:active,
.sc-action-modal .sc-btn-suspend:active,
.sc-action-modal .sc-btn-delete:active,
.sc-action-modal .sc-btn-unblock:active {
    transform: translateY(0);
}
.sc-action-modal .sc-btn-cancel {
    background: #f3f4f6;
    color: #374151;
}
.sc-action-modal .sc-btn-cancel:hover {
    background: #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sc-action-modal .sc-btn-suspend,
.sc-action-modal .sc-btn-delete {
    background: #dc2626;
    color: #fff;
}
.sc-action-modal .sc-btn-suspend:hover,
.sc-action-modal .sc-btn-delete:hover {
    background: #b91c1c;
    box-shadow: 0 4px 12px rgba(220, 38, 38, .25);
}
.sc-action-modal .sc-btn-unblock {
    background: #059669;
    color: #fff;
}
.sc-action-modal .sc-btn-unblock:hover {
    background: #047857;
    box-shadow: 0 4px 12px rgba(5, 150, 105, .25);
}
.sc-action-modal .sc-btn-suspend[disabled],
.sc-action-modal .sc-btn-delete[disabled],
.sc-action-modal .sc-btn-unblock[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ---------- View Recruiter Details modal --------------------------- */
#mpjs-sc-view-recruiter-modal .modal-box-area {
    max-width: 720px;
}
/* View modal doesn't use a form — content is wrapped in .sc-view-content */
#mpjs-sc-view-recruiter-modal .sc-view-content {
    padding: 22px 28px 26px;
}
#mpjs-sc-view-recruiter-modal .sc-view-header {
    display: grid;
    /* Narrow identity column so the data columns get more horizontal room
       — long values like full URLs need it. */
    grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}
#mpjs-sc-view-recruiter-modal .sc-view-col { min-width: 0; }
#mpjs-sc-view-recruiter-modal .sc-view-col-identity {
    text-align: left;
}
/* Avatar wrapper + placeholder.
   - Default state: a gray user-silhouette SVG is set as background-image
     on the wrap so it always shows something.
   - When the <img> has a valid src that successfully loads, the image
     sits on top with object-fit: cover and visually replaces the bg.
   - If the AJAX returns no avatar OR the URL 404s, JS clears `src` and
     the placeholder behind shows through. */
#mpjs-sc-view-recruiter-modal .sc-view-avatar-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #f3f4f6;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%239ca3af" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M3 21a9 9 0 0 1 18 0"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 36px 36px;
    overflow: hidden;
    margin-bottom: 10px;
    display: block;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
#mpjs-sc-view-recruiter-modal .sc-view-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
/* Hide the <img> visually when it has no src or empty src so the bg
   placeholder is revealed. JS additionally calls removeAttribute('src')
   if the image errors out. */
#mpjs-sc-view-recruiter-modal .sc-view-avatar:not([src]),
#mpjs-sc-view-recruiter-modal .sc-view-avatar[src=""] {
    visibility: hidden;
}
#mpjs-sc-view-recruiter-modal .sc-view-name {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}
#mpjs-sc-view-recruiter-modal .sc-view-job-title {
    font-size: 13px;
    color: #6b7280;
}
/* Each row is a single horizontal line: label and value sit side-by-side
   on one row. Values that overflow the column truncate with an ellipsis;
   the JS populate loop also sets the `title` attribute so users can hover
   to see the full text. */
#mpjs-sc-view-recruiter-modal .sc-view-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #111827;
    min-width: 0;
}
#mpjs-sc-view-recruiter-modal .sc-view-row:last-child { margin-bottom: 0; }
#mpjs-sc-view-recruiter-modal .sc-view-label {
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    flex: 0 0 auto;
}
#mpjs-sc-view-recruiter-modal .sc-view-value {
    color: #4b5563;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#mpjs-sc-view-recruiter-modal .sc-view-section-h {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f3f4f6;
    text-transform: uppercase;
    letter-spacing: .05em;
}
#mpjs-sc-view-recruiter-modal .sc-view-section-h--danger {
    color: #dc2626;
    border-bottom-color: #fecaca;
}
#mpjs-sc-view-recruiter-modal .sc-view-text {
    font-size: 13px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0 0 4px;
    white-space: pre-wrap;
}
#mpjs-sc-view-recruiter-modal .sc-view-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
#mpjs-sc-view-recruiter-modal .sc-view-tag-pill {
    display: inline-block;
    background: var(--sc-accent, #2563eb);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .25);
}
#mpjs-sc-view-recruiter-modal .sc-view-suspension {
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 14px;
}

@media (max-width: 640px) {
    #mpjs-sc-view-recruiter-modal .sc-view-header {
        grid-template-columns: 1fr;
    }
}

/* ---------- Empty-state stub --------------------------------------- */
.sc-admin-panel-v2 .sc-empty-stub {
    background: var(--sc-card-bg);
    border: 1px dashed var(--sc-card-border);
    border-radius: var(--sc-radius);
    padding: 40px 20px;
    text-align: center;
    color: var(--sc-text-mute);
}

/* ---------- Transactions tab --------------------------------------- */
/* Small subtle "N transactions" label on the right of the section head. */
.sc-admin-panel-v2 .sc-section-head .sc-section-meta {
    font-size: 12px;
    color: var(--sc-text-mute);
    font-weight: 500;
}

/* ---------- Responsive --------------------------------------------- */
@media (max-width: 960px) {
    .sc-admin-panel-v2 .sc-layout { flex-direction: column; }
    .sc-admin-panel-v2 .sc-sidebar { width: 100%; flex: 0 0 auto; }
    .sc-admin-panel-v2 .sc-stats-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}