/* ============================================================
   Job Roles List V2 — page-scoped jr-* atoms on top of the
   shared cc-* chrome (declared in redesign-competences.css /
   redesign-contract-type-list.css). Mirrors the visual contract
   from Claude documentation/projects/app-redesign/job-roles-list/
   JobRolesList.html. No new tokens introduced.

   What lives here:
     · Name cell: color swatch + title + order meta line
     · Type chip + is-empty fallback
     · Skill count (mono number + sans unit)
     · PE Viewer avatar stack
     · Date cell + row icon buttons
     · Empty-state card (jr-empty)
     · Card layout for tablet/mobile (jr-cards / jr-card / jr-card__*)
     · Popup chrome variant: jr-pop (--lg 920px)
     · GMC chip (header) + GMC Target panel (skills section)
     · Pattern §7A skills inline list (4 row states + add bar)
     · Rich text editor wrapper (jr-rte)
   ============================================================ */

/* ── Table layout: align cells, ellipsize ───────────────────── */
.jr-table { table-layout: fixed; width: 100%; }
.jr-table tbody td { vertical-align: middle; overflow: hidden; }
.jr-table tbody td > * { min-width: 0; max-width: 100%; }

/* ── Position-name cell (swatch + title + order line) ───────── */
.jr-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jr-name__swatch {
    width: 22px; height: 22px; border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, .12);
    flex-shrink: 0;
}
.jr-name__swatch.is-empty {
    background: repeating-linear-gradient(
        45deg,
        var(--is-bg-surface-3, #F2F3F5) 0 4px,
        var(--is-border-1, #E5E5EA) 4px 5px
    );
}
.jr-name__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.jr-name__title {
    font: 600 13.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: pointer;
}
.jr-name__title:hover { color: var(--is-brand-blue-700, #0273a8); }
.jr-name__meta {
    font: 500 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center; gap: 4px;
}
.jr-name__meta i { font-size: 9px; opacity: .7; }

/* ── Type chip ──────────────────────────────────────────────── */
.jr-typechip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 9px; border-radius: 999px;
    background: var(--is-bg-surface-3, #F2F3F5);
    border: 1px solid var(--is-border-1, #E5E5EA);
    font: 600 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-2, #404048);
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jr-typechip i { font-size: 9px; opacity: .7; flex-shrink: 0; }
.jr-typechip.is-empty {
    color: var(--is-fg-muted, #9A9AA0);
    font-style: italic; font-weight: 500;
    background: transparent;
    border-style: dashed;
}

/* ── Skill count cell ───────────────────────────────────────── */
.jr-count {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 13px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
}
.jr-count__num {
    font: 700 13px var(--is-font-mono, "JetBrains Mono", monospace);
    font-variant-numeric: tabular-nums;
}
.jr-count__unit {
    font: 500 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
}
.jr-count.is-zero { color: var(--is-fg-3, #76767E); }
.jr-count.is-zero .jr-count__num { color: var(--is-fg-3, #76767E); font-weight: 500; }

/* ── PE Viewer avatar stack ─────────────────────────────────── */
.jr-viewers { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.jr-viewers__stack { display: inline-flex; flex-shrink: 0; }
.jr-viewers__a {
    width: 22px; height: 22px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font: 700 9.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--is-border-1, #E5E5EA);
}
.jr-viewers__a + .jr-viewers__a { margin-left: -7px; }
.jr-viewers__count {
    font: 600 12px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-2, #404048);
}
.jr-viewers.is-empty {
    color: var(--is-fg-3, #76767E);
    font: 500 12px var(--is-font-sans, "Inter", system-ui, sans-serif);
}

/* ── Date cell ──────────────────────────────────────────────── */
.jr-date {
    font: 500 12.5px var(--is-font-mono, "JetBrains Mono", monospace);
    color: var(--is-fg-2, #404048);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Row icon buttons ───────────────────────────────────────── */
.jr-actions {
    display: inline-flex; gap: 2px;
    justify-content: flex-end;
    width: 100%;
}
.jr-iconbtn {
    width: 30px; height: 30px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--is-fg-2, #404048);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: background .12s, color .12s, border-color .12s;
}
.jr-iconbtn:hover {
    background: var(--is-bg-surface-3, #F2F3F5);
    color: var(--is-fg-1, #1A1A1F);
    border-color: var(--is-border-1, #E5E5EA);
}
.jr-iconbtn.is-edit:hover {
    background: rgba(4, 148, 218, .10);
    color: var(--is-brand-blue, #007BFF);
    border-color: rgba(4, 148, 218, .25);
}
.jr-iconbtn.is-danger:hover {
    background: rgba(217, 44, 44, .08);
    color: var(--is-danger, #C73B3B);
    border-color: rgba(217, 44, 44, .20);
}

/* ── Empty state ────────────────────────────────────────────── */
.jr-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; padding: 36px 22px;
    text-align: center;
}
.jr-empty__icon {
    width: 60px; height: 60px; border-radius: 999px;
    background: var(--is-bg-surface-3, #F2F3F5);
    color: var(--is-fg-3, #76767E);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.jr-empty h3 {
    font: 700 16px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    margin: 0;
}
.jr-empty p {
    font: 500 13px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    margin: 0;
    max-width: 520px;
}

/* ── Card layout (tablet ≤1199px — shared cc-cards-wrap toggle) ─ */
.jr-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.jr-card {
    background: #fff;
    border: 1px solid var(--is-border-1, #E5E5EA);
    border-radius: var(--is-radius-md, 10px);
    padding: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}
.jr-card:hover {
    border-color: var(--is-border-2, #D1D1D6);
    box-shadow: var(--is-shadow-1, 0 1px 2px rgba(20, 28, 50, .05));
}
.jr-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px dashed var(--is-border-1, #E5E5EA);
}
.jr-card__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    padding: 12px;
}
.jr-card__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jr-card__field-label {
    font: 600 10px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.jr-card__field-value {
    font: 500 12.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.jr-card__foot {
    display: flex; justify-content: flex-end; gap: 6px;
    padding: 10px 12px;
    border-top: 1px dashed var(--is-border-1, #E5E5EA);
    background: var(--is-bg-surface-3, #F2F3F5);
}

@media (max-width: 600px) {
    .jr-card__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 12px;
    }
    .jr-card__field-value .jr-count,
    .jr-card__field-value .jr-viewers,
    .jr-card__field-value .jr-typechip,
    .jr-card__field-value .jr-date {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
@media (max-width: 420px) {
    .jr-card__meta { grid-template-columns: 1fr !important; }
}

/* ============================================================
   POPUP — Add / Edit (jr-pop chrome, --lg 920px per MD)
   ============================================================ */
.jr-pop-scrim {
    position: fixed; inset: 0;
    background: rgba(20, 28, 50, .50);
    backdrop-filter: blur(2px);
    z-index: 9000;
}
.jr-pop {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: var(--is-radius-lg, 14px);
    box-shadow: 0 20px 60px rgba(8, 12, 36, .30);
    display: flex; flex-direction: column;
    max-height: 92vh;
    overflow: hidden;
    max-width: 95vw;
    z-index: 9001;
    font-family: var(--is-font-sans, "Inter", system-ui, sans-serif);
}
.jr-pop--md { width: 720px; }
.jr-pop--lg { width: 920px; }
.jr-pop--sm { width: 480px; }

.jr-pop__head {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--is-border-1, #E5E5EA);
    background: var(--is-bg-surface, #FAFAFB);
    flex-shrink: 0;
}
.jr-pop__head-icon {
    width: 36px; height: 36px;
    border-radius: var(--is-radius-sm, 6px);
    background: var(--is-brand-blue-100, #E6F2FF);
    color: var(--is-brand-blue, #007BFF);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.jr-pop__head-title { flex: 1; min-width: 0; }
.jr-pop__head-title h2 {
    font: 700 17px var(--is-font-sans, "Inter", system-ui, sans-serif);
    margin: 0;
    letter-spacing: -.01em;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    color: var(--is-fg-1, #1A1A1F);
}
.jr-pop__head-title p {
    font: 500 12.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    margin: 2px 0 0;
}
.jr-pop__head-title p b { color: var(--is-fg-1, #1A1A1F); font-weight: 700; }
.jr-pop__head-close {
    width: 32px; height: 32px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--is-fg-3, #76767E);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.jr-pop__head-close:hover {
    background: var(--is-bg-surface-3, #F2F3F5);
    color: var(--is-fg-1, #1A1A1F);
}
.jr-pop__body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
}
.jr-pop__foot {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--is-border-1, #E5E5EA);
    background: var(--is-bg-surface, #FAFAFB);
    flex-shrink: 0;
}
.jr-pop__foot-left {
    flex: 1; min-width: 0;
    font: 500 12px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.jr-pop__foot-left i { color: var(--is-brand-blue, #007BFF); }
.jr-pop__foot-right { display: flex; gap: 10px; flex-shrink: 0; }

/* Popup-local buttons (the grid uses cc-btn; popup keeps jr-btn for
   self-contained styling that doesn't depend on cc-* evolving). */
.jr-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 14px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid transparent;
    font: 600 13px var(--is-font-sans, "Inter", system-ui, sans-serif);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}
.jr-btn i { font-size: 12px; }
.jr-btn--primary {
    background: var(--is-brand-blue, #007BFF);
    color: #fff;
    border-color: var(--is-brand-blue, #007BFF);
}
.jr-btn--primary:hover:not(:disabled) {
    background: var(--is-brand-blue-700, #0273a8);
    border-color: var(--is-brand-blue-700, #0273a8);
}
.jr-btn--ghost {
    background: #fff;
    color: var(--is-fg-2, #404048);
    border-color: var(--is-border-3, #C6C6CC);
}
.jr-btn--ghost:hover {
    background: var(--is-bg-surface-3, #F2F3F5);
    color: var(--is-fg-1, #1A1A1F);
}
.jr-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── GMC chip (popup header) ────────────────────────────────── */
.jr-ccchip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 9px;
    border-radius: 999px;
    font: 700 10.5px var(--is-font-mono, "JetBrains Mono", monospace);
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #FAF2DB;
    color: var(--is-brand-orange-600, #CE8600);
    border: 1px solid rgba(245, 158, 44, .30);
}
.jr-ccchip i { font-size: 9px; }

/* ── Section labels in popup body ───────────────────────────── */
.jr-section-label {
    font: 600 11px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 18px 0 10px;
    display: flex; align-items: center; gap: 8px;
}
.jr-section-label i { font-size: 10px; color: var(--is-fg-3, #76767E); }
.jr-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--is-border-1, #E5E5EA);
    margin-left: 4px;
}
.jr-section-label:first-child { margin-top: 0; }
.jr-section-label__counter {
    font: 600 10.5px var(--is-font-mono, "JetBrains Mono", monospace);
    color: var(--is-fg-3, #76767E);
    background: var(--is-bg-surface-3, #F2F3F5);
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* GMC variant — orange-themed badge to match the GMC chip in the Target
   panel + popup header. Applied via the .is-gmc modifier when
   currUser.CompanyCode == "gmc_code". Non-GMC tenants keep the neutral
   grey counter above. */
.jr-section-label__counter.is-gmc {
    background: #FAF2DB;
    color: var(--is-brand-orange-600, #CE8600);
    border: 1px solid rgba(245, 158, 44, .30);
}
.jr-section-label__cc {
    background: #FAF2DB;
    color: var(--is-brand-orange-600, #CE8600);
    border: 1px solid rgba(245, 158, 44, .30);
    padding: 1px 7px;
    border-radius: 999px;
    font: 700 9.5px var(--is-font-mono, "JetBrains Mono", monospace);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Form atoms (popup body) ────────────────────────────────── */
.jr-field {
    display: flex; flex-direction: column; gap: 5px;
    min-width: 0;
}
.jr-field__label {
    font: 600 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-2, #404048);
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 0px;
}
.jr-field__label .req { color: var(--is-danger, #C73B3B); }
.jr-field__label i.help {
    font-size: 11px;
    color: var(--is-fg-3, #76767E);
    margin-left: 2px;
}
.jr-field__hint {
    font: 500 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    margin-top: 2px;
    display: flex; align-items: center; gap: 5px;
}
.jr-field__hint i { font-size: 10px; }
.jr-field__hint--err { color: var(--is-danger, #C73B3B); }

.jr-input, .jr-select {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--is-border-3, #C6C6CC);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    font: 500 13.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    width: 100%;
}
.jr-input:focus, .jr-select:focus {
    outline: none;
    border-color: var(--is-action-blue, #007BFF);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}
.jr-input--err {
    border-color: var(--is-danger, #C73B3B);
    box-shadow: 0 0 0 3px rgba(217, 44, 44, .12);
}

/* ── Color picker atom ──────────────────────────────────────── */
.jr-color {
    display: flex; align-items: center; gap: 8px;
    height: 36px;
    border: 1px solid var(--is-border-3, #C6C6CC);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    padding: 4px 10px;
}
.jr-color:focus-within {
    border-color: var(--is-action-blue, #007BFF);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}
.jr-color__swatch {
    width: 24px; height: 24px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .12);
    flex-shrink: 0;
}
.jr-color__hex {
    flex: 1;
    border: 0; outline: 0;
    font: 600 12.5px var(--is-font-mono, "JetBrains Mono", monospace);
    color: var(--is-fg-1, #1A1A1F);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    background: transparent;
    min-width: 0;
}
.jr-color .e-colorpicker-wrapper,
.jr-color .e-split-btn-wrapper { height: 26px; }
.jr-color .e-colorpicker-wrapper .e-input-group,
.jr-color .e-colorpicker-wrapper .e-split-btn-wrapper {
    border: 0;
    background: transparent;
}
.jr-color .e-colorpicker-wrapper button.e-dropdown-btn {
    height: 26px; width: 26px;
    border: 1px solid var(--is-border-2, #D1D1D6);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
}

/* Syncfusion SfColorPicker internals — vertical alignment fixes scoped
   to .jr-color so other SfColorPickers in the app stay untouched. */
.jr-color .e-btn-icon.e-selected-color { top: -3px !important; }
.jr-color .e-btn-icon.e-icons.e-caret { margin-top: -15px; }

/* ── Popup grid layouts ─────────────────────────────────────── */
.jr-grid { display: grid; gap: 12px 14px; }
.jr-grid--2 { grid-template-columns: 1fr 1fr; }
.jr-grid--2-1-1 { grid-template-columns: 2fr 1fr 1fr; }

/* ── GMC Target panel ───────────────────────────────────────── */
.jr-target {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: #FAF2DB;
    border: 1px solid rgba(245, 158, 44, .30);
    border-radius: var(--is-radius-sm, 6px);
    margin-bottom: 12px;
}
.jr-target__head {
    font: 700 12px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-brand-orange-600, #CE8600);
    display: flex; align-items: center; gap: 7px;
}
.jr-target__head i { font-size: 11px; }
.jr-target__sub {
    font: 500 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-2, #404048);
    margin-top: 4px;
}
.jr-target__sub b { color: var(--is-fg-1, #1A1A1F); font-weight: 700; }

/* ── Skills inline list (Pattern §7A) ───────────────────────── */
.jr-skill-add {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: var(--is-bg-surface, #FAFAFB);
    border: 1px solid var(--is-border-2, #D1D1D6);
    border-bottom: 0;
    border-radius: var(--is-radius-sm, 6px) var(--is-radius-sm, 6px) 0 0;
}
.jr-skill-add__btn {
    height: 30px;
    padding: 0 12px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px dashed var(--is-brand-blue, #007BFF);
    background: var(--is-brand-blue-100, #E6F2FF);
    color: var(--is-brand-blue-700, #0273a8);
    font: 600 12px var(--is-font-sans, "Inter", system-ui, sans-serif);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.jr-skill-add__btn:hover:not(:disabled) { background: #fff; }
.jr-skill-add__btn:disabled { opacity: .5; cursor: not-allowed; }

.jr-skill-head {
    display: grid;
    grid-template-columns: 32px 1fr 90px 90px 80px;
    gap: 10px;
    padding: 8px 12px;
    background: var(--is-bg-surface-3, #F2F3F5);
    border: 1px solid var(--is-border-2, #D1D1D6);
    border-bottom: 0;
    font: 600 10.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.jr-skill-head__actions { text-align: right; }
.jr-skill-head__num { text-align: center; }
.jr-skill-head__center { text-align: center; }

.jr-skill-row {
    display: grid;
    grid-template-columns: 32px 1fr 90px 90px 80px;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--is-border-2, #D1D1D6);
    border-bottom: 0;
    align-items: center;
    min-height: 46px;
}
.jr-skill-row:last-of-type {
    border-bottom: 1px solid var(--is-border-2, #D1D1D6);
    border-radius: 0 0 var(--is-radius-sm, 6px) var(--is-radius-sm, 6px);
}
.jr-skill-row__idx {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--is-bg-surface-3, #F2F3F5);
    border: 1px solid var(--is-border-1, #E5E5EA);
    color: var(--is-fg-3, #76767E);
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 11px var(--is-font-mono, "JetBrains Mono", monospace);
    font-variant-numeric: tabular-nums;
    justify-self: center;
}
.jr-skill-row__idx--danger {
    background: rgba(217, 44, 44, .12);
    border-color: rgba(217, 44, 44, .30);
    color: var(--is-danger, #C73B3B);
}
.jr-skill-row__name {
    font: 600 13px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.jr-skill-row__num {
    font: 700 13px var(--is-font-mono, "JetBrains Mono", monospace);
    color: var(--is-fg-1, #1A1A1F);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.jr-skill-row__color { display: flex; justify-content: center; }
.jr-skill-row__color-sw {
    width: 28px; height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .12);
}
.jr-skill-row__color-input {
    height: 30px; width: 100%;
    border: 1px solid var(--is-brand-blue, #007BFF);
    border-radius: var(--is-radius-sm, 6px);
    padding: 2px;
    background: #fff;
    cursor: pointer;
}
.jr-skill-row__actions {
    display: inline-flex; gap: 4px;
    justify-content: flex-end;
}
.jr-skill-row__actions button {
    width: 28px; height: 28px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--is-fg-3, #76767E);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
}
.jr-skill-row__actions button:hover:not(:disabled) {
    background: var(--is-bg-surface-3, #F2F3F5);
    color: var(--is-fg-1, #1A1A1F);
    border-color: var(--is-border-1, #E5E5EA);
}
.jr-skill-row__actions button:disabled { opacity: .35; cursor: not-allowed; }
.jr-skill-row__actions .is-edit:hover:not(:disabled) {
    color: var(--is-brand-blue, #007BFF);
    border-color: rgba(4, 148, 218, .25);
}
.jr-skill-row__actions .is-danger:hover:not(:disabled) {
    color: var(--is-danger, #C73B3B);
    border-color: rgba(217, 44, 44, .20);
}
.jr-skill-row__actions .is-save {
    background: var(--is-success, #1F8A5B);
    color: #fff;
    border-color: var(--is-success, #1F8A5B);
}
.jr-skill-row__actions .is-save:hover:not(:disabled) {
    background: #1c9744;
    border-color: #1c9744;
    color: #fff;
}
.jr-skill-row__actions .is-cancel {
    background: #fff;
    color: var(--is-fg-2, #404048);
    border-color: var(--is-border-2, #D1D1D6);
}
.jr-skill-row__actions .is-confirm {
    background: var(--is-danger, #C73B3B);
    color: #fff;
    border-color: var(--is-danger, #C73B3B);
}
.jr-skill-row__actions .is-confirm:hover:not(:disabled) {
    background: #b51e1e;
    border-color: #b51e1e;
}

/* Add / Edit row */
.jr-skill-row--edit {
    background: var(--is-brand-blue-100, #E6F2FF);
    border-color: var(--is-brand-blue, #007BFF);
    border-style: dashed;
}
.jr-skill-row--edit .jr-skill-row__idx {
    background: var(--is-brand-blue, #007BFF);
    border-color: var(--is-brand-blue, #007BFF);
    color: #fff;
}

/* Delete-confirm row */
.jr-skill-row--delete {
    background: rgba(217, 44, 44, .06);
    border-color: var(--is-danger, #C73B3B);
    border-style: dashed;
}
.jr-skill-row__msg {
    display: flex; align-items: center; gap: 8px;
    font: 500 13px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    min-width: 0;
}
.jr-skill-row__msg i { color: var(--is-danger, #C73B3B); }
.jr-skill-row__msg b { font-weight: 700; }

/* Empty state in skills section */
.jr-skill-empty {
    padding: 22px 16px;
    border: 1px dashed var(--is-border-3, #C6C6CC);
    border-radius: var(--is-radius-sm, 6px);
    background: var(--is-bg-surface-3, #F2F3F5);
    text-align: center;
    font: 500 12.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
}
.jr-skill-empty i {
    font-size: 14px;
    color: var(--is-fg-3, #76767E);
    margin-bottom: 6px;
    display: block;
}
.jr-skill-empty b { color: var(--is-fg-1, #1A1A1F); font-weight: 700; }

/* ── Rich text editor wrapper ───────────────────────────────── */
.jr-rte {
    border: 1px solid var(--is-border-3, #C6C6CC);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    overflow: hidden;
}
.jr-rte:focus-within {
    border-color: var(--is-action-blue, #007BFF);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}
.jr-rte .e-richtexteditor { border: 0; border-radius: 0; box-shadow: none; }
.jr-rte .e-richtexteditor .e-toolbar {
    background: var(--is-bg-surface-3, #F2F3F5);
    border-bottom: 1px solid var(--is-border-1, #E5E5EA);
    min-height: 38px;
}
.jr-rte .e-richtexteditor .e-rte-content {
    min-height: 200px;
    max-height: 360px;
    overflow-y: auto;
}
.jr-rte__hint {
    padding: 6px 12px;
    font: 500 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    background: var(--is-bg-surface-3, #F2F3F5);
    border-top: 1px solid var(--is-border-1, #E5E5EA);
    display: flex; align-items: center; gap: 6px;
}
.jr-rte__hint i { font-size: 10px; }

/* ── SfDropDownList popup positioning fix ────────────────────
   Syncfusion's popup-anchor JS reads the .e-input-group bounding
   rect to position the popup just below the field. If the input
   wrapper has no explicit height inside a grid row or flex column,
   the visible field gets centered and the popup ends up opening
   from the middle of the field. SfMultiSelect doesn't suffer from
   this because the chip container forces a baseline height.

   Fix: force explicit height on .e-input-group + .e-input inside
   .jr-pop (§1 popup body) and .jr-skill-row (Pattern §7A row).
   Scoped strictly to this page so other SfDropDownList instances
   in the app stay untouched. */
.jr-pop .e-ddl.e-input-group {
    min-height: 36px;
    height: 36px;
    box-sizing: border-box;
}
.jr-pop .e-ddl.e-input-group input.e-input {
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
}

/* Identical rule to the Position type dropdown above — 36px wrapper
   + 34px inner input. Skill row's previous 30/28 sizing wasn't enough
   for Syncfusion's popup-anchor JS to detect the visible bottom edge
   so the popup opened from the centered middle. The slightly taller
   field is fine: skill row has min-height 46px so it still fits. */
.jr-skill-row .e-ddl.e-input-group {
    min-height: 34px;
    height: 34px;
    box-sizing: border-box;
}
.jr-skill-row .e-ddl.e-input-group input.e-input {
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
}

/* Push the skill row dropdown popup further below the field bottom.
   Syncfusion's CssClass on SfDropDownList is propagated to the popup
   element (rendered at body level), so `jr-skill-row__name-input-sf`
   selects the popup. margin-top shifts the absolutely-positioned
   popup downward without breaking Syncfusion's anchor logic. */
.e-popup.jr-skill-row__name-input-sf {
    margin-top: -5px;
    margin-left: 6px;
}

/* ── PE Viewers multi-select chips (Box mode) — light-blue
   outlined chip per ContractType V2 pattern, scoped under .jr-pop ── */
html body div.jr-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips {
    background: rgba(4, 148, 218, .16) !important;
    border: 1px solid #0273a8 !important;
    border-radius: 999px !important;
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
html body div.jr-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chipcontent {
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
    text-shadow: none !important;
    font: 600 12px var(--is-font-sans, "Inter", system-ui, sans-serif) !important;
}
html body div.jr-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close,
html body div.jr-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close::before {
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
html body div.jr-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close:hover,
html body div.jr-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close:hover::before {
    background: rgba(4, 148, 218, .20) !important;
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
}

/* ── Generic helpers ────────────────────────────────────────── */
.pointer { cursor: pointer; }

/* ── Popup responsive overrides ─────────────────────────────── */
@media (max-width: 880px) {
    .jr-pop--lg { width: 95vw; }
}

@media (max-width: 600px) {
    .jr-pop {
        top: 0; left: 0;
        transform: none;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0;
        inset: 0;
        margin: 0;
    }
    .jr-pop__body { padding: 16px; }
    .jr-grid--2,
    .jr-grid--2-1-1 { grid-template-columns: 1fr !important; }

    .jr-skill-head,
    .jr-skill-row {
        grid-template-columns: 28px 1fr 70px 60px 64px;
        gap: 6px;
        padding: 6px 8px;
    }
    .jr-skill-row__color-sw,
    .jr-skill-row__color-input { width: 100%; }
    .jr-rte .e-richtexteditor .e-rte-content { min-height: 140px; }
}

@media (max-width: 420px) {
    .jr-skill-head { display: none; }
    .jr-skill-row {
        grid-template-columns: 28px 1fr 60px;
        grid-template-rows: auto auto;
    }
    .jr-skill-row__num { grid-column: 3; grid-row: 1; }
    .jr-skill-row__color { grid-column: 2; grid-row: 2; justify-content: flex-start; }
    .jr-skill-row__actions { grid-column: 3; grid-row: 2; }

    .jr-target {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}