/* ========================================
   Related Roles Specific Styles
   Blue Color Coding by Relevance Percentage
   ======================================== */

/* Hover Border Color - Blue Theme */
.related-role-row:hover {
    border-color: #0a66c2;
}

/* Transition Arrow - Blue */
.transition-arrow {
    color: #0a66c2;
    font-weight: 600;
    font-size: 18px;
}

/* Relevance-based Color Coding - LinkedIn Blue Saturation Levels */

/* 90-100% - Highest Relevance - Deepest Blue */
.related-role-row.relevance-90,
.related-role-row.relevance-91,
.related-role-row.relevance-92,
.related-role-row.relevance-93,
.related-role-row.relevance-94,
.related-role-row.relevance-95,
.related-role-row.relevance-96,
.related-role-row.relevance-97,
.related-role-row.relevance-98,
.related-role-row.relevance-99,
.related-role-row.relevance-100 {
    border-left-color: #004182;
    background: linear-gradient(90deg, #e3f0ff 0%, white 90%);
}

/* 80-89% - Very High Relevance */
.related-role-row.relevance-80,
.related-role-row.relevance-81,
.related-role-row.relevance-82,
.related-role-row.relevance-83,
.related-role-row.relevance-84,
.related-role-row.relevance-85,
.related-role-row.relevance-86,
.related-role-row.relevance-87,
.related-role-row.relevance-88,
.related-role-row.relevance-89 {
    border-left-color: #0a66c2;
    background: linear-gradient(90deg, #e8f4ff 0%, white 80%);
}

/* 70-79% - High Relevance */
.related-role-row.relevance-70,
.related-role-row.relevance-71,
.related-role-row.relevance-72,
.related-role-row.relevance-73,
.related-role-row.relevance-74,
.related-role-row.relevance-75,
.related-role-row.relevance-76,
.related-role-row.relevance-77,
.related-role-row.relevance-78,
.related-role-row.relevance-79 {
    border-left-color: #1a7bd6;
    background: linear-gradient(90deg, #ecf7ff 0%, white 70%);
}

/* 60-69% - Good Relevance */
.related-role-row.relevance-60,
.related-role-row.relevance-61,
.related-role-row.relevance-62,
.related-role-row.relevance-63,
.related-role-row.relevance-64,
.related-role-row.relevance-65,
.related-role-row.relevance-66,
.related-role-row.relevance-67,
.related-role-row.relevance-68,
.related-role-row.relevance-69 {
    border-left-color: #378fe6;
    background: linear-gradient(90deg, #f0f9ff 0%, white 60%);
}

/* 50-59% - Moderate Relevance */
.related-role-row.relevance-50,
.related-role-row.relevance-51,
.related-role-row.relevance-52,
.related-role-row.relevance-53,
.related-role-row.relevance-54,
.related-role-row.relevance-55,
.related-role-row.relevance-56,
.related-role-row.relevance-57,
.related-role-row.relevance-58,
.related-role-row.relevance-59 {
    border-left-color: #5ca3f0;
    background: linear-gradient(90deg, #f4fbff 0%, white 50%);
}

/* 40-49% - Fair Relevance */
.related-role-row.relevance-40,
.related-role-row.relevance-41,
.related-role-row.relevance-42,
.related-role-row.relevance-43,
.related-role-row.relevance-44,
.related-role-row.relevance-45,
.related-role-row.relevance-46,
.related-role-row.relevance-47,
.related-role-row.relevance-48,
.related-role-row.relevance-49 {
    border-left-color: #7fb7f5;
    background: linear-gradient(90deg, #f7fcff 0%, white 40%);
}

/* 30-39% - Low Relevance */
.related-role-row.relevance-30,
.related-role-row.relevance-31,
.related-role-row.relevance-32,
.related-role-row.relevance-33,
.related-role-row.relevance-34,
.related-role-row.relevance-35,
.related-role-row.relevance-36,
.related-role-row.relevance-37,
.related-role-row.relevance-38,
.related-role-row.relevance-39 {
    border-left-color: #a3cbf9;
    background: linear-gradient(90deg, #fafeff 0%, white 30%);
}

/* 20-29% - Very Low Relevance */
.related-role-row.relevance-20,
.related-role-row.relevance-21,
.related-role-row.relevance-22,
.related-role-row.relevance-23,
.related-role-row.relevance-24,
.related-role-row.relevance-25,
.related-role-row.relevance-26,
.related-role-row.relevance-27,
.related-role-row.relevance-28,
.related-role-row.relevance-29 {
    border-left-color: #c7dffc;
    background: linear-gradient(90deg, #fcfeff 0%, white 20%);
}

/* 10-19% - Minimal Relevance */
.related-role-row.relevance-10,
.related-role-row.relevance-11,
.related-role-row.relevance-12,
.related-role-row.relevance-13,
.related-role-row.relevance-14,
.related-role-row.relevance-15,
.related-role-row.relevance-16,
.related-role-row.relevance-17,
.related-role-row.relevance-18,
.related-role-row.relevance-19 {
    border-left-color: #e0effd;
    background: white;
}

/* 0-9% - Almost No Relevance */
.related-role-row.relevance-0,
.related-role-row.relevance-1,
.related-role-row.relevance-2,
.related-role-row.relevance-3,
.related-role-row.relevance-4,
.related-role-row.relevance-5,
.related-role-row.relevance-6,
.related-role-row.relevance-7,
.related-role-row.relevance-8,
.related-role-row.relevance-9 {
    border-left-color: #f0f7fe;
    background: white;
}

/* Mobile Transition Arrow Rotation */
@media (max-width: 768px) {
    .transition-arrow {
        transform: rotate(90deg);
    }
}