/* =============================================================================
 * JPAR Portal — brand-compliant styles (Brand Guidelines v4.0, January 2026)
 * =============================================================================
 *
 * Loaded on two surfaces, both driven by JPAR_Assets:
 *   • Front-end portal pages for logged-in users (dashboard, director roster,
 *     agent detail). Paired with assets/js/portal.js for column sort.
 *   • wp-admin screens whose slug contains "jpar" (JPAR Import, JPAR Systems,
 *     Pre-License Roster). Admin screens reuse the badges, tables, and
 *     two-column layout classes defined here.
 *
 * Design principles (copied from the theme stylesheet intentionally so this
 * file can be read without cross-referencing):
 *   • Flat color blocking — no gradients, no shadows, no rounded corners.
 *     Depth/hierarchy is carried by colour, not by elevation effects.
 *   • Montserrat for headings / interactive labels; Lora for body copy.
 *   • Primary palette: #015297 blue + #051444 navy. Accent greys/light
 *     blues come from the brand palette only.
 *
 * File organisation — roughly top-down in the order a mentee sees the
 * dashboard, then the director roster, then the agent detail, with shared
 * utilities interleaved where each is first needed:
 *
 *   Brand tokens              →  :root palette + layout gap
 *   Base typography           →  Montserrat headings, Lora body
 *   Layout grid               →  auto-fit card grid for the dashboard
 *   Hero / Cards / Progress   →  shared card chrome
 *   Deal counter / Mentor     →  dashboard-specific cards
 *   Director roster           →  grouped table, filters, mentor headings
 *   Agent detail              →  profile form, deals, notes, systems
 *   Notes thread              →  director/mentor conversation UI
 *   Badges & status variants  →  task lateness, graduation, DORA/left
 *   Dashboard-only cards      →  Next Task, Systems Training, Gate
 *   Admin-only extras         →  pre-license roster, two-col admin layout
 *   Responsive                →  mobile collapses at 700px/900px
 *
 * Classes are BEM-ish: .jpar-<block>__<element> and .jpar-<block>--<modifier>.
 * Every custom class is prefixed with .jpar- to avoid collisions with the
 * theme or other plugins.
 * ============================================================================= */

/* ── Brand tokens ──
   CSS custom properties referenced by every rule below. Change the palette
   here once and the whole portal follows. --jpar-gap is the canonical
   spacing unit for card grids — using it consistently means mixing cards
   from different sections never produces visual rhythm gaps. */

:root {
    /* Official JPAR color palette */
    --jpar-blue:       #015297;   /* Primary — HEX #015297 */
    --jpar-navy:       #051444;   /* Secondary — HEX #051444 */
    --jpar-light-blue: #8FCBFE;   /* Secondary — HEX #8FCBFE */
    --jpar-gray:       #C2C2C2;   /* Secondary — HEX #C2C2C2 */
    --jpar-white:      #ffffff;
    --jpar-text:       #051444;   /* Navy for body text */
    --jpar-text-muted: #6b7280;
    --jpar-success:    #2e7d32;
    --jpar-danger:     #c62828;

    /* Layout */
    --jpar-gap: 1.5rem;
}

/* ── Base typography ──
   Scoped to .jpar-dashboard (not global body) so the portal never leaks
   its typography into the theme or WP admin toolbar. Every descendant
   inherits the Lora body font; headings explicitly switch to Montserrat. */

.jpar-dashboard,
.jpar-dashboard * {
    box-sizing: border-box;
}

.jpar-dashboard {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--jpar-gap);
    font-family: 'Lora', Georgia, serif;   /* Lora for body copy */
    font-size: 1rem;
    line-height: 1.6;
    color: var(--jpar-text);
}

.jpar-dashboard h1,
.jpar-dashboard h2,
.jpar-dashboard h3,
.jpar-dashboard h4 {
    font-family: 'Montserrat', Arial, sans-serif;   /* Montserrat for all headings */
    line-height: 1.2;
    margin: 0;
}

/* ── Layout grid ──
   auto-fit + minmax(280px, 1fr) gives us a responsive grid without a
   dedicated breakpoint: columns drop to 1 when the container shrinks below
   ~280px of usable width. Used by the Progress / Deals / Mentor cluster on
   the dashboard. */

.jpar-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--jpar-gap);
    margin-top: var(--jpar-gap);
}

/* ── Hero — color block, no gradients, no shadows ── */

.jpar-hero {
    background: var(--jpar-blue);
    color: var(--jpar-white);
    padding: 2.5rem 3rem;
}

.jpar-hero__greeting {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.875rem;   /* ~30pt — Big Headline per brand spec */
    letter-spacing: 0;
    color: var(--jpar-white);
}

/* ── Hero task-throughput chips ──
   Small pill row beneath the greeting/subheading that renders the
   completed-count, average-duration, and current-task-running stats
   sourced from jpar_next_action_log + get_next_action_stats(). Each chip
   is a translucent white overlay so the blue hero bleeds through —
   reinforces that this is "stats about the person in this hero" without
   introducing a new surface or shadow. */

.jpar-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.jpar-hero__stat {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--jpar-white);
    background: rgba( 255, 255, 255, 0.15 );
    padding: 0.35rem 0.7rem;
    line-height: 1.3;
}

.jpar-hero__stat strong {
    font-weight: 800;
    color: var(--jpar-white);
}

/* --current variant highlights the running-task chip so it draws the eye
   first — this is the motivational nudge ("finish what you started"). */
.jpar-hero__stat--current {
    background: rgba( 143, 203, 254, 0.28 );   /* light-blue at ~28% */
}

/* ── Agent-detail hero layout ──
   Applied via .jpar-hero--detail on templates/agent-detail.php.
   The hero has three vertical bands:
     1. Back-to-roster link (top, left-aligned)
     2. Identity ↔ Next Action (single flex row — identity left, panel
        right; wraps below a narrow breakpoint)
     3. Throughput stats (left-aligned chips)
   Scoped via the modifier so the mentee dashboard hero and the
   director-roster hero (.jpar-hero--actions) are unaffected. */

.jpar-hero--detail .jpar-detail-back {
    margin: 0 0 0.5rem;
}

/* 3-column grid: identity on the left, Next Action centered, empty
   spacer on the right. The twin 1fr tracks on either side of the auto-
   sized panel guarantee the panel is centered in the BANNER, not merely
   centered in the space remaining after the identity block (which is
   what justify-content: space-between or margin: auto on a flex item
   would actually produce).

   min-width: 0 on the identity lets it shrink when its natural width
   would exceed its 1fr share, preventing the panel from being shoved
   off-centre. */
.jpar-hero--detail__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.jpar-hero--detail__identity {
    grid-column: 1;
    min-width: 0;
    text-align: left;
}

.jpar-hero--detail .jpar-hero-next-action {
    grid-column: 2;
    margin: 0;
    width: 100%;
    max-width: 640px;
}

/* Narrow viewports: collapse to a single column so the panel stacks
   below the identity instead of squashing either side. */
@media ( max-width: 900px ) {
    .jpar-hero--detail__row {
        grid-template-columns: 1fr;
    }
    .jpar-hero--detail__identity,
    .jpar-hero--detail .jpar-hero-next-action {
        grid-column: 1;
        max-width: 100%;
    }
}

/* Agent-record hero: two columns — identity on the left, DORA license block
   right-justified beside the name. Scoped with :has() so the shared grid
   layout above (agent-detail's Next Action panel in the middle column) is
   left untouched; only the record hero, which carries a license column,
   flips to this flex row. */
.jpar-hero--detail__row:has( .jpar-hero--detail__license-col ) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}
.jpar-hero--detail__license-col {
    text-align: right;
    flex-shrink: 0;
}

/* Mirror the row breakpoint above: stack the license below the identity on
   narrow screens and left-align it so it reads naturally. */
@media ( max-width: 900px ) {
    .jpar-hero--detail__row:has( .jpar-hero--detail__license-col ) {
        flex-direction: column;
    }
    .jpar-hero--detail__license-col {
        text-align: left;
    }
}

/* ── Hero Next Action editor ──
   The Next Action form is centerpiece content in the agent-detail hero —
   directors can change the assigned task, push the due date, or tick
   "Mark as complete" without scrolling into the profile card. The form
   posts to admin-post.php?action=jpar_update_next_action; field
   semantics are documented in JPAR_Admin_Agents::handle_update_next_action.

   Layout: white-on-blue panel centered horizontally inside the blue hero,
   capped at 900px so the row stays readable on wide displays without
   stretching the controls. Mentors see the --readonly variant — same
   visual frame, single line of static text. */

.jpar-hero-next-action {
    margin: 1.5rem auto 0;
    max-width: 900px;
    padding: 1rem 1.5rem 1.25rem;
    background: rgba( 255, 255, 255, 0.12 );
    text-align: center;
}

.jpar-hero-next-action__title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--jpar-light-blue);
    margin: 0 0 0.85rem;
}

.jpar-hero-next-action__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.85rem;
}

.jpar-hero-next-action__field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
}

.jpar-hero-next-action__field--task {
    /* Task select gets more room than the date input. */
    min-width: 240px;
}

.jpar-hero-next-action__label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba( 255, 255, 255, 0.85 );
}

.jpar-hero-next-action__input {
    font-family: 'Lora', Georgia, serif;
    font-size: 0.95rem;
    color: var(--jpar-text);
    background: var(--jpar-white);
    border: 1px solid rgba( 255, 255, 255, 0.4 );
    padding: 0.45rem 0.6rem;
    width: 100%;
    min-width: 0;     /* let flex children shrink */
}

.jpar-hero-next-action__check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--jpar-white);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.55rem;   /* aligns the checkbox with the inputs */
    cursor: pointer;
}

.jpar-hero-next-action__check input {
    margin: 0;
}

.jpar-hero-next-action__save {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jpar-white);
    background: var(--jpar-navy);
    border: none;
    padding: 0.55rem 1.4rem;
    cursor: pointer;
}

.jpar-hero-next-action__save:hover {
    background: #000;
}

.jpar-hero-next-action__status {
    margin: 0.85rem 0 0;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.85rem;
    color: #90ee90;   /* same accent used elsewhere for "done" feedback */
}

/* Muted variant used for the "No task assigned" empty state. */
.jpar-hero-next-action__status--muted {
    color: rgba( 255, 255, 255, 0.7 );
}

/* Counter line: "Task N of M: <name>" rendered above the due/complete
   controls. Two spans stacked for visual hierarchy — the counter is a
   compact label, the name is the primary content. */
.jpar-hero-next-action__current {
    margin: 0 0 0.85rem;
    text-align: center;
}

.jpar-hero-next-action__counter {
    display: block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba( 255, 255, 255, 0.75 );
    margin-bottom: 0.15rem;
}

.jpar-hero-next-action__current-name {
    display: block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--jpar-white);
}

/* Mark Complete button — same visual weight as Save but coloured by the
   success accent so it reads as a distinct positive action. Its wrapping
   form is centered below the due-date form. */
