/*
 * PESO Dasmarinas responsive foundation
 * Final shared layout layer loaded after every role/page stylesheet.
 * It normalizes the accumulated legacy layouts without changing workflows.
 */

:root {
    --peso-screen-gutter: clamp(12px, 2.1vw, 40px);
    --peso-screen-gutter-small: clamp(10px, 3.4vw, 18px);
    --peso-content-max: 1880px;
    --peso-touch-size: 44px;
}

html {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
    overflow-x: clip;
}

html body[data-peso-page] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
}

body[data-peso-page],
body[data-peso-page] *,
body[data-peso-page] *::before,
body[data-peso-page] *::after {
    box-sizing: border-box;
}

body[data-peso-page] :is(main, section, article, aside, header, footer, nav, form, fieldset, div, ul, ol, li) {
    min-width: 0;
}

body[data-peso-page] :is(img, svg, video, canvas, iframe) {
    max-width: 100%;
}

body[data-peso-page] img {
    height: auto;
}

body[data-peso-page] :is(h1, h2, h3, h4, h5, h6, p, label, legend, button, a, span, strong, small, td, th) {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

body[data-peso-page] :is(input, select, textarea, button) {
    min-width: 0;
    max-width: 100%;
    font-family: inherit;
}

body[data-peso-page] :is(.table-responsive, .table-wrapper, .table-container, .peso-table-wrap, .responsive-table, [class*="table-scroll"]) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

body[data-peso-page] :is(.modal-overlay, .modal-backdrop, .confirmation-overlay, .dialog-backdrop) {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

body[data-peso-page] :is(.modal-container, .modal-content, .modal-card, [role="dialog"], .settings-confirm-dialog) {
    max-width: min(100%, 760px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Keep shared floating actions in one predictable vertical rail. */
body[data-peso-page] .peso-assistant__launcher {
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
}

body[data-peso-page].peso-has-assistant .peso-back-to-top,
body[data-peso-page] .peso-back-to-top {
    right: max(23px, env(safe-area-inset-right)) !important;
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 68px) !important;
}

body[data-peso-page] .peso-assistant__panel {
    max-width: min(420px, calc(100vw - 24px)) !important;
    max-height: min(720px, calc(100dvh - 104px)) !important;
}

/* Form controls must retain readable foregrounds after a theme switch.
   Page-level styles may change borders, but not erase entered text. */
html[data-theme="dark"] body[data-peso-page] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea),
body[data-peso-page].dark-mode :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
    color: #f2fbf6 !important;
    -webkit-text-fill-color: #f2fbf6 !important;
    background-color: #0b261d !important;
    border-color: rgba(139, 205, 177, .32) !important;
    caret-color: #f4c430 !important;
    color-scheme: dark;
}

html[data-theme="dark"] body[data-peso-page] :is(input, textarea)::placeholder,
body[data-peso-page].dark-mode :is(input, textarea)::placeholder {
    color: #a9c2b7 !important;
    -webkit-text-fill-color: #a9c2b7 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body[data-peso-page] select option,
body[data-peso-page].dark-mode select option {
    color: #f2fbf6 !important;
    background: #0b261d !important;
}

html[data-theme="dark"] body[data-peso-page] input:-webkit-autofill,
body[data-peso-page].dark-mode input:-webkit-autofill {
    -webkit-text-fill-color: #f2fbf6 !important;
    box-shadow: 0 0 0 1000px #0b261d inset !important;
}

/* Jobseeker profile dialogs use one stable, true-center form surface. */
body[data-peso-page="jobseeker-profile"] .modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)) !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden auto !important;
    overscroll-behavior: contain !important;
}

