/* =============================================================================
   ADMIN BANNER — shared block. Accent colours passed via inline CSS custom
   properties on the wrapper (--acc-bright, --acc-deep). Matches the pattern
   used across all six admin modules in the Class Recruitment brand system.
   ============================================================================= */
.class-admin-banner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 24px 32px 32px;
    margin: 0 0 28px;
    background: linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
    color: #fff;
    border-radius: 16px;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    box-sizing: border-box;
}
.class-admin-banner__body { min-width: 0; }
.class-admin-banner__eyebrow {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--acc-bright, #c77dd8);
    margin-bottom: 10px;
}
.class-admin-banner__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    line-height: 1.15;
}
.class-admin-banner__sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 8px 0 0;
    max-width: 640px;
}
.class-admin-banner__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1.5px solid rgba(255, 255, 255, 0.24);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 180ms ease, border-color 180ms ease;
}
.class-admin-banner__back:hover,
.class-admin-banner__back:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    outline: none;
}
/*
   Text colour is pinned separately from the rule above, and heavily.

   The banner is a dark purple gradient, so this link has to be white. It always
   said `color: #fff` and still rendered purple on the live site. Nothing in this
   stylesheet, in the theme's skin.css or in Portals/0/portal.css targets
   .class-admin-banner__back a second time, so whatever wins the cascade is not
   visible from the repo — which means the safe fix is one that does not need to
   know what it is:

     · `.class-admin-banner a.class-admin-banner__back` is (0,2,1), above any
       single-class or bare-element anchor rule that could plausibly reach it.
     · Every link state is listed, so the colour cannot change with the visitor's
       history or with the mouse button held down.
     · !important as the backstop. This is the same belt-and-braces approach the
       portal stylesheet already uses on the floating action button, and for the
       same reason.

   Same idiom as `.ra-table th a` in RegistrationForm/css/Module.css. If the real
   overriding rule is ever identified, the !important can be dropped.

   Keep this block byte-identical across all five module stylesheets that ship the
   admin banner (JobAdmin, FAQ, ClassNews, CompanyReviews, RegistrationForm) —
   plus DesktopModules/ClassContactForm_V1/css/Module.css on the server, which has
   no source in this repo.
*/
.class-admin-banner a.class-admin-banner__back,
.class-admin-banner a.class-admin-banner__back:link,
.class-admin-banner a.class-admin-banner__back:visited,
.class-admin-banner a.class-admin-banner__back:hover,
.class-admin-banner a.class-admin-banner__back:focus,
.class-admin-banner a.class-admin-banner__back:active {
    color: #fff !important;
    text-decoration: none;
}
.class-admin-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--acc-deep, #7b1fa2);
    z-index: 1;
}
@media (max-width: 640px) {
    .class-admin-banner {
        grid-template-columns: 1fr;
        padding: 20px 20px 24px;
        margin-bottom: 20px;
    }
    .class-admin-banner__back { justify-self: start; }
}


.jobadmin-summary {
    padding: 8px;
}

.ja-empty {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
}

.ja-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* ----- Card grid: same width and same height, always ------------------------
   Two things had to be pinned down here.

   WIDTH. The Class skin lays these out with
   `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))`. auto-fit
   *collapses* the empty tracks, so once a filter narrows the results the
   surviving cards absorb the freed space — one result stretches across the
   whole row, two go half-and-half. Fixed 1/2/3 tracks means a lone result
   keeps exactly the width it had in a full 3-up row and left-aligns.
   (auto-fill instead of auto-fit would also have fixed the stretch, but it
   makes the column count depend on container width, so the same job list
   reflows differently inside different panes. Fixed tracks are predictable.)

   SPECIFICITY. The skin rule is `.jobadmin .ja-cards` — (0,2,0), the same as a
   plain `.jobadmin-summary .ja-cards`, and it loads afterwards, so an
   equal-specificity override here silently lost. Doubling up the two classes
   the wrapper already carries (`.jobadmin.jobadmin-summary`) makes this (0,3,0)
   and the winner regardless of load order. That is why these selectors look
   redundant — they are not.

   HEIGHT. grid-auto-rows: 1fr sizes every row to the tallest, and the
   height: 100% pair below passes that down through .ja-card-wrap to the card
   itself, so all cards match, not just the ones sharing a row.
   --------------------------------------------------------------------------- */
.jobadmin.jobadmin-summary .ja-cards,
.jobadmin.jobadmin-public .ja-cards {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 12px;
}

@media (min-width: 768px) {
    .jobadmin.jobadmin-summary .ja-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .jobadmin.jobadmin-summary .ja-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* The "More like this" strip lives in the detail page's narrower main column, so it
   can't use the viewport-keyed 1/2/3 tracks above — at 1100px the viewport is wide
   but that column is not, and three tracks would squash the cards. auto-FILL keeps
   the empty tracks it creates, so this adapts to the column it's actually in while
   still never letting one or two results stretch the way auto-fit did. */
@media (min-width: 768px) {
    .jobadmin.jobadmin-public .ja-cards {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* The summary grid's item is .ja-card-wrap (it also holds the Edit link), so the
   row height has to be handed down one extra level to reach the card. */
.jobadmin.jobadmin-summary .ja-cards > .ja-card-wrap,
.jobadmin.jobadmin-summary .ja-cards > .ja-card-wrap > .ja-card,
.jobadmin.jobadmin-public .ja-cards > .ja-card {
    height: 100%;
}

.ja-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    box-shadow: 0 1px 10px rgba(0,0,0,.04);
}

.ja-card__body {
    /* Fill the full card width so the title/pills always align to the left
       padding edge, regardless of how long the title or pills are.

       align-self: stretch is the key line: the Class skin re-lays the card as a
       column flex (.jobadmin .ja-card), but the card keeps align-items: center
       from the rule above, which sizes this body to its widest line and centres
       it — leaving uneven side whitespace between short- and long-title cards.
       Stretching this item overrides that so it spans the full width in both the
       skin's column layout and the module-only row layout. */
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.ja-select-with-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ja-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.15);
    text-decoration: none;
    cursor: pointer;
}

    .ja-mini-btn:hover {
        background: rgba(0,0,0,.06);
    }

.ja-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111;
    line-height: 1.25;
    margin-bottom: 6px;
}

.ja-card__meta {
    font-size: .9rem;
    color: rgba(0,0,0,.65);
}

.ja-card__cta {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: .95rem;
    padding-left: 14px;
    color: rgba(0,0,0,.75);
}

.ja-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Job cards stack their pills one per row, always location → job type → salary, so
   every card reads the same way down the column and a missing salary just means one
   row fewer rather than a reflowed layout.

   align-items: flex-start is required, not decorative: in a column flex the default
   `stretch` would blow every pill out to the full card width instead of letting it
   hug its text.

   Scoped .jobadmin .ja-card .ja-badges — (0,3,0) — because the Class skin sets
   `.jobadmin .ja-badges { display: flex; flex-wrap: wrap; }` at (0,2,0) and loads
   afterwards, so a bare `.ja-badges` override here would silently lose. Descending
   through .ja-card also keeps this off any non-card badge row. */
.jobadmin .ja-card .ja-badges {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 6px;
}

.ja-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(0,0,0,.03);
    color: rgba(0,0,0,.75);

    /* Pill text is already clipped to a per-pill character budget server-side
       (JobAdminModuleBase.CardBadge), so this is only a backstop for a narrow card
       or one unbroken token: wrap inside the pill rather than overflow the card. */
    max-width: 100%;
    overflow-wrap: anywhere;
}

.ja-success {
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(0, 150, 0, .06);
    font-weight: 700;
}

/* If you want subtle differentiation without relying on colors */
.ja-badge--job-title {
}

.ja-badge--contract {
}

/* Location pill — teal, matching the FeaturedJobs / theme treatment.
   Literal fallbacks keep it teal even where the Class skin (which defines
   --c-teal-*) isn't loaded. */