.jpar-hero-next-action__complete-form {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

.jpar-hero-next-action__complete {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jpar-white);
    background: var(--jpar-success);
    border: none;
    padding: 0.55rem 1.4rem;
    cursor: pointer;
}

.jpar-hero-next-action__complete:hover {
    background: #1b5e20;
}

/* Mentor (read-only) variant — single line of context. */
.jpar-hero-next-action--readonly {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    color: var(--jpar-white);
    font-family: 'Lora', Georgia, serif;
    padding: 0.75rem 1.5rem;
}

.jpar-hero-next-action__readonly-value {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
}

.jpar-hero-next-action__readonly-due {
    color: rgba( 255, 255, 255, 0.85 );
    font-style: italic;
    font-size: 0.85rem;
}

.jpar-hero-next-action__readonly-status {
    color: #90ee90;
    font-size: 0.85rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
}

/* ── Cards — color blocking, no shadows, no gradients ──
   The 4px blue top border replaces the drop-shadow affordance you'd see on
   most dashboards. Keeps the visual hierarchy crisp without violating the
   brand guideline against elevation effects. Every card in the portal uses
   this base .jpar-card; variants (--next-task, --systems, --mentor, etc.)
   layer state-specific colour and spacing on top. */

.jpar-card {
    background: var(--jpar-white);
    border-top: 4px solid var(--jpar-blue);
    padding: 1.75rem;
}

.jpar-card__title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.875rem;   /* ~14pt — Caption/Montserrat SemiBold per spec */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--jpar-navy);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--jpar-light-blue);
}

/* ── Progress bar ── */

.jpar-progress-bar {
    background: var(--jpar-gray);
    height: 10px;
    overflow: hidden;
}

.jpar-progress-bar__fill {
    height: 100%;
    background: var(--jpar-blue);
    transition: width 0.4s ease;
}

.jpar-progress__label {
    margin: 0.75rem 0 0;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.875rem;
    color: var(--jpar-text-muted);
}

/* ── Deal counter ── */

.jpar-deals__counter {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;   /* ExtraBold */
    font-size: 3rem;
    margin: 0 0 0.5rem;
    color: var(--jpar-blue);
    line-height: 1;
}

.jpar-deals__sep {
    color: var(--jpar-gray);
    margin: 0 0.2rem;
    font-weight: 400;
}

.jpar-deals__status {
    margin: 0;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.9rem;
    color: var(--jpar-text-muted);
}

.jpar-deals__status--graduated {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--jpar-success);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Mentor card ── */

.jpar-mentor__name {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--jpar-navy);
    margin: 0 0 0.35rem;
}

.jpar-mentor__email a {
    font-family: 'Lora', Georgia, serif;
    color: var(--jpar-blue);
    text-decoration: none;
    font-size: 0.9rem;
}

.jpar-mentor__email a:hover {
    text-decoration: underline;
}

.jpar-mentor__unassigned {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    color: var(--jpar-text-muted);
    margin: 0;
}

/* ── Navy accent card variant ── */

.jpar-card--deals {
    background: var(--jpar-navy);
    border-top-color: var(--jpar-blue);
}

.jpar-card--deals .jpar-card__title {
    color: var(--jpar-light-blue);
    border-bottom-color: var(--jpar-blue);
}

.jpar-card--deals .jpar-deals__counter {
    color: var(--jpar-white);
}

.jpar-card--deals .jpar-deals__sep {
    color: var(--jpar-light-blue);
}

.jpar-card--deals .jpar-deals__status {
    color: var(--jpar-gray);
}

.jpar-card--deals .jpar-deals__status--graduated {
    color: var(--jpar-light-blue);
}

/* ── Misc ── */

.jpar-login-notice {
    padding: 1rem 1.5rem;
    background: var(--jpar-light-blue);
    border-left: 4px solid var(--jpar-blue);
    font-family: 'Lora', Georgia, serif;
    color: var(--jpar-navy);
}

/* ── Director roster view ──
   Covers templates/director.php AND templates/agent-detail.php. The two
   templates share the .jpar-director wrapper so they inherit the same
   padding, hero style, and card chrome without duplicating base rules. */

.jpar-director {
    padding: 0 0 2rem;
}

.jpar-director .jpar-hero {
    margin-bottom: var(--jpar-gap);
}

/* ── Full-width page template — override theme content constraints ──
   The theme's page.php uses a max-width column. Director pages tag the
   body via the inline script in JPAR_Shortcode_Director::render_*, so we
   key these overrides off body.jpar-director-page and force the container
   wide enough to hold the full 8-column roster table. */

.jpar-page-wrap {
    width: 100%;
}

.jpar-page-main {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Neutralize common theme content-width wrappers */
.jpar-page-wrap .entry-content,
.jpar-page-wrap .post-content,
.jpar-page-wrap .site-content,
.jpar-page-wrap article {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}



.jpar-hero__sub {
    font-family: 'Lora', Georgia, serif;
    color: var(--jpar-light-blue);
    margin: 0.4rem 0 0;
    font-size: 1rem;
}

.jpar-director-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: var(--jpar-gap) 0;
}

.jpar-stat-card {
    background: var(--jpar-navy);
    color: var(--jpar-white);
    padding: 1.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 130px;
    flex: 1;
}

.jpar-stat-card__value {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    color: var(--jpar-white);
    line-height: 1;
}

.jpar-stat-card__label {
    font-family: 'Lora', Georgia, serif;
    font-size: 0.8rem;
    color: var(--jpar-light-blue);
    margin-top: 0.35rem;
    text-align: center;
}

.jpar-mentor-group {
    margin-bottom: 2.5rem;
}

.jpar-mentor-group__heading {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--jpar-navy);
    padding: 0.6rem 1rem;
    background: var(--jpar-light-blue);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0;
}

.jpar-mentor-group__count {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--jpar-navy);
    opacity: 0.7;
}

.jpar-roster-table-wrap {
    overflow-x: auto;
}

