/* =============================================================================
 * 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%;
    }
}

/* ── 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; }
}