/* ========================================
   Complementary Roles Specific Styles
   Green Color Coding by Compatibility Level
   ======================================== */

/* Hover Border Color - Green Theme */
.complementary-role-row:hover {
    border-color: #16a34a;
}

/* Combination Symbol - Green */
.combination-symbol {
    color: #16a34a;
    font-weight: 700;
    font-size: 20px;
}

/* Compatibility Level Color Coding - Green Gradient */

/* VERY_HIGH Compatibility - Darkest Green */
.complementary-role-row.compatibility-veryhigh,
.complementary-role-row.compatibility-very_high {
    border-left-color: #046139;
    background: linear-gradient(90deg, #d1f5e6 0%, white 75%);
}

/* HIGH Compatibility - Dark Green */
.complementary-role-row.compatibility-high {
    border-left-color: #047857;
    background: linear-gradient(90deg, #d9f7eb 0%, white 50%);
}

/* MID Compatibility - Medium Green */
.complementary-role-row.compatibility-mid {
    border-left-color: #16a34a;
    background: linear-gradient(90deg, #e3f9f0 0%, white 33%);
}

/* GOOD_TO_HAVE Compatibility - Light Green */
.complementary-role-row.compatibility-goodtohave,
.complementary-role-row.compatibility-good_to_have {
    border-left-color: #22c55e;
    background: linear-gradient(90deg, #ecfbf4 0%, white 20%);
}

/* LOW Compatibility - Very Light Green */
.complementary-role-row.compatibility-low {
    border-left-color: #86efac;
    background: linear-gradient(90deg, #f4fdf8 0%, white 10%);
}

/* MINIMAL Compatibility - Barely Visible Green */
.complementary-role-row.compatibility-minimal {
    border-left-color: #d1fae5;
    background: white;
}

/* Mobile Combination Symbol - No Rotation Needed */
@media (max-width: 768px) {
    .combination-symbol {
        transform: rotate(0deg);
    }
}