.jpar-section-heading {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--jpar-navy, #0a2540);
    margin: 0 0 0.5rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.jpar-section-heading__manage {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--jpar-navy, #0a2540);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.jpar-section-heading__manage:hover {
    opacity: 0.7;
}

.jpar-prospect-section {
    margin-top: 2rem;
}

.jpar-mentor-locked {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.8rem;
    background: #fff7e6;
    border: 1px solid #f4cf8e;
    border-radius: 4px;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.875rem;
}

.jpar-mentor-locked__current {
    font-weight: 600;
    color: var(--jpar-navy, #0a2540);
}

.jpar-mentor-locked__note {
    font-size: 0.8rem;
    color: #7a4f12;
}

.jpar-card--module .jpar-module-picker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.jpar-card--module .jpar-module-picker select {
    flex: 1;
    font-family: 'Lora', Georgia, serif;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    border: 1px solid #cdd2d8;
    border-radius: 4px;
    background: #fff;
}

.jpar-module-detail {
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    padding: 1rem 1.15rem;
    background: #fafbfc;
}

.jpar-module-detail__title {
    margin: 0 0 0.5rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.jpar-module-detail__meta {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: #5f6772;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.jpar-module-detail__locked {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.8rem;
    background: #fff7e6;
    border: 1px solid #f4cf8e;
    border-radius: 4px;
    font-size: 0.875rem;
    color: #7a4f12;
}

.jpar-module-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.jpar-module-actions form {
    margin: 0;
}

.jpar-module-bonus {
    margin-top: 1.25rem;
    border-top: 1px solid #e3e6ea;
    padding-top: 1rem;
}

.jpar-module-bonus__title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5f6772;
    margin: 0 0 0.5rem;
}

.jpar-module-bonus__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.jpar-module-bonus__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9rem;
}

/*
 * Collapsible cards
 * ----------------------------------------------------------------------
 * portal.js injects a .jpar-card__toggle button into every
 * .jpar-card__title and toggles .jpar-card--collapsed on the card.
 * Collapsed state hides every direct child of the card except the
 * title; the toggle button itself stays visible (it's nested inside
 * the title).
 */
.jpar-card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.jpar-card__toggle {
    margin-left: auto;
    flex: 0 0 auto;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}

.jpar-card__toggle:hover,
.jpar-card__toggle:focus-visible {
    opacity: 1;
}

.jpar-card--collapsed > *:not(.jpar-card__title) {
    display: none !important;
}

.jpar-card--collapsed .jpar-card__title {
    margin-bottom: 0;
}

.jpar-bulk-note-form .jpar-bulk-note-form__field {
    grid-column: 1 / -1;
}

.jpar-bulk-note-form__select {
    min-height: 8rem;
    padding: 0.4rem 0.5rem;
    font-family: 'Lora', Georgia, serif;
}

.jpar-bulk-note-form__textarea {
    width: 100%;
    font-family: 'Lora', Georgia, serif;
    line-height: 1.5;
}

/*
 * Preferred Vendors directory — public page rendered by [jpar_vendors].
 * Card grid with category headings; reuses JPAR colour tokens.
 */
.jpar-vendors {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 1.5rem 0;
}

.jpar-vendors__group {
    border-top: 2px solid var(--jpar-navy, #0a2540);
    padding-top: 1rem;
    /* Account for the sticky jump-bar above when scrollIntoView lands on a
       category — without this the heading sits right under the bar. */
    scroll-margin-top: 80px;
}

/* Sticky jump-to dropdown above the directory. */
.jpar-vendors__nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    padding: 0.65rem 0.75rem;
    margin: 0 -0.75rem 1.25rem;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.jpar-vendors__nav-label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--jpar-navy, #0a2540);
}

.jpar-vendors__nav-select {
    flex: 1;
    min-width: 220px;
    padding: 0.45rem 0.65rem;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.95rem;
    border: 1px solid #cdd2d8;
    border-radius: 4px;
    background: #fff;
    color: var(--jpar-navy, #0a2540);
}

.jpar-vendors__nav-reset {
    padding: 0.45rem 0.9rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--jpar-navy, #0a2540);
    background: transparent;
    border: 1px solid #cdd2d8;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.jpar-vendors__nav-reset:hover,
.jpar-vendors__nav-reset:focus-visible {
    background: var(--jpar-navy, #0a2540);
    color: #fff;
    border-color: var(--jpar-navy, #0a2540);
}

/* Filter state — categories not matching the dropdown selection. */
.jpar-vendors__group.is-hidden {
    display: none;
}

/* Vendor card head — favicon + name on one line. */
.jpar-vendor__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.jpar-vendor__favicon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 4px;
    background: #f4f6f9;
    object-fit: contain;
    padding: 2px;
    border: 1px solid #e3e6ea;
}

/* Hide broken favicons (DuckDuckGo couldn't resolve one) — the
   onerror handler stamps `is-broken`, then this collapses the slot. */
.jpar-vendor__favicon.is-broken {
    display: none;
}

/* Adjust the existing name margin since it's now inside __head. */
.jpar-vendor__head .jpar-vendor__name {
    margin: 0;
    flex: 1;
}

.jpar-vendors__cat {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--jpar-navy, #0a2540);
    margin: 0 0 1rem;
}

.jpar-vendors__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.jpar-vendor {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.jpar-vendor__name {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--jpar-navy, #0a2540);
    margin: 0;
    line-height: 1.25;
}

.jpar-vendor__contact {
    font-family: 'Lora', Georgia, serif;
    font-size: 0.9rem;
    color: #5f6772;
    margin: 0;
}

.jpar-vendor__lines {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-family: 'Lora', Georgia, serif;
}

.jpar-vendor__lines li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    line-height: 1.35;
}

.jpar-vendor__lines a {
    color: var(--jpar-navy, #0a2540);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.jpar-vendor__lines a:hover {
    border-bottom-color: currentColor;
}

.jpar-vendor__icon {
    flex: 0 0 16px;
    color: var(--jpar-blue, #015297);
    margin-top: 2px;
}

.jpar-vendor__address {
    color: #5f6772;
    font-style: italic;
}

.jpar-vendor__address span {
    flex: 1;
    min-width: 0;
}

.jpar-vendor__social {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.jpar-vendor__social a {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cdd2d8;
    border-radius: 50%;
    color: var(--jpar-navy, #0a2540);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.jpar-vendor__social a:hover {
    background: var(--jpar-blue, #015297);
    color: #fff;
    border-color: var(--jpar-blue, #015297);
    transform: translateY(-1px);
}

.jpar-vendor__social .jpar-vendor__icon {
    margin: 0;
}

/* Visually hidden but readable by screen readers (matches WP core's pattern). */
.jpar-vendor__social .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.jpar-roster-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.875rem;
}

.jpar-roster-table thead th {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--jpar-white);
    background: var(--jpar-blue);
    padding: 0.6rem 0.9rem;
    text-align: left;
    white-space: nowrap;
}

.jpar-roster-table tbody tr {
    border-bottom: 1px solid var(--jpar-gray);
}

.jpar-roster-table tbody tr:nth-child(even) {
    background: #f7f9fc;
}

.jpar-roster-table tbody tr.jpar-row--graduated {
    background: #edf7ed;
}

.jpar-roster-table td {
    padding: 0.65rem 0.9rem;
    vertical-align: middle;
    color: var(--jpar-navy);
}

.jpar-agent-name strong {
    display: block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
}

.jpar-agent-meta {
    display: block;
    font-size: 0.775rem;
    color: var(--jpar-text-muted);
    font-family: 'Lora', Georgia, serif;
}

.jpar-deals-pill {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--jpar-navy);
}

.jpar-deals-pill--done {
    color: var(--jpar-success);
}

.jpar-mini-bar {
    background: var(--jpar-gray);
    height: 6px;
    width: 80px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.4rem;
}

.jpar-mini-bar__fill {
    height: 100%;
    background: var(--jpar-blue);
}

.jpar-mini-bar__label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--jpar-navy);
    vertical-align: middle;
}

.jpar-check {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
}

.jpar-check--yes { color: var(--jpar-success); }
.jpar-check--no  { color: var(--jpar-danger);  }

.jpar-badge {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    display: inline-block;
}

.jpar-badge--graduated {
    background: var(--jpar-success);
    color: var(--jpar-white);
}

.jpar-badge--active {
    background: var(--jpar-blue);
    color: var(--jpar-white);
}

/* ── Hero with action buttons ── */

.jpar-hero--actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.jpar-hero__btns {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.jpar-btn--hero {
    font-size: 0.8rem;
    padding: 0.55rem 1.25rem;
    background: rgba(255,255,255,0.15);
    border: 2px solid var(--jpar-white);
    color: var(--jpar-white);
}

.jpar-btn--hero:hover,
.jpar-btn--hero-on {
    background: var(--jpar-white);
    color: var(--jpar-blue) !important;
}

.jpar-btn--hero.jpar-btn--outline {
    background: transparent;
    border-color: var(--jpar-light-blue);
    color: var(--jpar-light-blue);
}

.jpar-btn--hero.jpar-btn--outline:hover,
.jpar-btn--hero.jpar-btn--outline.jpar-btn--hero-on {
    background: var(--jpar-light-blue);
    color: var(--jpar-navy) !important;
}

/* ── Add user form ── */

.jpar-add-form-wrap {
    background: var(--jpar-white);
    border-top: 4px solid var(--jpar-navy);
    padding: 1.5rem 1.75rem 1.75rem;
    margin-top: var(--jpar-gap);
}

.jpar-add-form__heading {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--jpar-navy);
    margin: 0 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--jpar-light-blue);
}

.jpar-add-form__fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

.jpar-field--submit { align-self: end; }

.jpar-req { color: var(--jpar-danger); }

/* ── Remove mentor confirmation ── */

.jpar-remove-confirm {
    background: #fff8e7;
    border-left: 4px solid #e65100;
    padding: 1rem 1.5rem;
    margin: var(--jpar-gap) 0 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.jpar-remove-confirm__text {
    font-family: 'Lora', Georgia, serif;
    font-size: 0.95rem;
    color: var(--jpar-navy);
    margin: 0;
    flex: 1;
}

.jpar-remove-confirm__cancel {
    font-family: 'Lora', Georgia, serif;
    font-size: 0.875rem;
    color: var(--jpar-text-muted);
}

.jpar-btn--danger {
    background: var(--jpar-danger);
    color: var(--jpar-white);
    border: none;
}

.jpar-btn--danger:hover { background: #a31515; color: var(--jpar-white); }

/* ── Remove mentor link in roster group heading ── */

.jpar-mentor-row__name { margin-right: 0.5rem; }

.jpar-mentor-row__remove {
    float: right;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jpar-danger);
    text-decoration: none;
    opacity: 0.7;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--jpar-danger);
}

.jpar-mentor-row__remove:hover { opacity: 1; }

/* ── Sortable column headers ──
   Cursor + hover hint are the only pure-CSS contribution here; the actual
   sort behaviour is driven by portal.js (see initSort). The .jpar-sort-icon
   span is where the ▲/▼ glyph is painted at runtime. */

th[data-sortable]:hover { background: #024a87; }

.jpar-sort-icon {
    font-size: 0.65rem;
    opacity: 0.7;
}

/* ── Agent detail back link ── */

.jpar-detail-back a {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jpar-light-blue);
    text-decoration: none;
    margin: 0 0 1rem;
    display: inline-block;
}

.jpar-detail-back a:hover { color: var(--jpar-white); }

.jpar-detail-status--graduated {
    color: #90ee90;
    font-weight: 700;
}

.jpar-detail-status--active {
    color: var(--jpar-light-blue);
}

/* ── Notices ── */

.jpar-notice {
    padding: 0.75rem 1.25rem;
    margin: var(--jpar-gap) 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
}

.jpar-notice--success {
    background: #edf7ed;
    border-left: 4px solid var(--jpar-success);
    color: var(--jpar-success);
}

.jpar-notice--error {
    background: #fdecea;
    border-left: 4px solid var(--jpar-danger);
    color: var(--jpar-danger);
}

/* ── Detail two-column grid ── */

.jpar-detail-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: var(--jpar-gap);
    margin-top: var(--jpar-gap);
    align-items: start;
}

/* ── Form elements ── */

.jpar-field {
    margin-bottom: 1rem;
}

.jpar-field-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.jpar-field-row .jpar-field { margin-bottom: 0; flex: 1; }

.jpar-label {
    display: block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--jpar-navy);
    margin-bottom: 0.35rem;
}

.jpar-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--jpar-text-muted);
}

.jpar-input {
    width: 100%;
    border: 1px solid var(--jpar-gray);
    padding: 0.5rem 0.75rem;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.9rem;
    color: var(--jpar-navy);
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
}

.jpar-input:focus {
    outline: 2px solid var(--jpar-blue);
    outline-offset: -2px;
    border-color: var(--jpar-blue);
}

.jpar-input--sm { width: 100%; }

.jpar-textarea { resize: vertical; }

.jpar-field-checks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.jpar-check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.9rem;
    color: var(--jpar-navy);
    cursor: pointer;
}

.jpar-check-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--jpar-blue);
    cursor: pointer;
}

/* ── Buttons ── */

.jpar-btn {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--jpar-blue);
    color: var(--jpar-white);
    border: none;
    padding: 0.55rem 1.25rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.jpar-btn:hover { background: #0261b0; color: var(--jpar-white); }

.jpar-btn--sm { padding: 0.3rem 0.7rem; font-size: 0.7rem; }

.jpar-btn--outline {
    background: transparent;
    border: 2px solid var(--jpar-blue);
    color: var(--jpar-blue);
}

.jpar-btn--outline:hover {
    background: var(--jpar-blue);
    color: var(--jpar-white);
}

/* ── Agent link in roster ── */

.jpar-agent-link {
    color: var(--jpar-navy);
    text-decoration: none;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
}

.jpar-agent-link:hover { color: var(--jpar-blue); text-decoration: underline; }

/* ── Deals table in detail view ── */

.jpar-deals-table {
    margin-bottom: 1.5rem;
}

.jpar-deals-table--past {
    opacity: 0.8;
}

.jpar-deals-count {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--jpar-text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.5rem;
}

.jpar-row--editing {
    background: #fff8e7 !important;
    outline: 2px solid var(--jpar-blue);
}

.jpar-empty {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    color: var(--jpar-text-muted);
    margin: 0.5rem 0 1.5rem;
}

/* ── Deal add/edit form ── */

.jpar-deal-form-wrap {
    border-top: 2px solid var(--jpar-light-blue);
    padding-top: 1.25rem;
    margin-top: 0.5rem;
}

.jpar-deal-form__heading {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--jpar-navy);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.jpar-deal-form__cancel {
    font-family: 'Lora', Georgia, serif;
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--jpar-danger);
    text-decoration: none;
}

.jpar-deal-form__cancel:hover { text-decoration: underline; }

.jpar-deal-form__hint {
    margin: 0.5rem 0 0;
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 0.8rem;
    color: var(--jpar-text-muted);
}

/* ── Past deals collapsible ── */

.jpar-past-deals {
    margin-top: 1.5rem;
}

.jpar-past-deals__toggle {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--jpar-text-muted);
    cursor: pointer;
    padding: 0.5rem 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jpar-past-deals__toggle::-webkit-details-marker { display: none; }
.jpar-past-deals__toggle::before { content: '▶'; font-size: 0.6rem; }
details[open] .jpar-past-deals__toggle::before { content: '▼'; }

/* ── Responsive detail ── */

@media ( max-width: 860px ) {
    .jpar-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Full-width override for director page (block theme compat) ── */

body.jpar-director-page .wp-block-post-content,
body.jpar-director-page .entry-content,
body.jpar-director-page .wp-block-group,
body.jpar-director-page .wp-block-group__inner-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── Roster filter bar ── */

.jpar-roster-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: var(--jpar-gap) 0 0.75rem;
    flex-wrap: wrap;
}

.jpar-filter-label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--jpar-text-muted);
    margin-right: 0.25rem;
}

