/* ============================================================
   1. Layout & Page Container
   ============================================================ */
.job-change-detail-page .t-Body-contentInner {
    max-width: 1500px;
    margin: 0 auto;
}

/* ============================================================
   2. Region (Card) Styling
   ============================================================ */
.job-change-detail-page .t-Region {
    border: 1px solid #e6ebf2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(31, 41, 55, .055);
    overflow: hidden;
}

.job-change-detail-page .t-Region-header {
    border-bottom: 1px solid #edf1f6;
    background: #fff;
}

.job-change-detail-page .t-Region-bodyWrap,
.job-change-detail-page .t-Region-body {
    background: #fff;
}

.job-change-detail-page .t-Region-title {
    color: #182235;
    font-weight: 800;
}

/* ============================================================
   3. Form Labels
   ============================================================ */
.job-change-detail-page .t-Form-label {
    color: #526079;
    font-weight: 700;
}

/* ============================================================
   4. User Summary Card (Detail Page)
   ============================================================ */
.user-summary-card {
    display: grid;
    grid-template-columns: auto minmax(220px, 1.4fr) repeat(4, minmax(130px, 1fr));
    gap: 14px;
    align-items: stretch;
    direction: rtl;
}

.user-summary-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 22px;
    color: #3157c8;
    background: linear-gradient(145deg, #eef3ff, #f8faff);
    font-size: 28px;
}

.user-summary-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.user-summary-identity h2 {
    margin: 0 0 7px;
    color: #172033;
    font-size: 20px;
    font-weight: 900;
}

.user-summary-identity p {
    margin: 0;
    color: #738097;
    font-size: 13px;
    direction: ltr;
    text-align: right;
}

.user-summary-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70px;
    padding: 12px 14px;
    border: 1px solid #edf1f6;
    border-radius: 14px;
    background: #fafbfd;
}

.user-summary-field span {
    margin-bottom: 6px;
    color: #8b97aa;
    font-size: 11px;
}

.user-summary-field strong {
    overflow: hidden;
    color: #263247;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-summary-stats {
    display: flex;
    gap: 8px;
    margin-top: 11px;
}

.user-summary-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 9px;
    color: #3157c8;
    background: #eef3ff;
    font-size: 11px;
    font-weight: 800;
}

/* ============================================================
   5. Job Change Note / Alert
   ============================================================ */
.main-job-change-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #f1dbac;
    border-radius: 12px;
    color: #7a5510;
    background: #fff9ec;
    line-height: 1.9;
}

.main-job-change-note .fa {
    margin-top: 4px;
    color: #d18a00;
}

.main-job-change-note--danger {
    border-color: #f3b4b4;
    color: #991b1b;
    background: #fff1f2;
}

.main-job-change-note--danger .fa {
    color: #dc2626;
}

/* ============================================================
   6. New Job ID Input
   ============================================================ */
#P60_NEW_JOB_ID_CONTAINER {
    max-width: 760px;
    padding: 4px;
    border-radius: 12px;
    background: #fff;
}

#P60_NEW_JOB_ID {
    border-color: #dce3ed;
    background-color: #fff !important;
    color: #1f2937;
}

/* ============================================================
   7. Job Change Actions (Buttons)
   ============================================================ */
.job-change-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
    direction: rtl;
}

.job-change-actions .t-Button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 10px;
}

/* ============================================================
   8. Interactive Reports — Shared Look
   ============================================================ */
#user-assessments,
#job-change-users {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid #e7ecf3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(31, 41, 55, .06);
}

#user-assessments .a-IRR-toolbar,
#job-change-users .a-IRR-toolbar {
    padding: 12px;
    border-bottom: 1px solid #edf1f6;
    background: #f8fafc;
}

#user-assessments .a-IRR-table,
#job-change-users .a-IRR-table {
    direction: rtl;
}

#user-assessments .a-IRR-header,
#user-assessments .a-IRR-table td,
#job-change-users .a-IRR-header,
#job-change-users .a-IRR-table td {
    text-align: right;
    vertical-align: middle;
}

#user-assessments .a-IRR-table td,
#job-change-users .a-IRR-table td {
    padding-top: 12px;
    padding-bottom: 12px;
}

