/* Pre-test QA corrections shared across authenticated portal surfaces. */
html, body { max-width: 100%; overflow-x: clip; }
body :is(.main,.main-content,.dashboard-content,.content-wrapper,.page-content) { min-width: 0; }
body :is(.alert,.error,.error-message,.form-error,.validation-error,[role="alert"]) {
    overflow-wrap: anywhere;
}
html[data-theme="dark"] body :is(.alert-danger,.error,.error-message,.form-error,.validation-error,[role="alert"]):not(.walkin-email-warning):not(.pw-inline-message),
html[data-jsa-theme="dark"] body :is(.alert-danger,.error,.error-message,.form-error,.validation-error,[role="alert"]):not(.walkin-email-warning):not(.pw-inline-message),
body:not(.light)[data-peso-page^="admin-"] :is(.alert-danger,.error,.error-message,.form-error,.validation-error,[role="alert"]):not(.walkin-email-warning):not(.pw-inline-message),
body:not(.light)[data-peso-page^="employer-"] :is(.alert-danger,.error,.error-message,.form-error,.validation-error,[role="alert"]):not(.walkin-email-warning):not(.pw-inline-message) {
    color: #ffd9d9 !important; background: #3a151b !important; border-color: #a84450 !important;
}
/* .pw-inline-message (jobseeker_profile.php's password-change error/success
   box) is excluded above: it carries role="alert" so it matched this
   generic dark-mode sweep, but jobseeker-alive-suite.css already repaints
   it with its OWN deliberate, theme-independent pale-box/dark-ink palette
   (a higher-specificity color-only rule) — this rule's `background:#3a151b`
   still won underneath it (nothing else contested background), pairing
   dark-red text with a near-black-red box: functionally invisible. Two
   different fixes each owning half the same element. Excluding it here
   leaves the alive-suite palette as the single source of truth for it. */