.jpar-filter-pill {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.85rem;
    border: 2px solid var(--jpar-gray);
    color: var(--jpar-text-muted);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.jpar-filter-pill:hover {
    border-color: var(--jpar-blue);
    color: var(--jpar-blue);
}

.jpar-filter-pill--on {
    border-color: var(--jpar-blue);
    background: var(--jpar-blue);
    color: var(--jpar-white);
}

.jpar-filter-pill--on:hover {
    background: #0261b0;
    color: var(--jpar-white);
}

/* ── Single unified roster table ── */

.jpar-mentor-row td {
    background: var(--jpar-light-blue) !important;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--jpar-navy);
    padding: 0.55rem 0.9rem;
    border-bottom: none;
}

.jpar-roster-table tbody tr.jpar-row--inactive {
    background: #f0f0f0 !important;
    opacity: 0.75;
}

/* ── Status badges ──
   Badge modifiers map 1:1 to the state machine in
   JPAR_Shortcode_Director::compute_task_lateness() and the agent_status
   enum: active, active--done, active--late, active--overdue, graduated,
   dora, left. Keep these synchronised with the PHP side — a new state in
   PHP needs a matching --<state> variant here or the badge will render
   unstyled. */

.jpar-badge--dora {
    background: #e65100;
    color: var(--jpar-white);
}

.jpar-badge--left {
    background: var(--jpar-text-muted);
    color: var(--jpar-white);
}

.jpar-badge--next-action {
    background: var(--jpar-navy);
    color: var(--jpar-light-blue);
    max-width: 140px;
    white-space: normal;
    line-height: 1.3;
    font-size: 0.65rem;
}

/* ── Systems readiness cell ── */

.jpar-systems-cell {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    white-space: nowrap;
}

.jpar-systems-cell--ready {
    color: var(--jpar-success);
}

.jpar-systems-cell--pending {
    color: var(--jpar-blue);
}

.jpar-systems-cell--none {
    color: var(--jpar-text-muted);
}

/* ── Notes-flag row highlight ──
   Applied when mentee_profile.notes_updated = 1, i.e. a mentor posted a
   note and the office hasn't acknowledged it yet. The flag clears only
   when office reads the note — see JPAR_Admin_Agents::handle_mark_note_read
   for the clearing state machine. */

.jpar-row--notes-flag {
    border-left: 3px solid var(--jpar-danger);
}

.jpar-agent-link--flagged {
    color: var(--jpar-danger) !important;
}

/* ── Next action in roster agent cell ── */

.jpar-agent-next-action {
    display: block;
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 0.72rem;
    color: var(--jpar-blue);
    margin-top: 0.15rem;
    line-height: 1.3;
}

.jpar-agent-next-due {
    color: var(--jpar-text-muted);
    font-style: normal;
}

/* ── Read-only profile summary (mentor view) ── */

.jpar-profile-readonly {
    margin: 0;
    padding: 0;
}

.jpar-profile-readonly__row {
    display: flex;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.875rem;
}

.jpar-profile-readonly__row:last-child {
    border-bottom: none;
}

.jpar-profile-readonly__row dt {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    color: var(--jpar-text-muted);
    min-width: 110px;
    flex-shrink: 0;
}

.jpar-profile-readonly__row dd {
    margin: 0;
    color: var(--jpar-navy);
}

/* ── Notes card ── */

.jpar-notes-card {
    margin-top: var(--jpar-gap);
}

.jpar-notes-card__title {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.jpar-notes-flag-badge {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jpar-white);
    background: var(--jpar-danger);
    padding: 0.2rem 0.6rem;
}

.jpar-notes-alert {
    background: #fef2f2;
    border-left: 4px solid var(--jpar-danger);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.jpar-notes-alert p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--jpar-danger);
}

.jpar-notes-cleared-by {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--jpar-text-muted);
    margin: 0 0 0.75rem;
}

/* ── Notes thread ──
   The thread renders in reverse-chronological order (newest on top,
   matching how email/Slack threads are read in 2026) and visually
   differentiates director vs. mentor authorship via left-border accent
   colour — .jpar-note--director gets navy, .jpar-note--mentor gets blue.
   The .jpar-note--unread state is painted with a pale-red background to
   pull the office reader's eye to the next un-acknowledged item. */

.jpar-notes-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.jpar-note {
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--jpar-gray);
    background: #f8f9fb;
}

.jpar-note--director {
    border-left-color: var(--jpar-blue);
    background: #f0f6ff;
}

.jpar-note--unread {
    border-left-color: var(--jpar-danger);
    background: #fef8f8;
}

.jpar-note__header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.jpar-note__author {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--jpar-navy);
}

.jpar-note__time {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 0.75rem;
    color: var(--jpar-text-muted);
}

.jpar-note__body {
    font-family: 'Lora', Georgia, serif;
    font-size: 0.9rem;
    color: var(--jpar-text);
    line-height: 1.6;
    white-space: pre-wrap;
}

.jpar-note__footer {
    margin-top: 0.5rem;
}

.jpar-note__read-form {
    display: inline;
}

.jpar-note__read-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--jpar-text-muted);
    cursor: pointer;
}

.jpar-note__read-label:hover {
    color: var(--jpar-blue);
}

/* Submit-button variant replaces the old checkbox + onchange auto-submit
   pattern. Works without JS, a real focus target for keyboard users, and
   screen readers announce the aria-label so it's clear what tapping does.
   Styled flat + chromeless to match the old checkbox affordance — this
   is still a small secondary interaction, not a primary CTA. */
.jpar-note__read-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--jpar-text-muted);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.jpar-note__read-button:hover,
.jpar-note__read-button:focus {
    color: var(--jpar-blue);
    outline: none;
}

.jpar-note__read-receipt {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 0.72rem;
    color: var(--jpar-success);
}

.jpar-note__unread-indicator {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--jpar-text-muted);
}

.jpar-notes-add {
    border-top: 2px solid var(--jpar-light-blue);
    padding-top: 1.25rem;
    margin-top: 0.25rem;
}

.jpar-notes-add__heading {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--jpar-text-muted);
    margin: 0 0 0.75rem;
}

/* ── Two-box note acknowledgments ──
   Each note footer shows TWO receipt boxes — one for office, one for
   mentor — because the business rule is "both sides must acknowledge a
   mentor-authored note." Rendering them side-by-side in a flex row lets
   the viewer see at a glance which side (if any) is still pending. */

.jpar-note__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.jpar-note__receipt-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
}

.jpar-note__receipt-label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: var(--jpar-text-muted);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
}

/* ── Next action status in agent-detail ── */

.jpar-next-action-status {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.8rem;
}

.jpar-task-done {
    color: var(--jpar-success);
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
}

.jpar-task-pending {
    color: var(--jpar-text-muted);
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
}

/* Helper hint below the "Mark as complete" checkbox explaining what
   ticking it will actually do (close + auto-advance). Kept small and
   italic so it reads as guidance, not a primary instruction. */
.jpar-next-action-status__hint {
    display: block;
    margin-top: 0.3rem;
    color: var(--jpar-text-muted);
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 0.75rem;
    line-height: 1.4;
}

/* ── Status badge lateness variants ──
   Colour encoding for the task-lateness state machine:
     active         → default blue (still within deadline)
     active--done   → green (mentee marked complete)
     active--late   → amber (1–5 days past due)
     active--overdue→ red (6+ days past due, escalation-worthy)
   The thresholds are defined in compute_task_lateness() on the PHP side. */

.jpar-badge--active--done {
    background: var(--jpar-success);
    color: var(--jpar-white);
}

.jpar-badge--active--late {
    background: #f59e0b;   /* amber — up to 5 days late */
    color: #1a1a1a;
}

.jpar-badge--active--overdue {
    background: var(--jpar-danger);
    color: var(--jpar-white);
}

/* ── Orientation card (mentee dashboard) ──
   Shown only when the director has set an orientation date. Three
   variants driven by the --<state> modifier class:
     --orientation-upcoming → default blue top border (inherits .jpar-card)
     --orientation-today    → light-blue fill, highest-visibility state
     --orientation-attended → muted green, past-tense content
   The big date line is the primary content; the status under it
   (countdown / "today" / "attended") provides the emotional beat.  */

.jpar-card--orientation {
    text-align: center;
}

.jpar-orientation__date {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--jpar-navy);
    margin: 0 0 0.3rem;
}

.jpar-orientation__status {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--jpar-blue);
    margin: 0;
}

/* Attended state — muted green, no count-down meaning. */
.jpar-card--orientation-attended .jpar-orientation__date { color: var(--jpar-text-muted); }
.jpar-card--orientation-attended .jpar-orientation__status { color: var(--jpar-success); }

/* Today state — pull the eye. Overrides the white card background with
   the brand light-blue so the mentee can't miss it on the day of. */
.jpar-card--orientation-today {
    background: var(--jpar-light-blue);
    border-top-color: var(--jpar-navy);
}
.jpar-card--orientation-today .jpar-card__title,
.jpar-card--orientation-today .jpar-orientation__date,
.jpar-card--orientation-today .jpar-orientation__status {
    color: var(--jpar-navy);
}

/* ── Dashboard Next Task card ──
   Rendered only when the director has assigned a next_action. The card
   has three visual states:
     default      → blue top border, single checkbox to mark complete
     --task-done  → green accent, no checkbox, completion timestamp
     --late       → red highlight on the due-date line when overdue
   Check the JS-less UX: the checkbox auto-submits its parent form on
   change, so the mentee never has to hunt for a submit button. */

.jpar-card--next-task {
    border-top-color: var(--jpar-navy);
    margin-bottom: var(--jpar-gap);
}

.jpar-card--task-done {
    border-top-color: var(--jpar-success);
}

.jpar-next-task__name {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--jpar-navy);
    margin: 0 0 0.5rem;
}

.jpar-next-task__due {
    font-family: 'Lora', Georgia, serif;
    font-size: 0.875rem;
    color: var(--jpar-text-muted);
    margin: 0 0 0.75rem;
}

.jpar-next-task__due--late {
    color: var(--jpar-danger);
    font-weight: bold;
}

.jpar-next-task__late-flag {
    font-style: italic;
}

.jpar-next-task__complete-msg {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    color: var(--jpar-success);
    font-size: 0.9rem;
    margin: 0;
}

.jpar-next-task__check-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--jpar-navy);
    cursor: pointer;
}

.jpar-next-task__check-label:hover {
    color: var(--jpar-blue);
}

/* ── Systems training card (dashboard) ──
   Visual language mirrors the Notes thread: each system row has an icon
   column (✓ for proficient, ○ for pending), a body column with the
   system name + description, and a status pill on the right. The ✓/○
   choice is deliberately text-based (not an SVG) so it renders correctly
   in print exports the director sometimes takes for onboarding meetings. */

.jpar-card--systems {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.jpar-systems-progress-label {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--jpar-text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.6rem;
}

.jpar-systems-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.jpar-system {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--jpar-gray);
}

.jpar-system--done {
    border-left-color: var(--jpar-success);
    background: #f4fbf4;
}

.jpar-system__icon {
    font-size: 1.1rem;
    font-weight: 700;
    width: 1.4rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--jpar-gray);
}

.jpar-system--done .jpar-system__icon { color: var(--jpar-success); }

.jpar-system__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.jpar-system__name {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--jpar-navy);
}