.ja-badge--location {
    background: var(--c-teal-soft, #d6f1f5);
    color: var(--c-teal-deep, #006c7a);
    border-color: transparent;
}

/* Salary pill — green, same treatment. The Class skin already styles this
   (skin.css .jobadmin .ja-badge--salary); these literals are the fallback for
   anywhere the skin isn't loaded, so the pill never falls back to grey. */
.ja-badge--salary {
    background: var(--c-green-soft, #dcefdd);
    color: var(--c-green-deep, #2d6a30);
    border-color: transparent;
}

.ja-filters {
    /* Shrink the filter card to just wrap its controls instead of spanning the full
       (now very wide) page — the card no longer stretches empty across the row. */
    width: fit-content;
    max-width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    box-shadow: 0 1px 10px rgba(0,0,0,.04);
}

.ja-filterrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

    /* The filter controls, laid out in a horizontal, wrapping cluster. Content-sized so the
       fit-content card wraps snugly around it. */
    .ja-filtergroup {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* Search box takes a fixed, comfortable width rather than growing — if it grew to fill the row
       there'd be no free space left for the New Job button's margin-left:auto to push against
       (flex-grow is resolved before auto margins), and it would sit glued to the filter cluster
       instead of the far right. The two dropdowns + Search button stay content-sized (they'd
       otherwise each stretch to 100% from the base .ja-input/.ja-select rule and stack). */
    .ja-filterrow .ja-filter-search {
        flex: 0 1 320px;
        min-width: 200px;
    }

    .ja-filterrow .ja-select {
        width: auto;
        min-width: 150px;
        flex: 0 0 auto;
    }

    .ja-filterrow .ja-btn {
        flex: 0 0 auto;
    }

    .ja-filterrow .ja-filter-myonly {
        flex: 0 0 auto;
        margin-left: 4px;
        white-space: nowrap;
    }


.ja-input, .ja-select {
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.14);
    font-size: 1rem;
}

.ja-admin-filters .ja-input:focus,
.ja-admin-filters .ja-select:focus {
    outline: none;
    border-color: rgba(0, 120, 215, .6);
    box-shadow: 0 0 0 3px rgba(0,120,215,.15);
}

/* --- JobEdit form layout --- */
.ja-form {
    display: grid;
    gap: 14px;
}

.ja-formrow {
    display: grid;
    gap: 12px;
}

.ja-formrow--2 {
    grid-template-columns: 1fr;
}

.ja-formrow--3 {
    grid-template-columns: 1fr;
}

.ja-advanced-toggle {
    margin: 10px 0;
}

.ja-advanced-link {
    display: inline-block;
    font-weight: 600;
}

    .ja-advanced-link.is-open::after {
        content: " ▲";
    }

    .ja-advanced-link::after {
        content: " ▼";
    }

.ja-advanced-panel {
    padding-top: 8px;
}

@media (min-width: 900px) {
    .ja-formrow--2 {
        grid-template-columns: 1fr 1fr;
    }

    .ja-formrow--3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.ja-field {
    min-width: 0;
}

.ja-label {
    display: block;
    font-weight: 800;
    margin-bottom: 6px;
    color: rgba(0,0,0,.75);
}

.ja-input--textarea {
    min-height: 120px;
    resize: vertical;
}

.ja-checkrow {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.ja-audit {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(0,0,0,.02);
    margin-bottom: 10px;
    display: grid;
    gap: 6px;
}

.ja-formactions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ja-audit {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(0,0,0,.03);
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ja-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ja-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ja-label {
    font-weight: 700;
    font-size: .9rem;
    opacity: .8;
}

.ja-formrow {
    display: grid;
    gap: 10px;
}

.ja-formrow--2 {
    grid-template-columns: 1fr 1fr;
}

.ja-formrow--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.ja-formrow--4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.ja-formrow--flags {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.ja-hr {
    border: 0;
    border-top: 1px solid rgba(0,0,0,.08);
    margin: 6px 0;
}

.ja-formactions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}

@media (max-width: 900px) {
    .ja-formrow--4 {
        grid-template-columns: 1fr 1fr;
    }

    .ja-formrow--3 {
        grid-template-columns: 1fr;
    }

    .ja-formrow--2 {
        grid-template-columns: 1fr;
    }
}

/* Admin filter controls fix */
.ja-admin-filters .ja-input,
.ja-admin-filters .ja-select {
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    background: #fff;
}

.ja-admin-filters .ja-btn {
    height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
}

/* The "per page" select only needs to be as wide as its text + chevron, not the full row
   (it inherits width:100% from the base .ja-select). ddlPageSize is the only .ja-select
   inside .ja-admin-filters (the bulk-status select lives in .ja-bulk-bar instead), so
   targeting the class here is safe and correct — the previous #jaPageSize selector never
   matched any element in the markup. */
.ja-admin-filters .ja-select {
    width: auto;
    min-width: 0;
    padding: 0 12px;
}

.ja-admin-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.ja-pagesize-label {
    margin-left: auto;
    font-size: 0.85rem;
    color: rgba(0,0,0,.6);
}

    @media (max-width: 640px) {
        .ja-pagesize-label { margin-left: 0; }
    }

.ja-filteractions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ja-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.14);
    background: #f7f7f7;
    font-weight: 700;
}

.ja-link {
    text-decoration: underline;
    background: transparent;
    border: 0;
    padding: 0;
    font-weight: 700;
}

/* Danger variant for the per-row Delete link in the lookup manager popups. */
.ja-link--danger {
    color: #8a1c1c;
}

/* =============================================================================
   Public /jobs filter bar (JobSummary.ascx)

   The shared .ja-filters/.ja-filterrow rules above are tuned for the admin
   JobList (fit-content card, content-sized horizontal cluster). On the public
   page that left the bar failing to fill the column with the four dropdowns
   crowding together. These .jobadmin-summary-scoped rules override that with a
   full-width tinted panel modelled on the News/FAQ filter bars: a full-width
   search box on top, then the dropdowns on their own responsive row, then the
   Apply/Clear actions underneath. Light-purple tint matches the News/FAQ bars.
   ============================================================================= */
.jobadmin-summary .ja-filters {
    /* Undo the admin card's fit-content — span the full content column. */
    width: auto;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 32px;
    border-radius: 16px;
    border: 1.5px solid rgba(123, 31, 162, .18);
    background: #faf5fb;
    box-shadow: none;
}

.jobadmin-summary .ja-filterrow {
    width: 100%;
    margin-bottom: 0;
}

/* Search box: half width, centred on its own row. Grows to a usable minimum on
   narrow screens where 50% would be too cramped. */
.jobadmin-summary .ja-filterrow--search {
    display: flex;
    justify-content: center;
}

.jobadmin-summary .ja-filterrow--search .ja-filter-search {
    /* flex-basis 50% (overrides the shared `.ja-filterrow .ja-filter-search`
       rule's `flex: 0 1 320px`, whose fixed basis would otherwise win over a
       plain width in this flex row). */
    flex: 0 1 50%;
    width: 50%;
    min-width: 260px;
    max-width: 100%;
}

/* Dropdowns share the second row, wrapping into equal columns as space allows
   (never crowding or overlapping). */
.jobadmin-summary .ja-filterrow--selects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

    /* Reset the admin content-sizing so each select fills its grid cell. */
    .jobadmin-summary .ja-filterrow--selects .ja-select {
        width: 100%;
        min-width: 0;
    }

.jobadmin-summary .ja-input,
.jobadmin-summary .ja-select {
    height: 44px;
    box-sizing: border-box;
    padding: 0 14px;
    border-radius: 12px;
    border: 1.5px solid rgba(123, 31, 162, .22);
    background: #fff;
    font-size: 1rem;
}

.jobadmin-summary .ja-input:focus,
.jobadmin-summary .ja-select:focus {
    outline: none;
    border-color: #7b1fa2;
    box-shadow: 0 0 0 3px rgba(123, 31, 162, .15);
}

.jobadmin-summary .ja-filteractions {
    width: 100%;
    gap: 14px;
    flex-wrap: wrap;
}

.ja-editor-emptycard,
.ja-editor-shell {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 10px rgba(0,0,0,.04);
}

.ja-editor-emptycard {
    padding: 16px;
}

.ja-editor-shell {
    overflow: hidden;
    margin-top: 12px;
}

.ja-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-weight: 800;
}

.ja-editor-body {
    padding: 14px;
}

.ja-admin-actions {
    display: flex;
    justify-content: flex-end;
    margin: 12px 0 16px;
}

    .ja-btn--newjob {
        padding: 10px 20px;
    }

/* --- Job Admin list: break out of DNN's centered content column ---------------
   DNN's Aperture skin lays every module inside a narrow, horizontally-centred
   content column, which left the 13-column jobs table cramped (and, at its old
   width:100%, spilling past the banner/filters on the right). This "full-bleed"
   override lets ONLY the Job Admin list page escape that column and use most of
   the page width, still centred on the viewport. It is scoped to
   .jobadmin-adminlist, so public job pages, the applicants view, and every other
   module are untouched.

   How it centres: Aperture's column (.aperture-content-pane) is margin:0 auto with
   symmetric padding, so its centre IS the viewport centre. margin-left:calc(50% - 44vw)
   puts the left edge half the module's own width to the left of that centre — 50% is
   half the column, 44vw is half of this block's 88vw — landing it centred on the
   viewport at any width.

   The width is a plain percentage of the viewport so the page scales with whatever
   monitor it's dragged onto, rather than sitting at one fixed pixel width that only
   suits one screen. It was min(1700px, 96vw), which meant the fixed 1700px won on any
   screen wider than ~1771px (all of 1080p and up) and the 96vw only applied on narrower
   ones. 88vw reproduces the old 1700px almost exactly at 1920px wide and keeps the same
   proportions everywhere else.

   The negative margin does the centring in layout rather than with
   translateX(-50%), which only moved the block visually: with the transform, the
   LAYOUT box still started at the column's centre and ran the full 88vw to the right
   of it, overhanging the page. (It also made the module a containing block for any
   position:fixed descendant — harmless here, as the jobs list has no modal.)
   See docs/DNN_MODULE_WIDTH.md for the full explanation + the site-wide option. */
.jobadmin-adminlist {
    box-sizing: border-box;
    width: 88vw;
    margin-left: calc(50% - 44vw);
}

/* --- Admin Job List Grid --- */
.ja-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 10px rgba(0,0,0,.04);
    overflow: hidden;
}

    .ja-grid th {
        text-align: left;
        padding: 12px 14px;
        font-weight: 800;
        font-size: .95rem;
        border-bottom: 1px solid rgba(0,0,0,.08);
        background: rgba(0,0,0,.02);
        white-space: nowrap;
    }

    .ja-grid td {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(0,0,0,.06);
        vertical-align: middle;
    }

    .ja-grid tr:last-child td {
        border-bottom: 0;
    }

    /* Subtle zebra striping */
    .ja-grid tr:nth-child(even) td {
        background: rgba(0,0,0,.012);
    }

/* Job cell */
.ja-jobcell__title {
    font-size: 1.02rem;
    font-weight: 800;
    color: #111;
    line-height: 1.25;
}

.ja-jobcell__meta {
    margin-top: 4px;
    font-size: .9rem;
    color: rgba(0,0,0,.65);
}

/* Status badge tweak (reuse your existing ja-badge base).
   The base .ja-badge sets `overflow-wrap: anywhere` as a backstop for the card
   pills; in the grid's narrow Status column that broke the single word mid-way
   ("ACTI/VE", "INACT/IVE"). These labels are one short word each, so opt this
   badge back out — the column then sizes to the widest label instead. */
.ja-badge--status {
    font-size: .8rem;
    padding: 5px 9px;
    overflow-wrap: normal;
    white-space: nowrap;
}

/* Checkbox columns */
.ja-grid input[type="checkbox"] {
    transform: translateY(1px);
}

/* Actions links */
.ja-grid a {
    font-weight: 800;
    color: rgba(0,0,0,.75);
    text-decoration: underline;
}

    .ja-grid a:hover {
        color: rgba(0,0,0,.95);
    }

/* Sortable column headers.
   Each sortable <th> becomes a GET link (ja-sortlink) with a direction indicator
   (ja-sort). The indicator shows a faint neutral glyph on idle columns and a solid
   ▲ / ▼ on the column that's currently sorting. */
.ja-grid th .ja-sortlink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

    .ja-grid th .ja-sortlink:hover {
        color: #e11d48;
    }

.ja-grid th .ja-sort {
    font-size: .72em;
    line-height: 1;
    display: inline-block;
    width: 1em;
    text-align: center;
}

    /* Idle (sortable but not the active column): faint up/down affordance. */
    .ja-grid th .ja-sort--none::before {
        content: "\2195"; /* ↕ */
        opacity: .35;
    }

    /* Active ascending. */
    .ja-grid th .ja-sort--asc::before {
        content: "\25B2"; /* ▲ */
        opacity: .9;
    }

    /* Active descending. */
    .ja-grid th .ja-sort--desc::before {
        content: "\25BC"; /* ▼ */
        opacity: .9;
    }

.ja-badge--active {
    background: rgba(0, 150, 0, .06);
    border-color: rgba(0, 150, 0, .18);
}

.ja-badge--inactive {
    background: rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .10);
}

.ja-badge--deleted {
    background: rgba(200, 0, 0, .06);
    border-color: rgba(200, 0, 0, .18);
}

.ja-badge--expired {
    background: rgba(240, 160, 0, .10);
    border-color: rgba(240, 160, 0, .22);
}

/* ===== Modal overlay foundation (reusable) ===== */
.ja-modal {
    position: fixed;
    inset: 0;
    z-index: 99999; /* sit above DNN chrome */
    display: block;
}

/* Locks the page behind an open modal.

   NOTE for JobEdit: this class is NOT what locks the scroll there. DNN's own scroll
   restore (__dnn_setScrollTop in js/dnncore.js) only stands down when <html> carries
   an *inline* overflow:hidden — element.style reflects the inline attribute only, so a
   stylesheet rule like this one leaves DNN free to scroll the page after every
   postback. JobEdit's syncModalScrollLock() therefore sets the inline style directly.
   Kept for any modal that just wants the lock without DNN in the picture. */
.ja-modal-open {
    overflow: hidden; /* stops scrolling behind modal */
}

/* A client-side "is-open" toggle for any .ja-modal that wants one. NOTE: JobEdit's six
   lookup manager popups do NOT use it, despite what this comment used to claim — they
   are server Visible-toggled like ApplicantList's bulk email modal. What makes them feel
   instant is that the JobEdit control declares supportsPartialRendering, so DNN runs
   those toggles as async postbacks. Kept because the modifier is harmless and a future
   modal may want a purely client-side open. */
.ja-modal--js {
    display: none;
}

.ja-modal--js.is-open {
    display: block;
}

.ja-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 10, 31, 0.55);
    /* blocks clicks to page underneath */
    pointer-events: auto;
}

.ja-modal-card {
    position: relative;
    max-width: 560px;
    width: calc(100% - 32px);
    margin: 8vh auto 0 auto;
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 20px 60px rgba(17, 10, 31, 0.35);
    z-index: 1; /* above backdrop */
}

/* Used by JobEdit's popups: keeps the header and Save/Delete/Cancel row always visible,
   with only the fields in between scrolling, so a tall popup (e.g. Class Contact with an
   uploaded photo) never pushes its buttons off-screen. */
.ja-modal-card--scrollable {
    display: flex;
    flex-direction: column;
    max-height: 84vh;
}

.ja-modal-card--scrollable .ja-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Pinned action footer for the scrollable popups. Sits below .ja-modal-body as a
   non-scrolling flex child so a modal's primary buttons (list view: Save order +
   Add; edit view: Delete/Save/Cancel) stay visible even when the body scrolls. */
.ja-modal-card--scrollable .ja-modal-footer {
    flex: 0 0 auto;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1.5px solid #ece8f0;
}

/* The footer's own .ja-form-actions / .ja-statusmgr-listactions / .ja-mgr-listactions
   already own their internal layout — cancel the top margin so the border-top gap
   above is the single source of spacing. */
.ja-modal-card--scrollable .ja-modal-footer > .ja-form-actions,
.ja-modal-card--scrollable .ja-modal-footer > .ja-statusmgr-listactions,
.ja-modal-card--scrollable .ja-modal-footer > .ja-mgr-listactions {
    margin-top: 0;
}

.ja-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #110a1f;
}

/* Optional two-line heading: title on top, a quieter subtitle under it, with the
   close button still pinned right. Header rows without one are unaffected —
   they keep a bare <strong> as the flex child. */
.ja-modal-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* let a long name ellipsis rather than shove the ✕ off */
}

.ja-modal-subtitle {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(17, 10, 31, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ja-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid rgba(17, 10, 31, 0.15);
    color: #110a1f;
    background: transparent;
    cursor: pointer;
}

    .ja-modal-close:hover {
        background: rgba(17, 10, 31, 0.06);
    }

.ja-form-row {
    margin-bottom: 12px;
}

    .ja-form-row label {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
    }

.ja-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
}

.ja-btn-danger {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #8a1c1c;
    background: #fff;
    color: #8a1c1c;
    font-weight: 700;
    margin-right: auto;
}

    .ja-btn-danger:hover {
        background: #fdecea;
    }

/* ----- Status manager modal (ApplicantDetail) -------------------------------- */
.applicantdetail-statusmgr-link {
    float: right;
    font-size: 0.82rem;
    font-weight: 600;
}

.ja-statusmgr-hint {
    margin: 0 0 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: rgba(17, 10, 31, 0.6);
}

.ja-statusmgr-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.ja-statusmgr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(123, 31, 162, 0.14);
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fff;
}

    .ja-statusmgr-item.is-dragging {
        opacity: .5;
        border-style: dashed;
    }

.ja-statusmgr-handle {
    cursor: grab;
    color: rgba(0,0,0,.35);
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

    .ja-statusmgr-handle:active {
        cursor: grabbing;
    }

.ja-statusmgr-inactive {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(17, 10, 31, 0.45);
    border: 1px solid rgba(17, 10, 31, 0.15);
    border-radius: 6px;
    padding: 1px 6px;
}

.ja-statusmgr-rowactions {
    margin-left: auto;
    display: inline-flex;
    gap: 12px;
    white-space: nowrap;
}

.ja-statusmgr-listactions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.ja-statusmgr-activelabel {
    font-weight: 600;
}

    .ja-statusmgr-activelabel .ja-tmpl-hint {
        display: inline;
        font-weight: 400;
    }

/* ----- Lookup manager modals (JobEdit: Location/ContractType/JobTitle/SalaryType/
   Qualification/ClassContact) — the drag-to-reorder list, shared shape with the
   applicant-status manager above but named generically since these aren't statuses. */
.ja-mgr-hint {
    margin: 0 0 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: rgba(17, 10, 31, 0.6);
}

.ja-mgr-list {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

.ja-mgr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(123, 31, 162, 0.14);
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fff;
}

    .ja-mgr-item.is-dragging {
        opacity: .5;
        border-style: dashed;
    }

.ja-mgr-handle {
    cursor: grab;
    color: rgba(0,0,0,.35);
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

    .ja-mgr-handle:active {
        cursor: grabbing;
    }

.ja-mgr-label {
    font-weight: 500;
}

.ja-mgr-inactive {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(17, 10, 31, 0.45);
    border: 1px solid rgba(17, 10, 31, 0.15);
    border-radius: 6px;
    padding: 1px 6px;
}

.ja-mgr-rowactions {
    margin-left: auto;
    display: inline-flex;
    gap: 12px;
    white-space: nowrap;
}

.ja-mgr-listactions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ja-mgr-empty {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: rgba(0,0,0,.55);
}

/* Colour presets + custom picker */
.ja-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.ja-swatch {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 2px solid rgba(0,0,0,.12);
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}

    .ja-swatch:hover {
        border-color: rgba(0,0,0,.35);
    }

    .ja-swatch.is-selected {
        border-color: #110a1f;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #110a1f;
    }

.ja-swatch-custom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 0.9rem;
}

    .ja-swatch-custom input[type="color"] {
        width: 40px;
        height: 30px;
        padding: 0;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 8px;
        cursor: pointer;
        background: #fff;
    }

.ja-contact-preview {
    max-width: 160px;
    max-height: 160px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    margin: 8px 0;
}

/* ---- Job Details (public) ---- */
.cr-job {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 12px;
}

.cr-job-hero {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 18px;
    align-items: start;
}

@media (max-width: 920px) {
    .cr-job-hero {
        grid-template-columns: 1fr;
    }
}

.cr-job-title {
    margin: 0 0 10px;
    font-size: 34px;
    line-height: 1.15;
}

@media (max-width: 600px) {
    .cr-job-title {
        font-size: 28px;
    }
}

.cr-job-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px;
}