body :is(.modal-close,.close-modal,.close-btn,.btn-close,[data-modal-close],.emp-modal__close,.peso-generated-modal-close,.modal-close-btn) {
    width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
    display: inline-grid !important; place-items: center !important; padding: 0 !important;
    border-radius: 12px !important; font-size: 1.35rem !important; line-height: 1 !important; cursor: pointer !important;
}
body .peso-generated-modal-close {
    position: absolute; z-index: 10; top: 14px; right: 14px; color: var(--text-primary,#173528);
    background: var(--bg-secondary,#fff); border: 1px solid var(--border-color,#ccdcd3);
}
/* Ask PESO already owns an accessible close button; never add/show a legacy fallback there. */
.peso-assistant__panel > .peso-generated-modal-close { display:none !important; }
body :is(.modal-content,.dialog-content,[role="dialog"].modal-card,[role="dialog"].modal-container) { max-width: min(calc(100vw - 32px), 960px); }
body[data-peso-page="admin-reports"] .rpt-validation-error {
    display: flex; align-items: flex-start; gap: 12px; margin: 16px; padding: 14px 16px;
    color: #8e1f2b; background: #fff1f2; border: 1px solid #f2aab2; border-radius: 12px;
}
body[data-peso-page="admin-reports"] .rpt-validation-error strong { display: block; margin-bottom: 2px; }
body[data-peso-page="admin-reports"] .peso-report-workspace[aria-busy="true"] { position: relative; pointer-events: none; }
body[data-peso-page="admin-reports"] .peso-report-workspace[aria-busy="true"]::after {
    content: "Updating report…"; position: sticky; top: 88px; z-index: 30; display: block; width: max-content;
    margin: 12px auto -52px; padding: 10px 16px; border-radius: 999px; color: #fff; background: #087443;
    box-shadow: 0 12px 30px rgba(4,77,45,.22); font-weight: 800; font-size: .84rem;
}
body[data-peso-page^="employer-"] a[href*="logout"],
body.peso-role-employer a[href*="logout"] { color: #b42332 !important; }
body[data-peso-page^="employer-"] a[href*="logout"]:hover,
body.peso-role-employer a[href*="logout"]:hover { color: #fff !important; background: #b42332 !important; }
body[data-peso-page^="employer-"] :is(.main,.ef-main,.dashboard-content) { max-width: 100%; }
body[data-peso-page="admin-employers"] #employerTableWorkspace[aria-busy="true"] { opacity:.55; pointer-events:none; transition:opacity .16s ease; }

/* Render below-the-fold sections only as they approach the viewport. */
@media screen {
    html body .peso-table-viewport {
        min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
    }
}
/* Shared anti-collapse safeguards. Keep content readable when legacy flex/grid
   rules meet a narrow viewport, without changing desktop component geometry. */
@media screen and (max-width: 768px) {
    html body[data-peso-page] :is(.pagination,.pager,.pagination-wrapper,.pagination-container):has(.page-info) {
        display: grid !important;
        grid-template-columns: minmax(0,auto) minmax(72px,1fr) minmax(0,auto) !important;
        align-items: center !important; justify-content: center !important;
        gap: clamp(6px,2vw,12px) !important; width: 100% !important;
        flex-wrap: nowrap !important;
    }
    html body[data-peso-page] :is(.pagination,.pager,.pagination-wrapper,.pagination-container):has(.page-info) > * {
        min-width: 0 !important; margin: 0 !important;
    }
    html body[data-peso-page] :is(.pagination,.pager,.pagination-wrapper,.pagination-container):has(.page-info) .page-info {
        padding: 0 4px !important; text-align: center !important;
        white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important;
    }
    html body[data-peso-page] :is(.pagination,.pager,.pagination-wrapper,.pagination-container):has(.page-info) :is(.pagination-btn,.page-btn,.pager-btn) {
        min-height: 44px !important; padding: 8px clamp(10px,3vw,16px) !important;
        white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important;
    }
    html body[data-peso-page] :is(.pagination,.pager,.pagination-wrapper,.pagination-container):has(.page-info) :is(svg,i) {
        flex: 0 0 auto !important;
    }
    html body[data-peso-page] :is(.card-header,.panel-header,.section-header,.content-header,.table-header,.list-header,.toolbar) > * {
        min-width: 0;
    }
    html body[data-peso-page] :is(.card-header,.panel-header,.section-header,.content-header,.table-header,.list-header,.toolbar) > :is(a,button,.btn,.button) {
        flex: 0 0 auto; max-width: 100%;
    }
    html body[data-peso-page] :is(.actions,.action-buttons,.card-actions,.form-actions,.toolbar-actions,.filter-actions) {
        max-width: 100%; flex-wrap: wrap !important;
    }
    html body[data-peso-page] :is(a,button,.btn,.button,.chip,.badge) > :is(i,svg,img) {
        flex: 0 0 auto !important;
    }
    html body[data-peso-page] :is(a,button,.btn,.button,.chip,.badge) {
        word-break: normal !important; overflow-wrap: normal;
    }
    html body[data-peso-page] :is(.card,.panel,.content-card,.table-card,.modal-content,.dashboard-card) {
        min-width: 0; max-width: 100%;
    }
}
@media screen and (max-width: 380px) {
    html body[data-peso-page] :is(.pagination,.pager,.pagination-wrapper,.pagination-container):has(.page-info) {
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
    }
    html body[data-peso-page] :is(.pagination,.pager,.pagination-wrapper,.pagination-container):has(.page-info) :is(.pagination-btn,.page-btn,.pager-btn) {
        width: 100%; padding-inline: 8px !important; font-size: .78rem !important;
    }
}
@media screen and (max-width: 768px) {
    html body[data-peso-page] .peso-table-viewport--records { overflow-x: visible !important; }
    html body[data-peso-page] table.peso-table-records,
    html body[data-peso-page] table.peso-table-records :is(tbody,tr,td) {
        box-sizing: border-box !important; min-width: 0 !important; width: 100% !important;
        max-width: 100% !important; display: block !important;
    }
    html body[data-peso-page] table.peso-table-records thead {
        position: absolute !important; width: 1px !important; height: 1px !important;
        overflow: hidden !important; clip-path: inset(50%); white-space: nowrap;
    }
    html body[data-peso-page] table.peso-table-records tbody { padding: 8px !important; }
    html body[data-peso-page] table.peso-table-records tbody tr {
        margin: 0 0 12px !important; padding: 12px !important;
        border-radius: 14px; height: auto !important;
    }
    html body[data-peso-page] table.peso-table-records td {
        display: flex !important; flex-direction: column; align-items: stretch !important;
        gap: 6px !important; padding: 10px 0 !important; text-align: left !important;
        white-space: normal !important; overflow-wrap: anywhere; height: auto !important;
    }
    html body[data-peso-page] table.peso-table-records td::before {
        content: attr(data-label); display: block; text-align: left !important;
        font-size: .72rem; font-weight: 700; line-height: 1.5;
    }
    html body[data-peso-page] table.peso-table-records td > * { min-width: 0 !important; max-width: 100%; }
    html body[data-peso-page] table.peso-table-records :is(.user-info,.walkin-table-job,.employer-info) {
        min-width: 0 !important; width: 100% !important; gap: 10px;
    }
    html body[data-peso-page] table.peso-table-records :is(.user-info,.walkin-table-job,.employer-info) > :last-child {
        min-width: 0; flex: 1; overflow-wrap: anywhere;
    }
    html body[data-peso-page] table.peso-table-records :is(.action-buttons,.actions,.table-actions) {
        display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 8px;
    }
    html body[data-peso-page] table.peso-table-records :is(.user-name,.user-email,small,a) {
        white-space: normal !important; overflow-wrap: anywhere;
    }
    html body[data-peso-page] table.peso-table-records .peso-table-empty-row td::before { display: none; }
    html body[data-peso-page] table.peso-table-matrix { display: table !important; width: max-content; min-width: 100%; }
    html body[data-peso-page] table.peso-table-matrix thead { display: table-header-group !important; position: static !important; clip: auto !important; clip-path: none !important; height: auto !important; width: auto !important; }
    html body[data-peso-page] table.peso-table-matrix tbody { display: table-row-group !important; }
    html body[data-peso-page] table.peso-table-matrix tr { display: table-row !important; }
    html body[data-peso-page] table.peso-table-matrix :is(td,th) { display: table-cell !important; width: auto !important; }
    html body[data-peso-page] table.peso-table-matrix td::before { display: none !important; }
}
@media print {
    html body .peso-table-viewport { overflow: visible !important; max-width: none !important; }
}
@supports (content-visibility:auto) {
    body:not(.peso-tour-is-active) main > :is(section,article):not(:first-child),
    body:not(.peso-tour-is-active) .main > :is(section,article,.card):not(:first-child) {
        content-visibility: auto; contain-intrinsic-size: auto 520px;
    }
}
@media (max-width: 768px) {
    body :is(.container,.page-container,.main,.main-content,.dashboard-content,.content-wrapper) { max-width: 100% !important; }
    /* .peso-assistant__panel also carries role="dialog" but is a fully
       custom CSS-grid chat layout (header/notice/messages/suggestions/
       composer/footer rows), not a "wrapper centering one content box"
       modal. align-items:center here defeated the grid's default
       stretch behavior on the messages row, letting its full unclipped
       content height render centered in its track and visually overlap
       every row below it. Same exclusion shape as .peso-tour-card. */
    body :is(.modal,.dialog-backdrop,[role="dialog"]:not(.peso-tour-card):not(.peso-assistant__panel)) { padding: 12px !important; align-items: center !important; justify-content: center !important; }
    body :is(.modal-content,.dialog-content,[role="dialog"].modal-card,[role="dialog"].modal-container) {
        width: min(100%, 680px) !important; max-width: 100% !important; max-height: calc(100dvh - 24px) !important;
        overflow-y: auto !important; overscroll-behavior: contain;
    }
    body[data-peso-page="jobseeker-applied"] .applications-list { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
    body[data-peso-page="jobseeker-applied"] .application-card {
        width: 100% !important; min-width: 0 !important; padding: 16px !important; border-radius: 16px !important;
    }
    body[data-peso-page="jobseeker-applied"] :is(.application-header,.application-details,.application-actions) {
        display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; min-width: 0 !important;
    }
    body[data-peso-page="jobseeker-applied"] .application-actions :is(a,button,form) { width: 100% !important; }
    body[data-peso-page="jobseeker-applied"] .application-actions :is(a,button) { justify-content: center !important; }
    .peso-tour-card :is(h2,p,.peso-tour-card__hint) { overflow-wrap: anywhere; }
    .peso-tour-spotlight { max-width: calc(100vw - 12px) !important; }
}
@media (max-width: 480px) {
    /* Section titles and actions need separate rows; do not apply to modal/nav headers. */
    html body[data-peso-page] :is(.card-header,.panel-header,.section-header,.table-header,.content-header) {
        flex-wrap: wrap !important; flex-direction: column !important;
        grid-template-columns: minmax(0, 1fr) !important; align-items: flex-start !important;
        gap: 12px !important;
    }
    html body[data-peso-page] :is(.card-header,.panel-header,.section-header,.table-header,.content-header) > :is(a,button) {
        flex-shrink: 0 !important; max-width: 100%; overflow-wrap: normal !important; word-break: normal !important;
    }
    body :is(.card,.panel,.form-container,.table-card) { max-width: 100%; }
    body table { font-size: .78rem !important; }
    body :is(.table-responsive,.table-wrapper,.table-container) { max-width: 100%; overflow-x: auto !important; }
}
/* Keep motion purposeful and cheap while retaining hero artwork movement. */
body :is(.card,.stat-card,.job-card,.application-card,.btn,button,a) { transition-duration: .18s !important; }
body :is(.card,.stat-card,.job-card,.application-card):not(:hover) { animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Jobseeker dashboard: preserve action-label contrast in dark mode.
   Older global link/readability rules recolored the primary CTA with the same
   pale green family as its background, making both the label and arrow look
   disabled. Keep normal actions fully opaque and reserve dimming for an
   explicitly disabled state. */
html body.jf-workspace-site[data-peso-page="jobseeker-home"] .js-job-card .js-job-footer .view-btn:not([aria-disabled="true"]):not(.is-disabled) {
    background: #087546 !important;
    background-image: none !important;
    border-color: #15945d !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: 0 1px 1px rgba(0, 35, 21, .22);
}
html body.jf-workspace-site[data-peso-page="jobseeker-home"] .js-job-card .js-job-footer .view-btn:not([aria-disabled="true"]):not(.is-disabled) :is(i,svg) {
    color: currentColor !important;
    fill: currentColor !important;
    opacity: 1 !important;
}
html body.jf-workspace-site[data-peso-page="jobseeker-home"] .js-job-card .js-job-footer .view-btn:not([aria-disabled="true"]):not(.is-disabled):is(:hover,:focus-visible) {
    background: #056238 !important;
    border-color: #56d492 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body.jf-workspace-site[data-peso-page="jobseeker-home"] .js-job-card .js-job-footer .js-job-expand:not(:disabled) {
    background: color-mix(in srgb, var(--a-card, #0a2a1e) 92%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--a-line, #315b49) 72%, #ffffff) !important;
    color: var(--a-ink, #f4fff8) !important;
    -webkit-text-fill-color: var(--a-ink, #f4fff8) !important;
    opacity: 1 !important;
}
html body.jf-workspace-site[data-peso-page="jobseeker-home"] .js-job-card .js-job-footer .js-job-expand:not(:disabled) :is(i,svg,span) {
    color: currentColor !important;
    fill: currentColor !important;
    opacity: 1 !important;
}
html body.jf-workspace-site[data-peso-page="jobseeker-home"] .js-job-card .js-job-footer .js-job-expand:not(:disabled):is(:hover,:focus-visible),
html body.jf-workspace-site[data-peso-page="jobseeker-home"] .js-job-card.is-expanded .js-job-footer .js-job-expand:not(:disabled) {
    background: color-mix(in srgb, var(--a-green, #23bd78) 16%, var(--a-card, #0a2a1e)) !important;
    border-color: var(--a-green, #23bd78) !important;
    color: var(--a-green, #62e3a4) !important;
    -webkit-text-fill-color: var(--a-green, #62e3a4) !important;
}
html body.jf-workspace-site[data-peso-page="jobseeker-home"] .js-job-card .js-job-footer :is(.view-btn[aria-disabled="true"],.view-btn.is-disabled,.js-job-expand:disabled) {
    opacity: .62 !important;
    cursor: not-allowed !important;
}

/* Registration validation must read as an actionable state, not faint helper
   text. This covers live email availability, password mismatch, and the
   server-side error shown after a rejected submission. */
html body[data-peso-page="jobseeker-register"] .match-feedback {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin-top: 9px;
    padding: 10px 12px;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
}
html body[data-peso-page="jobseeker-register"] .match-feedback > i:first-child {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: .9rem;
}
html body[data-peso-page="jobseeker-register"] .match-feedback > span {
    min-width: 0;
    flex: 1 1 auto;
}
html body[data-peso-page="jobseeker-register"] .match-feedback :is(strong,small) {
    display: block;
}
html body[data-peso-page="jobseeker-register"] .match-feedback strong {
    color: inherit !important;
    font-size: .82rem;
    font-weight: 800;
}
html body[data-peso-page="jobseeker-register"] .match-feedback small {
    margin-top: 2px;
    color: inherit !important;
    font-size: .74rem;
    font-weight: 500;
    opacity: .86;
}
html body[data-peso-page="jobseeker-register"] .match-feedback.invalid {
    color: #8f1626 !important;
    -webkit-text-fill-color: currentColor !important;
    background: #fff0f2 !important;
    border-color: #e9a2ab !important;
}
html body[data-peso-page="jobseeker-register"] .match-feedback.invalid > i:first-child {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: #b42335;
}
html body[data-peso-page="jobseeker-register"] .match-feedback.valid {
    color: #075f3b !important;
    -webkit-text-fill-color: currentColor !important;
    background: #eaf9f1 !important;
    border-color: #91d4b1 !important;
}
html body[data-peso-page="jobseeker-register"] .match-feedback.valid > i:first-child {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: #087443;
}
html body[data-peso-page="jobseeker-register"] .match-feedback.checking {
    color: #304d40 !important;
    background: #f0f6f3 !important;
    border-color: #c9dbd2 !important;
}
html body[data-peso-page="jobseeker-register"] .match-feedback a {
    min-height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: #8f1626;
    border-radius: 9px;
    font-size: .74rem;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
}
html body[data-peso-page="jobseeker-register"] .match-feedback a:hover {
    background: #71101d;
}
html body[data-peso-page="jobseeker-register"] .field.has-validation-error .input-group {
    border-color: #d13d50 !important;
    box-shadow: 0 0 0 3px rgba(209,61,80,.14) !important;
}
html body[data-peso-page="jobseeker-register"] .field.has-validation-error .input-group > .icon {
    color: #d13d50 !important;
}
html body[data-peso-page="jobseeker-register"] .field.has-validation-success .input-group {
    border-color: #15945d !important;
    box-shadow: 0 0 0 3px rgba(21,148,93,.11) !important;
}
html body[data-peso-page="jobseeker-register"] .message.error {
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    color: #8f1626 !important;
    -webkit-text-fill-color: currentColor !important;
    background: #fff0f2 !important;
    border: 1px solid #e9a2ab !important;
    border-left: 4px solid #b42335 !important;
    border-radius: 12px !important;
}
html body[data-peso-page="jobseeker-register"] .message.error > i:first-child {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: #b42335;
    border-radius: 10px;
}
html body[data-peso-page="jobseeker-register"] .message-copy :is(strong,span) { display: block; }
html body[data-peso-page="jobseeker-register"] .message-copy strong { margin-bottom: 2px; color: inherit !important; font-size: .88rem; }
html body[data-peso-page="jobseeker-register"] .message-copy span { font-size: .8rem; line-height: 1.45; }
html body[data-peso-page="jobseeker-register"] .message-action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: #8f1626;
    border-radius: 9px;
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
}
html[data-theme="dark"] body[data-peso-page="jobseeker-register"] :is(.match-feedback.invalid,.message.error) {
    color: #ffdce1 !important;
    background: #3a151b !important;
    border-color: #a84450 !important;
}
html[data-theme="dark"] body[data-peso-page="jobseeker-register"] .match-feedback.valid {
    color: #c6f7dc !important;
    background: #0c3525 !important;
    border-color: #267d53 !important;
}
html[data-theme="dark"] body[data-peso-page="jobseeker-register"] .match-feedback.checking {
    color: #d6e8df !important;
    background: #173328 !important;
    border-color: #3e6252 !important;
}
@media (max-width: 620px) {
    html body[data-peso-page="jobseeker-register"] .message.error {
        grid-template-columns: 34px minmax(0,1fr);
        align-items: start !important;
    }
    html body[data-peso-page="jobseeker-register"] .match-feedback.invalid {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    html body[data-peso-page="jobseeker-register"] .match-feedback.invalid > span {
        width: calc(100% - 44px);
    }
    html body[data-peso-page="jobseeker-register"] .match-feedback a,
    html body[data-peso-page="jobseeker-register"] .message-action {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Registration agreement actions: one authoritative geometry. Earlier
   registration layers gave Back and Submit different flex bases, heights,
   padding and mobile order, leaving the pair visibly misaligned. */
html body[data-peso-page="jobseeker-register"] .registration-step-actions--final {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100%;
    margin-top: 20px !important;
}
html body[data-peso-page="jobseeker-register"] .registration-step-actions--final > :is(.registration-step-button--secondary,.btn-submit) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
    font: 800 .82rem/1 "Plus Jakarta Sans", Inter, sans-serif !important;
    white-space: nowrap;
    order: initial !important;
}
html body[data-peso-page="jobseeker-register"] .registration-step-actions--final > .registration-step-button--secondary {
    color: var(--reg-ink, #173528) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--reg-surface, #fff) !important;
    border: 1px solid var(--reg-line, #cbded3) !important;
    box-shadow: none !important;
}
html body[data-peso-page="jobseeker-register"] .registration-step-actions--final > .registration-step-button--secondary:hover {
    color: var(--reg-brand, #087443) !important;
    border-color: var(--reg-brand, #087443) !important;
    background: color-mix(in srgb, var(--reg-brand, #087443) 7%, var(--reg-surface, #fff)) !important;
}
html body[data-peso-page="jobseeker-register"] .registration-step-actions--final > .btn-submit {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: linear-gradient(135deg, #087443, #0b9560) !important;
    border: 1px solid #087443 !important;
    box-shadow: 0 12px 24px -16px rgba(8,116,67,.72) !important;
}
html body[data-peso-page="jobseeker-register"] .registration-step-actions--final > .btn-submit > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
@media (max-width: 560px) {
    html body[data-peso-page="jobseeker-register"] .registration-step-actions--final {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    html body[data-peso-page="jobseeker-register"] .registration-step-actions--final > :is(.registration-step-button--secondary,.btn-submit) {
        min-height: 50px !important;
        height: 50px !important;
        max-height: 50px !important;
    }
}

/* Dashboard Quick View mirrors Find Jobs' focused preview and never changes
   the job-grid geometry. The inline detail remains only as a data source. */
html body[data-peso-page="jobseeker-home"] .js-job-card > .js-job-detail {
    display: none !important;
}
body.js-dashboard-qv-open { overflow: hidden !important; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv[hidden] { display: none !important; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: grid;
    place-items: center;
    padding: 20px;
}
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__backdrop {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: rgba(2,22,14,.7) !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 0;
    backdrop-filter: blur(5px);
    transition: opacity .18s ease !important;
}
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__panel {
    position: relative;
    z-index: 1;
    width: min(680px, 100%) !important;
    max-height: min(760px, calc(100vh - 40px)) !important;
    max-height: min(760px, calc(100dvh - 40px)) !important;
    /* flex column, not grid: a grid item's automatic minimum size defaults
       to its CONTENT height, which fought the minmax(0,1fr) row track and
       let a long job description push the body (and footer) past
       max-height, off the top/bottom of the viewport on mobile. The search
       page's Quick View drawer already uses this exact flex pattern
       (flex:0 0 auto head/actions + flex:1 1 auto + min-height:0 body) with
       no such bug — mirrored here instead of re-deriving grid-specific
       sizing rules. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--a-ink, #173528);
    background: var(--a-card, #fff);
    border: 1px solid var(--a-line, #cbded3);
    border-radius: 20px;
    box-shadow: 0 30px 80px -28px rgba(0,34,20,.68);
    opacity: 0;
    transform: translateY(18px) scale(.98);
    transition: opacity .18s ease, transform .2s ease !important;
}
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv.is-visible .js-dashboard-qv__backdrop { opacity: 1; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv.is-visible .js-dashboard-qv__panel { opacity: 1; transform: none; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--a-line, #cbded3);
}
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__head :is(small,strong) { display: block; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__head small { color: var(--a-green, #087443); font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__head strong { margin-top: 2px; color: var(--a-ink, #173528); font-size: .92rem; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__close {
    width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important;
    display: grid !important; place-items: center !important; padding: 0 !important;
    color: var(--a-ink, #173528) !important; background: var(--a-soft, #eef6f1) !important;
    border: 1px solid var(--a-line, #cbded3) !important; border-radius: 11px !important;
}
/* flex:1 1 auto + min-height:0 — a flex item's automatic minimum size
   defaults to its CONTENT height unless min-height:0 is set, which fought
   the panel's max-height cap and let a long job description push this row
   (and the footer after it) off the top/bottom of the viewport on mobile. */
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 20px; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__identity { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__logo {
    width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; overflow: hidden;
    color: var(--a-green, #087443); background: #fff; border: 1px solid var(--a-line, #cbded3); border-radius: 13px;
}
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__logo img { width: 100%; height: 100%; object-fit: contain; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__identity h2 { margin: 0; color: var(--a-ink, #173528); font: 700 1.32rem/1.25 "Space Grotesk", sans-serif; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__identity p { margin: 3px 0 0; color: var(--a-muted, #62756b); font-size: .82rem; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__content .js-job-detail__inner { overflow: visible; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__content .js-job-detail__lead { font-size: .86rem !important; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__content .js-job-detail__block { padding: 13px 0; border-top: 1px solid var(--a-line, #cbded3); }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__content .js-job-detail__block p { font-size: .82rem !important; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__actions {
    display: grid; flex: 0 0 auto; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 10px;
    padding: 15px 18px; border-top: 1px solid var(--a-line, #cbded3); background: var(--a-soft, #f4f8f5);
}
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__actions :is(button,a) {
    min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 14px; border-radius: 11px; font-size: .8rem; font-weight: 800; text-decoration: none !important;
}
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__cancel { color: var(--a-ink, #173528) !important; background: var(--a-card, #fff) !important; border: 1px solid var(--a-line, #cbded3) !important; }
html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__apply { color: #fff !important; -webkit-text-fill-color: #fff !important; background: #087443 !important; border: 1px solid #087443 !important; }
/* Find Jobs uses the dashboard Quick View visual language without replacing
   its data binding, match breakdown, save action, or application state. */
html body[data-peso-page="jobseeker-search"] .js-qv-backdrop {
    background: rgba(2,22,14,.7) !important;
    backdrop-filter: blur(5px) !important;
    z-index: 2600 !important;
}
html body[data-peso-page="jobseeker-search"] .js-qv-drawer {
    width: min(680px, calc(100vw - 40px)) !important;
    max-height: min(760px, calc(100dvh - 40px)) !important;
    overflow: hidden !important;
    color: var(--a-ink) !important;
    background: var(--a-card) !important;
    border: 1px solid var(--a-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 30px 80px -28px rgba(0,34,20,.68) !important;
    z-index: 2601 !important;
}
html body[data-peso-page="jobseeker-search"] .js-qv-drawer__head {
    padding: 16px 18px !important;
    border-color: var(--a-line) !important;
    background: var(--a-card) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
html body[data-peso-page="jobseeker-search"] .js-qv-head-label :is(small,strong) { display: block; }
html body[data-peso-page="jobseeker-search"] .js-qv-head-label small {
    color: var(--a-green) !important; -webkit-text-fill-color: currentColor !important;
    font-size: .66rem !important; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
html body[data-peso-page="jobseeker-search"] .js-qv-head-label strong {
    margin-top: 4px; color: var(--a-ink) !important; -webkit-text-fill-color: currentColor !important;
    font-size: .92rem !important;
}
html body[data-peso-page="jobseeker-search"] .js-qv-close {
    width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important;
    display: grid !important; place-items: center !important; padding: 0 !important;
    color: var(--a-ink) !important; background: var(--a-soft) !important;
    border: 1px solid var(--a-line) !important; border-radius: 11px !important;
}
html body[data-peso-page="jobseeker-search"] .js-qv-drawer__body { padding: 20px !important; min-height: 0; }
html body[data-peso-page="jobseeker-search"] .js-qv-logo {
    width: 54px !important; height: 54px !important; flex: 0 0 54px !important;
    background: #fff !important; border-color: var(--a-line) !important; border-radius: 13px !important;
}
html body[data-peso-page="jobseeker-search"] .js-qv-drawer h2 {
    color: var(--a-ink) !important; font: 700 1.32rem/1.25 "Space Grotesk",sans-serif !important;
}
html body[data-peso-page="jobseeker-search"] .js-qv-section {
    padding: 13px 0 !important; margin-bottom: 0 !important; border-top: 1px solid var(--a-line);
}
html body[data-peso-page="jobseeker-search"] .js-qv-section h3 { color: var(--a-green) !important; }
html body[data-peso-page="jobseeker-search"] .js-qv-section p { color: var(--a-muted) !important; font-size: .82rem !important; }
html body[data-peso-page="jobseeker-search"] .js-qv-drawer__actions {
    display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr) !important;
    gap: 10px !important; padding: 15px 18px !important;
    border-color: var(--a-line) !important; background: var(--a-soft) !important;
}
html body[data-peso-page="jobseeker-search"] .js-qv-drawer__actions :is(button,a) {
    min-height: 46px !important; width: 100% !important; padding: 10px 14px !important;
    border-radius: 11px !important; font-size: .8rem !important; font-weight: 800 !important;
}
html body[data-peso-page="jobseeker-search"] .js-qv-save {
    color: var(--a-ink) !important; background: var(--a-card) !important; border-color: var(--a-line) !important;
}
html body[data-peso-page="jobseeker-search"] .js-qv-apply:not(.is-applied) {
    color: #fff !important; -webkit-text-fill-color: #fff !important; background: #087443 !important;
}
@media (max-width: 560px) {
    html body[data-peso-page="jobseeker-search"] .js-qv-drawer {
        width: calc(100vw - 20px) !important; max-height: calc(100dvh - 20px) !important; border-radius: 16px !important;
    }
    html body[data-peso-page="jobseeker-search"] .js-qv-drawer__actions { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv {
        padding: 10px !important;
        padding-top: max(10px, env(safe-area-inset-top)) !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__panel {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 16px !important;
    }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__actions { grid-template-columns: 1fr !important; }
}
/* Extra-small phones (the width the "too big / cut off" report came from):
   shrink every band of the modal so its intrinsic content height stops
   competing with the max-height cap above — same data, smaller chrome. */
@media (max-width: 420px) {
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv { padding: 8px !important; }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__panel {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 14px !important;
    }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__head { padding: 13px 14px !important; }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__head strong { font-size: .84rem !important; }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__close {
        width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important;
    }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__body { padding: 14px !important; }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__identity { gap: 10px !important; margin-bottom: 13px !important; }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__logo { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; border-radius: 10px !important; }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__identity h2 { font-size: 1.06rem !important; }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__identity p { font-size: .76rem !important; }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__content .js-job-detail__lead,
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__content .js-job-detail__block p { font-size: .78rem !important; }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__content .js-job-detail__block { padding: 11px 0 !important; }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__actions {
        padding: 12px 14px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        gap: 8px !important;
    }
    html body[data-peso-page="jobseeker-home"] .js-dashboard-qv__actions :is(button,a) {
        min-height: 42px !important; font-size: .76rem !important; padding: 8px 12px !important;
    }
}

/* Jobseeker modal close (×) icons should read red, matching the
   Remove/Delete/Close treatment above. Several independent modal systems
   (Apply, the two Quick Views, Skills, and the JS auto-injected fallback
   used when a page ships no close button of its own) each color their own
   × separately with their own !important rules, so one shared override is
   added here rather than editing every page. The extra [class] repeats
   push specificity above each competing rule regardless of load order;
   #skillsModal needs its own ID-level line since jobseeker-skills-modal.css
   scopes to that ID specifically. */
html body[data-peso-page^="jobseeker-"][class] :is(.modal-close,.close-modal,.close-btn,.btn-close,[data-modal-close],.peso-generated-modal-close,.modal-close-btn,.js-qv-close,.js-dashboard-qv__close),
html body[data-peso-page="job-details"][class] :is(.modal-close,.close-modal,.close-btn,.btn-close,[data-modal-close],.peso-generated-modal-close,.modal-close-btn,.js-qv-close,.js-dashboard-qv__close),
html body[data-peso-page^="jobseeker-"][class] #skillsModal .modal-close,
html body[data-peso-page="job-details"][class] #skillsModal .modal-close {
    background: var(--pf-danger-bg, linear-gradient(180deg,#e5484d 0%,#c5343a 100%)) !important;
    border: 1px solid transparent !important;
    color: var(--pf-danger-fg, #fff) !important;
    -webkit-text-fill-color: var(--pf-danger-fg, #fff) !important;
}
html body[data-peso-page^="jobseeker-"][class] :is(.modal-close,.close-modal,.close-btn,.btn-close,[data-modal-close],.peso-generated-modal-close,.modal-close-btn,.js-qv-close,.js-dashboard-qv__close):is(:hover,:focus-visible),
html body[data-peso-page="job-details"][class] :is(.modal-close,.close-modal,.close-btn,.btn-close,[data-modal-close],.peso-generated-modal-close,.modal-close-btn,.js-qv-close,.js-dashboard-qv__close):is(:hover,:focus-visible),
html body[data-peso-page^="jobseeker-"][class] #skillsModal .modal-close:is(:hover,:focus-visible),
html body[data-peso-page="job-details"][class] #skillsModal .modal-close:is(:hover,:focus-visible) {
    background: var(--pf-danger-bg-hover, #c0392b) !important;
    color: var(--pf-danger-fg, #fff) !important;
    outline: none !important;
}

/* Employer modal close (×) icons — reuse employer's OWN canonical danger
   token (--es-danger / --es-danger-soft, already the color of the sidebar
   logout button, the calendar decline action, and every other employer
   danger control — see employer-suite-2026.css) rather than importing the
   jobseeker solid-red gradient. Covers 3 independently-built close-icon
   systems: .modal-close (post-job preview / announcements), .modal-close-btn
   (applicants' match-details), .close-modal (calendar / view-application).
   The #announcementModal line is needed because that page's own
   employer-announcements-modern.css scopes to that ID specifically. */
html body.ef-site.peso-role-employer[data-peso-page^="employer-"][class] :is(.modal-close,.close-modal,.close-btn,.btn-close,[data-modal-close],.peso-generated-modal-close,.modal-close-btn),
html body.ef-site.peso-role-employer[data-peso-page^="employer-"][class] #announcementModal .modal-close {
    background: var(--es-danger-soft, rgba(255,107,129,.14)) !important;
    border: 1px solid rgba(255,107,129,.34) !important;
    color: var(--es-danger, #ff6b81) !important;
    -webkit-text-fill-color: var(--es-danger, #ff6b81) !important;
}
html body.ef-site.peso-role-employer[data-peso-page^="employer-"][class] :is(.modal-close,.close-modal,.close-btn,.btn-close,[data-modal-close],.peso-generated-modal-close,.modal-close-btn):is(:hover,:focus-visible),
html body.ef-site.peso-role-employer[data-peso-page^="employer-"][class] #announcementModal .modal-close:is(:hover,:focus-visible) {
    background: var(--es-danger, #ff6b81) !important;
    border-color: var(--es-danger, #ff6b81) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    outline: none !important;
}

/* Admin modal close (×) icons — reuse admin's OWN "frosted outline, red glow
   on hover" danger language from admin-polish.css's .btn-danger (the one
   rule actually in effect there — several OTHER --admx-danger/--admin-danger
   tokens exist in older, superseded admin CSS layers and are not what
   renders, so the raw hex pair is repeated here rather than a mismatched
   variable). Covers 3 independent close-icon systems: .modal-close
   (job-approvals' job-details modal), .walkin-modal-close (walk-in intake /
   assisted-apply modals — its own green :focus-visible OUTLINE ring is left
   untouched, only the resting/hover fill changes), .emp-modal__close
   (admin_employers.php). */
html body.peso-admin-workspace[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .modal-close,.close-modal,.close-btn,.btn-close,[data-modal-close],.peso-generated-modal-close,.modal-close-btn,.walkin-modal-close,.emp-modal__close
) {
    border: 1px solid color-mix(in srgb, #e2554f 46%, transparent) !important;
    background: color-mix(in srgb, #e2554f 7%, var(--adp-surf, #fff)) !important;
    color: #c0392b !important;
    -webkit-text-fill-color: #c0392b !important;
}
html body.peso-admin-workspace[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .modal-close,.close-modal,.close-btn,.btn-close,[data-modal-close],.peso-generated-modal-close,.modal-close-btn,.walkin-modal-close,.emp-modal__close
):is(:hover,:focus-visible) {
    border-color: #e2554f !important;
    background: linear-gradient(135deg, #ef6a5f, #c0392b) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html body.peso-admin-workspace:not(.light)[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .modal-close,.close-modal,.close-btn,.btn-close,[data-modal-close],.peso-generated-modal-close,.modal-close-btn,.walkin-modal-close,.emp-modal__close
):not(:hover):not(:focus-visible) {
    color: #f6a8a3 !important;
    -webkit-text-fill-color: #f6a8a3 !important;
}