.jpar-system__name a {
    color: var(--jpar-blue);
    text-decoration: none;
}

.jpar-system__name a:hover { text-decoration: underline; }

.jpar-system__no-url {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--jpar-text-muted);
}

.jpar-system__desc {
    font-family: 'Lora', Georgia, serif;
    font-size: 0.8rem;
    color: var(--jpar-text-muted);
}

.jpar-system__badge {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    background: var(--jpar-gray);
    color: #fff;
    flex-shrink: 0;
}

.jpar-system__badge--done { background: var(--jpar-success); }

/* ── Gate message ──
   Two variants: --locked (agent has work remaining) and --open (all
   systems complete, ready for mentor selection). Gate text is the
   single source of the "you cannot choose a mentor until…" rule the
   business enforces; keep the message copy in sync with the mentee
   coaching script. */

.jpar-systems-gate {
    padding: 0.75rem 1rem;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.875rem;
    margin: 0;
}

.jpar-systems-gate--open {
    background: #edf7ed;
    border-left: 4px solid var(--jpar-success);
    color: var(--jpar-success);
}

.jpar-systems-gate--locked {
    background: var(--jpar-light-blue);
    border-left: 4px solid var(--jpar-blue);
    color: var(--jpar-navy);
}

/* ── Systems proficiency table (agent detail) ── */

.jpar-systems-admin-card {
    margin-top: var(--jpar-gap);
}

.jpar-systems-table td,
.jpar-systems-table th {
    vertical-align: middle;
}

/* Column widths were previously inline <th style="width:X%">; moved here
   to keep styling in one place and make future width tweaks a single-
   file edit. Keep these in sync with the <th> class list in the template. */
.jpar-systems-table__col-system { width: 25%; }
.jpar-systems-table__col-desc   { width: 40%; }
.jpar-systems-table__col-link   { width: 20%; }
.jpar-systems-table__col-check  { width: 15%; text-align: center; }

.jpar-systems-table__desc-cell { color: var(--jpar-text-muted); }

.jpar-systems-table__no-url {
    color: var(--jpar-text-muted);
    font-size: 0.8rem;
}

/* Centering the proficient checkbox inside its table cell. The base
   .jpar-check-label uses flex; this modifier just nudges justify-content
   to center instead of its default (flex-start). */
.jpar-check-label--centered { justify-content: center; }

/* "All systems complete" checkmark next to the count pill. */
.jpar-systems-all-done { color: var(--jpar-success); }

/* Action row below the proficiency table — Save button + sync hint. */
.jpar-systems-admin-actions { margin-top: 1rem; }

.jpar-systems-sync-hint {
    margin-left: 1rem;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.8rem;
    color: var(--jpar-text-muted);
    font-style: italic;
}

/* ── Notes: add-note form above thread ── */

.jpar-notes-add {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--jpar-gray);
}

/* ── Pre-license admin roster badges ──
   Badge colours for the Pre-License screen (JPAR_Admin_Prospects). Note
   that --late here reuses the lateness red from the task-lateness palette
   — a prospect whose expected license date has passed gets the same
   visual weight as an overdue task. */