.cr-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
}

.cr-job-salary {
    font-size: 18px;
    font-weight: 700;
    margin: 8px 0 10px;
}

.cr-job-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #6b7280;
    font-size: 13px;
}

.cr-dot {
    padding: 0 6px;
}

.cr-job-body {
    margin-top: 18px;
}

.cr-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.04);
}

.cr-card--sticky {
    position: sticky;
    top: 12px;
}

.cr-h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.cr-h3 {
    margin: 0 0 8px;
    font-size: 15px;
}

.cr-muted {
    color: #6b7280;
    margin: 0 0 12px;
}

.cr-btn {
    display: inline-block;
    text-decoration: none;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 700;
    border: 1px solid #111827;
}

.cr-btn--primary {
    background: #111827;
    color: #fff !important;
}

.cr-hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 14px 0;
}

/* Contact block — photo on the left, name/email/phone stacked on the right.
   Flex so the text doesn't get squashed under a wide image. */
.cr-contact {
    display: flex !important;
    gap: 12px;
    align-items: flex-start;
}

.cr-contact__photo {
    flex: 0 0 64px;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(0,0,0,.04);
}

.cr-contact__details {
    flex: 1 1 auto;
    min-width: 0;          /* allow long emails to wrap inside the column */
    word-break: break-word;
}

.cr-contact a {
    color: inherit;
    text-decoration: underline;
}

/* Job description card now lives inside the hero's left column.
   A bit of top margin separates it from the dates row above. */
.cr-job-desc-card {
    margin-top: 18px;
}

.cr-job-desc {
    line-height: 1.6;
}

    .cr-job-desc h1, .cr-job-desc h2, .cr-job-desc h3 {
        margin-top: 18px;
    }

    .cr-job-desc ul, .cr-job-desc ol {
        padding-left: 20px;
    }

.cr-field {
    margin: 10px 0;
}

.cr-label {
    display: block;
    font-size: 13px;
    margin: 0 0 6px;
    color: #374151;
}

.cr-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
}

.cr-apply .cr-btn {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.cr-msg-ok {
    padding: 10px 12px;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    border-radius: 10px;
    margin-bottom: 10px;
}

.cr-msg-err {
    padding: 10px 12px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* Keep filter row tidy on larger screens */
@media (min-width: 900px) {
    .ja-admin-filterrow {
        grid-template-columns: 2fr auto 1fr auto;
        align-items: center;
    }
        /* checkbox aligns nicer */
        .ja-admin-filterrow label {
            margin: 0;
        }
}

/* Responsive: allow horizontal scroll if needed */
@media (max-width: 900px) {
    .jobadmin-adminlist {
        overflow-x: auto;
    }

    .ja-grid {
        min-width: 980px;
    }
}


/* Slightly wider layouts */
@media (min-width: 768px) {
    .ja-cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1100px) {
    .ja-cards {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ----- Featured jobs carousel -----------------------------------------------
   Horizontal scroll-snap on narrow screens (swipeable on mobile). Falls back
   to the regular .ja-cards grid behaviour from ~768px upwards. No JS.
   --------------------------------------------------------------------------- */
.jobadmin-featured {
    padding: 8px;
}

.ja-section-head {
    margin-bottom: 12px;
}

.ja-h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: #111;
}

/* Selectors are scope-doubled (.jobadmin.jobadmin-featured) for the same reason as
   the summary grid above: the skin's `.jobadmin .ja-cards` sets display:grid and
   would otherwise beat this flex strip outright, since .ja-cards--featured alone is
   only (0,1,0). See the card-grid comment near the top of this file. */
.jobadmin.jobadmin-featured .ja-cards--featured {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 12px;
    /* Hide the scrollbar visually on mobile while keeping scroll behaviour */
    scrollbar-width: thin;
}

    .jobadmin.jobadmin-featured .ja-cards--featured > .ja-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }

@media (min-width: 768px) {
    .jobadmin.jobadmin-featured .ja-cards--featured {
        flex-wrap: wrap;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    /* flex-grow stays 0: with one or two featured jobs, growing would stretch them
       across the strip and break size parity with the other card surfaces. */
    .jobadmin.jobadmin-featured .ja-cards--featured > .ja-card {
        flex: 0 0 calc(50% - 6px);
    }
}

@media (min-width: 1100px) {
    .jobadmin.jobadmin-featured .ja-cards--featured > .ja-card {
        flex: 0 0 calc(33.333% - 8px);
    }
}

/* ----- Pager (public job summary) -------------------------------------------- */
.ja-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 24px 0 8px;
    padding: 8px 4px;
    font-size: 0.95rem;
}

.ja-pager__summary {
    color: rgba(0, 0, 0, .6);
}

.ja-pager__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.ja-pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.12);
    text-decoration: none;
    color: #111;
    background: #fff;
}

    .ja-pager__link:hover {
        background: rgba(0,0,0,.04);
    }

    .ja-pager__link--current {
        background: #111;
        color: #fff;
        border-color: #111;
        cursor: default;
    }

    .ja-pager__link--disabled {
        color: rgba(0,0,0,.35);
        background: transparent;
        cursor: not-allowed;
    }

.ja-pager__ellipsis {
    padding: 0 4px;
    color: rgba(0,0,0,.45);
}