body[data-peso-page="jobseeker-profile"] .modal.show,
body[data-peso-page="jobseeker-profile"] .modal[style*="display: block"],
body[data-peso-page="jobseeker-profile"] .modal[style*="display:block"],
body[data-peso-page="jobseeker-profile"] .modal[style*="display: flex"],
body[data-peso-page="jobseeker-profile"] .modal[style*="display:flex"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body[data-peso-page="jobseeker-profile"] .modal > .modal-content {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    flex: 0 1 auto !important;
    width: min(620px, calc(100vw - 36px)) !important;
    max-width: 620px !important;
    max-height: calc(100dvh - 36px) !important;
    margin: auto !important;
    padding: clamp(22px, 4vw, 32px) !important;
    border-radius: clamp(20px, 3vw, 30px) !important;
    overflow: hidden auto !important;
    overscroll-behavior: contain !important;
    transform-origin: center center !important;
}

body[data-peso-page="jobseeker-profile"] .skills-modal > .modal-content {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
}

body[data-peso-page="jobseeker-profile"] .modal :is(input, select, textarea) {
    width: 100% !important;
}

/* Admin Job Fair controls remain actionable after the command-center theme. */
body[data-peso-page="admin-announcements"] .jobfair-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

body[data-peso-page="admin-announcements"] .jobfair-action-form {
    display: inline-flex !important;
    margin: 0 !important;
}

body[data-peso-page="admin-announcements"] .jobfair-actions :is(a, button) {
    min-height: 42px !important;
    padding: 10px 14px !important;
    white-space: normal !important;
}

/* Hosted mobile safety net for every authenticated Employer page. This rule
   is independent of the enhancement scripts and also covers tablets. */
@media (max-width: 1023px) {
    html body.peso-role-employer[data-peso-page^="employer-"] [data-ef-reveal],
    html body.peso-role-employer[data-peso-page^="employer-"] [data-es-reveal],
    html body.ef-site.peso-role-employer[data-peso-page^="employer-"] [data-ef-reveal],
    html body.ef-site.peso-role-employer[data-peso-page^="employer-"] [data-es-reveal] {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Authentication: remove the legacy double-padding squeeze on narrow screens. */
@media (max-width: 600px) {
    html body.peso-product-ui.auth-page main.auth-shell,
    html body.peso-product-ui.auth-page main.auth-shell.auth-shell--compact,
    html body.auth-page main.auth-shell,
    html body.auth-page main.auth-shell.auth-shell--compact,
    html body.auth-page .verification-shell,
    html body.auth-page .recovery-shell {
        width: calc(100% - 20px) !important;
        max-width: 560px !important;
        min-width: 0 !important;
        margin: 74px auto 36px !important;
        padding: 0 !important;
    }

    html body.auth-page .auth-form-panel,
    html body.auth-page .auth-form-panel.auth-login-card,
    html body.auth-page .auth-login-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    html body.peso-product-ui.auth-page main.auth-shell .auth-form-panel.auth-login-card .auth-form-wrap,
    html body.peso-product-ui.auth-page main.auth-shell .auth-form-panel .auth-form-wrap,
    html body.auth-page .auth-form-wrap {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 30px clamp(18px, 6vw, 30px) 26px !important;
    }

    html body.peso-product-ui.auth-page main.auth-shell .auth-form-wrap :is(
        .auth-login-identity, .role-login-identity, .auth-form-heading,
        .auth-form, .auth-field, .auth-input-wrap, .auth-label-row,
        .auth-secondary-action, .auth-login-security, .auth-security-note,
        .admin-login-help, .verification-form, .recovery-form
    ),
    html body.auth-page :is(
        .auth-login-identity, .role-login-identity, .auth-form-heading,
        .auth-form, .auth-field, .auth-input-wrap, .auth-label-row,
        .auth-secondary-action, .auth-login-security, .auth-security-note,
        .admin-login-help, .verification-form, .recovery-form
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body.auth-page :is(.auth-login-identity, .role-login-identity, .recovery-brand) {
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) !important;
        justify-content: stretch !important;
        align-items: center !important;
        gap: 12px !important;
        margin-inline: 0 !important;
        text-align: left !important;
    }

    html body.auth-page :is(.auth-login-logo, .role-login-logo, .recovery-brand img) {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        flex-basis: 54px !important;
    }

    html body.auth-page :is(.auth-login-identity, .role-login-identity) > span:last-child {
        min-width: 0 !important;
        display: grid !important;
        gap: 3px !important;
    }

    html body.auth-page :is(.auth-login-identity, .role-login-identity) :is(strong, small) {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    html body.auth-page :is(.auth-login-identity, .role-login-identity) strong {
        font-size: 18px !important;
        line-height: 1.18 !important;
    }

    html body.auth-page :is(.auth-login-identity, .role-login-identity) small {
        margin-top: 0 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    html body.auth-page .auth-form-heading h1 {
        font-size: clamp(28px, 9vw, 34px) !important;
    }

    html body.auth-page .auth-form-heading p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    html body.auth-page .auth-label-row {
        flex-wrap: wrap !important;
        align-items: baseline !important;
    }

    html body.auth-page .auth-input-wrap {
        min-height: 52px !important;
        padding-inline: 13px !important;
    }

    html body.auth-page .auth-input-wrap input,
    html body.auth-page :is(.recovery-card, .verification-form) :is(input, select, textarea) {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important;
    }

    html body.auth-page .auth-secondary-action,
    html body.auth-page .admin-login-help {
        flex-wrap: wrap !important;
    }

    html body.auth-page .recovery-card {
        width: 100% !important;
        padding: 30px clamp(18px, 6vw, 30px) 26px !important;
    }

    html body[data-peso-page="verify-email"] main,
    html body[data-peso-page="employer-set-password"] main {
        width: calc(100% - 20px) !important;
        max-width: 560px !important;
        margin: 74px auto 36px !important;
        padding: 30px clamp(18px, 6vw, 30px) !important;
    }
}

/* Registration keeps every workflow step readable and vertically scannable. */
@media (max-width: 700px) {
    html body[data-peso-page="jobseeker-register"] {
        width: 100% !important;
        padding: 0 8px 84px !important;
    }

    html body[data-peso-page="jobseeker-register"] .page {
        width: 100% !important;
        margin-top: 68px !important;
    }

    html body[data-peso-page="jobseeker-register"] :is(.card-header, .card-body) {
        padding: 24px clamp(15px, 5vw, 26px) !important;
    }

    html body[data-peso-page="jobseeker-register"] .section {
        margin-bottom: 18px !important;
        padding: 18px 14px !important;
    }

    html body[data-peso-page="jobseeker-register"] :is(.grid, .form-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-peso-page="jobseeker-register"] .registration-section-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    html body[data-peso-page="jobseeker-register"] .registration-section-nav :is(button, a) {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;
        padding: 8px !important;
        white-space: normal !important;
        font-size: 12.5px !important;
        line-height: 1.25 !important;
    }

    html body[data-peso-page="jobseeker-register"] .registration-step-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-peso-page="jobseeker-register"] .registration-step-actions > * {
        width: 100% !important;
        margin: 0 !important;
    }

    html body[data-peso-page="jobseeker-register"] :is(.field label, .section-heading-copy small, .proof-list, .helper-text) {
        font-size: max(12.5px, .78rem) !important;
        line-height: 1.45 !important;
    }

    html body[data-peso-page="jobseeker-register"] :is(
        .registration-eyebrow,
        .registration-section-nav a > span,
        .registration-section-nav button > span,
        .registration-progress [data-registration-progress],
        .section-number
    ) {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
}

/* Public landing pages. */
@media (max-width: 760px) {
    html body[data-peso-page] :is(.pjl-container, .public-container, .landing-container, .site-container) {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }

    html body[data-peso-page] :is(.pjl-hero-grid, .landing-hero-grid, .employer-hero-grid, .hero-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-peso-page] :is(.pjl-hero h1, .landing-hero h1, .employer-hero h1) {
        font-size: clamp(34px, 11vw, 50px) !important;
        line-height: 1.04 !important;
    }

    html body[data-peso-page] :is(.pjl-search, .landing-search, .hero-search, .search-form) {
        max-width: 100% !important;
    }

    html body[data-peso-page] :is(.pjl-footer, .site-footer) {
        padding-bottom: max(86px, calc(env(safe-area-inset-bottom) + 78px)) !important;
    }
}

/* Authenticated Jobseeker workspace. */
@media (max-width: 980px) {
    html body.jf-workspace-site :is(.js-dashboard-shell, .js-suite-workspace, body > .container, body > .page, main.support-shell) {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }

    html body.jf-workspace-site :is(.profile-layout, .dashboard-grid, .content-grid, .support-layout, .skills-layout, .job-details-layout, .settings-layout) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.jf-workspace-site :is(.jobs-grid, .job-grid, .cards-grid, .announcement-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    html body.jf-workspace-site :is(.js-dashboard-shell, .js-suite-workspace, body > .container, body > .page, main.support-shell) {
        width: calc(100% - 16px) !important;
    }

    html body.jf-workspace-site :is(.jobs-grid, .job-grid, .cards-grid, .announcement-grid, .stats-grid, .quick-actions-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.jf-workspace-site :is(.page-header, .hero, .content-header, .support-hero, .job-header, .js-suite-page-hero) {
        padding: 24px 18px !important;
    }

    html body.jf-workspace-site :is(.card, .panel, .content-card, .profile-card, .details-card, .job-card, .js-job-card) {
        max-width: 100% !important;
    }

    html body.jf-workspace-site :is(.toolbar, .filter-bar, .search-bar, .section-header, .card-header, .page-actions) {
        flex-wrap: wrap !important;
    }

    html body.jf-workspace-site :is(input, select, textarea) {
        font-size: 16px !important;
    }
}

/* Authenticated Employer workspace. */
@media (max-width: 1120px) {
    html body.ef-site .ef-header .ef-nav,
    html body.ef-site > :is(.ef-shell, .container.ef-shell, main.ef-shell, main.peso-page-shell, main.support-shell) {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }

    html body.ef-site :is(.dashboard-grid, .cc-workspace, .support-layout, .application-layout, .settings-layout, .calendar-layout, .analytics-layout) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 680px) {
    html body.ef-site .ef-header .ef-nav,
    html body.ef-site > :is(.ef-shell, .container.ef-shell, main.ef-shell, main.peso-page-shell, main.support-shell) {
        width: calc(100% - 16px) !important;
    }

    html body.ef-site :is(.cc-kpis, .stats-grid, .peso-grid, .jobs-grid, .applicants-grid, .announcement-grid, .form-grid, .info-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.ef-site :is(.page-header, .welcome-banner, .employer-page-header, .peso-page-header, .support-hero) {
        width: 100% !important;
        padding: 24px 18px !important;
    }

    html body.ef-site :is(.filter-bar, .search-bar, .toolbar, .list-toolbar, .tabs-container, .card-header, .panel-header, .section-header) {
        flex-wrap: wrap !important;
    }

    html body.ef-site :is(input, select, textarea) {
        font-size: 16px !important;
    }
}

/* Admin workspace: one-column content and contained off-canvas navigation. */
@media (max-width: 1024px) {
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.content, .main-content, .dashboard-content, .page-content, .admx-dashboard) {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
    }

    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.dashboard-grid, .content-grid, .stats-grid, .analytics-grid, .settings-grid, .form-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.content, .main-content, .dashboard-content, .page-content, .admx-dashboard) {
        width: calc(100% - 16px) !important;
    }

    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.dashboard-sidebar, .admin-sidebar, #dashboardSidebar) {
        width: min(88vw, 320px) !important;
        max-width: calc(100vw - 28px) !important;
    }

    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.dashboard-grid, .content-grid, .stats-grid, .analytics-grid, .settings-grid, .form-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.admin-topbar, .topbar, .toolbar, .filter-bar, .search-bar, .card-header, .panel-header, .section-header) {
        flex-wrap: wrap !important;
    }

    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.admin-topbar-search, .topbar-search, .search-wrapper) {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(input, select, textarea) {
        font-size: 16px !important;
    }
}

/* Narrow-phone safeguards, including embedded browser scrollbars. */
@media (max-width: 390px) {
    :root {
        --peso-screen-gutter: 8px;
        --peso-screen-gutter-small: 8px;
    }

    html,
    html body[data-peso-page] {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html body.peso-product-ui.auth-page main.auth-shell,
    html body.peso-product-ui.auth-page main.auth-shell.auth-shell--compact,
    html body.auth-page main.auth-shell,
    html body.auth-page main.auth-shell.auth-shell--compact,
    html body.auth-page .verification-shell,
    html body.auth-page .recovery-shell {
        width: calc(100% - 12px) !important;
        margin-top: 68px !important;
    }

    html body.peso-product-ui.auth-page main.auth-shell .auth-form-panel.auth-login-card .auth-form-wrap,
    html body.peso-product-ui.auth-page main.auth-shell .auth-form-panel .auth-form-wrap,
    html body.auth-page .auth-form-wrap,
    html body.auth-page .recovery-card {
        padding: 24px 16px 22px !important;
    }

    html body.auth-page .auth-topbar,
    html body.auth-page .auth-toolbar,
    html body.auth-page .auth-utility-bar {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        gap: 6px !important;
    }

    html body.auth-page .peso-language-picker select,
    html body[data-peso-page] .peso-language-picker select {
        width: min(104px, 100%) !important;
        min-width: 0 !important;
        padding-inline: 8px 22px !important;
        font-size: 12px !important;
    }

    html body[data-peso-page="jobseeker-landing"] :is(.pjl-brand, .pjl-brand__copy) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-brand__copy small {
        max-width: 100% !important;
        white-space: normal !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
    }

    html body[data-peso-page] .peso-assistant__launcher {
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        width: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        padding: 5px !important;
    }

    html body[data-peso-page] .peso-assistant__launcher-copy {
        display: none !important;
    }

    html body[data-peso-page] .peso-assistant__launcher-mark {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    html body[data-peso-page].peso-has-assistant .peso-back-to-top,
    html body[data-peso-page] .peso-back-to-top {
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 62px) !important;
    }

    html body[data-peso-page] .peso-assistant__panel {
        inset: auto max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 12px) !important;
    }
}

@media (max-width: 320px) {
    html body.auth-page :is(.auth-login-identity, .role-login-identity, .recovery-brand) {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    html body.auth-page :is(.auth-login-logo, .role-login-logo, .recovery-brand img) {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        flex-basis: 48px !important;
    }

    html body.auth-page :is(.auth-login-identity, .role-login-identity) strong {
        font-size: 16px !important;
    }

    html body[data-peso-page="jobseeker-register"] .registration-section-nav {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-peso-page] *,
    body[data-peso-page] *::before,
    body[data-peso-page] *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    html,
    body[data-peso-page] {
        min-width: 0 !important;
        overflow: visible !important;
    }

    body[data-peso-page] :is(.peso-assistant, .peso-back-to-top, .peso-language-picker, .dashboard-menu-toggle, .ef-menu, .js-dashboard-menu) {
        display: none !important;
    }
}

/* PDF QA follow-up: authenticated Jobseeker navigation and content controls. */
html body.peso-role-jobseeker.peso-jobseeker-suite #dashboardMenuToggle {
    display: none !important;
}

html body.peso-role-jobseeker .js-dashboard-nav .profile-wrap {
    position: relative !important;
    align-self: center !important;
    height: 52px !important;
    min-height: 52px !important;
}

html body.peso-role-jobseeker .js-dashboard-nav .profile-wrap > .dropdown {
    position: absolute !important;
    inset: calc(100% + 10px) 0 auto auto !important;
    display: none !important;
    width: min(250px, calc(100vw - 24px)) !important;
    min-width: 220px !important;
    height: auto !important;
    z-index: 1200 !important;
}

html body.peso-role-jobseeker .js-dashboard-nav .profile-wrap > .dropdown.show {
    display: grid !important;
}

html body.peso-role-jobseeker .js-dashboard-nav .js-dashboard-actions {
    align-items: center !important;
    min-height: 52px !important;
}

body[data-peso-page="jobseeker-saved"] .saved-toolbar {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 230px) !important;
    align-items: center !important;
    gap: 12px !important;
    width: min(620px, 100%) !important;
}

body[data-peso-page="jobseeker-saved"] .saved-toolbar :is(.search-wrapper, .search-input, .sort-select) {
    width: 100% !important;
    min-width: 0 !important;
}

body[data-peso-page="jobseeker-saved"] .stats-grid {
    display: grid !important;
    grid-template-columns: minmax(220px, 340px) !important;
    justify-content: center !important;
    width: 100% !important;
}

body[data-peso-page="jobseeker-saved"] .stat-card {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
}

body[data-peso-page="jobseeker-saved"] .jobs-grid > .empty-state {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(680px, 100%) !important;
    text-align: center !important;
}

body[data-peso-page="jobseeker-saved"] .btn-browse {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 12px 22px !important;
    background: #087a4c !important;
    border: 1px solid #087a4c !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
}

body[data-peso-page="jobseeker-saved"] .btn-browse:hover,
body[data-peso-page="jobseeker-saved"] .btn-browse:focus-visible {
    background: #065f3c !important;
    border-color: #f4c430 !important;
}

/* Calendar dialogs keep readable contrast in both themes and stack cleanly. */
body[data-peso-page="jobseeker-calendar"] :is(.modal, .interview-modal) .modal-content {
    color: var(--text-primary, #14271f) !important;
}

body[data-peso-page="jobseeker-calendar"] :is(.modal, .interview-modal) .modal-header {
    background: #087a4c !important;
    color: #fff !important;
}

body[data-peso-page="jobseeker-calendar"] :is(.modal, .interview-modal) .modal-header :is(h2, h3, p, span, i, button) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body[data-peso-page="jobseeker-calendar"] .interview-modal .modal-body {
    display: block !important;
    background: var(--card-bg, #fff) !important;
}

body[data-peso-page="jobseeker-calendar"] .interview-modal .detail-row {
    display: grid !important;
    grid-template-columns: minmax(120px, .8fr) minmax(0, 1.4fr) !important;
    align-items: start !important;
}

@media (max-width: 720px) {
    body[data-peso-page="jobseeker-saved"] .saved-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    body[data-peso-page="jobseeker-calendar"] .interview-modal .detail-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    body[data-peso-page="jobseeker-calendar"] .interview-modal .detail-label {
        min-width: 0 !important;
    }
}

/* Admin Job Fairs: the original desktop card used three grid tracks. Collapse
   it deliberately on phones so details and management actions keep full width. */
html body[data-peso-page="admin-announcements"] .jobfair-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
}

html body[data-peso-page="admin-announcements"] .jobfair-card > :is(.jobfair-image, .jobfair-header, .jobfair-body) {
    width: 100% !important;
    min-width: 0 !important;
}

html body[data-peso-page="admin-announcements"] .jobfair-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: 100% !important;
}

html body[data-peso-page="admin-announcements"] .jobfair-actions :is(a, button, form) {
    width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 720px) {
    html body[data-peso-page="admin-announcements"] .tabs {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    html body[data-peso-page="admin-announcements"] .tab-btn {
        width: 100% !important;
        min-width: 0 !important;
        padding-inline: 10px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html body[data-peso-page="admin-announcements"] .jobfair-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body[data-peso-page="admin-announcements"] .jobfair-card > *,
    html body[data-peso-page="admin-announcements"] .jobfair-body,
    html body[data-peso-page="admin-announcements"] .jobfair-actions {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body[data-peso-page="admin-announcements"] .jobfair-image {
        min-height: 150px !important;
    }

    html body[data-peso-page="admin-announcements"] .jobfair-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }
}

/* --------------------------------------------------------------------------
   Production mobile fixes (public portal, registration, dashboards, resume)
   -------------------------------------------------------------------------- */

/* A job card is useful content, not decorative motion. Keep the first load
   independent from IntersectionObserver and from the filter submit button. */
body[data-peso-page="jobseeker-home"] .js-job-card,
body[data-peso-page="jobseeker-home"] .js-job-card[data-jh-reveal] {
    opacity: 1 !important;
    visibility: visible !important;
    translate: none !important;
    transform: none !important;
}

/* Registration fields need an explicit foreground because the original dark
   theme changed only the input wrapper. Include browser autofill as well. */
html[data-theme="dark"] body[data-peso-page="jobseeker-register"] .input-group :is(input, select, textarea),
body[data-peso-page="jobseeker-register"].dark-mode .input-group :is(input, select, textarea) {
    color: #f2fbf6 !important;
    -webkit-text-fill-color: #f2fbf6 !important;
    caret-color: #f4c430 !important;
    background: transparent !important;
}

html[data-theme="dark"] body[data-peso-page="jobseeker-register"] .input-group :is(input, textarea)::placeholder,
body[data-peso-page="jobseeker-register"].dark-mode .input-group :is(input, textarea)::placeholder {
    color: #a9c7ba !important;
    -webkit-text-fill-color: #a9c7ba !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body[data-peso-page="jobseeker-register"] .input-group select option,
body[data-peso-page="jobseeker-register"].dark-mode .input-group select option {
    color: #f2fbf6 !important;
    background: #0a2119 !important;
}

html[data-theme="dark"] body[data-peso-page="jobseeker-register"] .input-group input:-webkit-autofill,
body[data-peso-page="jobseeker-register"].dark-mode .input-group input:-webkit-autofill {
    -webkit-text-fill-color: #f2fbf6 !important;
    box-shadow: 0 0 0 1000px #0a2119 inset !important;
}

/* Shared employer notification sheet. It is anchored to the header on wide
   screens and becomes an inset, scrollable sheet on phones. */
body.ef-site[data-peso-page^="employer-"] .notif-dropdown {
    width: min(390px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(620px, calc(100dvh - 96px)) !important;
    overflow: hidden auto !important;
    border: 1px solid rgba(7, 103, 67, .2) !important;
    border-radius: 18px !important;
    background: #fff !important;
    color: #14261f !important;
    box-shadow: 0 22px 60px rgba(4, 45, 31, .2) !important;
    z-index: 10020 !important;
}

html[data-theme="dark"] body.ef-site[data-peso-page^="employer-"] .notif-dropdown,
body.ef-site[data-peso-page^="employer-"].dark-mode .notif-dropdown {
    border-color: rgba(114, 208, 166, .24) !important;
    background: #0b2119 !important;
    color: #effaf5 !important;
}

body.ef-site[data-peso-page^="employer-"] :is(.notif-dropdown-header, .notif-header) {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    padding: 16px !important;
    background: inherit !important;
}

body.ef-site[data-peso-page^="employer-"] .notif-item {
    min-height: 76px !important;
    padding: 14px 16px !important;
    white-space: normal !important;
}

body.ef-site[data-peso-page^="employer-"] .notif-item :is(strong, p, span, small) {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

body.ef-site[data-peso-page^="employer-"] .notif-item strong {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

body.ef-site[data-peso-page^="employer-"] .notif-item :is(p, span) {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Admin labels remain present whenever the navigation is expanded, regardless
   of page-specific legacy selectors. */
body[data-peso-page^="admin-"] .admx-sidebar:not(.collapsed) :is(.nav-link__label, .sidebar-label),
body[data-peso-page^="admin-"] .sidebar:not(.collapsed) :is(.nav-link__label, .sidebar-label) {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: normal !important;
}

/* Resume preview uses a stable two-column sheet on larger displays and a
   readable single-column document on phone-sized displays. */
body[data-peso-page="generate-resume"] {
    min-height: 100dvh !important;
    align-items: flex-start !important;
    padding: clamp(12px, 3vw, 40px) !important;
}

body[data-peso-page="generate-resume"] .resume-card {
    width: min(1100px, 100%) !important;
    margin-inline: auto !important;
}

body[data-peso-page="generate-resume"] .resume-body {
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.7fr) !important;
    gap: clamp(22px, 3vw, 34px) !important;
}

body[data-peso-page="generate-resume"] :is(.left-panel, .right-panel) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body[data-peso-page="generate-resume"] :is(.contact-item, .info-value, .experience-description, .edu-meta) {
    overflow-wrap: anywhere !important;
}

@media (max-width: 767px) {
    /* The public Employer landing page is also readable before or without
       its reveal script. This protects hosted mobile visitors on slow links. */
    html body[data-peso-page="employer-index"] [data-employer-reveal],
    html body[data-peso-page="employer-index"] [data-reveal],
    html body[data-peso-page="employer-index"].employer-motion-ready [data-employer-reveal] {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
    }

    /* Keep the public menu in normal document flow. It no longer floats over
       the hero image before the visitor scrolls. */
    html body[data-peso-page="jobseeker-landing"] .pjl-navbar,
    html body[data-peso-page="jobs"] .pjl-navbar {
        position: sticky !important;
        top: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        background: rgba(255, 255, 255, .98) !important;
        border-bottom: 1px solid rgba(7, 103, 67, .16) !important;
        box-shadow: 0 8px 24px rgba(5, 46, 33, .09) !important;
        backdrop-filter: blur(14px) !important;
    }

    html[data-theme="dark"] body[data-peso-page="jobseeker-landing"] .pjl-navbar,
    html[data-theme="dark"] body[data-peso-page="jobs"] .pjl-navbar {
        background: rgba(5, 35, 26, .98) !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-topbar,
    html body[data-peso-page="jobs"] .pjl-topbar {
        display: none !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-nav,
    html body[data-peso-page="jobs"] .pjl-nav {
        min-height: 0 !important;
        height: auto !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-nav__inner,
    html body[data-peso-page="jobs"] .pjl-nav__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 68px !important;
        padding: 8px 12px !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-brand,
    html body[data-peso-page="jobs"] .pjl-brand {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-brand__logo,
    html body[data-peso-page="jobs"] .pjl-brand__logo {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-toggler,
    html body[data-peso-page="jobs"] .pjl-toggler {
        display: grid !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        place-items: center !important;
        justify-self: end !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-collapse,
    html body[data-peso-page="jobs"] .pjl-collapse {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    html body[data-peso-page="jobs"] :is(.site-menu-toggle, .peso-public-nav-toggle, .dashboard-menu-toggle) {
        display: none !important;
    }

    /* The rebuilt Jobseeker header owns mobile navigation. Hide the old
       sidebar trigger so Find Jobs never renders two hamburger buttons. */
    html body.peso-role-jobseeker.peso-jobseeker-suite #dashboardMenuToggle {
        display: none !important;
    }

    /* Clear the persistent Jobseeker bottom bar with both floating tools. */
    html body.peso-role-jobseeker .peso-assistant__launcher {
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + 72px) !important;
    }

    html body.peso-role-jobseeker .peso-back-to-top {
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + 136px) !important;
    }

    html[data-theme="dark"] body[data-peso-page="jobseeker-saved"] .stat-card,
    body[data-peso-page="jobseeker-saved"].dark-mode .stat-card {
        background: #0b261d !important;
        border-color: rgba(139, 205, 177, .3) !important;
    }

    html[data-theme="dark"] body[data-peso-page="jobseeker-saved"] .stat-value,
    body[data-peso-page="jobseeker-saved"].dark-mode .stat-value {
        color: #f4c430 !important;
        -webkit-text-fill-color: #f4c430 !important;
    }

    body[data-peso-page="jobseeker-profile"] .modal-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    body[data-peso-page="jobseeker-profile"] .modal-actions :is(button, .btn) {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
    }

    body[data-peso-page="admin-announcements"] .jobfair-actions,
    body[data-peso-page="admin-announcements"] .jobfair-action-form,
    body[data-peso-page="admin-announcements"] .jobfair-actions :is(a, button) {
        width: 100% !important;
    }

    /* The navbar is now in flow, so remove the desktop fixed-header offset. */
    html body[data-peso-page="jobseeker-landing"] .pjl-hero,
    html body[data-peso-page="jobs"] .pjl-jobs-head {
        padding-top: clamp(36px, 9vw, 58px) !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-hero__trust {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)) !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0 !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-hero__trust > span {
        min-width: 0 !important;
        padding: 4px 8px !important;
        text-align: center !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-hero__trust > span:first-child {
        padding-left: 8px !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-hero__trust strong {
        font-size: clamp(20px, 7vw, 28px) !important;
    }

    html body[data-peso-page="jobseeker-landing"] .pjl-hero__trust small {
        display: block !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body.ef-site[data-peso-page^="employer-"] .notif-dropdown {
        position: fixed !important;
        inset: max(76px, env(safe-area-inset-top)) 10px auto 10px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 90px - env(safe-area-inset-bottom)) !important;
    }

    body[data-peso-page="generate-resume"] {
        display: block !important;
        padding: 10px !important;
    }

    body[data-peso-page="generate-resume"] .resume-card {
        border-radius: 18px !important;
    }

    body[data-peso-page="generate-resume"] .resume-header {
        padding: 26px 18px !important;
        border-radius: 18px 18px 0 0 !important;
    }

    body[data-peso-page="generate-resume"] .resume-header h1 {
        font-size: clamp(26px, 10vw, 38px) !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere !important;
    }

    body[data-peso-page="generate-resume"] .profile-pic {
        width: 88px !important;
        height: 88px !important;
    }

    body[data-peso-page="generate-resume"] .contact-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        gap: 8px !important;
        font-size: 13px !important;
    }

    body[data-peso-page="generate-resume"] .resume-body {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        padding: 22px 18px !important;
    }

    body[data-peso-page="generate-resume"] .info-row {
        display: grid !important;
        grid-template-columns: minmax(92px, .8fr) minmax(0, 1.2fr) !important;
        align-items: start !important;
        gap: 12px !important;
    }

    body[data-peso-page="generate-resume"] .info-value {
        text-align: right !important;
    }

    body[data-peso-page="generate-resume"] .print-note {
        margin: 8px 18px 22px !important;
        padding: 12px !important;
    }

    /* Registration previously accumulated padding at the page, card, body and
       section levels, leaving a phone field only a few characters wide. */
    html body[data-peso-page="jobseeker-register"] .page,
    html body[data-peso-page="jobseeker-register"] .card {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 0 !important;
    }

    html body[data-peso-page="jobseeker-register"] .input-group {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        width: 100% !important;
        padding-inline: 8px !important;
    }

    html body[data-peso-page="jobseeker-register"] .input-group :is(input, select, textarea) {
        width: 100% !important;
        min-width: 0 !important;
        padding-inline: 4px !important;
    }

    html body[data-peso-page="jobseeker-register"] .section-head {
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 10px !important;
    }

    html body[data-peso-page="jobseeker-register"] .section-head > i {
        display: none !important;
    }
}

@media (max-width: 360px) {
    html body[data-peso-page="jobseeker-landing"] .pjl-brand__copy small,
    html body[data-peso-page="jobs"] .pjl-brand__copy small {
        display: none !important;
    }

    body[data-peso-page="generate-resume"] .info-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 3px !important;
    }

    body[data-peso-page="generate-resume"] .info-value {
        text-align: left !important;
    }
}

@media print {
    body[data-peso-page="generate-resume"] {
        display: block !important;
        padding: 0 !important;
    }

    body[data-peso-page="generate-resume"] .resume-card {
        width: 100% !important;
        max-width: none !important;
        box-shadow: none !important;
    }

    body[data-peso-page="generate-resume"] .resume-body {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.7fr) !important;
    }

    body[data-peso-page="generate-resume"] :is(.section, .experience-item, .education-item) {
        break-inside: avoid;
    }
}