.jpar-badge--studying {
    background: var(--jpar-light-blue);
    color: var(--jpar-navy);
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.jpar-badge--licensed {
    background: #d4edda;
    color: #155724;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.jpar-badge--dropped {
    background: #f8d7da;
    color: #721c24;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.jpar-badge--late {
    background: #fff3cd;
    color: #856404;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.jpar-prospect-row--overdue td {
    background-color: #fff8e1 !important;
}

/* WP admin two-column layout for prospects page */

.jpar-admin-two-col {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-top: 1rem;
}

.jpar-admin-sidebar {
    flex: 0 0 320px;
    min-width: 0;
}

.jpar-admin-main {
    flex: 1;
    min-width: 0;
}

@media ( max-width: 900px ) {
    .jpar-admin-two-col {
        flex-direction: column;
    }
    .jpar-admin-sidebar {
        flex: none;
        width: 100%;
    }
}

/* ── Responsive ──
   Two breakpoints: ~900px collapses the roster-table columns that the
   director can live without (secondary status cells); ~700px collapses
   the dashboard-grid and hides non-essential chrome. Agent-detail views
   degrade more aggressively because the form is the priority on mobile. */

@media ( max-width: 600px ) {
    .jpar-hero {
        padding: 1.75rem;
    }

    .jpar-hero__greeting {
        font-size: 1.4rem;
    }

    .jpar-deals__counter {
        font-size: 2.25rem;
    }
}

/* ── Vendor admin portal ──
   Front-end CRUD for office staff. Reuses .jpar-hero / .jpar-card /
   .jpar-roster-table so most styling is inherited. The bits below cover:
   form field grid, category checkbox cluster, logo preview pane, and
   the "just-saved" row flash. */

.jpar-vendor-admin__table td { vertical-align: middle; }

.jpar-vendor-admin__row--just-saved {
    background: #fff8e1;
    animation: jpar-vendor-flash 1.6s ease-out 1;
}
@keyframes jpar-vendor-flash {
    0%   { background: #ffeaa3; }
    100% { background: #fff8e1; }
}

.jpar-vendor-admin__form { margin-top: var(--jpar-gap); }
.jpar-vendor-admin__card { padding: 1.5rem; margin-bottom: 1.25rem; }
.jpar-vendor-admin__card .jpar-card__title { margin: 0 0 1rem; }

.jpar-vendor-admin__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
}
.jpar-vendor-admin__grid > div { display: flex; flex-direction: column; }
.jpar-vendor-admin__grid label {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    color: var(--jpar-text, #1d1d1d);
}
.jpar-vendor-admin__grid input[type="text"],
.jpar-vendor-admin__grid input[type="email"],
.jpar-vendor-admin__grid input[type="url"] {
    padding: 0.55rem 0.7rem;
    border: 1px solid #cfd4dc;
    border-radius: 4px;
    font: inherit;
    background: #fff;
}
.jpar-vendor-admin__grid input:focus {
    outline: 2px solid var(--jpar-blue, #003c71);
    outline-offset: 1px;
}
.jpar-vendor-admin__grid--full { grid-column: 1 / -1; }

.jpar-required { color: var(--jpar-danger, #b32d2e); }

.jpar-vendor-admin__cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.4rem 1rem;
    margin-bottom: 1rem;
}
.jpar-vendor-admin__cat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    cursor: pointer;
    font-size: 0.9rem;
}
.jpar-vendor-admin__cat input { margin: 0; }

.jpar-vendor-admin__new-cat label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}
.jpar-vendor-admin__new-cat input[type="text"] {
    width: 100%;
    max-width: 320px;
    padding: 0.55rem 0.7rem;
    border: 1px solid #cfd4dc;
    border-radius: 4px;
    font: inherit;
}

.jpar-vendor-admin__logo {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.25rem;
    align-items: center;
}
.jpar-vendor-admin__logo-preview {
    width: 120px;
    height: 120px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #f6f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    text-align: center;
}
.jpar-vendor-admin__logo-preview img { max-width: 100%; max-height: 100%; }
.jpar-vendor-admin__logo-controls label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.jpar-vendor-admin__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.jpar-section-heading__count {
    font-weight: 400;
    color: #5d6470;
    font-size: 0.85em;
}

@media ( max-width: 700px ) {
    .jpar-vendor-admin__grid { grid-template-columns: 1fr; }
    .jpar-vendor-admin__logo { grid-template-columns: 1fr; text-align: left; }
    .jpar-vendor-admin__logo-preview { width: 96px; height: 96px; }
}


/* ===== Mentor selection board — [jpar_mentor_board] ("Meet Our Mentor Team") ===== */
.jpar-board{max-width:1080px;margin:0 auto;padding:8px 16px 48px}
.jpar-board__head{text-align:center;margin:8px 0 28px}
.jpar-board__title{font-family:Montserrat,sans-serif;color:#015297;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:2rem;margin:0 0 8px}
.jpar-board__sub{font-family:Lora,serif;color:#333;max-width:660px;margin:0 auto 12px;line-height:1.55}
.jpar-board__guide{font-family:Montserrat,sans-serif;color:#015297;font-weight:600;text-decoration:none}
.jpar-board__guide:hover{text-decoration:underline}
.jpar-board__paired{text-align:center;background:#eef4fb;border:1px solid #8FCBFE;border-radius:6px;padding:10px 14px;margin:0 auto 24px;max-width:560px;font-family:Montserrat,sans-serif;color:#051444}
.jpar-board__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 20px;margin:8px 0 28px}
@media(max-width:820px){.jpar-board__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.jpar-board__grid{grid-template-columns:1fr}}
.jpar-mentor-card{text-align:center}
.jpar-mentor-card__pick{display:block;cursor:pointer;margin:0}
.jpar-mentor-card__pick input{position:absolute;opacity:0;width:0;height:0}
.jpar-mentor-card__photo{position:relative;display:block;max-width:280px;margin:0 auto 14px}
.jpar-mentor-card__photo img{width:100%;height:auto;display:block}
.jpar-mentor-card__initials{display:flex;align-items:center;justify-content:center;width:100%;max-width:280px;aspect-ratio:3/4;margin:0 auto;font-family:Montserrat,sans-serif;font-weight:700;font-size:3rem;color:#015297;background:#eef1f5;border:3px solid #015297}
.jpar-mentor-card__check{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:#015297;color:#fff;display:none;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.3);z-index:2}
.jpar-mentor-card__pick input:checked + .jpar-mentor-card__photo{box-shadow:0 0 0 4px rgba(1,82,151,.4)}
.jpar-mentor-card__pick input:checked + .jpar-mentor-card__photo .jpar-mentor-card__check{display:flex}
.jpar-mentor-card__name{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#111;font-size:1.15rem;margin-top:4px}
.jpar-mentor-card__role{display:block;font-family:Montserrat,sans-serif;color:#015297;font-weight:600;font-size:.9rem;margin-top:2px}
.jpar-mentor-card__resume{display:inline-block;margin-top:8px;font-family:Montserrat,sans-serif;color:#015297;font-weight:600;font-size:.85rem;text-decoration:none}
.jpar-mentor-card__resume:hover{text-decoration:underline}
.jpar-board__actions{text-align:center;margin-top:16px}
.jpar-board__request{background:#015297;color:#fff;font-family:Montserrat,sans-serif;font-weight:700;font-size:1rem;border:none;border-radius:5px;padding:14px 28px;cursor:pointer}
.jpar-board__request:hover{background:#051444}
.jpar-board__hint{font-family:Lora,serif;color:#666;font-size:.9rem;margin-top:10px}
.jpar-board--gate{text-align:center;max-width:560px;margin:40px auto;font-family:Lora,serif}
.jpar-board--gate h2{font-family:Montserrat,sans-serif;color:#015297}
.jpar-board__link{color:#015297;font-weight:600}

/* ===== New Agent Orientation — [jpar_orientation] ===== */
.jpar-orientation{max-width:1000px;margin:0 auto;padding:8px 16px 40px}
.jpar-orientation__title{font-family:Montserrat,sans-serif;color:#015297;font-weight:800;text-align:center;margin:8px 0 4px}
.jpar-orientation__sub{font-family:Lora,serif;color:#333;text-align:center;margin:0 auto 20px;max-width:660px;line-height:1.5}
.jpar-orientation__frame{position:relative;width:100%;padding-top:56.25%;border:1px solid #C2C2C2;border-radius:6px;overflow:hidden;background:#000}
.jpar-orientation__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.jpar-orientation__links{text-align:center;margin-top:18px}
.jpar-orientation__btn{display:inline-block;background:#015297;color:#fff;font-family:Montserrat,sans-serif;font-weight:600;padding:11px 20px;border-radius:4px;text-decoration:none;margin:4px}
.jpar-orientation__btn:hover{background:#051444;color:#fff}
.jpar-orientation__btn--secondary{background:#fff;color:#015297;border:2px solid #015297}
.jpar-orientation--gate{text-align:center;max-width:520px;margin:40px auto;font-family:Lora,serif}
.jpar-board__notice{max-width:660px;margin:0 auto 20px;padding:12px 16px;border-radius:6px;background:#fff5e6;border:1px solid #f0c675;font-family:Montserrat,sans-serif;text-align:center;color:#664d00}
.jpar-board__notice--ok{background:#e8f6ec;border-color:#8fd3a3;color:#1c6b34}
.jpar-mentor-card__load{display:block;font-family:Lora,serif;color:#666;font-size:.85rem;margin-top:5px}
.jpar-mentor-card__choose{display:inline-block;margin-top:10px;background:#015297;color:#fff;font-family:Montserrat,sans-serif;font-weight:600;font-size:.85rem;padding:8px 18px;border-radius:4px;text-decoration:none}
.jpar-mentor-card__choose:hover{background:#051444;color:#fff}
.jpar-mentor-card__gatehint{display:inline-block;margin-top:10px;font-family:Lora,serif;color:#999;font-size:.8rem;font-style:italic}

/* ===== Mentor pending-choices panel — [jpar_mentor_pending] ===== */
.jpar-pending{max-width:820px;margin:0 auto 28px;background:#fff;border:1px solid #C2C2C2;border-radius:8px;padding:18px 20px}
.jpar-pending__title{font-family:Montserrat,sans-serif;color:#051444;font-weight:700;font-size:1.3rem;margin:0 0 4px}
.jpar-pending__sub{font-family:Lora,serif;color:#333;margin:0 0 14px}
.jpar-pending__row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff6d6;border:1px solid #f0c96b;border-left:5px solid #f0a400;border-radius:6px;padding:12px 16px;margin-bottom:10px}
.jpar-pending__who{display:flex;flex-direction:column;gap:2px}
.jpar-pending__name{font-family:Montserrat,sans-serif;font-weight:700;color:#111;font-size:1.05rem}
.jpar-pending__when{font-family:Lora,serif;color:#666;font-size:.85rem}
.jpar-pending__bio{font-family:Montserrat,sans-serif;color:#015297;font-weight:600;font-size:.82rem;text-decoration:none;margin-top:2px}
.jpar-pending__bio:hover{text-decoration:underline}
.jpar-pending__actions{display:flex;gap:8px;flex-shrink:0}
.jpar-pending__accept{background:#1c6b34;color:#fff;font-family:Montserrat,sans-serif;font-weight:700;font-size:.85rem;padding:9px 18px;border-radius:4px;text-decoration:none}
.jpar-pending__accept:hover{background:#124d24;color:#fff}
.jpar-pending__pass{background:#fff;color:#8a4a4a;border:1px solid #d8b4b4;font-family:Montserrat,sans-serif;font-weight:600;font-size:.85rem;padding:9px 16px;border-radius:4px;text-decoration:none}
.jpar-pending__pass:hover{background:#f7eaea;color:#8a4a4a}
.jpar-pending__notice{background:#e8f6ec;border:1px solid #8fd3a3;border-radius:6px;padding:10px 14px;margin-bottom:12px;font-family:Montserrat,sans-serif;color:#1c6b34;text-align:center}

/* ===== Office-staff agent directory — [jpar_agent_directory] ===== */
.jpar-directory{max-width:1080px;margin:0 auto;padding:8px 16px 40px}
.jpar-directory__title{font-family:Montserrat,sans-serif;color:#015297;font-weight:800;margin:8px 0 4px}
.jpar-directory__sub{font-family:Lora,serif;color:#333;margin:0 0 16px}
.jpar-directory__pills{display:flex;gap:8px;margin-bottom:14px}
.jpar-directory__pill{font-family:Montserrat,sans-serif;font-weight:600;font-size:.85rem;padding:7px 16px;border-radius:20px;text-decoration:none;color:#015297;border:1px solid #015297;background:#fff}
.jpar-directory__pill.is-on{background:#015297;color:#fff}
.jpar-directory__table{width:100%;border-collapse:collapse;font-family:Montserrat,sans-serif;font-size:.9rem}
.jpar-directory__table th{text-align:left;background:#051444;color:#fff;padding:8px 10px;font-weight:600}
.jpar-directory__table td{padding:7px 10px;border-bottom:1px solid #e5e8ee}
.jpar-directory__table tr:hover td{background:#f4f7fb}
.jpar-directory__row--inactive td{color:#999;background:#fafafa}
.jpar-directory__status{font-size:.78rem;padding:2px 8px;border-radius:10px;background:#eee;color:#666;white-space:nowrap}
/* Status column: wide enough for the "Not active in BoldTrail" label without wrapping. */
.jpar-directory__table th:nth-child(4),.jpar-directory__table td:nth-child(4){min-width:180px}
.jpar-directory__status.is-active{background:#e8f6ec;color:#1c6b34}
.jpar-directory__status.is-departed{background:#f3e8e8;color:#8a4b4b}
/* DORA license badge — green Active, red Inactive, amber needs-review. */
.jpar-directory__license{font-size:.78rem;padding:2px 8px;border-radius:10px;background:#eef1f4;color:#556;white-space:nowrap;font-family:Montserrat,sans-serif}
.jpar-directory__license.is-lic-active{background:#e8f6ec;color:#1c6b34}
.jpar-directory__license.is-lic-inactive{background:#fde8e8;color:#b3261e;font-weight:700}
.jpar-directory__license.is-lic-warn{background:#fdf0d9;color:#8a5a00;font-weight:700}
.jpar-directory__license.is-lic-unchecked{background:#eef1f4;color:#889}
.jpar-hero__license{margin:8px 0 0;font-family:Montserrat,sans-serif;font-size:.85rem;color:#fff}
.jpar-hero__license-meta{opacity:.85;font-size:.8rem;margin-left:6px}
.jpar-hero__license-dora{display:block;margin-top:4px;font-family:Montserrat,sans-serif;font-size:.8rem;color:#fff;opacity:.85}
.jpar-directory__foot{font-family:Lora,serif;color:#666;font-size:.85rem;margin-top:12px}
.jpar-directory--denied{max-width:520px;margin:40px auto;text-align:center;font-family:Lora,serif;color:#333;background:#fff5e6;border:1px solid #f0c675;border-radius:8px;padding:24px}
.jpar-directory__table th a{color:#fff;text-decoration:none;display:inline-block}
.jpar-directory__table th a:hover{text-decoration:underline}

/* ===== Agent directory — bulk note + per-agent notes ===== */
.jpar-directory__form{margin:0}
.jpar-directory__bulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#eef3f9;border:1px solid #cdd9e8;border-radius:6px;padding:10px 12px;margin-bottom:12px}
.jpar-directory__bulk strong{font-family:Montserrat,sans-serif;color:#051444}
.jpar-directory__bulkcat{width:140px;padding:6px 8px;border:1px solid #b9c4d4;border-radius:4px;font-family:Montserrat,sans-serif;font-size:.85rem}
.jpar-directory__bulknote{flex:1;min-width:220px;padding:6px 8px;border:1px solid #b9c4d4;border-radius:4px;font-family:Montserrat,sans-serif;font-size:.85rem}
.jpar-directory__bulkbtn{background:#015297;color:#fff;border:0;font-family:Montserrat,sans-serif;font-weight:700;font-size:.85rem;padding:8px 16px;border-radius:4px;cursor:pointer}
.jpar-directory__bulkbtn:hover{background:#051444}
.jpar-directory__ck{width:34px;text-align:center}
.jpar-directory__notes summary{cursor:pointer;font-weight:700;color:#015297;text-align:center}
.jpar-directory__notes ul{list-style:none;margin:6px 0 0;padding:8px 10px;background:#fafbfd;border:1px solid #e0e6ef;border-radius:6px;font-size:.82rem;line-height:1.35;min-width:240px}
.jpar-directory__notes li{padding:6px 0;border-bottom:1px solid #eee}
.jpar-directory__notes li:last-child{border-bottom:0}
.jpar-directory__notemeta{color:#888;font-size:.72rem}
.jpar-directory__notice{background:#e8f6ec;border:1px solid #8fd3a3;border-radius:6px;padding:9px 14px;margin-bottom:12px;font-family:Montserrat,sans-serif;color:#1c6b34}
.jpar-directory__notice--warn{background:#fdf0d9;border-color:#f0c675;color:#8a5a00}
.jpar-directory__search{margin-left:auto;padding:7px 12px;border:1px solid #b9c4d4;border-radius:20px;font-family:Montserrat,sans-serif;font-size:.85rem;min-width:220px}
.jpar-directory__pills{align-items:center}
.jpar-directory__pill{cursor:pointer;font-family:Montserrat,sans-serif;font-size:.85rem;font-weight:600;line-height:1}
.jpar-directory__refresh{display:inline-block;margin-left:6px;background:#015297;color:#fff;font-family:Montserrat,sans-serif;font-weight:600;font-size:.78rem;padding:4px 12px;border-radius:20px;text-decoration:none}
.jpar-directory__refresh:hover{background:#051444;color:#fff}

/* ===== Mentor dashboard — [jpar_mentor_dashboard] ===== */
.jpar-mdash{max-width:900px;margin:0 auto 28px;padding:0 16px}
.jpar-mdash__title{font-family:Montserrat,sans-serif;color:#015297;font-weight:800;margin:8px 0 4px}
.jpar-mdash__hello{font-family:Lora,serif;color:#333;margin:0 0 18px}
.jpar-mdash__section{margin-bottom:26px}
.jpar-mdash__h2{font-family:Montserrat,sans-serif;color:#051444;font-weight:700;font-size:1.2rem;border-bottom:2px solid #015297;padding-bottom:6px;margin:0 0 12px}
.jpar-mdash__notes{list-style:none;margin:0;padding:0}
.jpar-mdash__notes li{background:#fafbfd;border:1px solid #e0e6ef;border-left:4px solid #015297;border-radius:6px;padding:10px 14px;margin-bottom:8px;font-family:Lora,serif;font-size:.92rem;line-height:1.4}
.jpar-mdash__notemeta{color:#888;font-size:.75rem;font-family:Montserrat,sans-serif}
.jpar-mdash__bulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#eef3f9;border:1px solid #cdd9e8;border-radius:6px;padding:10px 12px;margin-bottom:12px}
.jpar-mdash__bulk strong{font-family:Montserrat,sans-serif;color:#051444}
.jpar-mdash__note{flex:1;min-width:240px;padding:6px 8px;border:1px solid #b9c4d4;border-radius:4px;font-family:Montserrat,sans-serif;font-size:.85rem}
.jpar-mdash__btn{background:#015297;color:#fff;border:0;font-family:Montserrat,sans-serif;font-weight:700;font-size:.85rem;padding:8px 16px;border-radius:4px;cursor:pointer}
.jpar-mdash__btn:hover{background:#051444}
.jpar-mdash__table{width:100%;border-collapse:collapse;font-family:Montserrat,sans-serif;font-size:.9rem}
.jpar-mdash__table th{text-align:left;background:#051444;color:#fff;padding:8px 10px;font-weight:600}
.jpar-mdash__table td{padding:7px 10px;border-bottom:1px solid #e5e8ee}
.jpar-mdash__ck{width:34px;text-align:center}
.jpar-mdash__notice{background:#e8f6ec;border:1px solid #8fd3a3;border-radius:6px;padding:9px 14px;margin-bottom:12px;font-family:Montserrat,sans-serif;color:#1c6b34}

/* ── Continuing Education (CE) certificate vault ───────────────────────────
   Lives on the all-agent record page, styled to match the Notes/Deals cards.
   Reuses .jpar-card, .jpar-field(-row), .jpar-btn, .jpar-roster-table. */
.jpar-ce-card__title { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.jpar-ce-badge { background: #051444; color: #fff; font-size: 0.75rem; }
.jpar-ce-upload { margin-bottom: 1.25rem; }
.jpar-ce-upload__heading { font-family: Montserrat, sans-serif; font-size: 0.95rem; margin: 0 0 0.6rem; color: #051444; }
.jpar-ce-table { margin-top: 0.5rem; }
.jpar-ce-table td { vertical-align: top; }
.jpar-ce-status--pending { background: #f0ad4e; color: #4a3200; }
.jpar-ce-status--processed { background: #8fd3a3; color: #1c6b34; }

/* Deals section: let it use the full page width (it otherwise sits in the
   340px column of .jpar-detail-grid) — matches the full-width CE card above. */
.jpar-detail-deals { grid-column: 1 / -1; }
/* BoldTrail deal-status badges — mirror the CE "Processed" look. */
.jpar-deal-status--closed   { background: #8fd3a3; color: #1c6b34; }
.jpar-deal-status--active   { background: #cfe3fb; color: #1b4a7a; }
.jpar-deal-status--inactive { background: #e6e6e6; color: #555; }

/* Sortable table headers (Dotloop Deal History). */
th.jpar-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.jpar-sort .jpar-sort__caret::after { content: "⇅"; opacity: .35; margin-left: .35em; font-size: .8em; }
th.jpar-sort.is-sorted-asc  .jpar-sort__caret::after { content: "▲"; opacity: 1; }
th.jpar-sort.is-sorted-desc .jpar-sort__caret::after { content: "▼"; opacity: 1; }
.jpar-ce-actions summary { display: inline-block; list-style: none; cursor: pointer; }
.jpar-ce-actions summary::-webkit-details-marker { display: none; }
.jpar-ce-actions[open] summary { margin-bottom: 0.5rem; }
.jpar-ce-edit-form { display: flex; flex-direction: column; gap: 0.4rem; background: #f6f8fb; border: 1px solid #e0e6ef; border-radius: 6px; padding: 0.6rem 0.7rem; margin-bottom: 0.5rem; min-width: 200px; }
.jpar-ce-delete-form { margin: 0; }
.jpar-ce-export { margin-top: 0.75rem; }

/* ── Upcoming classes in the office (OneStop Hub calendar) ── */
.jpar-upcoming { margin: 0 0 1.5rem; padding: 0 0 1.25rem; border-bottom: 1px solid #e0e6ef; }
.jpar-upcoming__heading { font-family: Montserrat, sans-serif; font-size: 0.95rem; margin: 0 0 0.6rem; color: #051444; }
.jpar-upcoming__list { list-style: none; margin: 0; padding: 0; }
.jpar-upcoming__item { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.6rem; padding: 0.5rem 0; border-top: 1px solid #eef1f6; }
.jpar-upcoming__item:first-child { border-top: 0; }
.jpar-upcoming__date { font-weight: 700; color: #051444; white-space: nowrap; min-width: 9.5rem; }
.jpar-upcoming__badge { background: #e6ebf5; color: #051444; font-size: 0.65rem; }
.jpar-upcoming__badge--acu { background: #051444; color: #fff; }
.jpar-upcoming__badge--ce { background: #8fd3a3; color: #1c6b34; }
.jpar-upcoming__badge--orientation { background: #f0ad4e; color: #4a3200; }
.jpar-upcoming__title { flex: 1 1 auto; min-width: 12rem; }
.jpar-upcoming__hours { color: #1c6b34; font-weight: 600; white-space: nowrap; }
.jpar-upcoming__loc { color: #6b7280; font-size: 0.85rem; }
.jpar-upcoming__foot { margin: 0.75rem 0 0; font-size: 0.85rem; color: #6b7280; }

/* CE duplicate rows: dimmed, with a red "not counted" badge. */
.jpar-ce-row--dup td{opacity:.5}
.jpar-ce-dup{background:#fdecea;color:#b71c1c;margin-left:6px;font-size:.72rem}

/* ── CE standing breakdown (agent record) + status pills (record + report) ── */
/* Status pills — one vocabulary shared by the record card and the CE report. */
.jpar-ce-pill { font-size: 0.7rem; letter-spacing: 0.02em; }
.jpar-ce-pill--ok    { background: #8fd3a3; color: #1c6b34; }
.jpar-ce-pill--warn  { background: #f0ad4e; color: #4a3200; }
.jpar-ce-pill--crit  { background: #f3b7b1; color: #8a1c12; }
.jpar-ce-pill--muted { background: #e3e6ea; color: #5f6772; }

.jpar-ce-standing { margin: 0 0 1.5rem; padding: 0 0 1.25rem; border-bottom: 1px solid #e0e6ef; }
.jpar-ce-standing__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-bottom: 0.9rem; }
.jpar-ce-standing__headline { color: #384150; font-size: 0.92rem; line-height: 1.4; flex: 1 1 16rem; }
.jpar-ce-standing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 1.5rem; }
.jpar-ce-standing__flag { margin: 0.9rem 0 0; padding: 0.55rem 0.7rem; background: #fff7e6; border: 1px solid #f4cf8e; border-radius: 6px; color: #7a4f12; font-size: 0.85rem; }

.jpar-ce-metric__label { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; color: #5f6772; margin-bottom: 0.4rem; }
.jpar-ce-metric__label strong { color: #051444; font-size: 0.95rem; white-space: nowrap; }
.jpar-ce-metric__note { margin: 0.4rem 0 0; font-size: 0.78rem; color: #7a4f12; }

/* ACU-by-year chips: done (green ✓), missed (red ✕), due (amber, current year), pending (grey). */
.jpar-ce-acu-years { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.jpar-ce-acu-year { font-family: Montserrat, sans-serif; font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.jpar-ce-acu-year--done    { background: #8fd3a3; color: #1c6b34; }
.jpar-ce-acu-year--missed  { background: #f3b7b1; color: #8a1c12; }
.jpar-ce-acu-year--due     { background: #fbe3b3; color: #7a4f12; border-color: #f0ad4e; }
.jpar-ce-acu-year--pending { background: #eef1f6; color: #6b7280; }

/* REALTOR® (NAR) obligations block — separate dimension, sits under CE standing. */
.jpar-ce-standing--realtor { border-bottom: none; margin-bottom: 0; padding-bottom: 0.25rem; }
.jpar-ce-standing__title { font-family: Montserrat, sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; color: #2b3648; text-transform: uppercase; }
.jpar-ce-metric__note--ok { color: #5f6772; }
.jpar-nrds { margin-top: 0.85rem; }
.jpar-nrds__form { max-width: 22rem; }

/* Mentorship summary card on the unified record (mentees only). */
.jpar-mentorship__task { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem; margin: 0 0 1rem; }
.jpar-mentorship__step { font-family: Montserrat, sans-serif; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; background: #eef1f6; padding: 0.2rem 0.5rem; border-radius: 999px; }
.jpar-mentorship__task-name { font-size: 0.95rem; color: #051444; font-weight: 600; }
.jpar-mentorship__due { font-size: 0.82rem; color: #7a4f12; }
.jpar-mentorship__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem 1.5rem; }
.jpar-mentorship__mentor { margin: 1rem 0 0; font-size: 0.9rem; color: #384150; }
.jpar-mentorship__mentor a { margin-left: 0.35rem; }
.jpar-mentorship__cta { margin: 1rem 0 0; }
.jpar-muted { color: #8a94a3; }

/* Onboarding program embedded inside the unified record (mentees). The
   agent-detail template renders in $embed mode — its identity hero, notes and
   deals are skipped (the record renders those); the Next Action banner + the
   Profile/Systems/Modules cards remain. Just add breathing room from the CE/
   notice block above; the section keeps the agent-detail styling otherwise. */
.jpar-hero--embed { margin-top: 1.25rem; }

/* ── Native Training area ([jpar_training]) — the in-portal Foundations Room. */
.jpar-training__module { margin: 0 0 2rem; }
.jpar-training__module-title { font-family: Montserrat, sans-serif; font-size: 1.25rem; font-weight: 700; color: #051444; border-bottom: 2px solid #e0e6ef; padding-bottom: 0.5rem; margin: 1.75rem 0 1rem; display: flex; align-items: center; gap: 0.6rem; }
.jpar-training__section { margin: 0 0 1.25rem; }
.jpar-training__section-title { font-family: Montserrat, sans-serif; font-size: 0.95rem; font-weight: 600; color: #384150; margin: 0 0 0.6rem; }
.jpar-training__item { background: #fff; border: 1px solid #e0e6ef; border-radius: 8px; padding: 0.85rem 1rem; margin: 0 0 0.6rem; }
.jpar-training__item.is-complete { border-color: #8fd3a3; }
.jpar-training__item-head { display: flex; align-items: center; gap: 0.65rem; }
.jpar-training__item-type { font-family: Montserrat, sans-serif; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #5f6772; background: #eef1f6; padding: 0.2rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.jpar-training__item-title { font-weight: 600; color: #051444; flex: 1 1 auto; }
.jpar-training__item-done { color: #1c6b34; font-weight: 700; }
.jpar-training__item-body { margin-top: 0.6rem; color: #384150; font-size: 0.92rem; line-height: 1.5; }
.jpar-training__item-body p { margin: 0 0 0.6rem; }
.jpar-training__item-body p:last-child { margin-bottom: 0; }
.jpar-training__soon { font-style: italic; margin: 0; }
.jpar-training__video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.jpar-training__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.jpar-training__objection { border: 1px solid #e0e6ef; border-radius: 6px; margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; }
.jpar-training__objection summary { font-weight: 600; color: #051444; cursor: pointer; }
.jpar-training__objection-body { margin-top: 0.5rem; }

/* Thin progress meter for elective + total hours. */
.jpar-ce-meter { height: 7px; background: #eef1f6; border-radius: 999px; overflow: hidden; }
.jpar-ce-meter span { display: block; height: 100%; background: var(--jpar-blue, #015297); border-radius: 999px; }

/* CE "who needs help" report. */
.jpar-ce-report__table td { vertical-align: top; }
.jpar-ce-report__need { color: #384150; font-size: 0.86rem; line-height: 1.4; }

/* ── BoldTrail track ───────────────────────────────────────────────────────
   The BoldTrail ladder on the agent record. It reuses the systems-card shell
   (.jpar-systems-admin-card / .jpar-systems-table) and adds only what the
   ladder needs: its own column widths, and the three gate states. Widths live
   here rather than inline on the <th>, matching the systems table above. */
.jpar-bt-track__intro {
    margin: -0.25rem 0 1rem;
}

.jpar-bt-track-table__col-num    { width: 4%;  }
.jpar-bt-track-table__col-gate   { width: 34%; }
.jpar-bt-track-table__col-status { width: 32%; }
.jpar-bt-track-table__col-learn  { width: 15%; text-align: center; }
.jpar-bt-track-table__col-do     { width: 15%; text-align: center; }

/* Gate states. A locked row is dimmed rather than hidden so the agent and
   the director can both see what's still ahead of them. */
.jpar-bt-gate--locked   { opacity: 0.45; }
.jpar-bt-gate__complete { color: var(--jpar-success); }
.jpar-bt-gate__current  { color: var(--jpar-blue); }
.jpar-bt-gate__nudges   { color: var(--jpar-danger); }
.jpar-bt-gate__action   { display: block; margin-top: 0.15rem; }


/* ── Off-boarding runbook ──────────────────────────────────────────────────
   The departed-agent teardown lifted out of Monday. Same card/table shell as
   the systems checklist; the only additions are the navy header rule (the
   brand's secondary) and a done-state that reuses --jpar-success, so no new
   colours enter the palette. */
.jpar-offboard-card {
    margin-top: var(--jpar-gap);
    border-top: 3px solid var(--jpar-navy);
}

.jpar-offboard__intro { margin: -0.25rem 0 1rem; }

.jpar-offboard-table__col-num   { width: 5%;  }
.jpar-offboard-table__col-step  { width: 45%; }
.jpar-offboard-table__col-guide { width: 22%; }
.jpar-offboard-table__col-when  { width: 18%; }
.jpar-offboard-table__col-check { width: 10%; text-align: center; }

.jpar-offboard__done  { color: var(--jpar-success); }
.jpar-offboard__tagswap {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--jpar-light-blue);
    color: var(--jpar-navy);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: .68rem;
    font-weight: 600;
}


/* ── Joining admin runbook ─────────────────────────────────────────────────
   Same card shell as the off-boarding runbook. Rows are grouped by the role
   that owns them; back-office steps carry a badge so it is obvious at a glance
   which are finance procedures. Brand tokens only. */
.jpar-runbook-card { margin-top: var(--jpar-gap); border-top: 3px solid var(--jpar-blue); }

.jpar-runbook__intro { margin: -0.25rem 0 1rem; }

.jpar-runbook-table__col-step  { width: 46%; }
.jpar-runbook-table__col-owner { width: 16%; }
.jpar-runbook-table__col-guide { width: 12%; }
.jpar-runbook-table__col-when  { width: 16%; }
.jpar-runbook-table__col-check { width: 10%; text-align: center; }

/* Role group header inside the table. */
.jpar-runbook__grouprow td {
    background: var(--jpar-navy);
    color: var(--jpar-white);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.jpar-runbook__backoffice {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--jpar-gray);
    color: var(--jpar-navy);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: .68rem;
    font-weight: 600;
}


/* ── Portal Admin group in the site menu ───────────────────────────────────
   Injected by JPAR_Nav for staff only. Deliberately narrow selectors: these
   items live in the THEME's menu, outside .jpar-dashboard, so anything looser
   would leak into the rest of the site. Brand tokens only. */
.menu-item.jpar-nav-admin > a {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
}

/* NO colour override here, deliberately. The dropdown panel is already JPAR
   blue, so setting the link colour to --jpar-blue rendered the group header
   invisible (blue on blue). The theme owns menu colours; we only add weight
   and a small marker that inherits currentColor, so it stays legible whatever
   background the theme puts behind it. */
.menu-item.jpar-nav-admin.menu-item-has-children > a::before {
    content: "";
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-right: .45rem;
    border-radius: 2px;
    background: currentColor;
    opacity: .65;
    vertical-align: baseline;
}


/* ── Imported training content ─────────────────────────────────────────────
   Item bodies come from third-party editors and carry their own images at
   whatever size the original author used. Constrain them to the column so a
   wide asset can't stretch the layout, and keep long URLs from doing the same. */
.jpar-training__item-body img {
    max-width: 100%;
    height: auto;
}

.jpar-training__item-body {
    overflow-wrap: break-word;
}

/* Wide tables scroll inside the item rather than stretching the column. */
.jpar-training__item-body table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
}

/* Imported markup occasionally carries its own fixed widths. */
.jpar-training__item-body [style*="width"] {
    max-width: 100%;
}


/* ── Locked training modules ───────────────────────────────────────────────
   A locked module keeps its heading so the shape of the programme stays
   visible; only the content is withheld. Muted rather than hidden. */
.jpar-training__module.is-locked { opacity: .72; }

.jpar-training__locked-pill {
    background: var(--jpar-gray);
    color: var(--jpar-navy);
    margin-left: .5rem;
}

.jpar-training__locked-note {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border-left: 3px solid var(--jpar-light-blue);
    background: rgba(143, 203, 254, .16);   /* --jpar-light-blue at low alpha */
    color: var(--jpar-navy);
    font-family: 'Lora', Georgia, serif;
    font-size: .92rem;
}


/* ── Portal Admin (front-end staff tools) ──────────────────────────────────
   The wp-admin screens rebuilt inside the portal so staff never leave the
   branded site to change something. Brand tokens only. */
.jpar-portal-admin__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 var(--jpar-gap);
    border-bottom: 2px solid var(--jpar-gray);
}

.jpar-portal-admin__tab {
    padding: .6rem 1.1rem;
    border-radius: 6px 6px 0 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: .86rem;
    font-weight: 600;
    color: var(--jpar-navy);
    text-decoration: none;
    background: transparent;
}

.jpar-portal-admin__tab:hover { background: rgba(143, 203, 254, .22); }

.jpar-portal-admin__tab.is-active {
    background: var(--jpar-blue);
    color: var(--jpar-white);
}

/* wp-admin is still the right home for the raw importers — mark the one link
   that leaves the portal so it isn't a surprise. */
.jpar-portal-admin__tab--external { margin-left: auto; opacity: .75; }

.jpar-portal-admin__rowactions {
    display: flex;
    gap: .35rem;
    align-items: center;
}

.jpar-portal-admin__rowactions form { display: inline; margin: 0; }

.jpar-row--inactive { opacity: .55; }

.jpar-portal-admin .jpar-add-form__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .9rem;
    margin-bottom: 1rem;
}

.jpar-portal-admin .jpar-add-form__fields label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: .8rem;
    font-weight: 600;
    color: var(--jpar-navy);
}

.jpar-portal-admin .jpar-add-form__fields input,
.jpar-portal-admin .jpar-add-form__fields select {
    padding: .5rem .6rem;
    border: 1px solid var(--jpar-gray);
    border-radius: 5px;
    font-family: 'Lora', Georgia, serif;
    font-size: .92rem;
}

.jpar-portal-admin .jpar-check-label {
    flex-direction: row !important;
    align-items: center;
    gap: .45rem;
}


/* ── Live mentor list ──────────────────────────────────────────────────────
   Rendered by [jpar_mentor_list] inside a training item, replacing what used
   to be a hard-coded bullet list. Styled to sit naturally in imported body
   copy rather than announce itself as a widget. */
.jpar-mentor-list { margin: .4rem 0 0; padding-left: 1.15rem; }
.jpar-mentor-list li { margin: .1rem 0; }
.jpar-mentor-list--inline { padding-left: 0; list-style: none; }

/* Directory: role marker for non-broker roster rows (preferred lenders).
   Neutral grey, not a status colour — it says what someone IS, not how
   they're doing. */
.jpar-directory__role {
    display: inline-block;
    margin-left: .4em;
    padding: .05em .45em;
    border: 1px solid var(--jpar-gray);
    border-radius: 3px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--jpar-text-muted);
    background: transparent;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Exception report ("Needs Attention")
   Severity colours are the two the palette already carries — danger for red,
   and a deliberate amber that is NOT a brand token: brand blue would read as
   informational, and the whole point is that these rows are not. Green uses
   --jpar-success. Every combination below was checked for contrast on white;
   the dot carries the colour, the text stays --jpar-text so it never relies on
   hue alone to be readable.
   --------------------------------------------------------------------------- */

.jpar-exceptions { list-style: none; margin: 0; padding: 0; }

.jpar-exception {
    padding: .85rem 0;
    border-bottom: 1px solid #eef1f5;
}
.jpar-exception:last-child { border-bottom: 0; }

.jpar-exception__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
}

.jpar-exception__dot {
    flex: 0 0 auto;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--jpar-gray);
    align-self: center;
}
.jpar-exception.is-red   .jpar-exception__dot { background: var(--jpar-danger); }
.jpar-exception.is-amber .jpar-exception__dot { background: #b26a00; }
.jpar-exception.is-ok    .jpar-exception__dot { background: var(--jpar-success); }

.jpar-exception__subject {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .95rem;
    color: var(--jpar-text);
}

.jpar-exception__age {
    margin-left: auto;
    font-size: .8rem;
    color: var(--jpar-text-muted);
    white-space: nowrap;
}

.jpar-exception__detail {
    margin: .3rem 0 .5rem 1.1rem;
    font-size: .9rem;
    color: var(--jpar-text);
}

.jpar-exceptions--ok .jpar-exception { padding: .5rem 0; }

/* Count badge — used on the nav item and the tab. Small, high contrast, and
   legible against the blue dropdown panel as well as the white tab strip,
   which is why it sets its own background rather than inheriting. */
.jpar-badge {
    display: inline-block;
    min-width: 1.25rem;
    padding: .05rem .35rem;
    border-radius: 999px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    color: var(--jpar-white);
    vertical-align: middle;
}
.jpar-badge--red   { background: var(--jpar-danger); }
.jpar-badge--amber { background: #b26a00; }

.jpar-subhead {
    margin: 1rem 0 .35rem;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--jpar-text-muted);
}

/* Quiet office action in the record hero (e.g. "Enrol in mentorship").
   Deliberately understated — it's something staff DO to a record, not part of
   what the record IS, so it must not compete with the agent's own details. */
.jpar-hero__office-action {
    margin-top: .6rem;
}