@media (min-width: 600px) {
    .ja-pager {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ----- Bulk action bar (applicants list) ------------------------------------ */
.ja-bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    margin: 12px 0 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    font-size: 0.95rem;
}

    .ja-bulk-bar__label {
        font-weight: 700;
        color: rgba(0,0,0,.7);
        margin-right: 2px;
    }

    .ja-bulk-bar__sep {
        display: inline-block;
        width: 1px;
        height: 24px;
        background: rgba(0,0,0,.12);
        margin: 0 4px;
    }

    /* Right-size the bulk-status dropdown to its content instead of stretching the whole row
       (it inherits width:100% from the base .ja-select otherwise). */
    .ja-bulk-bar .ja-select {
        width: auto;
        min-width: 0;
        max-width: 220px;
        height: 40px;
        padding: 6px 12px;
        border-radius: 10px;
        background: #fff;
    }

    /* Match the buttons to the dropdown height for a tidy single row. */
    .ja-bulk-bar .ja-btn {
        height: 40px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        border-radius: 10px;
    }

/* ----- Applicant management -------------------------------------------------- */
.jobadmin-applicants {
    padding: 8px;
}

.ja-applicants-head {
    margin-bottom: 16px;
}

.ja-applicants-head__crumbs {
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.ja-applicants-head .ja-jobref {
    font-weight: 400;
    color: rgba(0,0,0,.55);
    font-size: 0.85em;
    margin-left: 8px;
}

.ja-applicants-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.ja-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    line-height: 1.4;
    background: rgba(0,0,0,.06);
    color: rgba(0,0,0,.78);
    border: 1px solid rgba(0,0,0,.08);
}

    /* The counts-dashboard pills are <button>s (clickable status filters), shaped/sized to
       match the site theme's search-page filter pills (.cs-pill / .cs-filters in
       src/Theme/Class/css/search.css) — same padding/radius/font/transition, hardcoded to the
       theme's actual brand values rather than read via CSS custom properties, matching how
       .class-admin-banner above stays self-contained instead of assuming the theme's skin.css
       is loaded on this admin page. Unlike the theme's monochrome pills, background/border/text
       colour are deliberately left unset here so each button still picks up its own per-status
       colour hint below (.ja-status-pill--new etc., shared with the per-row span badge) —
       only the active pill's purple fill (below) overrides that, via higher specificity. */
    /* Filter pills are now server-side <a> links (were <button>). Match both so the styling
       survives, and kill the default link underline. */
    button.ja-status-pill,
    .ja-applicants-counts a.ja-status-pill {
        padding: 8px 18px;
        border-radius: 999px;
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        text-decoration: none;
        -webkit-appearance: none;
        appearance: none;
        transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
        white-space: nowrap;
    }

    /* The per-status colour is now emitted as an inline style="" on every pill (so admin-chosen
       colours work for custom statuses too). Inline styles beat selector specificity, so the
       filter hover + active states must use !important to keep overriding the inline
       background/border/text — otherwise the active pill would never turn purple. */
    button.ja-status-pill:hover,
    .ja-applicants-counts a.ja-status-pill:hover {
        border-color: #ba68c8 !important;
        color: #7b1fa2 !important;
    }

    button.ja-status-pill.ja-status-pill--active,
    .ja-applicants-counts a.ja-status-pill.ja-status-pill--active {
        background: #7b1fa2 !important;
        border-color: #7b1fa2 !important;
        color: #fff !important;
    }

    button.ja-status-pill.ja-status-pill--active:hover,
    .ja-applicants-counts a.ja-status-pill.ja-status-pill--active:hover {
        background: #8e24aa !important;
        border-color: #8e24aa !important;
        color: #fff !important;
    }

    .ja-status-pill strong {
        font-weight: 700;
    }

    /* Per-status colour hints — shared by the dashboard filter <button>s above and the
       per-row <span> status badge in the grid (see comment above). */
    .ja-status-pill--total              { background: #e2e8f0; color: #1e293b; border-color: #cbd5e1; }
    .ja-status-pill--new                { background: #e8f1ff; color: #0b3a82; border-color: #b6cef0; }
    .ja-status-pill--screened           { background: #f3e8ff; color: #5b21b6; border-color: #d8bfff; }
    .ja-status-pill--submitted-to-client{ background: #e8f7ee; color: #0f5132; border-color: #b6e0c6; }
    .ja-status-pill--interview-arranged { background: #fff4e0; color: #7a4a00; border-color: #f3d99d; }
    .ja-status-pill--placed             { background: #d4f7d4; color: #135e13; border-color: #95d495; }
    .ja-status-pill--rejected           { background: #fde8e8; color: #8a1c1c; border-color: #f0bfbf; }
    .ja-status-pill--withdrawn          { background: #ececec; color: #555;    border-color: #ccc;    }

/* Notification-style red dot on the "New" status badge in the applicants grid, so admins spot
   fresh applicants at a glance. Scoped to the grid so it never appears on the filter <button>
   pills (which already show a count) or on the detail page. */
.ja-grid .ja-status-pill--new {
    position: relative;
    overflow: visible;
}

.ja-grid .ja-status-pill--new::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e11d48;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(225, 29, 72, .35);
}

/* Same notification-style red dot, applied to the applicant count in the Job Admin job
   grid ("Apps" column) so admins can spot jobs with unreviewed ("New") applicants without
   opening each job's applicant list. */
.ja-apps-badge {
    position: relative;
    display: inline-block;
}

.ja-apps-badge--new::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e11d48;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(225, 29, 72, .35);
}

.ja-cell-meta {
    color: rgba(0,0,0,.55);
    font-size: 0.85em;
    margin-top: 2px;
}

.ja-jobtitle {
    font-weight: 600;
}

/* ============================================================================
   Applicant detail page

   This block is intentionally rebuilt using ONLY plain <div>s and uniquely-named
   classes that no DNN skin or core stylesheet can possibly be targeting. Every
   rule carries !important and every layout-critical rule scopes itself under
   .applicantdetail-root so we win every cascade fight.

   If you find yourself reusing one of these class names elsewhere, rename it
   instead — uniqueness is the whole point.
   ============================================================================ */

.applicantdetail-root {
    display: block !important;
    padding: 8px;
    font-family: inherit;
}

    .applicantdetail-root .applicantdetail-crumbs {
        display: block !important;
        margin-bottom: 4px;
        font-size: 0.9rem;
    }

    .applicantdetail-root .applicantdetail-sep {
        display: inline-block !important;
        padding: 0 6px;
        color: rgba(0,0,0,.35);
    }

    .applicantdetail-root .applicantdetail-link {
        color: #0b3a82;
        text-decoration: underline;
    }

    .applicantdetail-root .applicantdetail-link--danger {
        color: #8a1c1c;
        margin-left: auto;
    }

    .applicantdetail-root .applicantdetail-title {
        display: block !important;
        font-size: 1.5rem;
        font-weight: 700;
        margin: 8px 0 4px;
        color: #111;
    }

    .applicantdetail-root .applicantdetail-subtitle {
        display: block !important;
        font-size: 0.95rem;
        color: rgba(0,0,0,.6);
        margin-bottom: 12px;
    }

    .applicantdetail-root .applicantdetail-jobref {
        color: rgba(0,0,0,.55);
        margin-left: 4px;
    }

    .applicantdetail-root .applicantdetail-empty {
        display: block !important;
        padding: 16px;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,.08);
        background: #fff;
    }

        .applicantdetail-root .applicantdetail-empty__title {
            font-weight: 700;
            margin-bottom: 4px;
        }

        .applicantdetail-root .applicantdetail-empty__sub {
            color: rgba(0,0,0,.6);
        }

    /* ----- The two-column grid (info | workflow) ----- */
    .applicantdetail-root .applicantdetail-grid {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 16px 0;
    }

@media (min-width: 900px) {
    .applicantdetail-root .applicantdetail-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

    /* ----- Card (any plain block of content) ----- */
    .applicantdetail-root .applicantdetail-card {
        display: block !important;
        padding: 16px;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,.08);
        background: #fff;
        box-shadow: 0 1px 6px rgba(0,0,0,.03);
        margin-bottom: 16px;
        box-sizing: border-box;
    }

        .applicantdetail-root .applicantdetail-card__heading {
            display: block !important;
            font-size: 1.05rem;
            font-weight: 700;
            margin: 0 0 12px;
            color: #111;
        }

        .applicantdetail-root .applicantdetail-card__subheading {
            display: block !important;
            font-size: 0.95rem;
            font-weight: 600;
            margin: 18px 0 8px;
            color: rgba(0,0,0,.7);
        }

    /* ----- Definition-list rows (label | value pairs) ----- */
    .applicantdetail-root .applicantdetail-dl {
        display: block !important;
        margin: 0 0 12px;
    }

        .applicantdetail-root .applicantdetail-dl__row {
            display: grid !important;
            grid-template-columns: 110px 1fr;
            gap: 12px;
            padding: 4px 0;
        }

        .applicantdetail-root .applicantdetail-dl__label {
            font-weight: 600;
            color: rgba(0,0,0,.65);
        }

        .applicantdetail-root .applicantdetail-dl__value {
            min-width: 0;
            word-break: break-word;
        }

    /* ----- Applicant's message panel ----- */
    .applicantdetail-root .applicantdetail-message {
        display: block !important;
        white-space: pre-wrap;
        background: rgba(0,0,0,.03);
        padding: 10px 12px;
        border-radius: 8px;
        line-height: 1.5;
    }

    .applicantdetail-root .applicantdetail-cv-name {
        display: block !important;
        margin-top: 6px;
        color: rgba(0,0,0,.55);
        font-size: 0.9em;
    }

    /* ----- Current status pill row ----- */
    .applicantdetail-root .applicantdetail-current {
        display: block !important;
        margin-bottom: 16px;
    }

        .applicantdetail-root .applicantdetail-current__label {
            font-weight: 600;
            margin-right: 8px;
        }

    /* ----- Form rows (label on top, control below) ----- */
    .applicantdetail-root .applicantdetail-row {
        display: block !important;
        margin-bottom: 10px;
    }

        .applicantdetail-root .applicantdetail-row__label {
            display: block !important;
            font-size: 0.9rem;
            color: rgba(0,0,0,.65);
            margin-bottom: 4px;
            font-weight: 500;
        }

        /* --inline variant for dropdowns + save-button on the same line */
        .applicantdetail-root .applicantdetail-row--inline {
            display: flex !important;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .applicantdetail-root .applicantdetail-row--actions {
            text-align: left;
        }

    /* ----- Input controls ----- */
    .applicantdetail-root .applicantdetail-input {
        display: block !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 6px 8px;
        border: 1px solid rgba(0,0,0,.18);
        border-radius: 6px;
        font: inherit;
    }

    .applicantdetail-root .applicantdetail-select {
        padding: 6px 8px;
        border: 1px solid rgba(0,0,0,.18);
        border-radius: 6px;
        font: inherit;
        min-width: 200px;
    }

    .applicantdetail-root .applicantdetail-btn {
        display: inline-block !important;
        padding: 8px 14px;
        border-radius: 6px;
        border: 1px solid rgba(0,0,0,.18);
        background: #111;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
        font: inherit;
    }

        .applicantdetail-root .applicantdetail-btn:hover {
            background: #000;
        }

    /* ----- Flags (one checkbox per line) ----- */
    .applicantdetail-root .applicantdetail-flag {
        display: block !important;
        margin: 4px 0;
    }

    /* ----- Notes thread ----- */
    .applicantdetail-root .applicantdetail-note-add {
        display: block !important;
        margin-bottom: 16px;
    }

        .applicantdetail-root .applicantdetail-note-add textarea {
            display: block !important;
            width: 100%;
            margin-bottom: 8px;
        }

    .applicantdetail-root .applicantdetail-note {
        display: block !important;
        padding: 10px 12px;
        border-radius: 8px;
        background: rgba(0,0,0,.03);
        margin-bottom: 8px;
    }

        .applicantdetail-root .applicantdetail-note__head {
            display: flex !important;
            align-items: baseline;
            gap: 10px;
            margin-bottom: 4px;
            font-size: 0.9rem;
        }

        .applicantdetail-root .applicantdetail-note__date {
            color: rgba(0,0,0,.55);
        }

        .applicantdetail-root .applicantdetail-note__body {
            display: block !important;
            white-space: pre-wrap;
            line-height: 1.45;
        }

    /* ----- Status history timeline ----- */
    .applicantdetail-root .applicantdetail-history-item {
        display: block !important;
        padding: 8px 12px;
        border-left: 3px solid rgba(0,0,0,.12);
        margin-bottom: 10px;
    }

        .applicantdetail-root .applicantdetail-history-item__head {
            display: block !important;
            margin-bottom: 2px;
        }

        .applicantdetail-root .applicantdetail-history-item__meta {
            display: block !important;
            color: rgba(0,0,0,.55);
            font-size: 0.85em;
        }

        .applicantdetail-root .applicantdetail-history-item__note {
            display: block !important;
            margin-top: 6px;
            padding: 6px 10px;
            background: rgba(0,0,0,.03);
            border-radius: 6px;
            font-style: italic;
            font-size: 0.95em;
        }

/* =============================================================================
   In-form navigation strip (JobList / EmailTemplateList / EmailSendHistory)
   ============================================================================= */
.jobadmin .ja-topnav {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 10px 0 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-size: 0.95em;
}
.jobadmin .ja-topnav__current {
    font-weight: 600;
    color: rgba(0,0,0,.85);
}
.jobadmin .ja-topnav__link {
    color: #1565c0;
    text-decoration: none;
}
.jobadmin .ja-topnav__link:hover { text-decoration: underline; }

/* =============================================================================
   Email template list / edit / send history
   ============================================================================= */

.jobadmin .ja-tmpl-name { font-weight: 600; }
.jobadmin .ja-tmpl-key  { color: rgba(0,0,0,.55); font-size: 0.85em; }

.jobadmin .ja-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.75em;
    line-height: 1.5;
    background: rgba(0,0,0,.07);
    color: rgba(0,0,0,.65);
    vertical-align: middle;
}
.jobadmin .ja-badge--lock { background: #fff3cd; color: #8a6d3b; }

/* Edit form layout — form on the left, token panel on the right (stacks on narrow screens). */
.jobadmin .ja-tmpl-edit {
    display: flex !important;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}
.jobadmin .ja-tmpl-edit__form {
    flex: 1 1 480px;
    min-width: 0;
}
.jobadmin .ja-tmpl-edit__tokens {
    flex: 0 0 240px;
    padding: 14px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 8px;
    background: rgba(0,0,0,.025);
}
.jobadmin .ja-tmpl-tokens__title { margin: 0 0 4px; font-size: 1em; }
.jobadmin .ja-tmpl-tokens__hint  { margin: 0 0 10px; color: rgba(0,0,0,.6); font-size: 0.85em; }
.jobadmin .ja-tmpl-tokens__list  {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.jobadmin .ja-tmpl-tokens__list li { margin: 0 !important; padding: 0 !important; }
.jobadmin .ja-token-btn {
    border: 1px solid rgba(0,0,0,.15);
    background: #fff;
    color: #1565c0;
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 0.9em;
    font-family: inherit;
}
.jobadmin .ja-token-btn:hover { background: #e3f2fd; }

.jobadmin .ja-tmpl-field { margin-bottom: 14px; }
.jobadmin .ja-tmpl-field--inline { display: flex; align-items: center; gap: 8px; }
.jobadmin .ja-tmpl-label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.95em;
}
.jobadmin .ja-tmpl-input    { width: 100%; max-width: 640px; box-sizing: border-box; }
.jobadmin .ja-tmpl-textarea { width: 100%; max-width: 640px; box-sizing: border-box; font-family: Consolas, Menlo, monospace; font-size: 0.9em; }

/* DNN's TextEditor wrapper renders a complex composite; this just keeps it from
   getting squished by a flex parent. The editor's own Width="100%" attribute
   handles the inner sizing. */
.jobadmin .ja-tmpl-editor { display: block; max-width: 760px; }

/* Wider modal variant — used by the bulk-email modal which needs room for the
   subject + body editor. */
.jobadmin .ja-modal-card--wide { max-width: 760px; }

.jobadmin .ja-bulkemail-summary {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(0,0,0,.03);
    border-radius: 6px;
    font-size: 0.95em;
}
.jobadmin .ja-bulkemail-warn {
    color: #8a6d3b;
    font-style: italic;
    margin-left: 6px;
}

/* "—" / em-dash placeholder used in grid cells when a value is missing
   (e.g. Contact column when no contact is assigned). Soft-grey so it
   reads as an absence rather than data. */
.jobadmin .ja-muted { color: rgba(0,0,0,.45); }

/* =============================================================================
   Role-gated edit shortcuts on the public pages
   (JobSummary tiles + JobDetails hero). Only rendered for Class Admin /
   Class Manager so anonymous visitors never see this chrome.
   ============================================================================= */

/* JobSummary tile wrapper holds the clickable card AND the Edit link as
   siblings (no nested <a>). The Edit link is positioned in the top-right. */
.jobadmin .ja-card-wrap {
    position: relative;
}

.jobadmin .ja-card-edit {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;          /* above the card's hover state */
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
    text-decoration: none;
    background: #fff3cd;     /* warm amber — distinct from the link colour */
    color: #8a6d3b;
    border: 1px solid #f0d97a;
    line-height: 1.5;
}
.jobadmin .ja-card-edit:hover {
    background: #ffe88a;
    text-decoration: none;
}

/* =============================================================================
   Required-field markers on the Add/Edit Job form
   ============================================================================= */

/* Red asterisk appended to required field labels via ::after, so the markup
   stays minimal — just add the .ja-label--required modifier.

   NOT scoped under .jobadmin: these only ever appear on the Add/Edit Job form,
   which DNN renders as its own control (ctl=Edit) with no .jobadmin wrapper —
   only JobList/JobDetails wrap their markup in one. Scoping these three rules
   meant the asterisks never rendered. Same convention as .ja-label/.ja-form/
   .ja-input above, which are unscoped for exactly this reason. */
.ja-label--required::after {
    content: " *";
    color: #d32f2f;
    font-weight: 700;
}

/* Top-of-form key explaining the asterisk. Light, calm, doesn't fight the form. */
.ja-required-note {
    margin: 4px 0 14px;
    padding: 6px 12px;
    background: rgba(211, 47, 47, 0.04);
    border-left: 3px solid rgba(211, 47, 47, 0.35);
    border-radius: 4px;
    font-size: 0.85em;
    color: rgba(0,0,0,.65);
}

.ja-required-asterisk {
    color: #d32f2f;
    font-weight: 700;
}


/* JobDetails breadcrumb back link. Sits above the title, subtle so it
   doesn't compete with the H1, but big enough to tap on mobile. */
.cr-back-link {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 0;
    color: #1565c0;
    text-decoration: none;
    font-size: 14px;
}
.cr-back-link:hover {
    text-decoration: underline;
}

/* JobDetails hero — the Edit link sits inline beside the H1 title.
   Smaller than the title, distinct chip style, doesn't fight the layout. */
.cr-job-edit {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
    background: #fff3cd;
    color: #8a6d3b;
    border: 1px solid #f0d97a;
    text-decoration: none;
}
.cr-job-edit:hover {
    background: #ffe88a;
    text-decoration: none;
}
.jobadmin .ja-tmpl-hint     { color: rgba(0,0,0,.55); font-size: 0.85em; margin-top: 4px; }

.jobadmin .ja-input--locked {
    background: #f5f5f5 !important;
    color: rgba(0,0,0,.55) !important;
    cursor: not-allowed !important;
}

.jobadmin .ja-tmpl-actions { margin-top: 10px; display: flex; gap: 10px; }
.jobadmin .ja-btn--primary { background: #1565c0; color: #fff; border-color: #1565c0; }
.jobadmin .ja-btn--primary:hover { background: #0d47a1; border-color: #0d47a1; }

/* Send-history pills + snapshot panel */
.jobadmin .ja-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.8em;
    line-height: 1.6;
}
.jobadmin .ja-pill--ok  { background: #e6f4ea; color: #1e7e34; }
.jobadmin .ja-pill--bad { background: #fdecea; color: #b71c1c; }

.jobadmin .ja-snapshot {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 8px;
    background: rgba(0,0,0,.02);
}
.jobadmin .ja-snapshot__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.jobadmin .ja-snapshot__title { margin: 0; font-size: 1.05em; }
.jobadmin .ja-snapshot__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0 0 12px;
    font-size: 0.9em;
}
.jobadmin .ja-snapshot__meta dt { color: rgba(0,0,0,.6); font-weight: 600; }
.jobadmin .ja-snapshot__meta dd { margin: 0; }
.jobadmin .ja-snapshot__bodylabel { margin: 12px 0 6px; font-size: 0.95em; color: rgba(0,0,0,.7); }
.jobadmin .ja-snapshot__bodyframe {
    width: 100%;
    min-height: 320px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    background: #fff;
}

.jobadmin .ja-info {
    margin: 10px 0;
    padding: 8px 12px;
    background: #e3f2fd;
    border-left: 3px solid #1565c0;
    color: #0d47a1;
    border-radius: 4px;
}

.jobadmin .ja-warning {
    margin: 10px 0;
    padding: 8px 12px;
    background: #fff8e1;
    border-left: 3px solid #f9a825;
    color: #7c4a00;
    border-radius: 4px;
}

/* =============================================================================
   Job Alerts — public signup panel (JobAlertSignup.ascx)

   Drops in on JobSummary (above the pager) and JobDetails (between the hero
   and the related-jobs section). Visually quiet — a soft card with a clear
   CTA so it never competes with the apply button on JobDetails.
   ============================================================================= */
.jobadmin .ja-alert-signup {
    margin: 24px 0;
    background: #f7fafc;
    border: 1px solid #e1e8ee;
    border-radius: 8px;
    overflow: hidden;
}
.jobadmin .ja-alert-signup__inner {
    padding: 20px 22px;
    max-width: 720px;
}
.jobadmin .ja-alert-signup__head { margin-bottom: 14px; }
.jobadmin .ja-alert-signup__head .ja-h3 {
    margin: 0 0 4px;
    font-size: 1.15em;
}
.jobadmin .ja-alert-signup__sub {
    margin: 0;
    color: rgba(0,0,0,.6);
    font-size: 0.95em;
}

.jobadmin .ja-alert-signup__form { text-align: center; }
.jobadmin .ja-alert-signup__form .ja-field { margin-bottom: 10px; }

/* Centre the fields within the widget. .ja-field is a flex column with the
   default align-items:stretch, which pins the max-width-capped input (and the
   checkbox cluster) to the left cross-edge — align-items:center puts them on
   the widget's centre line instead. */
.jobadmin .ja-alert-signup__form .ja-field { align-items: center; }
/* ...but keep the field labels ("Your name", "Email address") left-aligned
   above their input. The label takes the same width + centring as the input
   (width:100% capped to the input's max-width, centred by the field's
   align-items:center), so its box sits directly over the input; text-align:left
   then lines the label text up with the input's left edge — not the widget's. */
.jobadmin .ja-alert-signup__form .ja-label {
    width: 100%;
    max-width: 380px;
    text-align: left;
}
.jobadmin .ja-alert-signup__form .ja-input {
    width: 100%;
    max-width: 380px;
    padding: 8px 10px;
    border: 1px solid #cfd6dd;
    border-radius: 5px;
    background: #fff;
    font-size: 0.95em;
}

.jobadmin .ja-alert-signup__form .ja-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.92em;
    color: rgba(0,0,0,.75);
    text-align: left;   /* keep the consent sentence itself left-aligned if it wraps */
}

.jobadmin .ja-alert-signup__actions { margin-top: 8px; text-align: center; }

/* Honeypot — hide visually without setting display:none (which some bots
   detect). Off-canvas + reduced size means screen-readers can still find
   it for the aria-hidden hint. */
.jobadmin .ja-alert-signup__honey {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.jobadmin .ja-alert-signup__confirm {
    padding: 16px 18px;
    background: #e8f5e9;
    border-radius: 6px;
    color: #1b5e20;
    font-size: 0.98em;
}
.jobadmin .ja-alert-signup__confirm p { margin: 0 0 6px; }
.jobadmin .ja-alert-signup__confirm p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   "Pop" modifier — opt-in via DNN's per-module CSS Class field.

   Adds elevated card styling, generous padding, larger headline and a coloured
   accent bar. Designed for placements where the signup form is the focal point
   (home-page mid-section, marketing landing pages, hero bands) rather than a
   quiet sidekick to a job listing.

   To enable on any module instance:
     Settings -> Advanced -> Page Style Sheet -> CSS Class:  ja-alert-pop

   DNN injects that class onto the module's outer wrapper, and the selectors
   below hang off it. Other instances of the same control are unaffected.

   Combine with `ja-alert-center` for a centred-text variant useful in
   full-width hero bands.
   ----------------------------------------------------------------------------- */
.ja-alert-pop .jobadmin .ja-alert-signup {
    margin: 32px 0;
    background: linear-gradient(135deg, #fffaf2 0%, #fff1d6 100%);
    border: none;
    border-top: 4px solid #f9a825;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
}
.ja-alert-pop .jobadmin .ja-alert-signup__inner {
    padding: 36px 40px;
    max-width: 920px;
    margin: 0 auto;
}
.ja-alert-pop .jobadmin .ja-alert-signup__head { margin-bottom: 20px; }
.ja-alert-pop .jobadmin .ja-alert-signup__head .ja-h3 {
    font-size: 1.65em;
    line-height: 1.2;
    margin: 0 0 6px;
    color: #1a1a1a;
}
.ja-alert-pop .jobadmin .ja-alert-signup__sub {
    font-size: 1.05em;
    color: rgba(0, 0, 0, .65);
    max-width: 620px;
}
.ja-alert-pop .jobadmin .ja-alert-signup__form .ja-field { margin-bottom: 14px; }
.ja-alert-pop .jobadmin .ja-alert-signup__form .ja-input {
    padding: 11px 14px;
    font-size: 1em;
    max-width: 440px;
    border-color: #d8c9a8;
    background: #ffffff;
}
/* Match the label width to the pop variant's wider input so they stay aligned. */
.ja-alert-pop .jobadmin .ja-alert-signup__form .ja-label {
    max-width: 440px;
}
.ja-alert-pop .jobadmin .ja-alert-signup__form .ja-input:focus {
    border-color: #f9a825;
    outline: 2px solid rgba(249, 168, 37, .25);
    outline-offset: 1px;
}
.ja-alert-pop .jobadmin .ja-alert-signup__form .ja-check { font-size: 0.98em; }
.ja-alert-pop .jobadmin .ja-alert-signup__actions { margin-top: 14px; }
.ja-alert-pop .jobadmin .ja-alert-signup__actions .ja-btn--primary {
    padding: 12px 30px;
    font-size: 1.02em;
    background: #0b66c2;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.ja-alert-pop .jobadmin .ja-alert-signup__actions .ja-btn--primary:hover {
    background: #0a5aac;
}

.ja-alert-pop .jobadmin .ja-alert-signup__confirm {
    padding: 22px 26px;
    font-size: 1.05em;
}

/* Centred variant — combine with .ja-alert-pop for a hero-band placement. */
.ja-alert-pop.ja-alert-center .jobadmin .ja-alert-signup__head { text-align: center; }
.ja-alert-pop.ja-alert-center .jobadmin .ja-alert-signup__sub  { margin-left: auto; margin-right: auto; }
.ja-alert-pop.ja-alert-center .jobadmin .ja-alert-signup__form { text-align: center; }
.ja-alert-pop.ja-alert-center .jobadmin .ja-alert-signup__form .ja-input { margin: 0 auto; }
.ja-alert-pop.ja-alert-center .jobadmin .ja-alert-signup__actions { text-align: center; }

/* Tighten the layout below ~640px so it doesn't feel overstuffed on phones. */
@media (max-width: 640px) {
    .ja-alert-pop .jobadmin .ja-alert-signup__inner { padding: 24px 22px; }
    .ja-alert-pop .jobadmin .ja-alert-signup__head .ja-h3 { font-size: 1.35em; }
    .ja-alert-pop .jobadmin .ja-alert-signup__sub { font-size: 1em; }
}

/* =============================================================================
   Job Alerts — public unsubscribe landing (JobAlertUnsubscribe.ascx)
   ============================================================================= */
.jobadmin .ja-unsub { padding: 32px 0; }
.jobadmin .ja-unsub__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
}
.jobadmin .ja-unsub__msg {
    padding: 18px 20px;
    border-radius: 8px;
    margin-top: 18px;
}
.jobadmin .ja-unsub__msg--ok  { background: #e8f5e9; color: #1b5e20; border-left: 3px solid #2e7d32; }
.jobadmin .ja-unsub__msg--err { background: #fff5f5; color: #6f1d1d; border-left: 3px solid #c62828; }

/* =============================================================================
   Job Alerts — admin subscriber grid badges
   ============================================================================= */
.jobadmin .ja-badge--ok    { background: #e8f5e9; color: #1b5e20; }
.jobadmin .ja-badge--muted { background: #eceff1; color: rgba(0,0,0,.6); }
.jobadmin .ja-muted        { color: rgba(0,0,0,.55); }



/* =============================================================================
   JobEdit — brand pass
   -----------------------------------------------------------------------------
   Ports the ClassNews NewsEdit design language onto the Add/Edit Job screen so the
   two admin editors read as one product. Values are copied from
   ClassNews/css/Module.css rather than approximated, so the two screens stay in
   step: same fonts, same purple, same radii, same spacing rhythm.

   Palette (from the ClassNews brand pass):
     purple          #7b1fa2      purple deep   #6b1494
     purple tint     #faf5fb      card tint     #faf8fc
     ink             #110a1f      muted         #5a4f66
     line            #ece8f0      danger        #dc2626

   Typography:
     Plus Jakarta Sans (display) — headings, buttons, labels
     Inter (body) — form values, table cells

   EVERYTHING here is scoped to .jobadmin-edit, the wrapper around JobEdit.ascx.
   The ja-* class names are shared with JobList and the public controls, which keep
   their existing look — do not lift these rules out of the wrapper.
   ============================================================================= */

.jobadmin-edit {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #110a1f;
    box-sizing: border-box;
}

.jobadmin-edit *,
.jobadmin-edit *::before,
.jobadmin-edit *::after {
    box-sizing: border-box;
}

/* ----- Editor shell ------------------------------------------------------- */

.jobadmin-edit .ja-editor-shell {
    border: 1.5px solid #ece8f0;
    border-radius: 16px;
    background: #fff;
    margin-top: 16px;
    overflow: hidden;
}

.jobadmin-edit .ja-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1.5px solid #ece8f0;
    background: #faf5fb;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: #110a1f;
}

.jobadmin-edit .ja-editor-body {
    padding: 24px;
}

.jobadmin-edit .ja-editor-empty {
    border: 1.5px solid #ece8f0;
    border-radius: 16px;
    background: #fff;
    margin-top: 16px;
}

.jobadmin-edit .ja-editor-emptycard {
    padding: 40px 32px;
    color: #5a4f66;
    text-align: center;
}

.jobadmin-edit .ja-editor-emptycard h3 {
    margin: 0 0 8px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #110a1f;
}

.jobadmin-edit .ja-editor-emptycard p {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    color: #5a4f66;
}

/* ----- Audit bar ---------------------------------------------------------- */

.jobadmin-edit .ja-audit {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid #ece8f0;
    background: #faf8fc;
    margin-bottom: 20px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #5a4f66;
}

.jobadmin-edit .ja-audit strong {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    color: #110a1f;
    margin-right: 4px;
}

/* ----- Form layout -------------------------------------------------------- */

.jobadmin-edit .ja-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.jobadmin-edit .ja-required-note {
    margin: 0 0 20px;
    padding: 10px 14px;
    background: #faf5fb;
    border: 1.5px solid rgba(123, 31, 162, 0.14);
    border-left: 1.5px solid rgba(123, 31, 162, 0.14);
    border-radius: 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #5a4f66;
}

.jobadmin-edit .ja-required-asterisk,
.jobadmin-edit .ja-label--required::after {
    color: #dc2626;
    font-weight: 700;
}

.jobadmin-edit .ja-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Rich text editors (dnn:TextEditor = CKEditor 4) — clamp the chrome to its column so
   it can never run off the side of the page, and make the drag grip vertical-only.
   CKEditor renders its chrome as a <table class="cke cke_chrome">, which shrink-wraps
   to its content and ignores the control's Width="100%", so a wide pasted table pushes
   it out; and after a drag CKEditor writes an inline style="width:...px" onto that
   table, which is why the !important flags here are load-bearing rather than tidy-able.
   The other half of the fix is config.resize_dir = 'vertical', set by the script at the
   bottom of JobEdit.ascx / EmailTemplateEdit.ascx — CSS alone will not hold it.
   Deliberately unscoped: used by both .jobadmin-edit (JobEdit) and the .ja-tmpl-*
   template editor. Mirrors .cn-richtext-wrap in the ClassNews module — keep in step. */
.ja-richtext-wrap {
    max-width: 100%;
}

.ja-richtext-wrap .cke,
.ja-richtext-wrap .cke_chrome {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ja-richtext-wrap .cke_resizer {
    cursor: ns-resize !important;
}

.jobadmin-edit .ja-label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #110a1f;
    letter-spacing: 0.02em;
    line-height: 1.4;
    opacity: 1;              /* the shared .ja-label dims itself; brand labels do not */
    margin-bottom: 0;
}

.jobadmin-edit .ja-formrow {
    display: grid;
    gap: 20px;
}

.jobadmin-edit .ja-hint {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #5a4f66;
    line-height: 1.5;
}

.jobadmin-edit .ja-hint--note {
    padding: 10px 14px;
    background: #f0f9ff;
    border: 1.5px solid rgba(2, 132, 199, 0.18);
    border-radius: 10px;
    color: #0c4a6e;
}

.jobadmin-edit .ja-hr {
    border: 0;
    border-top: 1.5px solid #ece8f0;
    margin: 12px 0 20px;
}

.jobadmin-edit .ja-formactions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 20px;
    margin-top: 8px;
    border-top: 1.5px solid #ece8f0;
}

/* Flags row — checkboxes side by side on a purple tint */
.jobadmin-edit .ja-formrow--flags {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    padding: 14px 18px;
    background: #faf5fb;
    border: 1.5px solid rgba(123, 31, 162, 0.14);
    border-radius: 12px;
}

.jobadmin-edit .ja-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #110a1f;
    cursor: pointer;
}

.jobadmin-edit .ja-flag input[type="checkbox"] {
    accent-color: #7b1fa2;
    width: 17px;
    height: 17px;
    cursor: pointer;
}

/* Advanced (SEO) section toggle */
.jobadmin-edit .ja-advanced-toggle {
    margin: 8px 0;
}

.jobadmin-edit .ja-advanced-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    color: #7b1fa2;
    transition: background 180ms ease;
}

.jobadmin-edit .ja-advanced-link:hover,
.jobadmin-edit .ja-advanced-link:focus {
    background: rgba(123, 31, 162, 0.08);
    color: #7b1fa2;
    text-decoration: none;
    outline: none;
}

.jobadmin-edit .ja-advanced-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ----- Inputs ------------------------------------------------------------- */

.jobadmin-edit .ja-input,
.jobadmin-edit .ja-select,
.jobadmin-edit .ja-text {
    width: 100%;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1.5px solid #ece8f0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    color: #110a1f;
    background: #fff;
    line-height: 1.5;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.jobadmin-edit .ja-input::placeholder,
.jobadmin-edit .ja-text::placeholder {
    color: #8a8294;
}

.jobadmin-edit .ja-input:focus,
.jobadmin-edit .ja-select:focus,
.jobadmin-edit .ja-text:focus {
    outline: none;
    border-color: #7b1fa2;
    box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.12);
}

/* Native select — brand-purple SVG chevron replaces the OS default */
.jobadmin-edit select.ja-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b1fa2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-position: right 14px center;
    background-repeat: no-repeat;
    padding-right: 40px;
    cursor: pointer;
}

/* Dropdown + its ✎ button sit on one line, the select taking the slack. */
.jobadmin-edit .ja-select-with-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jobadmin-edit .ja-select-with-actions .ja-select {
    flex: 1 1 auto;
    min-width: 0;
}

/* ----- Buttons and links -------------------------------------------------- */
/* JobEdit's primary action is .ja-btn-primary and its secondary is .ja-btn — the
   reverse of ClassNews, where .cn-btn is primary. Mapped, not renamed, so no
   markup has to change. */

/* Shared pill shape. */
.jobadmin-edit .ja-btn,
.jobadmin-edit .ja-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1.5px solid #7b1fa2;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

/* Primary — filled purple */
.jobadmin-edit .ja-btn-primary {
    background: #7b1fa2;
    color: #fff;
}

.jobadmin-edit .ja-btn-primary:hover,
.jobadmin-edit .ja-btn-primary:focus {
    background: #6b1494;
    border-color: #6b1494;
    color: #fff;
    text-decoration: none;
    outline: none;
}

/* Secondary — ghost purple */
.jobadmin-edit .ja-btn,
.jobadmin-edit .ja-btn--secondary {
    background: transparent;
    color: #7b1fa2;
    border-color: rgba(123, 31, 162, 0.28);
}

.jobadmin-edit .ja-btn:hover,
.jobadmin-edit .ja-btn:focus,
.jobadmin-edit .ja-btn--secondary:hover,
.jobadmin-edit .ja-btn--secondary:focus {
    background: rgba(123, 31, 162, 0.06);
    border-color: #7b1fa2;
    color: #7b1fa2;
    text-decoration: none;
    outline: none;
}

/* Discard — error red, built on the secondary ghost pill (matches .cn-btn--discard) */
.jobadmin-edit .ja-btn--discard {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.28);
}

.jobadmin-edit .ja-btn--discard:hover,
.jobadmin-edit .ja-btn--discard:focus {
    background: rgba(220, 38, 38, 0.06);
    border-color: #dc2626;
    color: #dc2626;
}

.jobadmin-edit .ja-btn:disabled,
.jobadmin-edit .ja-btn[disabled],
.jobadmin-edit .ja-btn-primary:disabled,
.jobadmin-edit .ja-btn-primary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Text-only action link */
.jobadmin-edit .ja-link {
    background: transparent;
    border: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #7b1fa2;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(123, 31, 162, 0.28);
    cursor: pointer;
    transition: border-color 180ms ease;
}

.jobadmin-edit .ja-link:hover,
.jobadmin-edit .ja-link:focus {
    color: #7b1fa2;
    border-bottom-color: #7b1fa2;
    text-decoration: none;
    outline: none;
}

.jobadmin-edit .ja-link--danger {
    color: #dc2626;
    border-bottom-color: rgba(220, 38, 38, 0.28);
}

.jobadmin-edit .ja-link--danger:hover,
.jobadmin-edit .ja-link--danger:focus {
    color: #dc2626;
    border-bottom-color: #dc2626;
}

/* Mini button — the inline ✎ / Edit actions next to a field label */
.jobadmin-edit .ja-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: auto;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    background: transparent;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #7b1fa2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 180ms ease, color 180ms ease;
}

.jobadmin-edit .ja-mini-btn:hover,
.jobadmin-edit .ja-mini-btn:focus {
    background: rgba(123, 31, 162, 0.08);
    color: #6b1494;
    text-decoration: none;
    outline: none;
}

/* ----- Status messages ---------------------------------------------------- */

.jobadmin-edit .ja-success {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1.5px solid #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.jobadmin-edit .ja-error,
.jobadmin-edit .ja-validation {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1.5px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

/* Inline field validators are bare text, not a filled banner. */
.jobadmin-edit .ja-form-row .ja-error,
.jobadmin-edit span.ja-error {
    display: inline-block;
    padding: 0;
    margin: 4px 0 0;
    border: 0;
    background: transparent;
    color: #dc2626;
    font-size: 13px;
}

/* ----- Lookup manager popups ---------------------------------------------- */

.jobadmin-edit .ja-modal-backdrop {
    background: rgba(17, 10, 31, 0.55);
}

.jobadmin-edit .ja-modal-card {
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 20px 60px rgba(17, 10, 31, 0.35);
}

.jobadmin-edit .ja-modal-card--scrollable .ja-modal-footer {
    border-top: 1.5px solid #ece8f0;
}

.jobadmin-edit .ja-modal-header {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #110a1f;
}

.jobadmin-edit .ja-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid rgba(17, 10, 31, 0.15);
    color: #110a1f;
    background: transparent;
    cursor: pointer;
}

.jobadmin-edit .ja-modal-close:hover,
.jobadmin-edit .ja-modal-close:focus {
    background: rgba(17, 10, 31, 0.06);
    text-decoration: none;
    outline: none;
}

.jobadmin-edit .ja-mgr-hint {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: rgba(17, 10, 31, 0.6);
}

.jobadmin-edit .ja-mgr-item {
    padding: 8px 12px;
    border: 1px solid rgba(123, 31, 162, 0.14);
    border-radius: 10px;
    background: #fff;
}

.jobadmin-edit .ja-mgr-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #110a1f;
}

.jobadmin-edit .ja-mgr-inactive {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: rgba(17, 10, 31, 0.45);
    border-color: rgba(17, 10, 31, 0.15);
}

.jobadmin-edit .ja-mgr-empty {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: rgba(17, 10, 31, 0.55);
}

.jobadmin-edit .ja-mgr-rowactions {
    gap: 14px;
}

/* Edit-form rows inside a popup */
.jobadmin-edit .ja-form-row {
    margin-bottom: 12px;
}

.jobadmin-edit .ja-form-row > label {
    display: block;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #110a1f;
    margin-bottom: 4px;
}

.jobadmin-edit .ja-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* ----- Multi-select lookup cards (Location / Contract Type / Job Title /
   Qualifications) — the tag sections, matching NewsEdit's ------------------ */

.jobadmin-edit .ja-tagbox {
    width: 100%;
    background: #faf8fc;
    border: 1.5px solid #ece8f0;
    border-radius: 12px;
    padding: 14px 18px 16px;
}

.jobadmin-edit .ja-tagbox-headingrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.jobadmin-edit .ja-tagbox-heading {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7b1fa2;
}

.jobadmin-edit .ja-tagbox-headactions {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}

.jobadmin-edit .ja-tagbox-empty {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: rgba(17, 10, 31, 0.5);
}

/* The CheckBoxList renders as a table (RepeatLayout="Table" RepeatColumns="5"),
   and table-layout:fixed pins every column at 20%. That is what stops a long label
   widening its column or bleeding into its neighbour — combined with the
   float/margin pair below, an over-long label wraps onto a second line inside its
   own cell, hanging-indented clear of the checkbox. */
.jobadmin-edit .ja-tagbox .ja-checkboxlist {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.jobadmin-edit .ja-tagbox .ja-checkboxlist td {
    padding: 4px 10px 4px 0;   /* right padding = the gutter between columns */
    vertical-align: top;
}

.jobadmin-edit .ja-tagbox .ja-checkboxlist input[type="checkbox"] {
    float: left;
    margin: 2px 6px 0 0;
    width: 15px;
    height: 15px;
    accent-color: #7b1fa2;
    cursor: pointer;
}

.jobadmin-edit .ja-tagbox .ja-checkboxlist label {
    display: block;
    margin-left: 21px;         /* 15px box + 6px gap, so wrapped lines line up */
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    color: #110a1f;
    overflow-wrap: break-word;
    cursor: pointer;
}

/* ----- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
    /* Five fixed columns get unusably narrow on a tablet or phone, so collapse the
       grid to a single stacked column. (ClassNews keeps 5 at every width; this is a
       deliberate improvement rather than a copy.) */
    .jobadmin-edit .ja-tagbox .ja-checkboxlist,
    .jobadmin-edit .ja-tagbox .ja-checkboxlist tbody,
    .jobadmin-edit .ja-tagbox .ja-checkboxlist tr,
    .jobadmin-edit .ja-tagbox .ja-checkboxlist td {
        display: block;
        width: auto;
    }

    .jobadmin-edit .ja-tagbox .ja-checkboxlist td:empty {
        display: none;         /* padding cells from the last, part-full row */
    }

    .jobadmin-edit .ja-editor-body {
        padding: 16px;
    }

    .jobadmin-edit .ja-editor-header {
        padding: 14px 16px;
        font-size: 16px;
    }
}

@media (max-width: 640px) {
    /* Three pills won't sit side by side on a phone — stack them full width,
       same as ClassNews does with .cn-formactions. */
    .jobadmin-edit .ja-formactions {
        flex-direction: column;
        align-items: stretch;
    }

    .jobadmin-edit .ja-formactions .ja-btn,
    .jobadmin-edit .ja-formactions .ja-btn-primary {
        width: 100%;
    }
}

/* =============================================================================
   All-applicants grid (grouped by person) — submission count + submissions popup
   ============================================================================= */

/* The clickable submission count. Rendered as a plain <a> when the applicant has
   only one submission and as a <button> when it opens the popup; both are styled
   identically so the column reads as one affordance.

   The button carries type="button" in the markup, and that is load-bearing: inside
   DNN's <form runat="server"> a bare <button> defaults to type=submit and would
   post the whole page back — the exact thing this screen's popup avoids. */
.jobadmin .ja-subcount {
    display: inline-block;
    min-width: 30px;
    padding: 2px 10px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 12px;
    background: #fff;
    color: #1565c0;
    font: inherit;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.jobadmin .ja-subcount:hover {
    background: #e3f2fd;
    text-decoration: none;
}

.jobadmin .ja-subcount:focus {
    outline: 2px solid #1565c0;
    outline-offset: 1px;
}

.jobadmin .ja-subcount-cell { white-space: nowrap; }

/* Hidden per-applicant popup payloads. Belt and braces alongside the `hidden`
   attribute — DNN skins have been known to reset [hidden]. */
.jobadmin .ja-subs-data { display: none !important; }

/* ----- The submissions popup ------------------------------------------------
   Everything from here down is unscoped, like the .ja-modal* rules above it,
   because the modal is rendered outside the .jobadmin wrapper (see the comment
   at the top of AllApplicants.ascx's modal markup).

   Wider than the shared 560px card: the job title is the longest string on the
   row and it sits beside a date rail and a status pill, so it needs the room. */
.ja-modal-card--subs {
    max-width: 780px;
    margin-top: 6vh;
    max-height: 88vh;
    padding: 18px 12px 12px 20px; /* narrow right gutter — the scrollbar lives there */
}

/* The list is what scrolls, not the card, so the header stays put on a long list.
   .ja-modal-card--scrollable already makes .ja-modal-body the flexing scroller;
   these just stop a scroll chaining out to the page and give the bar room. */
.ja-modal-card--subs .ja-modal-body {
    padding-right: 8px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.ja-modal-card--subs .ja-modal-header {
    padding-right: 8px;
}

.ja-subs-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Separation between entries is a gap plus a card edge rather than a hairline
   rule — at a glance the rows read as distinct blocks, which is the whole point
   of the popup when someone has applied eight times. */
.ja-subs-list .ja-subs-item {
    display: block;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0;
}

.ja-subs-list .ja-subs-item:last-child { margin-bottom: 0 !important; }

/* One anchor per row, so the entire block is the click target. */
.ja-subs-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border: 1.5px solid #ece8f0;
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none !important;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.ja-subs-row:hover,
.ja-subs-row:focus {
    border-color: rgba(123, 31, 162, 0.45);
    background: rgba(123, 31, 162, 0.035);
    box-shadow: 0 4px 14px rgba(17, 10, 31, 0.07);
    outline: none;
    text-decoration: none !important;
}

.ja-subs-row:focus-visible {
    box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.16);
}

/* ----- Left date rail ----- */
.ja-subs-when {
    flex: 0 0 92px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-right: 14px;
    border-right: 1.5px solid #f0edf3;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    white-space: nowrap;
}

.ja-subs-when__day {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #110a1f;
}

.ja-subs-when__rest {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(17, 10, 31, 0.5);
}

/* ----- Job title + reference + badges ----- */
.ja-subs-what {
    flex: 1 1 auto;
    min-width: 0; /* lets a long job title wrap instead of stretching the row */
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ja-subs-job {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #110a1f;
    overflow-wrap: break-word;
}

.ja-subs-row:hover .ja-subs-job { color: #7b1fa2; }

.ja-subs-ref {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: rgba(17, 10, 31, 0.5);
}

.ja-subs-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.ja-subs-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ja-subs-badge--spam {
    background: rgba(240, 160, 0, .12);
    border-color: rgba(240, 160, 0, .35);
    color: #92610a;
}

.ja-subs-badge--deleted {
    background: rgba(220, 38, 38, .09);
    border-color: rgba(220, 38, 38, .28);
    color: #b91c1c;
}

/* ----- Status pill column ----- */
.ja-subs-status {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.ja-subs-status .ja-status-pill {
    white-space: nowrap;
    font-size: 12px;
}

.ja-subs-list .ja-subs-more {
    display: block;
    margin: 10px 0 0 !important;
    padding: 0 2px !important;
    border: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: rgba(17, 10, 31, 0.5);
    font-style: italic;
}

/* Under ~560px the three columns stop fitting: the date rail becomes a full-width
   header line above the title and the pill drops to its own line. */
@media (max-width: 560px) {
    .ja-subs-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ja-subs-when {
        flex: 0 0 100%;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        padding-right: 0;
        padding-bottom: 6px;
        border-right: 0;
        border-bottom: 1.5px solid #f0edf3;
    }

    .ja-subs-what { flex: 1 1 100%; }
    .ja-subs-status { flex: 0 0 100%; }
}

/* =============================================================================
   ADMIN BRAND PASS — all admin list/detail screens
   -----------------------------------------------------------------------------
   Extends the ClassNews NewsList/NewsEdit design language (already ported onto
   JobEdit above) to every other admin screen: JobList, ApplicantList,
   AllApplicants, ApplicantDetail, EmailTemplateList/Edit, EmailSendHistory,
   SubscriberList. Values are copied from ClassNews/css/Module.css rather than
   approximated so the admin surfaces stay pixel-identical across modules.

   Scoping: every admin wrapper carries the shared `ja-admin` class
   (e.g. <div class="jobadmin jobadmin-adminlist ja-admin">), so nothing here can
   leak onto the public job pages, which share many ja-* class names. The three
   modals (bulk email, submissions popup, status manager) render OUTSIDE those
   wrappers, so their rules hang off .ja-modal instead. ApplicantDetail keeps its
   own .applicantdetail-root scope — its values are restyled below at equal
   specificity, later in the file, which wins the cascade.

   Palette (from the ClassNews brand pass):
     purple          #7b1fa2      purple deep   #6b1494
     purple tint     #faf5fb      card tint     #faf8fc
     ink             #110a1f      muted         #5a4f66
     faint           #8a8294      disabled      #a29aab
     line            #ece8f0      danger        #dc2626
     sky (filters)   #0284c7      sky bg        #f0f9ff
   ============================================================================= */

.ja-admin {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #110a1f;
    box-sizing: border-box;
}

.ja-admin *,
.ja-admin *::before,
.ja-admin *::after {
    box-sizing: border-box;
}

/* ----- Top navigation strip — pill tabs on the tint surface ---------------- */
/* ClassNews has no topnav equivalent, so this is a new treatment written purely
   in the brand vocabulary: tint container, pill items, purple current state. */

.ja-admin .ja-topnav {
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    padding: 6px;
    margin-bottom: 20px;
    background: #faf5fb;
    border: 1.5px solid #ece8f0;
    border-bottom: 1.5px solid #ece8f0;
    border-radius: 999px;
    font-size: 13px;
}

.ja-admin .ja-topnav__link,
.ja-admin .ja-topnav__current {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.ja-admin .ja-topnav__link {
    color: #5a4f66;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
}

.ja-admin .ja-topnav__link:hover,
.ja-admin .ja-topnav__link:focus {
    background: #fff;
    color: #7b1fa2;
    text-decoration: none;
    outline: none;
}

.ja-admin .ja-topnav__current {
    background: #7b1fa2;
    color: #fff;
    font-weight: 700;
}

/* ----- Buttons ------------------------------------------------------------- */
/* Same ladder as .cn-btn: ghost purple secondary by default, filled primary. */

.ja-admin .ja-btn,
.ja-modal .ja-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1.5px solid rgba(123, 31, 162, 0.28);
    background: transparent;
    color: #7b1fa2;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.ja-admin .ja-btn:hover,
.ja-admin .ja-btn:focus,
.ja-modal .ja-btn:hover,
.ja-modal .ja-btn:focus {
    background: rgba(123, 31, 162, 0.06);
    border-color: #7b1fa2;
    color: #7b1fa2;
    text-decoration: none;
    outline: none;
}

.ja-admin .ja-btn--primary,
.ja-admin .ja-btn-primary,
.ja-modal .ja-btn--primary,
.ja-modal .ja-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1.5px solid #7b1fa2;
    background: #7b1fa2;
    color: #fff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.ja-admin .ja-btn--primary:hover,
.ja-admin .ja-btn--primary:focus,
.ja-admin .ja-btn-primary:hover,
.ja-admin .ja-btn-primary:focus,
.ja-modal .ja-btn--primary:hover,
.ja-modal .ja-btn--primary:focus,
.ja-modal .ja-btn-primary:hover,
.ja-modal .ja-btn-primary:focus {
    background: #6b1494;
    border-color: #6b1494;
    color: #fff;
    text-decoration: none;
    outline: none;
}

.ja-admin .ja-btn:disabled,
.ja-admin .ja-btn[disabled],
.ja-modal .ja-btn:disabled,
.ja-modal .ja-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Danger button (modal footer Delete). Ghost red on the shared pill shape;
   margin-right:auto keeps it pinned left of Save/Cancel as before. */
.ja-admin .ja-btn-danger,
.ja-modal .ja-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1.5px solid rgba(220, 38, 38, 0.28);
    background: transparent;
    color: #dc2626;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    margin-right: auto;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.ja-admin .ja-btn-danger:hover,
.ja-admin .ja-btn-danger:focus,
.ja-modal .ja-btn-danger:hover,
.ja-modal .ja-btn-danger:focus {
    background: rgba(220, 38, 38, 0.06);
    border-color: #dc2626;
    color: #dc2626;
    text-decoration: none;
    outline: none;
}

/* Text-only action links */
.ja-admin .ja-link,
.ja-modal .ja-link {
    background: transparent;
    border: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #7b1fa2;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(123, 31, 162, 0.28);
    cursor: pointer;
    transition: border-color 180ms ease;
}

.ja-admin .ja-link:hover,
.ja-admin .ja-link:focus,
.ja-modal .ja-link:hover,
.ja-modal .ja-link:focus {
    color: #7b1fa2;
    border-bottom-color: #7b1fa2;
    text-decoration: none;
    outline: none;
}

.ja-admin .ja-link--danger,
.ja-modal .ja-link--danger,
.ja-modal .applicantdetail-link--danger {
    color: #dc2626;
    border-bottom-color: rgba(220, 38, 38, 0.28);
}

.ja-admin .ja-link--danger:hover,
.ja-admin .ja-link--danger:focus,
.ja-modal .ja-link--danger:hover,
.ja-modal .ja-link--danger:focus,
.ja-modal .applicantdetail-link--danger:hover,
.ja-modal .applicantdetail-link--danger:focus {
    color: #dc2626;
    border-bottom-color: #dc2626;
}

.ja-admin .ja-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: auto;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    background: transparent;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #7b1fa2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 180ms ease, color 180ms ease;
}

.ja-admin .ja-mini-btn:hover,
.ja-admin .ja-mini-btn:focus {
    background: rgba(123, 31, 162, 0.08);
    color: #6b1494;
    text-decoration: none;
    outline: none;
}

/* ----- Inputs and selects -------------------------------------------------- */

.ja-admin .ja-input,
.ja-admin .ja-select,
.ja-admin .ja-text,
.ja-modal .ja-input,
.ja-modal .ja-select,
.ja-modal .ja-text {
    width: 100%;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1.5px solid #ece8f0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    color: #110a1f;
    background: #fff;
    line-height: 1.5;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.ja-admin .ja-input::placeholder,
.ja-admin .ja-text::placeholder,
.ja-modal .ja-input::placeholder,
.ja-modal .ja-text::placeholder {
    color: #8a8294;
}

.ja-admin .ja-input:focus,
.ja-admin .ja-select:focus,
.ja-admin .ja-text:focus,
.ja-modal .ja-input:focus,
.ja-modal .ja-select:focus,
.ja-modal .ja-text:focus {
    outline: none;
    border-color: #7b1fa2;
    box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.12);
}

/* Native select — brand-purple SVG chevron replaces the OS default */
.ja-admin select.ja-select,
.ja-modal select.ja-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b1fa2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-position: right 14px center;
    background-repeat: no-repeat;
    padding-right: 40px;
    cursor: pointer;
}

/* The bulk-email body textarea keeps its monospace face (tokens are easier to
   spot), but takes the brand chrome from the rules above. */

.ja-admin input[type="checkbox"],
.ja-modal input[type="checkbox"] {
    accent-color: #7b1fa2;
    cursor: pointer;
}

.ja-admin .ja-checkbox {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #110a1f;
}

/* ----- Filter bar — sky tint, same as .classnews-adminlist .cn-filters ----- */

.ja-admin .ja-filters,
.ja-admin .ja-admin-filters {
    width: auto;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    background: #f0f9ff;
    border: 1.5px solid rgba(2, 132, 199, 0.18);
    border-radius: 12px;
    box-shadow: none;
}

.ja-admin .ja-filters .ja-input,
.ja-admin .ja-filters .ja-select,
.ja-admin .ja-admin-filters .ja-input,
.ja-admin .ja-admin-filters .ja-select {
    height: auto;
    min-height: 0;
    padding: 9px 14px;
    font-size: 14px;
    border-color: rgba(2, 132, 199, 0.22);
    background: #fff;
}

.ja-admin .ja-filters select.ja-select,
.ja-admin .ja-admin-filters select.ja-select {
    width: auto;
    min-width: 150px;
    flex: 0 0 auto;
    padding-right: 40px;
}

.ja-admin .ja-filters .ja-input:focus,
.ja-admin .ja-filters .ja-select:focus,
.ja-admin .ja-admin-filters .ja-input:focus,
.ja-admin .ja-admin-filters .ja-select:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.ja-admin .ja-filters .ja-filter-search,
.ja-admin .ja-admin-filters .ja-filter-search {
    flex: 1 1 200px;
    min-width: 200px;
    max-width: 420px;
}

.ja-admin .ja-filters .ja-btn,
.ja-admin .ja-admin-filters .ja-btn {
    height: auto;
    padding: 9px 20px;
    flex: 0 0 auto;
}

.ja-admin .ja-filtergroup {
    gap: 12px;
}

.ja-admin .ja-pagesize-label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5a4f66;
}

/* ----- Toolbar row --------------------------------------------------------- */

.ja-admin .ja-admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    margin: 0 0 20px;
}

/* ----- Messages ------------------------------------------------------------ */

.ja-admin .ja-success,
.ja-modal .ja-success {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1.5px solid #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.ja-admin .ja-error,
.ja-modal .ja-error {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1.5px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

/* Inline field validators inside modals are bare text, not a filled banner. */
.ja-modal span.ja-error {
    display: inline-block;
    padding: 0;
    margin: 4px 0 0;
    border: 0;
    background: transparent;
    color: #dc2626;
    font-size: 13px;
}

.ja-admin .ja-info,
.ja-modal .ja-info {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #f0f9ff;
    border: 1.5px solid rgba(2, 132, 199, 0.18);
    border-left: 1.5px solid rgba(2, 132, 199, 0.18);
    color: #0c4a6e;
    border-radius: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.ja-admin .ja-warning,
.ja-modal .ja-warning {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-left: 1.5px solid #fde68a;
    color: #92400e;
    border-radius: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

/* ----- Data grid — same treatment as .cn-grid ------------------------------ */

.ja-admin .ja-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1.5px solid #ece8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
}

.ja-admin .ja-grid th {
    text-align: left;
    padding: 12px 16px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5a4f66;
    background: #faf5fb;
    border-bottom: 1.5px solid #ece8f0;
    white-space: nowrap;
}

.ja-admin .ja-grid td {
    padding: 12px 16px;
    border-bottom: 1px solid #ece8f0;
    background: #fff;
    vertical-align: middle;
}

.ja-admin .ja-grid tr:last-child td {
    border-bottom: 0;
}

/* No zebra striping in the brand grid — row hover carries the affordance. */
.ja-admin .ja-grid tr:nth-child(even) td {
    background: #fff;
}

.ja-admin .ja-grid tbody tr:hover td {
    background: #faf5fb;
    transition: background 120ms ease;
}

.ja-admin .ja-grid a {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #7b1fa2;
    text-decoration: none;
}

.ja-admin .ja-grid a:hover,
.ja-admin .ja-grid a:focus {
    color: #6b1494;
    text-decoration: underline;
}

/* Header cells keep the th typography — undo the row-link styling above and
   keep the sort affordance readable. */
.ja-admin .ja-grid th a,
.ja-admin .ja-grid th .ja-sortlink {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
}

.ja-admin .ja-grid th .ja-sortlink:hover,
.ja-admin .ja-grid th a:hover {
    color: #7b1fa2;
    text-decoration: none;
}

.ja-admin .ja-grid input[type="checkbox"] {
    width: 17px;
    height: 17px;
    transform: none;
}

/* Row title + meta — the .cn-articletitle / .cn-articledate pairing. */
.ja-admin .ja-grid .ja-jobtitle,
.ja-admin .ja-grid a.ja-jobtitle {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #110a1f;
}

.ja-admin .ja-grid a.ja-jobtitle:hover,
.ja-admin .ja-grid a.ja-jobtitle:focus {
    color: #7b1fa2;
    text-decoration: underline;
}

.ja-admin .ja-jobref,
.ja-admin .ja-cell-meta {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #8a8294;
}

.ja-admin .ja-cell-meta a {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #8a8294;
}

.ja-admin .ja-muted {
    color: #8a8294;
}

/* Empty state */
.ja-admin .ja-empty {
    padding: 32px 24px;
    border-radius: 12px;
    border: 1.5px solid #ece8f0;
    background: #fff;
    text-align: center;
    color: #5a4f66;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
}

.ja-admin .ja-empty h3 {
    margin: 0 0 8px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #110a1f;
}

.ja-admin .ja-empty p {
    margin: 0;
}

/* ----- Badges — same tints as .cn-status ----------------------------------- */

.ja-admin .ja-badge {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
    background: #faf5fb;
    color: #5a4f66;
    vertical-align: middle;
}

.ja-admin .ja-badge--active,
.ja-admin .ja-badge--ok {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.ja-admin .ja-badge--inactive,
.ja-admin .ja-badge--muted {
    background: #faf5fb;
    border-color: #ece8f0;
    color: #5a4f66;
}

.ja-admin .ja-badge--deleted {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.ja-admin .ja-badge--expired,
.ja-admin .ja-badge--lock {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.ja-admin .ja-badge--status {
    font-size: 11px;
    padding: 4px 12px;
    /* Restated here so the brand layer can never re-wrap the label — see the
       base .ja-badge--status rule for why these one-word pills must not break. */
    overflow-wrap: normal;
    white-space: nowrap;
}

/* The "system" lock badge follows its category text inline. */
.ja-admin .ja-grid td .ja-badge--lock {
    margin-left: 6px;
}

/* Send-history pills — same shape and tints. */
.ja-admin .ja-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
}

.ja-admin .ja-pill--ok {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.ja-admin .ja-pill--bad {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Applicant status pills keep their server-supplied inline colours (admins pick
   them in the status manager) — only the typography is branded here. */
.ja-admin .ja-status-pill,
.ja-modal .ja-status-pill {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
}

/* Submission-count pill (AllApplicants) */
.ja-admin .ja-subcount {
    display: inline-block;
    min-width: 30px;
    padding: 2px 12px;
    border: 1.5px solid rgba(123, 31, 162, 0.28);
    border-radius: 999px;
    background: #fff;
    color: #7b1fa2;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}

.ja-admin .ja-subcount:hover {
    background: rgba(123, 31, 162, 0.06);
    border-color: #7b1fa2;
    text-decoration: none;
}

.ja-admin .ja-subcount:focus {
    outline: none;
    border-color: #7b1fa2;
    box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.12);
}

/* ----- Applicants page header ---------------------------------------------- */

.ja-admin .ja-h2 {
    margin: 4px 0 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #110a1f;
}

.ja-admin .ja-applicants-head__crumbs {
    margin-bottom: 6px;
    font-size: 13px;
}

.ja-admin .ja-applicants-head .ja-jobref {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #8a8294;
}

/* ----- Bulk action bar ----------------------------------------------------- */

.ja-admin .ja-bulk-bar {
    background: #faf5fb;
    border: 1.5px solid rgba(123, 31, 162, 0.14);
    border-radius: 12px;
    box-shadow: none;
    padding: 10px 14px;
}

.ja-admin .ja-bulk-bar__label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #110a1f;
}

.ja-admin .ja-bulk-bar__sep {
    background: rgba(123, 31, 162, 0.18);
}

.ja-admin .ja-bulk-bar .ja-select {
    width: auto;
    min-width: 0;
    max-width: 220px;
    height: auto;
    padding: 8px 40px 8px 14px;
    font-size: 14px;
    border-radius: 999px;
}

.ja-admin .ja-bulk-bar .ja-btn {
    height: auto;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
}

/* ----- Pager — same treatment as .cn-admin-pager / .cn-pgr-btn ------------- */

.ja-admin .ja-pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1.5px solid #ece8f0;
    background: #fff;
    color: #5a4f66;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.ja-admin .ja-pager__link:hover {
    background: rgba(123, 31, 162, 0.06);
    border-color: #7b1fa2;
    color: #7b1fa2;
}

.ja-admin .ja-pager__link--current {
    background: #7b1fa2;
    border-color: #7b1fa2;
    color: #fff;
    font-weight: 700;
    cursor: default;
}

.ja-admin .ja-pager__link--current:hover {
    background: #6b1494;
    border-color: #6b1494;
    color: #fff;
}

.ja-admin .ja-pager__link--disabled {
    background: #faf5fb;
    border-color: #ece8f0;
    color: #a29aab;
    cursor: default;
}

.ja-admin .ja-pager__link--disabled:hover {
    background: #faf5fb;
    border-color: #ece8f0;
    color: #a29aab;
}

.ja-admin .ja-pager__links {
    gap: 6px;
}

.ja-admin .ja-pager__summary {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #8a8294;
}

.ja-admin .ja-pager__ellipsis {
    color: #a29aab;
}

/* JobList's pager has no summary — centre the buttons like ClassNews's. */
.ja-admin .ja-pager--center {
    justify-content: center;
}

@media (min-width: 600px) {
    .ja-admin .ja-pager--center {
        justify-content: center;
    }
}

/* ----- Email template editor ----------------------------------------------- */
/* The two-column form gets the NewsEdit editor-card shell via CSS alone. */

.ja-admin .ja-tmpl-edit {
    background: #fff;
    border: 1.5px solid #ece8f0;
    border-radius: 16px;
    padding: 24px;
}

.ja-admin .ja-tmpl-edit__tokens {
    background: #faf8fc;
    border: 1.5px solid #ece8f0;
    border-radius: 12px;
    padding: 14px 18px 16px;
}

.ja-admin .ja-tmpl-tokens__title {
    margin: 0 0 4px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7b1fa2;
}

.ja-admin .ja-tmpl-tokens__hint {
    margin: 0 0 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #5a4f66;
}

.ja-admin .ja-token-btn {
    border: 1.5px solid rgba(123, 31, 162, 0.28);
    background: #fff;
    color: #7b1fa2;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    transition: background 180ms ease, border-color 180ms ease;
}

.ja-admin .ja-token-btn:hover {
    background: rgba(123, 31, 162, 0.06);
    border-color: #7b1fa2;
}

.ja-admin .ja-tmpl-field {
    margin-bottom: 16px;
}

.ja-admin .ja-tmpl-label,
.ja-modal .ja-tmpl-label {
    display: block;
    margin-bottom: 6px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #110a1f;
}

.ja-admin .ja-tmpl-hint,
.ja-modal .ja-tmpl-hint {
    margin-top: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #5a4f66;
    line-height: 1.5;
}

.ja-admin .ja-tmpl-key {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: #8a8294;
}

.ja-admin .ja-tmpl-name {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #110a1f;
}

.ja-admin .ja-tmpl-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1.5px solid #ece8f0;
    display: flex;
    gap: 12px;
}

/* ----- Send-history snapshot panel ----------------------------------------- */

.ja-admin .ja-snapshot {
    margin-top: 20px;
    padding: 20px 24px;
    border: 1.5px solid #ece8f0;
    border-radius: 12px;
    background: #fff;
}

.ja-admin .ja-snapshot__title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #110a1f;
}

.ja-admin .ja-snapshot__meta {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
}

.ja-admin .ja-snapshot__meta dt {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #5a4f66;
}

.ja-admin .ja-snapshot__bodylabel {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #5a4f66;
}

.ja-admin .ja-snapshot__bodyframe {
    border: 1.5px solid #ece8f0;
    border-radius: 10px;
}

/* ----- Bulk email modal extras --------------------------------------------- */

.ja-modal .ja-bulkemail-summary {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #faf8fc;
    border: 1.5px solid #ece8f0;
    border-radius: 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
}

.ja-modal .ja-bulkemail-warn {
    color: #92400e;
    font-style: italic;
    margin-left: 6px;
}

.ja-modal .ja-form-row > label {
    display: block;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #110a1f;
    margin-bottom: 4px;
}

/* =============================================================================
   Applicant detail — brand pass
   Restyles the .applicantdetail-* family in place (names untouched — the drag /
   swatch scripts and DNN-cascade !importants depend on them). The page becomes
   the NewsEdit-style white editor card with tinted inner panels.
   ============================================================================= */

.applicantdetail-root {
    background: #fff;
    border: 1.5px solid #ece8f0;
    border-radius: 16px;
    padding: 24px;
    margin-top: 8px;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #110a1f;
}

.applicantdetail-root .applicantdetail-crumbs {
    margin-bottom: 8px;
    font-size: 13px;
}

.applicantdetail-root .applicantdetail-sep {
    color: #a29aab;
}

.applicantdetail-root .applicantdetail-link {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #7b1fa2;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(123, 31, 162, 0.28);
    transition: border-color 180ms ease;
}

.applicantdetail-root .applicantdetail-link:hover,
.applicantdetail-root .applicantdetail-link:focus {
    color: #7b1fa2;
    border-bottom-color: #7b1fa2;
    text-decoration: none;
    outline: none;
}

.applicantdetail-root .applicantdetail-link--danger {
    color: #dc2626;
    border-bottom-color: rgba(220, 38, 38, 0.28);
}

.applicantdetail-root .applicantdetail-link--danger:hover,
.applicantdetail-root .applicantdetail-link--danger:focus {
    color: #dc2626;
    border-bottom-color: #dc2626;
}

.applicantdetail-root .applicantdetail-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #110a1f;
}

.applicantdetail-root .applicantdetail-subtitle {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #5a4f66;
    margin-bottom: 16px;
}

.applicantdetail-root .applicantdetail-jobref {
    color: #8a8294;
}

.applicantdetail-root .applicantdetail-empty {
    border: 1.5px solid #ece8f0;
    border-radius: 12px;
    background: #fff;
    color: #5a4f66;
}

.applicantdetail-root .applicantdetail-empty__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    color: #110a1f;
}

.applicantdetail-root .applicantdetail-card {
    border: 1.5px solid #ece8f0;
    border-radius: 12px;
    background: #faf8fc;
    box-shadow: none;
    padding: 18px;
}

.applicantdetail-root .applicantdetail-card__heading {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #110a1f;
}

.applicantdetail-root .applicantdetail-card__subheading {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7b1fa2;
}

.applicantdetail-root .applicantdetail-dl__label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #5a4f66;
}

.applicantdetail-root .applicantdetail-dl__value {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #110a1f;
}

.applicantdetail-root .applicantdetail-dl__value a {
    color: #7b1fa2;
    text-decoration: none;
}

.applicantdetail-root .applicantdetail-dl__value a:hover {
    color: #6b1494;
    text-decoration: underline;
}

.applicantdetail-root .applicantdetail-message {
    background: #fff;
    border: 1.5px solid #ece8f0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
}

.applicantdetail-root .applicantdetail-cv-name {
    color: #8a8294;
    font-size: 12px;
}

.applicantdetail-root .applicantdetail-row__label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #110a1f;
    margin-bottom: 6px;
}

.applicantdetail-root .applicantdetail-input,
.applicantdetail-root .applicantdetail-select {
    padding: 10px 14px;
    border: 1.5px solid #ece8f0;
    border-radius: 10px;
    background: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #110a1f;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.applicantdetail-root .applicantdetail-input::placeholder {
    color: #8a8294;
}

.applicantdetail-root .applicantdetail-input:focus,
.applicantdetail-root .applicantdetail-select:focus {
    outline: none;
    border-color: #7b1fa2;
    box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.12);
}

.applicantdetail-root .applicantdetail-btn,
.ja-modal .applicantdetail-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1.5px solid #7b1fa2;
    background: #7b1fa2;
    color: #fff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}

.applicantdetail-root .applicantdetail-btn:hover,
.applicantdetail-root .applicantdetail-btn:focus,
.ja-modal .applicantdetail-btn:hover,
.ja-modal .applicantdetail-btn:focus {
    background: #6b1494;
    border-color: #6b1494;
    color: #fff;
    text-decoration: none;
    outline: none;
}

.applicantdetail-root .applicantdetail-flag {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
}

.applicantdetail-root input[type="checkbox"] {
    accent-color: #7b1fa2;
    cursor: pointer;
}

.applicantdetail-root .applicantdetail-note {
    background: #fff;
    border: 1.5px solid #ece8f0;
    border-radius: 10px;
    padding: 12px 14px;
}

.applicantdetail-root .applicantdetail-note__head {
    font-size: 13px;
}

.applicantdetail-root .applicantdetail-note__date {
    color: #8a8294;
}

.applicantdetail-root .applicantdetail-history-item {
    border-left: 3px solid rgba(123, 31, 162, 0.35);
    padding: 8px 14px;
}

.applicantdetail-root .applicantdetail-history-item__meta {
    color: #8a8294;
    font-size: 12px;
}

.applicantdetail-root .applicantdetail-history-item__note {
    background: #fff;
    border: 1.5px solid #ece8f0;
    border-radius: 8px;
    font-size: 13px;
}

.applicantdetail-root .applicantdetail-current__label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #110a1f;
}

/* ----- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
    /* Wide grids scroll inside the page rather than squashing — same rule pair
       as .classnews-adminlist / .cn-grid. */
    .ja-admin {
        overflow-x: auto;
    }

    .ja-admin .ja-grid {
        min-width: 820px;
    }
}

@media (max-width: 640px) {
    .ja-admin .ja-topnav {
        width: 100%;
        border-radius: 16px;
    }

    .ja-admin .ja-filters,
    .ja-admin .ja-admin-filters {
        padding: 14px 16px;
    }

    .ja-admin .ja-filters .ja-input,
    .ja-admin .ja-admin-filters .ja-input,
    .ja-admin .ja-filters .ja-filter-search,
    .ja-admin .ja-admin-filters .ja-filter-search {
        flex: 1 1 100%;
        max-width: none;
    }

    .ja-admin .ja-admin-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ja-admin .ja-admin-actions .ja-btn,
    .ja-admin .ja-admin-actions .ja-btn--primary {
        width: 100%;
    }

    .applicantdetail-root {
        padding: 16px;
    }
}