#user-assessments .a-IRR-table tbody tr:hover td,
#job-change-users .a-IRR-table tbody tr:hover td {
    background: #f8fbff;
}

/* ============================================================
   9. Users Report — Column Styling (#job-change-users)
   ============================================================ */
#job-change-users td[headers="USER_FULLNAME"],
#job-change-users td[headers="USERNAME"] {
    font-weight: 700;
    color: #172033;
}

#job-change-users td[headers="USER_IDENTIFIER"] {
    direction: ltr;
    text-align: right;
    white-space: nowrap;
}

#job-change-users td[headers="CURRENT_JOB_NAME"] {
    color: #334155;
    min-width: 190px;
}

/* ============================================================
   10. Status Badges & Chips
   ============================================================ */
.assessment-status,
.membership-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.assessment-status { font-weight: 800; }

/* Assessment statuses */
.assessment-status--waiting   { color: #3157c8; background: #edf2ff; }
.assessment-status--active    { color: #087a92; background: #e8f8fb; }
.assessment-status--done      { color: #087443; background: #e7f7ef; }
.assessment-status--cancelled { color: #b42318; background: #feeceb; }
.assessment-status--invalid   { color: #7a4a00; background: #fff1d6; }
.assessment-status--expired   { color: #64748b; background: #eef2f6; }

/* Membership statuses */
.membership-status--active   { color: #087443; background: #e8f7ef; }
.membership-status--pending  { color: #9a5b00; background: #fff4dc; }
.membership-status--finished { color: #526171; background: #eef2f6; }
.membership-status--rejected { color: #b42318; background: #feeceb; }
.membership-status--unknown  { color: #475569; background: #f1f5f9; }

/* Count chips */
.assessment-count-chip,
.job-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 9px;
    border-radius: 10px;
    color: #3157c8;
    background: #eef3ff;
    font-weight: 800;
}

/* Calculation badges */
.calculation-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding: 5px 10px;
    border: 1px solid #dbe5ff;
    border-radius: 999px;
    color: #3157c8;
    background: #f1f5ff;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.calculation-type {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 8px;
    color: #56647a;
    background: #f2f4f7;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ============================================================
   11. Job Change Action Button (Users Report)
   ============================================================ */
.job-change-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #3b82f6;
    border-radius: 10px;
    color: #fff !important;
    background: #3b82f6;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.job-change-action:hover {
    background: #2563eb;
    box-shadow: 0 5px 14px rgba(37, 99, 235, .22);
    transform: translateY(-1px);
}

.job-change-action--disabled {
    border-color: #d8dee8;
    color: #8a96a8 !important;
    background: #f3f5f8;
    cursor: not-allowed;
}

.job-change-action--disabled:hover {
    background: #f3f5f8;
    box-shadow: none;
    transform: none;
}

/* ============================================================
   12. Utility / Miscellaneous
   ============================================================ */
.no-anim .a-CardView-item > div {
    display: none;
}

/* ============================================================
   13. Responsive Breakpoints
   ============================================================ */
@media (max-width: 1100px) {
    .user-summary-card {
        grid-template-columns: auto 1fr 1fr;
    }
}

@media (max-width: 768px) {
    #user-assessments,
    #job-change-users {
        border-radius: 12px;
    }

    #user-assessments .a-IRR-table td,
    #job-change-users .a-IRR-table td {
        padding-top: 9px;
        padding-bottom: 9px;
    }
}

@media (max-width: 700px) {
    .user-summary-card {
        grid-template-columns: 1fr;
    }

    .user-summary-avatar {
        width: 58px;
        height: 58px;
        border-radius: 18px;
    }

    .job-change-detail-page .t-Region {
        border-radius: 13px;
    }
}

#competency-detail_control_panel{
     display:none;
}
#c1, #c2, #c3, #c4, #c5, #c6, #c7{
    background-color: #e4f2fb !important;
    color: #000000 !important; 
}

#competency-detail .a-IRR-table tbody td:nth-child(5){
    font-size: 20px !important;
    font-weight: bold;
}

#competency-detail1 .a-IRR-table tbody td:last-child {
    font-size: 20px !important;
    font-weight: bold;
}

#competency-detail1 .a-IRR-table tbody td:nth-child(6){ 
    font-size: 14px !important;
}